CSS Alignment issues

HTML & CSS
1

Hi guys,

I’m a graphic designer with almost no knowledge of CSS or HTML, but trying to build my first site in Dreamweaver and running in to a misalignment issue in my header. I apologize in advance for what I’m sure is a simple fix.

I’m basically just setting up my template now, so my sections are just color blocks and all of the CSS is still inline in the HTML file (which hopefully will make it easy to debug). For some reason, when I view it in a browser or Live View, there is like 10-15 pxls above the header background. You’ll noticed the top of it aligns with the top of the logo for some reason. I messed around with positioning options in the #header CSS rule, but nothing I do seems to fix it. It looks like the divs I made for the logo and nav are fine, but the div for #header (i think that is where the problem is) should be tight to the top of the window.

I have it posted here: http://jcreativelab.com/testing/JCL_WebsiteStart.html

Thank you for taking the time to read this and helping out. Cheers.

2

Hi spaceboy949. Welcome to the forums. :slight_smile:

You’ve run in to a CSS phenomenon called “collapsing margins”, where the top margin of a element sticks out of its container.

#container #header #logo #jcl_logo {
background-image: url(images/JCL_Website_Logo.png);
text-indent: -9999px;
display: block;
height: 80px;
width: 50px;
margin-right: 0px;
margin-left: 115px;
[COLOR="#FF0000"]margin-top: 10px;[/COLOR]
margin-bottom: 0px;
}

You can either remove that line in red above, or there are other solutions for stopping this happening. But if you just want everything to say as is except for the white gap at the top, I’d just remove that line. :slight_smile:

3

Thank you so much ralph.m.

So that of course bumped the logo up too, but I just put 10pxls of space in my PNG. Do you think that is the best way for me to get the padding for the logo that I needed?

Thanks again, I’m sure I’ll have more questions as this was just the header of the template. :slight_smile:

4

That’s fine, although you could just use top padding instead. Padding doesn’t collapse like margin does.

I’m sure I’ll have more questions as this was just the header of the template. :slight_smile:

‘Go for your life’, as we say here! (It’s another version of ‘go for it’.) We love questions. :slight_smile: