On Wed, Jan 18, 2012 at 6:58 AM, Martin <mhe...@gmail.com> wrote:
> Hi,
> I've got a div (#main) which normally should have the height of 733px
> because that's the height of the background pic.
> On some pages the text goes over this height. The text is inside #content.
> This pushes the footer down but the background remains
> in the same position. I'd like to keep extending the #main div vertically if
> the text goes over the height.
>
> I understand that because the text is in #content and the background picture
> is in #main, it might be tricky. I put the background in the #main and
> created
> #main in the first place cause I'd like the background picture to go behind
> #sidebar_left, #content, #sidebar_right (and not just #content)
What do you want to happen with the image when the height of the
content of div#main exceeds the fixed height? Do you want it to
stretch vertically to match the height of the area that contains the
text? Do you want it to tile? Do you want it to be centered
vertically on the area, or be at the top, or at the bottom?
I don't know how having the background image on the div#content would
help you if the text is taller than the image, but here's a way to do
it that would allow it to be behind the sidebars as well as the
content:
#main {
height: 733px;
width: 960px;
}
#content {
width: 492px;
text-align: left;
background-color: black;
background-image: url('../images/beer-bg.jpg');
background-repeat: no-repeat;
background-position: -165px 0;
}
#sidebar_left {
text-align: left;
width: 165px;
height: 733px;
background-image: url('../images/beer-bg.jpg');
background-repeat: no-repeat;
}
#sidebar_right {
width: 295px;
height: 733px;
background-image: url('../images/beer-bg.jpg');
background-repeat: no-repeat;
background-position: -657px 0;
}
<div id="main">
<div id="sidebar_left" class="float"><jdoc:include type="modules"
name="left" /></div>
<div id="content" class="float"><jdoc:include type="component" /></div>
<div id="sidebar_right" class="float"><jdoc:include type="modules"
name="right" /></div>
</div>
As you can see, it's kind of cheating, and it only would work because
you're using fixed widths for everything.
Another way might be to actually put the image tag in there and use
absolute positioning and z-index to put it behind everything.
By the way, I didn't test any of this. So, if you use it or any
variation of it, you'll have to double-check the syntax.
--
Ghodmode
http://www.ghodmode.com/blog
> I can't think of any other way of structuring it.
>
> <div id="header"><jdoc:include type="modules" name="top" /></div>
> <div id="main">
> <div id="sidebar_left" class="float"><jdoc:include type="modules"
> name="left" /></div>
> <div id="content" class="float"><jdoc:include type="component" /></div>
> <div id="sidebar_right" class="float"><jdoc:include type="modules"
> name="right" /></div>
> </div>
> <div id="footer"....
>
> #main {
> height: 733px;
> width: 960px;
> background: black url('../images/beer-bg.jpg') no-repeat;
>
> }
> #content {
> width: 492px;
> text-align: left;
> }
> #sidebar_left {
> text-align: left;
> width: 165px;
> height: 733px;
> }
> #sidebar_right {
> width: 295px;
> height: 733px;
> }
>
> Thank you
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
