Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    196
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Vertically aligning a menu within a div

    I've Googled but can't seem to find exactly what I'm looking for. Basically what I want is a left hand side menu which will always be vertically aligned, no matter is the page is scrolable. I've seen it done some places but can't find them anymore.

    Thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I think you are looking for a fixed menu. Perhaps this is what you want?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Fixed Menu</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    html, body {
    height:100%;
    font-size:0.9em;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    #nav {
    position:fixed;
    height:10em;
    left:10px;
    top:50%;
    margin-top:-5em;
    width:150px;
    list-style:none;
    z-index:1;
    }
    #nav li {
    height:2em;
    text-align:center;
    }
    #nav li a {
    height:100%;
    width:100%;
    display:block;
    background:#00F;
    color:#FFF;
    text-decoration:none;
    line-height:2em;
    }
    #nav li a:hover {
    background:#006;
    color:#CCC;
    }
    #content {
    padding-left:170px;
    }
    #content p {
    padding:10px;
    text-align:justify;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    html {
    overflow-x:auto;
    overflow-y:hidden;
    }
    body {
    overflow-y:auto;
    }
    #nav {
    position:absolute;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="container">
    	<ul id="nav">
    		<li><a href="#">link</a></li>
    		<li><a href="#">link</a></li>
    		<li><a href="#">link</a></li>
    		<li><a href="#">link</a></li>
    		<li><a href="#">link</a></li>
    	</ul>
    	<div id="content">
    		<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec imperdiet felis a quam. Suspendisse tellus. Praesent magna felis, vestibulum vitae, ultrices eu, consequat quis, nunc. Vivamus dapibus sapien non lacus. Ut dolor mauris, viverra sed, faucibus et, ullamcorper fringilla, dui. Fusce commodo tempus ante. Pellentesque mattis nulla. Sed euismod, quam sed congue ullamcorper, tortor nibh pharetra diam, commodo feugiat sapien dolor nec neque. Integer ipsum orci, convallis quis, placerat eu, placerat ac, pede. Morbi at dolor sed orci semper lobortis. Maecenas nonummy sem sodales leo. Vivamus nec orci. Duis ullamcorper mi et sapien. Proin pulvinar, justo id lobortis egestas, nisl tortor pulvinar odio, condimentum euismod nunc dui eu ipsum. Pellentesque placerat est. Mauris quis urna a ligula laoreet luctus. Nam ut ligula eget lacus tincidunt fermentum. Maecenas adipiscing pellentesque ante. Fusce velit nulla, fermentum nec, fringilla ut, venenatis ac, nisi. </p>
    		<p> Aliquam ac diam. Donec in turpis. Integer consequat mattis purus. Nulla sit amet odio ut turpis consectetuer facilisis. In vitae neque sit amet dui mollis luctus. Phasellus mattis volutpat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras erat risus, posuere quis, tempor eu, sollicitudin ac, neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis pretium. Sed at libero at lectus posuere lacinia. Cras in enim. Sed magna nisi, fringilla eget, suscipit id, tristique eget, lacus. Fusce eu ante. Cras hendrerit tristique leo. Phasellus fringilla sem tincidunt dui. Maecenas in nunc. Cras imperdiet pulvinar erat. Maecenas quis metus et velit gravida venenatis. Proin vulputate. </p>
    		<p> Aenean in augue a turpis dapibus vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In augue. Donec eros sapien, imperdiet et, tristique sed, viverra sed, risus. Nullam quis tellus in mi rhoncus pulvinar. Nam at metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sollicitudin, tellus vitae tempor hendrerit, nulla nisl elementum libero, ac porta nunc tellus eu neque. Suspendisse est ipsum, faucibus eget, adipiscing id, mattis a, mi. Nunc eu sapien. </p>
    		<p> Vivamus ipsum. Curabitur non leo. Suspendisse odio mauris, bibendum nec, egestas adipiscing, interdum a, pede. Morbi eleifend. Sed lacus felis, gravida at, molestie nec, pharetra eget, dui. Duis pede. Fusce magna nisl, venenatis eget, nonummy a, aliquam eget, pede. Curabitur nisi nunc, posuere quis, varius vitae, cursus id, neque. Donec molestie posuere turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
    		<p> Duis aliquet rhoncus purus. Vivamus imperdiet. Vestibulum viverra mi scelerisque nulla. Vivamus tristique. Aliquam cursus libero vel diam. Nam tempus dictum neque. Integer est. In hac habitasse platea dictumst. Vivamus odio. Aenean tincidunt enim vitae quam. Etiam cursus. Phasellus vehicula sapien eu augue. Sed ultricies. Aenean sollicitudin cursus mauris. Fusce a massa vitae libero porta porttitor. </p>
    		<p> Cras imperdiet, ligula at malesuada rhoncus, erat nisl molestie eros, viverra tincidunt leo tellus et quam. Donec velit lectus, bibendum vel, feugiat non, feugiat quis, nulla. Suspendisse potenti. Sed convallis, sem quis euismod fringilla, erat neque consequat velit, id pulvinar dui nulla sed est. Vivamus tellus. Ut ut tortor. Quisque facilisis, magna in elementum consequat, nisi elit commodo tortor, nec malesuada nunc orci id libero. Pellentesque quis sapien. Proin consequat. Morbi mollis interdum libero. Sed consequat. Phasellus molestie lectus et justo. Nulla faucibus nulla ac orci. Nulla facilisi. Maecenas bibendum ullamcorper mauris. Fusce ac mauris. </p>
    		<p> Vestibulum luctus lectus et nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam risus enim, tristique et, pulvinar at, auctor in, lorem. Donec tellus mi, sodales et, tempor et, porttitor id, magna. Curabitur adipiscing neque ut massa. Nunc sed est non turpis fermentum pulvinar. Aliquam velit mauris, pretium id, ultricies ac, aliquet ut, velit. Aliquam lacus dui, ornare nec, tincidunt eget, fringilla vel, lorem. Curabitur id erat. Sed scelerisque. Aenean enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc lectus nisl, blandit consequat, aliquam vestibulum, dictum id, quam. Suspendisse nonummy ligula. Sed sapien quam, convallis vel, hendrerit nec, nonummy ac, purus. Aenean diam sapien, tincidunt eget, scelerisque in, volutpat eget, ipsum. </p>
    		<p> Cras quis lectus. Nam ut nisl. Fusce eros turpis, fringilla vel, feugiat ac, pretium non, sem. Phasellus non nunc. Donec elit. Donec id risus. Suspendisse potenti. Nunc porta, est sed iaculis sodales, lacus risus tincidunt velit, congue vestibulum tortor lorem quis ligula. Fusce id nunc sit amet mauris pretium gravida. Duis rhoncus, pede et tristique consectetuer, nunc enim consequat mi, quis mollis nisl quam non diam. </p>
    		<p> Nulla rutrum eros sed sapien. Praesent quis nulla. Praesent ornare. Vivamus ac risus. Donec eget neque. Aenean ac eros sit amet nisi tristique hendrerit. Aliquam ultricies euismod elit. Duis lectus turpis, mollis a, interdum at, laoreet quis, purus. Vivamus porta, libero eu lacinia tempor, eros est faucibus mauris, a tempus arcu libero vitae dui. Maecenas suscipit nunc et neque. Pellentesque at diam. Praesent et felis. Fusce tincidunt, dolor sed cursus sollicitudin, mi lacus aliquet tortor, at blandit eros lorem gravida nisl. Curabitur sit amet nisl. Duis eu augue. Nulla sit amet ante mollis quam scelerisque hendrerit. Quisque pede erat, ullamcorper ac, vehicula nec, suscipit non, lorem. Mauris quam. Sed convallis. Suspendisse laoreet. </p>
    		<p> Morbi id metus a risus consequat viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer faucibus erat ac risus. Nunc in tellus feugiat diam hendrerit eleifend. Cras arcu elit, pharetra ac, luctus vel, pulvinar a, ante. In erat. Nullam auctor magna sed leo. Pellentesque iaculis suscipit risus. Etiam varius adipiscing mauris. Duis sit amet leo vitae purus laoreet tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus volutpat rutrum nisi. Phasellus aliquet metus a ligula. Aenean sit amet metus. Morbi at pede vel nulla rhoncus luctus. Sed suscipit lorem ac ipsum. Fusce volutpat laoreet turpis. Mauris ultrices eleifend urna. Vestibulum accumsan nunc sit amet arcu. Vivamus vitae lectus. </p>
    	</div>
    </div>
    </body>
    </html>
    Works in IE6+, FF1.0+, and Opera 7.2+. I get a weird bug in FF 2.0.0.3 though. It could be just my computer not sure. The bottom of the nav seems to repeat itself after scrolling upwards. Let me know if this happens for you.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Apr 2006
    Posts
    231
    Thanks
    9
    Thanked 1 Time in 1 Post
    could be done via iframes too but then search engines will poop on you.

  • #4
    Regular Coder
    Join Date
    Oct 2005
    Posts
    196
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Nice, exactly what I wanted.

    And I also get the same behavior in the latest Firefox. :\


  •  

    Posting Permissions

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