• Hello all, I am having a problem aligning the header image with my body text. No matter what I try, there is always this little gap from the header image and the actual body. Can somebody help?
    My Site

    I have been playing with the CSS style sheet with no real luck. Here is part of my style sheet.

    /* header */
    div#header{margin:0 auto; padding:1em 1em 1em 1em; height:8em;}
    div#headertop{margin:0 auto; background-color:transparent}
    #logo{margin:-3.5em 0 0 -1em; padding:0.3em 0.7em;}
    * html #logo{margin:-2.5em 0 0 -1em; padding:0.3em 0.7em;}
    #logo a{background-color:transparent}

    /* Navigation */
    #access{background:#f1f2f4;display:block;float:left;width:900px;margin:0 auto;text-transform: uppercase;}
    #access .menu-header,div.menu{font-size:1.3em;margin-left:8px;width:980px;}
    #access .menu-header ul,div.menu ul{list-style:none;margin:0;}
    #access .menu-header li,div.menu li{float:left;position:relative;}
    #access a{color:#444;display:block;line-height:40px;text-decoration:none;padding:0 10px;}
    #access ul ul{box-shadow:0 3px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 3px 3px rgba(0,0,0,0.2);-webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2);display:none;position:absolute;top:38px;left:0;float:left;width:180px;z-index:99999;}
    #access ul ul li{min-width:180px;}
    #access ul ul ul{left:100%;top:0;}
    #access ul ul a{background:#f1f2f4;line-height:1em;width:160px;height:auto;padding:10px;}
    #access li:hover > a,#access ul ul :hover > a{background:#333;color:#fff;}
    #access ul li:hover > ul{display:block;}
    #access ul li.current_page_item > a,#access ul li.current-menu-ancestor > a,#access ul li.current-menu-item > a,#access ul li.current-menu-parent > a,* html #access ul li.current_page_item a,* html #access ul li.current-menu-ancestor a,* html #access ul li.current-menu-item a,* html #access ul li.current-menu-parent a,* html #access ul li a:hover{color:#444;}

    /* Layout */
    #wrapperpub{margin:0 auto; padding:0 0 0 0; background-color:transparent; position:relative; width:1200px; text-align:left;}
    #wrapper{margin:-14px auto;background-color:#FFF; position:relative; width:1200px; text-align:left;-moz-border-radius-bottomleft:6px;border-bottom-left-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;}
    #wrappertop{margin:0 auto; padding:0 0 0 0; background-color:transparent; position:relative; width:900px; text-align:left}
    #container{margin:0 0 0 8px; padding:2em 1em 1em 1em;width:900px; background-color:#fff; float:left; display:inline; clear:both;}
    #containerlarge{margin:0.8em 0 2em 2em; width:900px; float:left; display:inline; clear:both;background-color:#fff;}
    * html #containerlarge{margin:2em 0 2em 2em; width:900px; float:left; background-color:#fff;}
    #content{background-color:#FFF; padding: 0 0 0 3px;overflow:hidden;}
    #content h1{font-size:2.7em; font-weight:normal; letter-spacing:-0.05em;margin:0 0 0.5em 0}
    #content h2{font-size:2.7em; font-weight:normal; letter-spacing:-0.05em;margin:0 0 0.5em 0}
    #content h3{font-size:1.8em; font-weight:normal; letter-spacing:-0.05em;margin:0 0 0.5em 0}
    #content h4{font-size:1.5em; font-weight:normal; letter-spacing:-0.05em;margin:0 0 0.5em 0}
    #content h5{font-size:1.3em; font-weight:normal; letter-spacing:-0.05em;margin:0 0 0.5em 0}
    #content h6{font-size:1.1em; font-weight:normal; letter-spacing:-0.05em;margin:0 0 0.5em 0}
    #footer{color:#bbb;margin-bottom:2em; width:980px; padding:5em 0 1em 0; clear:both; text-align:left; font-size:1.1em; line-height:1.5em;}
    #footer a{color:#bbb; text-decoration:none; outline:none}
    #footer a:hover{background:#f3f3f3; color:#444; text-decoration:none; outline:0}
    #footer p{color:#bbb;}

    /* sidebar */
    div.sidebar{float:right; overflow:hidden; margin:0 8px 0 0; padding:1em 1em 1em 0em; width:200px; background-color:#fff}
    .sidebar h3{font-size:1.5em; font-weight:normal; letter-spacing:-0.03em}
    .sidebar li{margin:0; padding:0}
    .sidebar ul li ul li{margin:0 0 0 1em;padding:0.5em 0 0}
    .sidebar ul{list-style:none; margin:0; padding:0}
    div#primary{clear:right}
    * html #primary{margin:1em 1em 0 1em; width:300px}
    div#secondary{clear:right}
    * html #secondary{margin:1em 1em 0 1em}

    Any help would be greatly appreciated!!!!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Loads of funny CSS in there, so it’s hard to see anything. 🙂

    fixed margin here:

    h1.blogtitle {
    font-family:'PT+Sans&subset=latin',Helvetica,Verdana,Arial,Sans-Serif;
    font-size:4em;
    margin:0 0 0 1px;
    }

    fixed padding here:

    div#header {
    height:8em;
    margin:0 auto;
    padding:1em 0;
    }

    Cheers

    Thread Starter drawphotography

    (@drawphotography)

    Oh flamenco you are a lifesaver!!! THANK YOU!!! Its working now!

    Great! Yeah, with a photo site, the look is more critical! Glad to be of help, especially when it comes to CSS.

    Cheers, Dave

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Margin Help’ is closed to new replies.