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
Michael Weir5,008 Points
Weird content overlap and browser resizing weirdness
Hey all - just messing around on a cheap domain I purchased, setting up a portfolio site. I've got the basic layout completed but as you can see the header content is overflowing into the <div> below it. I know this is covered in one of the lesson videos but I don't have time to re-watch them until I find it so I figured I'd ask for help. :)
Also, concerning the header, as a browser window resizes narrower and narrower, the negative spacing around the nav buttons and the placeholder logo image get all out of whack until they are no longer aligned horizontally. I've become quite frustrated trying to figure out how to keep both the logo and the nav elements aligned with each other during browswer resizing.
CSS: url/css/style.css url/css/grid.css
Thanks in advance, Mike
For your first problem you have the following in your css:
You need to increase that until it matches the height of your header. This effectively pushes down your content until it's below the header. I came up with around 107px. Basically, since your header is fixed it no longer takes up space in the document so you need padding/margin to take up the space the header would have taken up if it was there.
It's better to use em's here though in case the user increases their font size. This will increase the height of your header but your padding will still be stuck at its pixel value and not increase with the header. Using em's will allow the padding to increase. It won't be perfect but better than using pixels. I came up with around 6.8em
Michael Weir5,008 Points
Thanks for the reply, Jason. I did try the 75 px thing last night and bumped it up to 100 but that seemed like "cheating". I guess I should get used to that with CSS coding eh?
Now for that pesky header resizing problem.