SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    winnipeg
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css styles-absolute positioning of nav bar- help

    in Dreamweaver mx 2004, trying to absolute position nav bar on left under a div tag which is the header. Problem is nav bar will not absolute position at 0 pixels. Shows up ok in design view but on preview in browser, the nav bar appears way off the left margin toward the middle of the page. please help. here is my code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Index</title>
    <link href="pmstyles.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    <div id="header"><p><img src="assets/img/pmassociatesltd800.jpg" width="682" height="49"></p></div>
    <div id="nav">
    <ul>
    <li><a href="/" title="Home">HOME</a></li>
    <li> | <a href="/business/" title="BUSINESS PLANNING">BUSINESS PLANNING</a></li>
    <li> | <a href="/design/" title="DESIGN SERVICES">DESIGN SERVICES</a></li>
    <li> | <a href="/negotiation/" title="NEGOTIATION SERVICES">NEGOTIATION SERVICES</a></li>
    <li> | <a href="/project/" title="PROJECT MANAGEMENT">PROJECT MANAGEMENT</a></li>
    <li> | <a href="/pos/" title="POS SYSTEMS">POS SYSTEMS</a></li>
    </ul>
    </div>
    </body>
    </html>

    Here is my css code:
    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    }
    body {
    background-color: #003366;
    margin-left: 0px;
    margin-top: 0px;
    }
    div#nav {
    position: absolute;
    top: 79px;
    left: 0px;
    }
    div#nav ul {
    list-style-type: none;
    position: absolute;
    top: -23px;
    left: 0px;
    }
    div#nav ul li {
    display: inline;
    }
    nav ul li a {
    background-color: #CCCCCC;
    text-decoration: none;
    }
    a:link {
    color: #66FFFF;
    text-decoration: underline;
    }
    a:visited {
    text-decoration: underline;
    color: #FFCC66;
    }
    a:hover {
    text-decoration: none;
    color: #CCCCCC;
    }
    a:active {
    text-decoration: underline;
    }
    header {
    position: absolute;
    left: 0px;
    top: 0px;
    }

    would appreciate any assistance on this.

  2. #2
    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,

    You need to control the default padding and margin on all elements. Especially in your case the ul.

    Also you don't need to use absolute positioning when elements are following logicaly from one another. If you absolutey place evertyhing then you lose the flow of the document in a fluid layout. (Fixed layouts are easier with absolute positioning because nothing resizes etc).

    Here are the changes:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Index</title>
    <style type="text/css">
    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    }
    body {
    background-color: #003366;
    margin: 0;
    padding:0;
    }
    div#nav {
    }
    div#nav ul {
    list-style-type: none;
    margin:0;
    padding:0
    }
    div#nav ul li {
    display: inline;
    }
    nav ul li a {
    background-color: #CCCCCC;
    text-decoration: none;
    }
    a:link {
    color: #66FFFF;
    text-decoration: underline;
    }
    a:visited {
    text-decoration: underline;
    color: #FFCC66;
    }
    a:hover {
    text-decoration: none;
    color: #CCCCCC;
    }
    a:active {
    text-decoration: underline;
    }
    #header img {display:block}
    #header p{margin:0;padding:0}
    </style>
    </head>
    <body>
    <div id="header">
    <p><img src="assets/img/pmassociatesltd800.jpg" width="682" height="49"></p>
    </div>
    <div id="nav"> 
    <ul>
    <li><a href="/" title="Home">HOME</a></li>
    <li> | <a href="/business/" title="BUSINESS PLANNING">BUSINESS PLANNING</a></li>
    <li> | <a href="/design/" title="DESIGN SERVICES">DESIGN SERVICES</a></li>
    <li> | <a href="/negotiation/" title="NEGOTIATION SERVICES">NEGOTIATION SERVICES</a></li>
    <li> | <a href="/project/" title="PROJECT MANAGEMENT">PROJECT MANAGEMENT</a></li>
    <li> | <a href="/pos/" title="POS SYSTEMS">POS SYSTEMS</a></li>
    </ul>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Oct 2004
    Location
    winnipeg
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you. this fixed my problem.


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
  •