Need help? Check out our Support site, then


Aligning Header Image with Body

  1. drawphotography
    Member

    Hi all, I am trying to figure out a way to align my header image with the rest of the body in my blog. However there seems to be always a little gap that I can't find a way to get rid of.

    This is my page: http://www.drawphotography.com/wordpress/

    Here is part of the CSS file that is relating margins etc.

    /* 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 really greatly appreciated.

  2. You did not specify a blog address or reason for posting when you created this topic.

    This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you'll find help at the WordPress.org forums.

    If you don't understand the difference between WordPress.com and WordPress.org, you may find this information helpful.

    If you forgot to include a link to your blog, you can reply and include it below. It'll help people to answer your question.

    This is an automated message.

Topic Closed

This topic has been closed to new replies.

About this Topic