How to create a vertical navigation menu in a box?

Discussion in 'CSS' started by Snobama, Dec 7, 2008.

0
  1. #1
    I'd tried to create a vertical navigation in <div id="first-column"> box,but failed.

    May I know how to get it done ?

    ----------------This is the html-------------------------------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Make Money Online</title>
    <link rel="stylesheet" style type="text/css" href="style.css" />
    </head>
    <body>
    <div id="header">
    <h1>This is my header</h1>
    </div>
    <div id="container">

    <div id="first-column">
    Text in first-column.
    </div>
    <div id="content">
    Text in content-column.
    </div>
    <div id="third-column">
    Text in third-column.
    </div>
    </div>

    <div id="footer">
    <h6>footer</h6>
    </div>
    </body>
    </html>
    ------------------end-----------------------------------------------------


    --------------This is the stylesheet----------------------------------------
    body {
    background: white;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    }

    h1, h6 {
    margin: 0;
    font-weight: normal;
    }

    div#container {
    position: relative;
    min-height: 400px;
    border: 1px solid gray;
    background: lightgrey;
    max-width: 1000px;
    min-width: 750px;
    margin: auto;
    }

    div#first-column,
    div#third-column {
    position: absolute;
    top: 0;
    bottom: 0;
    border: 1px solid gray;
    background: rgb(240, 240, 240);
    width: 200px;
    margin: 3px;
    }

    div#first-column {
    left: 0;
    }

    div#third-column {
    right: 0;
    }

    div#content {
    margin: 3px 208px 3px 208px;
    background: rgb(240, 240, 240);
    border: 1px solid gray;
    min-height: 392px;
    }

    div#header
    div#footer {
    background: rgb(240, 240, 240);
    padding: 3px;
    border: 1px solid gray;
    max-width: 994px;
    min-width: 744px;
    margin: auto;
    }

    div#header {
    border-bottom: none;
    }

    div#footer {
    border-top: none;
    }
    -----------------------------end------------------------------------------

    Thank you for your kind assistance and help.
     

    Attached Files:

    Snobama, Dec 7, 2008 IP
  2. Snobama

    Snobama Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I'd tried to integrate the following code for a vertical navigation menu in my first posting code (Pls refer to it),but,seems like can't get it right.I'd tried to made some changes on the margin,padding...etc in order to create two <div> ( div id="first-half" -it is for vertical navigation menu.div id="seocd-half - it is just for text ) in <div id="first-column">,but,the third column disappear after the changes !
    Please kindly advice on how to get it done.Thank you.

    --------------------The html----------------------------------------------
    <div class="arrowgreen">
    <ul>
    <li><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
    <li><a href="http://www.dynamicdrive.com/style/" class="selected" title="CSS">CSS Library</a></li>
    <li><a href="http://www.ddwhois.com" title="Whois">DD Whois</a></li>
    <li><a href="http://www.dynamicdrive.com/forums/" title="Forums">Forums</a></li>
    <li><a href="http://tools.dynamicdrive.com/" title="Tools">Webmaster Tools</a></li>
    <li><a href="http://www.javascriptkit.com" title="JavaScript">JavaScript</a></li>
    </ul>
    </div>
    ------------------------end-----------------------------------------------

    ----------------------The stylesheet--------------------------------------
    .arrowgreen{
    width: 180px; /*width of menu*/
    border-style: solid solid none solid;
    border-color: #94AA74;
    border-size: 1px;
    border-width: 1px;
    }

    .arrowgreen ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    .arrowgreen li a{
    font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    display: block;
    background: transparent url(media/arrowgreen.gif) 100% 0;
    height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/
    padding: 4px 0 4px 10px;
    line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/
    text-decoration: none;
    }

    .arrowgreen li a:link, .arrowgreen li a:visited {
    color: #5E7830;
    }

    .arrowgreen li a:hover{
    color: #26370A;
    background-position: 100% -32px;
    }


    .arrowgreen li a.selected{
    color: #26370A;
    background-position: 100% -64px;
    }
    -----------------------end------------------------------------------------
     
    Snobama, Dec 7, 2008 IP