|
|
|
|
Full Member
|
|
Jan 7, 2009, 06:47 PM
|
|
Div background not covering all text
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
Code:
<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>
|
|
|
Senior Member
|
|
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.
|
|
|
Full Member
|
|
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.
|
|
|
Senior Member
|
|
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">
|
|
|
Full Member
|
|
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.
|
|
|
Full Member
|
|
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.
|
|
|
Full Member
|
|
Jan 8, 2009, 07:39 PM
|
|
|
|
|
Senior Member
|
|
Jan 9, 2009, 06:33 AM
|
|
Nice
|
|
|
Junior Member
|
|
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.
|
|
Question Tools |
Search this Question |
|
|
Add your answer here.
Check out some similar questions!
Excel 15 digit issue, tried converting to text, text to column feature negates fix
[ 6 Answers ]
I have the following numbers that exceed 15 characters that needs to be split into its own columns.
Down the road, there would be thousands of such rows of data with the first couple set of unique numbers.
890432453253208820,5004500558,05CC,1,0,0,0,0,0,0, 0000,5.0000,2007-01-11...
Scanner that converts text image to real text
[ 1 Answers ]
Dear Helpdesk advisors,
I look for a scanner,that reads any character from paper,converts it to text and has interface with Microsoft software.Usage area: reads product name , unit of product bought, price and other sort of text info.The scanner is able to convert printed and possibly...
Covering up old and new scars
[ 2 Answers ]
I have 2 scars on my left leg that are a light purple and light reddish color and would like to know what kind of make up or concealer would help to make them less apparent. {scars are about 18 years old} I also have some new scars that are from having skin tags removed 4 months ago. They are light...
How To Add Text Background In Dreamweaver?
[ 2 Answers ]
Hi,
I created a website which has a very colourful background image so when I put text on it you cannot read the text properly. I used to use a program called Namo Web Builder and in this there was a function which put a background around the text you was typing. Check out...
Covering carpet
[ 3 Answers ]
I am moving into a new apartment and I have carpet phobia (fear of damaging carpet and having them take it out of my deposit). Obviously I cannot tear the carpet out, so I want to cover it from wall to wall. Only in the living room. So I am thinking of some sort of carpet protector that will last...
View more questions
Search
|