Petrushka
01-01-2007, 07:06 PM
I am using the cut and paste css layouts provided by this site, however, I have a query regarding the menu portion of the code.
I have a background image for the menu, and I would like this to stretch down to the bottom of the screen - I have tried the min-height code that someone else suggested, but to no avail.
The code I currently have, is:
<html>
<head>
<title>Two Column CSS Layout</title>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#menu {
position: absolute;
left: 0px;
padding: 10px;
width: 175px;
background-image:url('/napsters/layout/background.jpg');
background-repeat: repeat;
background-attachment: fixed;
font-family: verdana;
color: #FFFFFF ;
font-weight: normal;
font-size: 10pt; }
}
#content {
margin-left: 175px;
padding: 10px;
margin-right: 15px;
}
</style>
</head>
<body>
<div id="menu">
Your menu will go here. You can place images, text links, etc. in this div. To change the properties of this layer you can change the #menu selector in the style sheet that is located on this page between the head tags.
</div>
<div id="content">
All of your content goes in this div. This side is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #content selector in the style sheet that is located on this page between the head tags.
</div>
</body>
</html>
I have a background image for the menu, and I would like this to stretch down to the bottom of the screen - I have tried the min-height code that someone else suggested, but to no avail.
The code I currently have, is:
<html>
<head>
<title>Two Column CSS Layout</title>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#menu {
position: absolute;
left: 0px;
padding: 10px;
width: 175px;
background-image:url('/napsters/layout/background.jpg');
background-repeat: repeat;
background-attachment: fixed;
font-family: verdana;
color: #FFFFFF ;
font-weight: normal;
font-size: 10pt; }
}
#content {
margin-left: 175px;
padding: 10px;
margin-right: 15px;
}
</style>
</head>
<body>
<div id="menu">
Your menu will go here. You can place images, text links, etc. in this div. To change the properties of this layer you can change the #menu selector in the style sheet that is located on this page between the head tags.
</div>
<div id="content">
All of your content goes in this div. This side is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #content selector in the style sheet that is located on this page between the head tags.
</div>
</body>
</html>