SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Saskatoon
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    please help menuing system

    Hi all,

    I'm trying to create a menu where I have left navigation and also top navigation. I'm doing it all in css and html. I wish to use lists for both the top and left menus but I can't get it to work in more than one browser. Soon as I get it working in one it breaks in another.

    Here is the code I am using... Anyone have any ideas?

    Thanks
    John.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <head>
    <style type="text/css">
    body{font-family: Arial, Helvetica, sans-serif;margin:0px; padding:0px;}

    #vertnav
    {
    position:absolute;
    width: 160px;
    top:120px;
    left:20px;
    }

    #vertnav ul
    {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    }

    #vertnav li
    {
    border-bottom:1px solid #fff;
    }

    #vertnav a
    {
    display: block;
    padding: 3px;
    width: 140px;
    background-color: #036;
    }

    #vertnav a:link, #vertnavlist a:visited
    {
    color: #EEE;
    text-decoration: none;
    border-left:10px solid #333;
    }

    #vertnav a:hover
    {
    background-color: #369;
    color: #fff;
    border-left:10px solid #999;
    }

    #navcontainer
    {
    position:absolute;
    top:120px;
    left:122px;
    }

    #navlist ul
    {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
    }

    #navlist li
    {
    display: inline;
    list-style-type: none;
    margin-right:-2px;
    }

    #navlist a { width:140px; padding: 3px; }

    #navlist a:link, #navlist a:visited
    {
    color: #fff;
    background-color: #036;
    text-decoration: none;
    border-left:10px solid #333;
    }

    #navlist a:hover
    {
    color: #fff;
    background-color: #369;
    text-decoration: none;
    border-left:10px solid #999;
    }


    </style>
    </head>
    <body>
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#">I</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
    </ul>
    </div>
    <div id="vertnav">
    <ul id="vertnavlist">
    <li><a href="#">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
    </ul>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    USA
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please someone correct me if I am wrong, but absolute positioning doesn't work in all browsers.
    .
    2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
    2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
    2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Redhat_PHP
    Please someone correct me if I am wrong, but absolute positioning doesn't work in all browsers.
    It works in every browser that even half-supports CSS. Even Netscape 4 and IE4 had support for absolute positioning, though limited.


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
  •