Re: [css-d] flexible height of div
On Tue, Jan 17, 2012 at 5:58 PM, Martin 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. ...trimmed>
From:
#main {
height: 733px;
width: 960px;
background: black url('../images/beer-bg.jpg') no-repeat;
}
To: [first assign a class to the body tag only on the specific
page[s] where you seek this particular look and feel, and use the
below CSS]
body.yo-yo #main {
border: 1px solid lime;
overflow:hidden;
width: 960px;
background: black url('../images/beer-bg.jpg') bottom no-repeat;}
HTH.
Best,
Yo-Yo Ma
--
Chelsea Creek Studio
http://ccstudi.com
__
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/
Re: [css-d] flexible height of div
Can you not use something like this:
min-height: 733px; instead of height?
hth
> 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)
>
> I can't think of any other way of structuring it.
>
> name="top" />
>
> type="modules" name="left" />
> type="component" />
> class="float"> name="right" />
>
>
> #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;
> }
>
>
>
__
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/
Re: [css-d] flexible height of div
On Wed, Jan 18, 2012 at 6:58 AM, Martin 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;
}
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.
>
>
>
> name="left" />
>
> name="right" />
>
>
> #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/
[css-d] flexible height of div
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) I can't think of any other way of structuring it. name="left" /> name="right" /> 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/
