none
Header Div alignment not right RRS feed

  • Question

  • Hello. I am starting a site in EW4 (hindsightsportfishing.com/mytempweb.com), and the header div shows left in the design view (which is what I need), but when I preview in a browser, it is centered. I have tried to change every setting I could for #header, with no success. Thanks in advance. Dave
    Saturday, March 30, 2013 9:44 PM

Answers

  • Okay, I found it. I stumbled on the real like in your first post.

    You don't want the header on the left, do you? Everybody centers their sites now. You have centered your site in CSS by using auto...

    #container {
     padding: 0px;
     margin: 0px auto 0px auto;
     width: 900px;
     height: 100%;
    }

    The problem is, you closed your container div before the Menu, Container, and Footer divs...

    <div id="container"> opens the container div
       <div id="header">  opens the header div 
       <imgalt="" height="175" src="images/banner_13_2.jpg" width="900" />
       </div> closes the header div
    </div> closes the container div OOPSIE!

    <div id="menu"> opens the menu div (outside the container)
      <span id="awmAnchor-menu"></span>
    </div> closes the menu div

    etc.

    Move your container div close to right after the footer div close. Problem solved.


    Things Liberal Arts graduates never like to hear:
    “…which means you are going first in Double Jeopardy.”

    • Marked as answer by Bluetech 2 Saturday, March 30, 2013 11:07 PM
    Saturday, March 30, 2013 10:44 PM

All replies

  • First, design view is not a browser, and is only a guide to what to expect when previewed. Second, that link gives a 404 Not Found error. We need to see your source code.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Saturday, March 30, 2013 9:55 PM
  • That link doesn't work. Try again. I tried all kinds of permutations but all I got was a 404 error.


    Things Liberal Arts graduates never like to hear:
    “…which means you are going first in Double Jeopardy.”

    Saturday, March 30, 2013 9:58 PM
  • I think the server is down. Below is the source code for the page, and below that, the css file. Thanks. Dave

    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link rel="stylesheet" type="text/css" href="main.css" />
    <style type="text/css">
    .auto-style4 {
    background-color: #666666;
    }
    </style>
    </head>

    <body style="background-color: #666666">

    <div id="container">
    <div id="header">
    <img alt="" height="175" src="images/banner_13_2.jpg" style="float: left"/></div>
    </div>
    <div id="menu">rtgyretyre
    </div>
    <div id="content">wetwretw4t
    </div>
    <div id="footer"> 
    <em>Fish hard...fish with the best!</em><br />
    Hindsight Sortfishing<br />
    Fishing out of Rock Harbor, Orleans, Cape Cod, MA<br />
    <br />
    <span class="auto-style3">&copy; Hindsight Sportfishing 2013</span><br />
        <span class="auto-style3">Site desesign and SEO by</span>
    <a href="http://www.offshorepursuits.com">Offshore Pursuits LLC</a><br />
    <span class="auto-style3">Site Map</span><br />
    </div>

    </body>

    ---------------------------------------------------------------------------------------

    .auto-style2 {
    font-size: x-small;
    color: #C0C0C0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    .auto-style3 {
    font-size: x-small;
    color: #C0C0C0;
    }
    #container {
    padding: 0px;
    margin: 0px auto 0px auto;
    width: 900px;
    height: 100%;
    }
    #header {
    background-repeat: no-repeat;
    padding: 0px;
    margin: 0px;
    width: 900px;
    height: 175px;
    background-color: #666666;

    }
    #footer {
    padding: 0px;
    margin: 0px;
    width: 900px;
    height: 125px;
    clear: both;
    background-color: #666666;
    text-align: center;
    color: #FFFFFF;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: small;
    font-weight: bold;
    }
    .menu {
    float: left;
    width: 150px;
    background-color: #666666;
    bottom: ;
    }
    #menu {
    float: left;
    width: 150px;
    background-color: #666666;
    bottom: ;
    }


    #content {
    width: 680px;
    float: right;
    padding-bottom: 0;
    padding-
    padding-right: 35px;
    background-color: #666666;
    color: #FFFFFF;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: small;
    }
    #body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #FFFFFF;
    }.auto-style1 {
    font-size: small;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: italic;
    }
    .h1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: medium;
    font-weight: bold;
    color: #FFFFFF;
    }
    .content a:link, a:visited, a:actve {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    color: #FFFFFF;
    }
    .content a:hover {
    font-weight: bold;
    color: #800000;
    }.footer a:hover {
    font-weight: bold;
    color: #800000;

    }
    .footer a:link, a:visited, a:active {
    font-weight: bold;
    text-decoration: underline;
    color: #FFFFFF;
    }
    .footersmall {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: x-small;
    color: #C0C0C0;
    }

    Saturday, March 30, 2013 10:05 PM
  • Okay, I found it. I stumbled on the real like in your first post.

    You don't want the header on the left, do you? Everybody centers their sites now. You have centered your site in CSS by using auto...

    #container {
     padding: 0px;
     margin: 0px auto 0px auto;
     width: 900px;
     height: 100%;
    }

    The problem is, you closed your container div before the Menu, Container, and Footer divs...

    <div id="container"> opens the container div
       <div id="header">  opens the header div 
       <imgalt="" height="175" src="images/banner_13_2.jpg" width="900" />
       </div> closes the header div
    </div> closes the container div OOPSIE!

    <div id="menu"> opens the menu div (outside the container)
      <span id="awmAnchor-menu"></span>
    </div> closes the menu div

    etc.

    Move your container div close to right after the footer div close. Problem solved.


    Things Liberal Arts graduates never like to hear:
    “…which means you are going first in Double Jeopardy.”

    • Marked as answer by Bluetech 2 Saturday, March 30, 2013 11:07 PM
    Saturday, March 30, 2013 10:44 PM
  • Thanks! That did it. I should have seen that. Thanks again. Link is http://hindsightsportfishing.com.mytempweb.com/

    Now I can tweak that and start to really build it... Thanks again. Dave

    Saturday, March 30, 2013 11:07 PM