SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Mar 2003
    Location
    London
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Art & Science of CSS- vertical menu

    how do I postion the vertical menu on the page?


    book code
    #nav {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 130px;
    float: left; /* Contain floated list items */

    my code
    #nav {
    position:absolute;
    top:130px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 130px;
    float: left; /* Contain floated list items */

    when I try to postion:absolute; I seem to lose the ability to click (block)

    book code
    #nav a {
    display: block; /* to increase clickable area as a's
    default to inline */

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have the book (which I'm not going to get into since...), but what does your HTML and CSS for the entire page template look like? (And no, you should not be using absolute positioning for menus - unless it's the dropdown part of a dropdown menu.)

  3. #3
    SitePoint Member
    Join Date
    Mar 2003
    Location
    London
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    html code

    <!DOCTYPE html PUBLIC "-//W3C//dtD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/dtD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>DB Tiling</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="db_tiling.css" media="screen" />
    </head>
    <body id="body_hom">
    <h1></h1>
    <ul id="nav">
    <li id="nav_hom"><a href="/">Home</a></li>
    <li id="nav_com"><a href="/commercial/">Commercial</a></li>
    <li id="nav_dom"><a href="/domestic/">Domestic</a></li>
    <li id="nav_wall"><a href="/wall/">Walls</a></li>
    <li id="nav_floor"><a href="/floor/">Floors</a></li>
    <li id="nav_kitch"><a href="/kitchen/">Kitchens</a></li>
    <li id="nav_bath"><a href="/bathroom/">Bathrooms</a></li>
    <li id="nav_test"><a href="/test/">Testimonials</a></li>
    <li id="nav_con"><a href="/contact/">Contact</a></li>
    </ul>
    <div id="tile"></div>
    </body>
    </html>


    CSS Code

    html {
    font: small/1.4 "Ariel", Tahoma, sans-serif;
    }
    body {
    margin: 0;
    background: #2c5c58;
    font-size: 92&#37;;
    }

    h1 {
    margin: 20px;
    height: 63px;
    background-image: url(images/logo.gif);
    background-position:center;
    background-repeat: no-repeat;
    text-indent: -9999px;
    }
    #nav {
    position:absolute;
    top: 130px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 110px;
    float: left; /* Contain floated list items */
    }
    #nav li {
    margin: 0;
    padding: 0;
    float: left; /* This corrects the */
    width: 100%; /* IE whitespace bug */
    }
    #nav a {
    display: block; /* to increase clickable area as a's
    default to inline */
    color: #FFF;
    text-decoration: none;
    padding: 0 15px;
    line-height: 2;
    }

    }
    #nav a:hover {
    background: #FFFFFF;
    color: #2c5c58;
    font-weight: bold;
    }
    #body_hom #nav_hom a,
    #body_com #nav_com a, #body_dom #nav_dom a,
    #body_wall #nav_wall a, #body_floor #nav_floor a,
    #body_kitch #nav_kitch a, #body_bath #nav_bath a,
    #body_test #nav_test a, #body_con #nav_con a {
    background: #FC0;
    color: #2c5c58;
    font-weight: bold;
    }
    #tile {
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(images/tile.gif) no-repeat;
    width: 113px;
    height: 150px;
    }

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where are you trying to position it?

    For example, you can use this to position the menu on the right.

    Code:
    #nav {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 110px;
    float: right; /* Contain floated list items */
    }
    I never use absolute positioning unless I need content to overlap so I'd always advise you to use float's to position elements and then use padding/margin's to push them into position.

    Hope that helps.

  5. #5
    SitePoint Member
    Join Date
    Mar 2003
    Location
    London
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i was just trying to move it down slightly on the left from the h1 tag
    i did try position relative and with a 30px shift down it seems to work but anymore and it loses the block click on the lower parts of the menu

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd do this with a 30px top padding on your #nav

    Code:
    #nav {
    margin: 0;
    padding: 30px 0 0;
    list-style-type: none;
    width: 110px;
    float: left;
    }
    If you wanted all the content to appear 30px below your header then you may be better applying a 30px bottom margin to the <h1> (btw you should also have text within your <h1> tags that will be displayed if CSS isn't available).

    You may also have an issue with the footer being absolutely positioned as it may overlap your content and is presumably the issue you were experiencing with the navigation becoming unclickable?

    Hope that helps.

  7. #7
    SitePoint Member
    Join Date
    Mar 2003
    Location
    London
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    that worked thanks

    many thanks I guess I will have LOTS of these DOH! moments as I have just started to look at webstuff again after a long lay off

    BTW the unclickable thing only happened when I positioned it absolute (totally) or relative (partially at bottom of menu)

    I did not have any other content on page so I dont think the footer had anything to do with it esp as it is so small

    thanks a lot for your help


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
  •