7 Replies Latest reply: Jan 5, 2012 10:24 AM by MurraySummers RSS

    Filling Browser Window

    upstart1762 Community Member

      Can anyone look at this file and tell me what I can do to make the header bar fill the browser window completely from left to right, regardless of window size? It's just stopping short on left and right. Thank you!

       

      www.upstartstudio.com/hs.html

       

      HTML:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

      <title>H&amp;S Woodworks</title>

      <link href="scripts/hs.css" rel="stylesheet" type="text/css" />

      </head>

       

       

      <body>

      <div id="comtainer">

        <div id ="header">

          <div class="headerCenter">

            <div class="logo"> <img src="assets2/hsLogo.png" width="180"                     height="100" /></div>

            <div class="tagline"><img src="assets2/TagLine_03.gif" width="682" height="35" alt="Custom living spaces, cabinetry, millwork, and furniture." /></div>

            <ul>

              <li><a href="index.htm">HOME</a></li>

              <li><a href="about.htm">ABOUT H&amp;S</a></li>

              <li><a href="spaces.htm">SPACES</a></li>

              <li><a href="detailing.htm">DETAILING</a></li>

              <li><a href="cabinetry.htm">CABINTRY</a></li>

              <li><a href="furninture.htm">FURNITURE</a></li>

              <li><a href="contact.htm">CONTACT</a></li>

            </ul>

          </div>

          <div id="homeMain"></div>

        </div>

      </div>

      </body>

      </html>

       

       

      CSS:

      @charset "UTF-8";

      HTML {

                background-image: url(../assets2/coffeetable_bkgrnd.jpg);

                background-attachment: fixed;

                background-repeat: no-repeat;

                background-position: center center;

                webkit-background-size: cover;

                moz-background-size: cover;

                o-background-size: cover;

                background-size: cover;

      }

      #header {

                background-color: #4b4b48;

                padding: 0px;

                height: 160px;

                margin-top: 50px;

                margin-right: 0px;

                margin-bottom: 0px;

                margin-left: 0px;

                border-bottom-width: 1px;

                border-top-style: solid;

                border-right-style: none;

                border-bottom-style: solid;

                border-left-style: none;

                border-bottom-color: #FFF;

                border-top-width: 2px;

                border-top-color: #000;

                position: relative;

                z-index: 1;

      }

      #comtainer {

                background-color: #9F0;

                margin: 0px;

                padding: 0px;

                position: relative;

      }

      .headerCenter {

                padding: 0px;

                width: 1024px;

                margin-top: 0px;

                margin-right: auto;

                margin-bottom: 0px;

                margin-left: auto;

                position: relative;

                height: 159px;

      }

      .logo {

                margin-top: 35px;

                margin-right: 0px;

                margin-bottom: 0px;

                margin-left: 0px;

                padding-top: 0px;

                padding-right: 25px;

                padding-bottom: 0px;

                padding-left: 50px;

                float: left;

                border-right-width: 1px;

                border-right-style: solid;

                border-right-color: #FFF;

      }

      .tagline {

                background-color: #FFF;

                padding: 0px;

                float: left;

                height: 35px;

                width: 682px;

                margin-top: 70px;

                margin-right: 0px;

                margin-bottom: 0px;

                margin-left: 35px;

      }

      #header ul {

                list-style-type: none;

                margin: 0px;

                padding: 0px;

                float: none;

                position: absolute;

                right: 100px;

                bottom: 0px;

      }

      #header ul li {

                float: left;

                text-align: center;

                margin: 0px;

                padding: 0px;

      }

      #header li a:link , #header li a:visited{

                display: block;

                margin: 0px;

                font-family: Georgia, "Times New Roman", Times, serif;

                font-size: 12px;

                list-style-type: none;

                text-decoration: none;

                font-style: normal;

                line-height: 1.8em;

                font-weight: normal;

                font-variant: normal;

                text-transform: capitalize;

                color: #BABABA;

                padding-top: 0px;

                padding-right: 8px;

                padding-bottom: 0px;

                padding-left: 8px;

                border-right-width: 1px;

                border-left-width: 1px;

                border-right-style: solid;

                border-left-style: solid;

                border-right-color: #4b4b48;

                border-left-color: #4b4b48;

      }

      #header li a:hover, #header li a:active {

                color: #FFF;

                border-right-width: 1px;

                border-left-width: 1px;

                border-right-style: solid;

                border-left-style: solid;

                border-right-color: #999;

                border-left-color: #999;

      }

      #homeMain {

                background-color: #333;

                padding: 0px;

                height: 450px;

                width: 1024px;

                margin-top: 0px;

                margin-right: auto;

                margin-bottom: 0px;

                margin-left: auto;

                z-index: 2;

      }