HTML and CSS Help

particlepat · June 26 '09, 04:25 PM (#1)

hello internet,

I'm trying to create a nav bar that is 900px wide but has a background image that is repeated across the entire screen so that it appears the navbar spans across the entire screen. right now my html looks something like this:

Code:

<container4>
     <div id="top_navlist">
          <div id="bcsprosoftnavlogo">
          <img src="Images/bcsprosoftnavlogo.jpg" width="166" height="25" alt="logo" longdesc="Images/bcsprosoftnavlogo.jpg" />
          </div>
                    <ul id="navlist">
                         <li><a href="#">home</a></li>
                         <li><a href="#">who we are</a></li>
                         <li><a href="#">what we do</a></li>
                         <li><a href="#">products</a></li>
                         <li><a href="#">news &amp; events</a></li>
                         <li><a href="#">contact us</a></li>
                         <li><a href="#">get connected</a></li>
                     </ul>
     </div><!--TOP_NAVLIST-->
</container4>

Container 4 is in it's own container, seperate of the container that holds the rest of the content because I want the other stuff to stay at 900px. container4 will have a nav bar that is 900px wide, but the background image will be repeated across the width of the screen.

here is the css I have for container 4 and the top_navlist:

Code:

#container4{
    font-size: 0.75em; /* 16x0.75=12px */
    font-family: "Trebuchet MS", Geneva, Verdana, sans-serif, Arial, Georgia, Times New Roman, Times;
    height: 50px;
    background-image: url(Images/navbarbg.jpg);
    background-repeat: repeat-x;
    border: 1px solid #00E;
    margin: 0 auto;
    position: absolute;
    top: 0px;
    float: none;
}

#top_navlist {
    margin: 0 auto;
    position: absolute;
    top: 0px;
    width: 900px;
    height: 50px;
    text-align: right;
    background-image: url(Images/navbar.jpg);
    float: none;
}

at the moment the navbar is floating left and there is no background image. does anyone have any suggestions?

particlepat · June 26 '09, 06:28 PM (#2)

i've managed to get everything centered however now i cannot get it to anchor to the top. it is about 20px from the top of the screen. this is what i'm working with now:

Code:

#container4 {
    font-size: 0.75em; /* 16x0.75=12px */
    font-family: "Trebuchet MS", Geneva, Verdana, sans-serif, Arial, Georgia, Times New Roman, Times;
    height: 50px;
    width: 100%;
    background-image: url(Images/navbarbg.jpg);
    background-repeat: repeat-x;
    position: absolute;
    top: 0px;
}

#top_navlist {
    margin: 0 auto;
    top: 0px;
    width: 900px;
    height: 50px;
    text-align: right;
    background-image: url(Images/navbar.jpg);
}

imagn · June 28 '09, 07:59 PM (#3)

First off you should use the "background" property so you can lose the "-image", "-repeat" ect. This will also default the image to top left of the browser unless you specify a value:

background: url(Images/navbarbg.jpg) repeat-x;
same as
background: url(Images/navbarbg.jpg) repeat-x top left;

If you need it 20 pixels from the top you would use:

background: url(Images/navbarbg.jpg) repeat-x 20px 0px;

HTML and CSS Help

CSS background repeat and containers