Forum Moderators: not2easy
I'm sorry to be using my first post to post a problem rather than a solution, but I'd be grateful for any help on a problem that's been bugging me for a while now.
I'm trying to create a very basic page layout in CSS. It is a two column, centered, fixed design. My left column has a background image that fades upwards into a colour, which I would like to background-position: bottom.
I have the standard problem of the menu column refusing to fill its containing DIV. I am aware of the various solutions to this problem, mostly by using background colours / images of the containing div, and clearing it to surround its contents.
However this solution does not work in this case because my background image is aligned to the bottom rather than the top.
I have also attached the code below but to see the actual problem it is necessary to view it with the images. The version that's up currently has <br>'s in it to make up the menu to the full height - obviously these are what I would like to render uncessary.
The HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head><body>
<div id="container">
<h1><span>example.co.uk</span></h1>
<div id="menu">
<h3>Navigation</h3>
<ul>
<li>Menu 1</li>
<ul>
<li>Menu 1.1</li>
</ul>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<ul>
<li>Menu 4.1</li>
<li>Menu 4.2</li>
<li>Menu 4.3</li>
</ul>
<li>Menu 5</li>
<li>Menu 6</li>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</ul>
</div>
<div id="content">
<h2><span>Welcome to example.co.uk</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis dictum, nibh vitae vulputate lacinia, massa lorem tempor mi, eget adipiscing erat felis a diam. Nulla facilisi. Aliquam imperdiet, orci vitae pellentesque lacinia, lorem magna egestas lorem, a bibendum nulla wisi a magna. Phasellus et felis. Pellentesque ut erat a odio consequat faucibus. Mauris quis erat. Suspendisse mattis placerat arcu. In hac habitasse platea dictumst. Nulla volutpat. Fusce quis augue. Mauris nec lectus. Cras tempor, ligula vel molestie aliquet, nunc velit tempor neque, sit amet dictum velit wisi a elit. Donec malesuada, augue fringilla blandit ullamcorper, velit sem consequat pede, nec congue est quam et elit. Nam convallis ligula ut eros volutpat mattis. Nunc magna. Nam dapibus leo bibendum massa. Nullam molestie. Proin nibh urna, vulputate sodales, egestas vel, pretium ac, purus.</p>
<p>Ut arcu neque, tempus et, consequat vitae, suscipit ut, nisl. Donec semper, nulla sit amet lobortis malesuada, eros pede porttitor ipsum, ultricies sagittis sapien est a sapien. In arcu. Cras pretium diam sit amet neque. Praesent condimentum posuere velit. Nullam condimentum ornare nibh. Etiam quis est. Curabitur sit amet ipsum id eros bibendum convallis. Integer erat nunc, scelerisque sed, adipiscing ut, eleifend facilisis, felis. Mauris eleifend odio a nisl. Vestibulum nibh.</p>
<p>Nunc rutrum. Aliquam pulvinar. Pellentesque nulla turpis, ultrices nec, pulvinar sit amet, tincidunt vel, massa. Nullam pretium. Vivamus aliquet dui a orci. Mauris ultricies. Nunc dui neque, auctor vel, placerat eu, venenatis a, magna. Pellentesque non eros id justo sodales interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent auctor, turpis et pharetra semper, augue sapien mollis tortor, ut condimentum mi dolor vestibulum tellus. Etiam lacinia tincidunt urna. Nullam hendrerit, dolor a volutpat tincidunt, ligula massa consectetuer velit, sed molestie enim odio in ipsum. Vestibulum nec ante non est sagittis ultrices. Sed scelerisque. Aliquam erat volutpat. </p>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
The CSS
body {
margin: 20px 0 20px 0;
padding: 0px;
background-color: #2A5BBD;
font: 12px Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}#container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 770px;
/*height: 1000px;*/
border: 4px solid #152E5F;
background-color: #EAEFF9;
}
#menu {
float: left;
width: 150px;
/*height: 100%;*/
padding: 30px 0 0 8px;
background-color: #60CAE4;
background-image: url(menu-back.jpg);
background-position: bottom;
background-repeat: no-repeat;
margin-top: -50px;
}
#content {
margin-top: -30px;
padding-left: 20px;
padding-right: 30px;
float: left;
width: 550px;
}
#content p {
margin: 0 0 10px 6px;
padding: 0;
}
h1 {
margin: 0;
background-image: url(header_title.gif);
width: 605px;
height: 132px;
position: relative;
z-index: 1000;
}
h2 {
margin: 0 0 10px 0;
padding: 0;
background-image: url(title_welcome.gif);
width: 349px;
height: 35px;
}
h1 span {
display: none;
}
h2 span {
display: none;
}
h3 {
text-align: center;
}
I'd be grateful for people's thoughts on this issue.
Many thanks,
Jamie
<No site specifics, thanks. See TOS #13 [WebmasterWorld.com]>
[edited by: SuzyUK at 4:52 pm (utc) on Aug. 17, 2005]
I realise what you say about the pictures, but unfortunately no site specifics allowed ;)
However just to clarify for others, that left image is like a gradient, darker, with features at the bottom and fading upwards to a plain color and that is the background color on the menu div so the background color takes over as the menu gets longer..
..
There is no way to get the left float to stretch according to either it's wrapper or based on a neighbouring float.. and most stretching tricks involve faux column techniques.
as far as I can see faux column could be used with this but you either need a very tall background graphic (to cover all page heights) or add a little extra markup
Tall graphic method:
build in the solid top color to the top of the graphic and lots of it then put the background graphic onto the container div and remove the background color from the menu.
or if you don't want to go the long tall route.. and slightly more reliable perhaps..
Extra Markup and a second image
Build a plain background graphic for the container just using the lighter (menu) color ~ in fact just cut out the top 2 pixels from your existing image, full width.. that will will ensure a perfect match! :). Set the new image to repeat vertically all the way down the container leaving the background color the same as it is now so your right side is still "full length" too
then add a wrapper div just inside the container (and close it after your clearing div) and put your existing graphic as a background to it positioned to the bottom and then the two effects should work no matter the height..
Hope that all makes sense..
Suzy
My apologies for breaking the rules on my first post!
Thanks very much for your advice. Your 'large image' solution is one that I considered and discarded for filesize reasons. Your second solution is perfect and it simply didn't occur to me!
I've attempted to implement it and have come across a couple of stumbing blocks.
I have my 160x2 graphic tiling down the left hand side of my container. I have removed the background from the menu div. I have created a 'menuback' div which has as its background the original menuback graphic.
However, depending on where I place the two last divs (the clearing div and the menuback div) I run into problems with either one or both of Gecko / IE.
For example, if my code is like this:
<!-- end content div -->
</div><div style="clear:both;"></div>
<div id="menuback"></div>
<!-- end container div -->
</div>
.. the menu background div is placed below the menu div - lengthening the page beyond the content in some cases, and leaving the actual menu with a plain background.
If, on the other hand, I place the clearing div within the menu background div, it renders perfectly in Firefox, but ends up alongside the menu (to the right of it) in IE!
<!-- end content div -->
</div> <div id="menuback">
<div style="clear:both;"></div>
</div>
<!-- end container div -->
</div>
I have included the relevant parts of my CSS below.
#menuback {
width: 160px;
height: 507px;
background-image: url(menu-back.jpg);
background-position: bottom;
background-repeat: no-repeat;
vertical-align: bottom;
}
#menu {
float: left;
width: 150px;
/*height: 100%;*/
padding: 30px 0 0 8px;
/*background-color: #60CAE4;
background-image: url(menu-back.jpg);
background-position: bottom;
background-repeat: no-repeat;*/
margin-top: -50px;
}
#container {
/*position: relative;*/
margin-left: auto;
margin-right: auto;
width: 770px;
/*height: 1000px;*/
border: 4px solid #152E5F;
background-color: #EAEFF9;
background-image: url(menu-back-colour.jpg);
background-position: left;
background-repeat: repeat-y;
}
Again, I am incredibly grateful for any help anyone can offer.
Cheers,
Jamie
K.. the
#menuback
<div id="container">
<div id="menuback">
..all other code..
<div style="clear:both;"> </div>
</div><!-- //menuback -->
</div><!-- //container -->
</body>
</html>also note I put a inside that clearing div.. otherwise FF treats it as empty and won't use it to clear.
and your background repeat rule if you just use "bottom" it will go to the bottom but will default to center for the horizontal so make sure to declare both vectors
e.g.
#menuback {
background-image: url(menu-back.jpg);
background-position: left bottom;
background-repeat: no-repeat;
}
Suzy
Thanks very much for all your help - I've got it working perfectly now.
Cheers,
- Jamie
