Position Text in Div

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Steve Macleod - 28 Sep 2006 12:04 GMT

Hi, I am attempting to write a generic class for a warning box. The
class looks like this:

.warningBox {
    background-image:url(images/co_images/warning_flag.gif);
    background-repeat:no-repeat;
    text-indent:15px;
    border: solid 1px silver; background-color:rgb(255,255,225);
    background-color:rgb(255,255,225);
    background-position:2px 2px;
    padding:2px;
    overflow:visible;
    line-height:inherit;
    }

The div looks like this:

    <div class="warningBox" style="width:250px">
    test warning dialog box test warning dialog box test warning dialog
    </div>

The thing is, the "text-indent" property indents the first line of text
so that it is padded to the left, avoiding the small (12x12) background
image. This is fine, but all subsequent lines of text appear
non-indented. Is there any way to indent ALL lines of text?

Many thanks

Reply to this Message

Ben C - 28 Sep 2006 13:16 GMT

> Hi, I am attempting to write a generic class for a warning box. The
> class looks like this:
[quoted text clipped - 21 lines]
> image. This is fine, but all subsequent lines of text appear
> non-indented. Is there any way to indent ALL lines of text?

You could make the div a list-item, and give it:

list-style-position: outside;
list-style-image: url(images/co_images/warning_flag.gif);

Precisely where the image goes is UA dependent, but it ought to put it
somewhere sensible.

Otherwise make both the image and the warningBox div float: left.

Reply to this Message

Steve Macleod - 28 Sep 2006 23:52 GMT

Thanks for the reply. The purpose was mainly to keep markup as
explanitory and simple as possible. I ended up using:

<div class="warningBox" style="width:250px">
<p>test warning dialog box test warning dialog box test warning
dialog</p>
</div>

with:

.warningBox {
    background-image:url(images/co_images/warning_flag.gif);
    background-repeat:no-repeat;
    border: solid 1px silver; background-color:rgb(255,255,225);
    background-color:rgb(255,255,225);
    background-position:2px 2px;
    padding:2px;
    overflow:visible;
    line-height:inherit;
    }
.warningBox p {padding-left:20px}

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / September 2006

Position Text in Div