Ask Experts Questions for FREE Help !
Ask
    cogs's Avatar
    cogs Posts: 415, Reputation: 27
    Full Member
     
    #1

    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>
    StaticFX's Avatar
    StaticFX Posts: 943, Reputation: 74
    Senior Member
     
    #2

    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's Avatar
    cogs Posts: 415, Reputation: 27
    Full Member
     
    #3

    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's Avatar
    StaticFX Posts: 943, Reputation: 74
    Senior Member
     
    #4

    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's Avatar
    cogs Posts: 415, Reputation: 27
    Full Member
     
    #5

    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's Avatar
    cogs Posts: 415, Reputation: 27
    Full Member
     
    #6

    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's Avatar
    cogs Posts: 415, Reputation: 27
    Full Member
     
    #7

    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's Avatar
    StaticFX Posts: 943, Reputation: 74
    Senior Member
     
    #8

    Jan 9, 2009, 06:33 AM

    Nice
    Artem's Avatar
    Artem Posts: 61, Reputation: 5
    Junior Member
     
    #9

    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.

Not your question? Ask your question View similar questions

 

Question Tools Search this Question
Search this Question:

Advanced Search

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