SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru [Paul Ferrie]'s Avatar
    Join Date
    Oct 2007
    Location
    Glasgow, Scotland, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning layers

    Hi Guys,

    It's not very often i do pure html work so not very knowledgeable in this area.

    I have two div layers. One is the content of the site and the other is page navigation for the site. The navigation sits just below the content layer but the content layer height can change. How can i make sure that the navigation layer always site just below the content layer. Is there some way i can check the hieght of the content layer before postioning navigation layer.
    .:To me AS is like LEGO, Only for the big Kids :.
    - Site - Blog - Glasgow Flasher
    bringmadeleinehome.com

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do something like this:

    CSS:

    Code CSS:
     
    #content {
       width: 800px;
       float: left;
    }
     
    #nav {
       clear: both;
       float: left;
       width: 800px;
    }

    HTML:
    Code HTML4Strict:
    <div id="content">This is some content</div>
    <div id="nav">
       <ul>
          <li>Menu Option</li>
       </ul>
    </div>

    This would have a content container at the top and the nav will always go below that content regardless of height.
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  3. #3
    SitePoint Guru [Paul Ferrie]'s Avatar
    Join Date
    Oct 2007
    Location
    Glasgow, Scotland, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That might work if i was sorted the content from top down. The divs are being centered on the page.

    Code:
    #content {
           float: left;
        position: absolute;
        top: 25%;
        left: 50%;
        margin-left: -340px; /* minus half the width of the movie */
        width: 680px;
    }
    
    #nav {
       clear: both;
       float: left;
           position: absolute;
        left: 50%;
        top:32%;
        margin-left: -320px; /* minus half the width of the movie */
        width: 640;
    }
    I used this js function to position the nav layer once the page has loaded.
    Code:
    function setPositionOnLoad () {
         var layerRefMid = document.getElementById('content');
         var layerRefNav = document.getElementById('nav');
         var topTop = layerRefMid.clientHeight ;
         layerRefNav.style.top  = topTop+184+'px';
         layerRefNav.style.posTop  = topTop+173;
    }
    It seems to work well to the point of just before you resize the browser. When this happend is stays aligned to the content layer but once the browser height is adjusted the nav does not stay with the content layer.
    .:To me AS is like LEGO, Only for the big Kids :.
    - Site - Blog - Glasgow Flasher
    bringmadeleinehome.com

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok in that case, loose the Javascript and do wrap my other 2 divs in one main div and have a something like this:

    CSS:
    Code CSS:
    #main {
       width: 800px;
       margin-right: auto; /*This will center the main div in the middle of the browser*/
       margin-left: auto;
    }
     
    #content {
       width: 800px;
       float: left;
    }
     
    #nav {
       clear: both;
       float: left;
       width: 800px;
    }

    HTML:
    Code HTML4Strict:
    <div id="main">   
       <div id="content">This is some content</div>
       <div id="nav">
          <ul>
             <li>Menu Option</li>
          </ul>
       </div>
    </div>
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  5. #5
    SitePoint Guru [Paul Ferrie]'s Avatar
    Join Date
    Oct 2007
    Location
    Glasgow, Scotland, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i thought nesting was a no-no.
    cool i will try that.
    .:To me AS is like LEGO, Only for the big Kids :.
    - Site - Blog - Glasgow Flasher
    bringmadeleinehome.com

  6. #6
    SitePoint Guru [Paul Ferrie]'s Avatar
    Join Date
    Oct 2007
    Location
    Glasgow, Scotland, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah looks like things are moving in the right direction now thanks
    .:To me AS is like LEGO, Only for the big Kids :.
    - Site - Blog - Glasgow Flasher
    bringmadeleinehome.com

  7. #7
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"


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
  •