Skip navigation
Daddy Hoggens
Currently Being Moderated

Help with Header, Images and DIV

Mar 14, 2013 11:03 AM

Okay this question is going to be fairly easy. I am going to post my CSS Code that I have created.
I have a fixed header on top that so that it always stays positioned there when the user scrolls. Now one of the games that I play, their website has the exact same feature that I wanted to try on my own but I refuse to rip their code and fiddle with it. Would be a lot more complicated then I could imagine right now.
So here's what I am trying to do. I have the header at top with links, and I want my created logo at in the middle of it. The problem is that when I put in the logo, it stretches the the table to make the height of the logo. How can I put the logo in the middle overlapping the header so that the div header isn't stretched?

 

#headerDIV

{

          margin: 0 auto;

          padding: 0 auto;

          width: 100%;

          border-width: thin;

          border-style: solid;

          top: 0px;

          position: fixed;

          border-color: #999;

          left: 0px;

}

 

<div id="headerDIV"><table border="0" cellspacing="0" cellpadding="0" width="100%">

  <tr>

    <td width="13%" id="topLinks">Testing</td>

    <td width="17%" id="topLinks">Testin 2 </td>

    <td width="37%" id="topLinks">Logo Here</td>

    <td width="16%" id="topLinks">Testing 4</td>

    <td width="17%" id="topLinks">Testing 5</td>

  </tr>

</table>

</div>

 

 

The website that I want to learn how to make this header is at: www.artix.com

 
Replies
  • Currently Being Moderated
    Mar 14, 2013 11:40 AM   in reply to Daddy Hoggens

    You don't need tables for layouts.  It's actually better & more efficient if you don't use them for anything except tabular data (spreadsheets).

     

    Copy & paste the following code into a new, blank HTML page.

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Layout</title>
    
    <style>
    body {
    font: 62.50%/1.4 Verdana, Arial, Helvetica, sans-serif;
    width: 1000px;
    margin: 0 auto; /**with width, this is centered**/
    padding: 0;
    color: #000;
    background: #069;
    }
    
    section {
    margin: 55px 0;
    padding: 0;
    background: #FFA8A8;
    overflow: hidden; /**float containment**/
    }
    
    header {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    min-width: 1000px;
    margin: 0;
    padding: 0;
    min-height: 50px;
    background-color: #9CCDCD;
    overflow: hidden; /**float containment**/
    }
    
    /**your logo**/
    header img {margin-top:-25px}
    
    /**columns**/
    aside {
    float: left;
    border: 1px dotted #990000;
    }
    
    header aside { width: 33.1% }
    
    section aside {
    margin: 0 1%;
    padding: 0 1%;
    background: #FFF;
    width: 29%;
    }
    
    /**clear floats after 3rd column**/
    aside-nth:child(3) {
    clear:left;
    }
    
    footer {
    clear: both;
    margin: 0;
    min-height: 25px;
    overflow: hidden; /**float containment**/
    }
    
    footer aside {
    width: 45.8%;
    padding: 1%;
    }
    
    /**re-usable classes**/
    .center { text-align: center }
    
    .right { text-align: right }
    
    /**TEXT STYLES**/
    h1, h2, h3, h4 { margin: 0; }
    
    h1 { color: #069; }
    
    h2 {
    color: #FFFFFF;
    font-style: italic;
    }
    
    p { font-size: 1em }
    
    /**LINKS**/
    a:link { color: red }
    
    a:visited, a:hover, a:active, a:focus {
    background: red;
    color: white
    }
    </style>
    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>
    
    <body>
    
    <!--fixed header-->
    <header>
    <aside>Header &lt;aside&gt;</aside>
    <aside><h1 class="center">Insert Logo here</h1></aside>
    <aside class="right"> Header &lt;aside .right&gt; </aside>
    </header>
    
    <!--columns-->
    <section> <p>&lt;section&gt;</p>
    <aside><p>&lt;aside&gt;</p>
    
    <h3>Heading 3</h3>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis. 
    Vestibulum luctus mauris sed sem dapibus luctus. 
    Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. 
    Quisque varius scelerisque nunc eget rhoncus. 
    Aenean tristique enim ut ante dignissim.</p><p>&lt;/aside&gt;</p></aside>
    <aside><p>&lt;aside&gt;</p>
    
    <h3>Heading 3</h3>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis. 
    Vestibulum luctus mauris sed sem dapibus luctus. 
    Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. 
    Quisque varius scelerisque nunc eget rhoncus. 
    Aenean tristique enim ut ante dignissim. </p><p>&lt;/aside&gt;</p></aside>
    <aside><p>&lt;aside&gt;</p>
    
    <h3>Heading 3</h3>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis. 
    Vestibulum luctus mauris sed sem dapibus luctus. 
    Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. 
    Quisque varius scelerisque nunc eget rhoncus. 
    Aenean tristique enim ut ante dignissim.</p><p>&lt;/aside&gt; </p>
    </aside>
    
    <footer>
    <aside>Footer &lt;aside&gt;</aside>
    <aside class="right">Footer &lt;aside .right&gt;</aside>
    </footer>
    
    </section>
    </body>
    </html>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 14, 2013 12:30 PM   in reply to Daddy Hoggens
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 14, 2013 12:46 PM   in reply to Daddy Hoggens

    What you have done is create tabular navigation.

     

    But you don't need that. You run the risk of different browsers treating the tables differently.

     

    Here's a simple horizontal navigation bar I am working on:

     

      <div class="top">

      <nav>

              <ul>

                        <li><a href="#">Home</a></li>

            <li><a href="#">About</a></li>

            <li><a href="#">Services</a></li>

            <li><a href="#">Testimonials</a></li>

            <li><a href="#">News</a></li>

            <li><a href="#">Contact</a></li>

                        <li><a href="#">Affiliates</a></li>

              </ul>

    </nav><!--ends the navigation bar -->

    </div><!--ends top for navigation -->

     

    Now, that's an unordered list. Most navigation these days is done with unordered lists.

     

    Here's the CSS:

     

    nav ul {

              display: inline;

    }

    nav li {

              list-style-type: none;

              float: left;

    }

    nav li a {

              display: block;

              text-decoration: none;

              padding: 13px 19px 7px 19px;

              color: #fff;

              text-align: left;

              font-size: 1.5em;

    }

    nav li a:hover {

              text-decoration: underline;

    }

     

    the display:inline; will make your list horizontal. Now, if you have a two-word or long word navigation item, the list can handle it where a fixed-width table won't.

     

    For more about using lists to navigate, please see the w3schools website.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points