Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Aurelian Spodarec
Aurelian Spodarec
7,369 Points

HTML float, line-height etc problems

Hi, im trying to make same navigation, same header as here :

http://html5up.net/verti

But my code seem messy and not right for it .
Could somebody tell me where and what to make changes to make it clean?

Heres my code :

http://codepen.io/anon/pen/zxGQvP

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Thank you very much all! I really appreciate this help . It definitely helps.

2 Answers

Juan Ferreras
Juan Ferreras
28,028 Points

Hey,

Messing around with your code, deleted a few things not needed, fixed a few bugs (some ; missing, some background tags not valid, w3c validator spotted them out) modified the font and a few tiny aesthetic things, tried to use % or em when ever possible and made it match a little bit closer the site you've sent.

Feel free to play around with it here

Hopefully it helps!

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Thank you very much for making me a playground to learn from . I really appreciate it , i find easier go throw treehouse content and then look how the pages are build and yo unjust made it really easy to understand with that code thank you ! ^^

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Start by looking at experimenting with Fonts and doing this in your rule for the body tag.

Also look at your border radius and padding for your list items.

You're also missing a .box rule to change the boxes so they're lining up beside each other rather than on top. I suggest doing floats for these or if that doesn't work try a display of inline-block like you did for your navigation.

Hope this helps. :-)

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

HI, thank you for the advise , ill try it in my projects and ill see what i come with it up . Thank you! ^^