PDA

View Full Version : Div background not covering all text

cogs
Jan 7, 2009, 06:47 PM
In the area div.content, I have a background image with the text over it in the div.body-text. Resizing the window (narrow) makes the background image not go all the way to the bottom of the text, with a space that has no background, just text. I've come to a roadblock trying to make the background cover, and before I make another image, I thought I'd come here to find out if there's something I can do with the existing background? The length of the background is 768px. I think it might be that the text pushes downward instead of staying in its position. Thank you for your knowledge... cogs




<html>
<head>
<style type="text/css">

h1 {text-align: center; font-weight: normal;
font-family: trebuchet; arial; courier;

serif;
color: #bbbbcc;}

h2 {text-align: center; font-weight: normal;
font-family: trebuchet; arial; courier;

serif;
color: #bbbbcc;}

h3 {text-align: left; font-weight: normal;
text-indent: 1cm; line-height: 28px;

font-family: trebuchet; arial; courier; serif;

}

h4 { text-align: center; font-weight: normal;
line-height: 28px; font-family: trebuchet;

arial; courier; serif;
}

div.floatright
{
float: right;
margin: 0px 5px 0px 0px;
}


div.floatleft
{
float: left;
margin: 0px 0px 10px 10px;
}


div.LEMT {
background-image: url();
border-top: none;
border-left: none;
border-bottom: inset #232532 2px;
border-right: none;
padding: 15px 10px 0px 10px;
width: 100%;
margin-top: relative;
overflow: hidden;
}

div.content {
background-image:

url(http://i44.tinypic.com/156xvtl.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top
width: 100%;

}

div.navbar {
background-image: url();
background-repeat: repeat-x;
color: #ccccdd;
border-top: none;
border-left: none;
border-bottom: inset #717d8d;
border-right: none;
padding: 5px;
width: 15%;
height: 50%;
float: left;
}


div.body-text {
padding: 15px;
width: 85%;
overflow: hidden;
margin-top: 0;

}



</style>
</head>

<body>


<div class="lemt">
<img src=""
align="right" alt="null" style="border: inset

darkgray;">
<img src="" align="right" alt="null"></div>

<div class="content">

<div class="navbar">
<h4>
<i>text</i><hr/>
links<br/>
underneath<br/>
text<br/>
text<hr/></center>
</h4>
</div>

<div class="body-text">

<div class="floatleft">
<img src="" width="252"
height="82" alt="null">
</div>

<h2>text</h2>

<h3>textxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</h3>

<div class="floatright">
<img src="" width="200" height="133"

alt="null">
<font size="2px"><center>text</font>
</div>

<h3>textxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</h3>
<h2>text</h2>
<h3>textxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</h3>
</div>
</div>
</body>
</html>
StaticFX
Jan 8, 2009, 08:37 AM
I would make that image much longer. To make sure that people who use a larger desktop setting (like me) don't see the white at the bottom.
cogs
Jan 8, 2009, 08:39 AM
Is this a problem with i.e. 6? Or screen resolution? Cause when I open it at home on Firefox, it won't do the same thing. On IE, the background of the text doesn't completely cover the div space allotted to it. It's like the padding for the bottom is not 100%.
Edit: I tried the above, making the image longer, but it still has a space, as if the image is unable to fill that space.
StaticFX
Jan 8, 2009, 08:52 AM
I tried this in IE7 and it works fine...
Firefox - fine
Chome doesn't like it so much when making the window thin.

also, change the X's for the "text" and put spaces in them! Its not allowing for proper word wrapping.

like this:

textxxxx xxxxxx xxxxxxxxx xxxxx xxxxx xxx xx
x xxxxxxxxxx xxxxxxxx xxxxx xxxxxxx xxxxxx xxxxx
xxxx xxxxx xxxx xxx xxxxxxxx xxxx xxxx xxxxxx xxxx
xxxxx xxxx xxxxxxxxxxxxx xxxxxxx xx xxxxxx xxxxx
xxx xxx xxxxxxxx xxxxxx xxxxxx xxx xxx xxxxxxxxx
xx xxxx xxxx xxxxx xxxxxxxxxxxx xxxx xxx xxxxx xxx

that makes it work fine in Chrome as well.


also. Float...

you have it as <div class="floatleft"> & <div class="floatright">
its

<div class="float: left">
<div class="float: right">
cogs
Jan 8, 2009, 02:34 PM
Must be screen resolution, or ie6.
On the floating, the class is only a name to refer to what css that class contains in the head, which is the proper float:left or float:right. Thanks for the help on the spaces, I thought it was the wordwrap in notepad.
cogs
Jan 8, 2009, 07:18 PM
Alrighty then... I didn't have a background color for the division, so it only showed the computer's background color. Now that I changed that to the color of the gradient image, there is no blank space anymore when I make the window narrow. Also, I just turned the gradient upside down in a div, so the bottom mirrors the top.
cogs
Jan 8, 2009, 07:39 PM
Here's before:
http://i42.tinypic.com/14985lv.jpg

And here's after:
http://i43.tinypic.com/168gcy1.jpg
StaticFX
Jan 9, 2009, 06:33 AM
Nice
Artem
Jan 12, 2009, 12:23 PM
Allways add a color to your background (the color on the bottom of your gradient). That way you can prevent 2 things.
1) Not having a background on larger displays.
2) Having a white background when the background image fails to load for any reason.

Also when using a gradient which repeats on x-axis, there is no need to make it wide, just shrink it to 1px width - loads faster.

Hope this helped.