#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    150
    Rep Power
    3

    Question How to extend background-color to 100% of div width?


    Hi all,

    With this CSS code below, how can I get the background color #0000FF to be 100% across the menu bar <div id="top_nav">? Right now, the background color stops with the last <li> link.

    CSS:
    Code:
    #top_nav ul{ margin:0;padding:0;list-style:none;border-bottom: 1px solid gray;font: bold 12px Verdana; }
    #top_nav > ul > li { margin:0;padding:4px 20px;position:relative;float: left;height:30px;line-height:30px;background-color:#0000FF; z-index: 100;} 
    #top_nav > ul > li > a { display: block;text-decoration: none;margin: 0;color: white; }
    #top_nav li > ul { visibility:hidden;width:150px;position: absolute;top:0px;left:200px;border-left:1px solid #000; } 
    #top_nav > ul > li > ul { top:38px;left:0; } /* Controls sub menu position relative to top of main ul */
    #top_nav > ul > li > ul a { display: block;text-decoration: none;margin: 0;padding: 5px;background-color:#0066FF;color: black; }
    #top_nav > ul > li > ul:hover a { display: block;text-decoration: none;margin: 0;padding: 5px;background-color:#00FFFF;color: black; }
    
    #top_nav li:hover { background-color: #000000; } 
    #top_nav li:hover > ul { visibility: visible; }
    #top_nav .spacer { margin:0;padding-left: 174px;position:relative;float: left;height:30px;line-height:30px;background-color:#4c597f; }
    #top_nav li.spacer:hover { background-color: #4c597f; }
    HTML:
    Code:
    <div id="top_nav">
    <ul>
    <li><a href="http://someSite.com">Link 1</a></li>
    <li><a href="http://someSite.com/folder2/link2.html">Link 2 ▾</a>
     <ul>
      <li><a href="http://someSite.com/folder2/link2a.html">Link 2 A</a></li>
      <li><a href="http://someSite.com/folder2/link2b.html">Link 2 B</a></li>
      <li><a href="http://someSite.com/folder2/link2c.html">Link 2 C</a></li>
     </ul>
    </li>
    <li><a href="http://someSite.com/folder3/link3.html">Link 3 ▾</a>
     <ul>
      <li><a href="http://someSite.com/folder3/link3a.html">Link 3 A</a></li>
      <li><a href="http://someSite.com/folder3/link3b.html">Link 3 B</a></li>
      <li><a href="http://someSite.com/folder3/link3c.html">Link 3 C</a></li>
      <li><a href="http://someSite.com/folder3/link3d.html">Link 3 D</a></li>
     </ul>
    </li>
    <li><a href="http://someSite.com/folder4/link4.html">Link 4</a></li>
    </ul>
    </div>
    I've tried adding #top_nav { width:100%; } as well as width:100%; to #top_nav ul. But neither work.

    Ideas on how the main background color (#0000FF) can be extended 100% across the menu bar even if the <li>'s stop well short of the right side?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    873
    Rep Power
    275
    I think you're on the right track of targeting #top_nav .

    Maybe something like :
    Code:
    #top_nav {
    height:30px; /*same height as your list*/
    width:100%;
    margin:0;padding:0;
    background:#0000FF;
    overflow:hidden; /*sometimes this helps*/
    }

    Comments on this post

    • we5inelgr agrees : Great suggestions!
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    150
    Rep Power
    3
    Many thanks for the reply and the suggestions. It worked, with slight modification.

    Code:
    #top_nav {
    height:40px; /*same height as your list*/
    width:100%;
    margin:0;padding:0;
    background:#0000ff;
    }
    If overflow:hidden; was in there, the mouseover sub menues would not appear (I.E. 9). With it removed, they appeared as expected. And, the height needed to be increased by 10px, otherwise the background was only about 75% from top to near the bottom. Perhaps something to do with the padding. Not sure.

    Anyway, it works now. Thank you!

IMN logo majestic logo threadwatch logo seochat tools logo