SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Navigation DIV - Vertical

    Hi,

    can somebody tell me or show me via web examples how to create a vertical div, that can be used in place of a navigation links please. Because i'm trying to create a div which a blue background, but when doing so, the browser sets it horizontally. Here is an example of what i'm trying to imagine.
    http://www.w3.org/Style/CSS/
    The menu bar is vertical, which is what i want for myself. Or is there some attribute that can control which way a div is layed out perhaps?


    Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
        <title>Home Page V1</title>
    <link rel="stylesheet" type="text/css" href="homepage_V1.css" />
    </head>
    <body>
        <div class="container">
        <div class="nav">
            <ul>
                <li><a href="#Home"> Home </a></li>
                <li><a href="#Contact"> Contact </a></li>
                <li><a href="#News"> News </a></li>
                <li><a href="#About"> About </a></li>
            </ul>
        </div>
        
        </div>
    </body>
    </html>
    css code
    Code:
    /* homepage_V1.css is used to help build my homepage*/
    
     body
    {
        margin-top: 2em;
        margin-left: 2em;
        margin-bottom: 1em;
    
        
    }
    
    div.container
    {
        width: 80em;
        border: solid #9400D3 0.1em;
        height: 40em;
        padding-top: 1em;
        padding-bottom: 1em;
    }
     
     div.nav
     {
        ??
     }
     
     ul
    {
        background-color: blue;
        list-style-type: none;
        
    }
    Thanks

  2. #2
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actaully, i thnk i know how to do it.

    UPDATE: I added the following snippet

    div.nav
    {
    width: 10em;
    height: 60em;
    }

    which reduced the length of the bar horizontally, but when adding the height, it does not lengthen the bar vertically. Is there way for me to increase the length of the div vertically?

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by nvidia123 View Post
    Is there way for me to increase the length of the div vertically?
    Just remove the height. You don't need it. The div will then naturally expand in height to accommodate whatever content it holds.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you want a starting point then you could set a min-height instead of a height, if that's waht you want
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •