Jump to content

Css - Making A Menu Div Go From Top To Bottom?


purplespider
 Share

Recommended Posts

I'm currently in the process of redesigning one of my sites using CSS instead of tables. I've got this far:

 

www.brookfieldra.org (EDIT: Problem now solved)

 

What I cannot work out how to do is make the menu column automatically repeat all the way down the page no matter how long the content is.

 

Is this possible in CSS?

 

Thanks

James

 

Here's my stylesheet:

(Note: I currently have a fixed height for the menu, this is needing changed, but I don't know what to!)

 

>/* CSS Document */

body {
 margin: 0px;
 padding: 0px;
 font-family:Arial, Helvetica, sans-serif;
 background-color:#fff4ba;
 }

#container{
 }

#header {
 background-color:#660000;
 height:100px;
 border-bottom: 2px solid black;
 background-image:url(images/header_bg.jpg);
 margin:0;
 padding:0;
 }
 
#content{
 margin: 10px 45px 0 245px;
 text-align:justify;
 }
   
#menu	{
 background-color:#990000;
 background-image:url(images/menu_bg.jpg);
 width:180px;
 position:absolute;
 top:0px;
 left:10px;
 height:315px;
 border-bottom:3px solid black;
 border-left:3px solid black;
 border-right:3px solid black;
 height:600px;
 margin: 0;
 }    
 
#nav_cont {
 position:absolute;
 top:100px;
 
 }  
 
#nav {
 margin: 1em 0 0 5px;
 padding: 0px 0px 0px 25px;
 }
 
#nav li {
margin: 0;
padding: 3px 3px 3px 0px;
list-style-image:url(images/bullets.gif);
/*	list-style-type: none; */
vertical-align:middle;
}
#nav a, #nav a:visited {
text-decoration: none;
padding: 3px 8px 3px 8px;
color: white;
font-size: 13px;
font-weight:bold;
}
#nav a:hover, #nav a:active, #nav a:focus {
color: #5C1211;
background-color: #EFF183;
}

Link to comment
Share on other sites

Well I found out one way of doing it!

 

I just made the menu back ground repeat down the page in the body element, so the menu column still actully stops halfway down the page but as its sitting onto of the repeating background it looks like it continues!

 

Explains it in detail here: http://www.alistapart.com/articles/fauxcolumns/

 

James

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...