dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: trying to have fixed nav in a position:relative container

  1. #1
    Join Date
    Jun 2009
    Posts
    4

    Question trying to have fixed nav in a position:relative container

    alright so i want my whole layout to center itself relative to the size of the page. and i want the content to scroll. but i want the nav and background to be fixed instead of absolute. but when i swapped fixed for absolute they weren't within the container anymore and just went to the left side of the page. right now i'm at a loss for how to fix it.

    heres a link to my site:
    http://lizbmorrison.net/V7test4.php?page=garden

    and heres my css:

    A:link { text-decoration: none; color:#f0a618; }
    A:visited { text-decoration: none; color:#f0a618; }
    A:active { text-decoration: none; color:#f0a618; }
    A:hover { text-decoration: none; color:#d3d3d3; }

    body {
    font-family: helvetica, sans-serif;
    color: #d3d3d3;
    font-size: 8pt;
    text-align: left;
    letter-spacing: 1pt;
    }

    h1 {
    font-family: helvetica, sans-seif;
    color:#f0a618;
    font-size: 7pt;
    font-weight: lighter;
    text-align: right;
    letter-spacing: 1pt;
    }

    #background {
    position: fixed;
    top: 10px;
    left: 0px;
    width: 750px;
    z-index: 1;
    }

    #container {
    position: relative;
    top: 0px;
    width: 750px;
    margin: 0 auto;
    text-align: left;
    }

    #nav {
    position: fixed;
    text-align: right;
    top: 100px;
    left: 0px;
    width: 155px;
    z-index: 3;
    }

    #content {
    position: absolute;
    text-align: left;
    top: 105px;
    left: 200px;
    width: 525px;
    z-index: 2;
    }

    any help would be appreciated, thanks

  2. #2
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    Your Website has a lot of issues. You have 2 <html>, <head>, and <body> tags, when you should only have one. Your are missing DTD at the top of your document (definitely not recommended). Your CSS uses UTF-8 encoding, but the Website itself is ISO-8859-1 (bad idea). Yo will need to escape special characters like V&A should be V&amp;A. Also, I wouldn't use <h1> for nav menu links. In fact it is semantically correct to have only one <h1> tag and although this rule is not "carved in stone," it would help SEO (Search Engine Optimization) considerably if you used it as your for main header. Your container div is closed after 1st <body> tag.

  3. #3
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    Here, try this fix in the attached file. This should help. If you have any questions, don't hesitate to post.
    Note: You will need to remove the .txt extension from this HTML file for it to be usable. I inserted CSS directly into the HTML file, but you can/should remove and place in the external file. One more thing, always provide width and height attributes for your <img> tags.
    Attached Files Attached Files

  4. #4
    Join Date
    Jun 2009
    Posts
    4
    thanks for the help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles