Ask Me Help Desk

Ask Me Help Desk (https://www.askmehelpdesk.com/forum.php)
-   Internet & the Web (https://www.askmehelpdesk.com/forumdisplay.php?f=177)
-   -   Div background not covering all text (https://www.askmehelpdesk.com/showthread.php?t=300627)

  • Jan 7, 2009, 06:47 PM
    cogs
    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>
  • Jan 8, 2009, 08:37 AM
    StaticFX

    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.
  • Jan 8, 2009, 08:39 AM
    cogs

    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.
  • Jan 8, 2009, 08:52 AM
    StaticFX

    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">
  • Jan 8, 2009, 02:34 PM
    cogs

    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.
  • Jan 8, 2009, 07:18 PM
    cogs
    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.
  • Jan 8, 2009, 07:39 PM
    cogs

    Here's before:
    http://i42.tinypic.com/14985lv.jpg

    And here's after:
    http://i43.tinypic.com/168gcy1.jpg
  • Jan 9, 2009, 06:33 AM
    StaticFX

    Nice
  • Jan 12, 2009, 12:23 PM
    Artem

    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.

    • All times are GMT -7. The time now is 01:07 PM.