SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Location
    Portland, OR
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Alignment issues

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi spaceboy949. Welcome to the forums.

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

    Code:
    #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;
    margin-top: 10px;
    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.

  3. #3
    SitePoint Member
    Join Date
    Aug 2012
    Location
    Portland, OR
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by spaceboy949 View Post
    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?
    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.
    'Go for your life', as we say here! (It's another version of 'go for it'.) We love questions.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •