Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Jun 2009
    Posts
    2
    Member #
    19292
    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?

  2.  

  3. #2
    Junior Member
    Join Date
    Jun 2009
    Posts
    2
    Member #
    19292
    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);
    }

  4. #3
    Senior Member imagn's Avatar
    Join Date
    Jul 2007
    Location
    Los Angeles
    Posts
    156
    Member #
    15594
    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;


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:08 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com