SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS vertical nav bar

    I have a problem where im trying to get the following vertical nav to fill all the way down to the bottom of the div which contains it, but I've tried various things but have yet had any luck the css appears below the markup.

    Code:
    <div id="mainContent">
           
              <div id="navigation">
                <ul>
                  <li class="hlink"><a href="">Website</a></li>
                  <li class="hlink"><a href="">Student Area</a></li>
                  <li class="hlink"><a href="">Staff Area</a></li>
                  <li class="hlink"><a href="">Courses</a></li>
                  <li class="hlink"><a href="">LRC</a></li>
                  <li class="hlink"><a href="">Information</a></li>
                </ul>
              </div>
    
          </div>
    
        </div>

    Code:
    body {
           margin:  0;
           padding:  0;
           background-color:  #0054A4;
         }
    
    #wrapper {
               width:  50em;
               max-width:  100%;
               margin: 0 auto;
               text-align: left;
               overflow:  hidden; 
             }
    
    
    
    #navigation ul li {
                        list-style-type:  none;
                        background:  url(images/navigation/tick.gif) no-repeat left;
    
                        background-color:  #0067b4;
    
                        font-family:  arial;
    
                        color:  #ffffff;
                        padding-left:  20px;
                        width:  150px;                    
                      }
    
    #navigation ul {
                     margin:  0;
                     padding:  0;
                   }
    
    #navigation {
                   max-width:  150px; 
                }
    
    
    #mainContent {
                   background-color:  #ffffff;
                   margin-top:  15px;
                 }
                 
    
                 
    li a {
           text-decoration:  none;
           font-family:  arial;
    
           color:  #ffffff;
         }
    
    li a:hover {
                 color:  #d9ff27;
               }
    Can anyone help me?

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What does your full page code look like? (A link to an example page would be ideal.)

  3. #3
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the best I can do unless this forum allows you to upload images for display purposes.

    http://www.flickr.com/photos/23596422@N07/2372950160/

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can upload images. They need to be approved by a moderator first (which I am and can most definately do). But I'd rather see the complete HTML and CSS code for your page, though. There's no sense in recommending something if it's going to break what you've got, especially if it's meant to replace what you're using.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you are trying to make the blue background extend to the bottom of a parent container then you can use the faux column approach and repeat a background image on the main container that provides the illusion of the column.

    I use an image like this to give 3 full length columns on this layout.

    If that's not what you meant then you may have to explain a bit more or as Dan said provide some code


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •