4 Replies Latest reply: Mar 14, 2013 12:46 PM by mhollis55 RSS

    Help with Header, Images and DIV

    Daddy Hoggens

      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

        • 1. Re: Help with Header, Images and DIV
          Nancy O. MVP

          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.

          • 2. Re: Help with Header, Images and DIV
            Daddy Hoggens Community Member

            Good Afternoon Nancy,
                 So far from test Dreamweaver, it is showing that I am trying to accomplish. I am going to publish this to my website and see what it looks and I will play with it a little bit. Thank you for the quick response. My next question is as follows. I noticed that you said, don't use tables it's for tabular data, so how would I sort out the links as I have listed above then?

            • 4. Re: Help with Header, Images and DIV
              mhollis55 Community Member

              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.