By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,853 Members | 2,007 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,853 IT Pros & Developers. It's quick & easy.

Position Text in Div

P: n/a
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

Sep 28 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
On 2006-09-28, Steve Macleod <st***********@blueyonder.co.ukwrote:
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?
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.
Sep 28 '06 #2

P: n/a
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}

Sep 28 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.