Forum Moderators: not2easy
I would like to start off with saying that this site has been a very helpful tool in fixing errors and bugs for my projects.
Now, to the issue:
I am making a site template, and I'm having issues handling a gradient correctly.
The site looks a bit like this:
¦-----------------------¦
¦.Top Menu..............¦
¦-----------------------¦
¦.......¦...............¦
¦.Menu..¦..Top Gradient.¦
¦.......¦......+Content.¦
¦-------¦---------------¦
¦.......¦...............¦
¦.......¦..Rest of the..¦
¦.......¦......Content..¦
¦.......¦...............¦
¦-----------------------¦
¦.Footer................¦
¦-----------------------¦
The problem I'm having is that I want to have the content to begin in the gradient section, and then go down into the rest of the content section (which grows larger depending on the amount of content).
I have tried multiple things, which involved putting the menu and top gradient in an absolute div (which is NOT neat at all.), the 'rest of the content' section as a container for the menu and top gradient sections (this causes the background image of the 'rest of the content' section to 'under lap' the menu and top gradient sections.), and some other things which made the 'rest of the content' section background to disappear (No, overflow:hidden; did not work.).
So I'm really running out of options while the solution seems so simple...
EDIT: I'll post some html/css:
HTML:
<div id="wrap">
<div id="title"></div>
<div id="bg-cont">
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="menu 2.php">Menu 2</a></li>
</ul>
</div>
<div id="top-cont"></div>
<div id="content">
Content Div
</div>
</div>
<div id="footer"></div>
</div>
CSS:
#wrap{
width:900px;
margin-left:auto;
margin-right:auto;
}#title{
position:relative;
width:900px;
background-image:url(images/bg_01.png);
height:89px;
}
#menu{
float:left;
width:154px;
height:225px;
background-image:url(images/bg_02.png);
}
#top-cont{
float:right;
width:746px;
height:225px;
background-image:url(images/bg_03.png);
}
#bg-cont{
position:relative;
width:900px;
background-image:url(images/bg_04.png);
overflow:hidden;
}
#content{
clear:both;
top:-225px;
width:726px;
float:right;
margin-right:20px;
position:relative;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
}
- John
[edited by: SuzyUK at 10:03 am (utc) on Dec. 27, 2009]
[edit reason] fixed formatting :) [/edit]
Escape the table, not just the <table> tag, but also the way of thinking.
I'm unsure what you want as background in the other boxes you've drawn.
But in general: put the image repeating in the horizontal direction on the body or a wrapper if you feel you need that. Also use a solid background on that same element: it'll show where the image doesn't go.
Lay out content containing boxes as you need over that and hide the background where you need (e.g. a menu might be logical to have a different background).
Really: escape the matrix: use the red pill.
rather than think in a "slicing graphic" table like train of thought, think about putting them back together again ;)
If we could use multiple backgrounds you do this with one wrapper div, but we can't so you'd be best to use 2 wrappers, the plus side is that you can then lose your excess 'bg-cont' & 'top-cont' divs.
We had a question recently where someone wanted something similar but they also wanted the bottom of the content to dip into the bottom gradient, not sure if it was you or not, but I'll base my solution as if it were as I can't find the other question.
You already have the whole layout wrapped in an ID = "wrap", that would do if it were only a top gradient, however if you add another just inside that you can do both top and bottom.
<div id="wrap" class="outer"><div class="inner">..all content..
</div></div>
then put the whole of the top graphic as a background to .outer (with transparent as the color) it can be full width or you can repeat-x if it's that type.. and if you've a bottom gradient do the same with the inner wrapper but position it to the bottom.
.outer {background: url(bg-top.gif) repeat-x 0% 0%;}
.inner {background: url(bg-bottom.gif) repeat-x 0% 100%;}Make the image do the work, make it the height you want, then no need to restrict "cells" to have the same height. Leave all other divs transparent so these images show through.
Hope you get the idea, obviously if there's a border image down between the columns you might need another wrapper, and if you do I'd put the border on the outer wrapper then the top/bottom gradients on the 2 inners so they cover over the top and bottom of the border.
the idea is to think about it all as a background and how to best to build that background, like faux columns, then build the actual layout on the top of it.
hth
sorry just said the same as Swa! didn't see your reply swa as I came into thread to fix John's post as per his request, apologies, but great minds an' all that ;)
