473,321 Members | 1,667 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,321 software developers and data experts.

Position Text in Div

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
2 4530
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: discomiller | last post by:
Mario Mueller: Hello *, radiobuttons belong to other radiobuttons by the "name="any_value"" attribut. Thats a fakt. I got the following XML:...
14
by: Zenobia | last post by:
Hello folks, Is it possible to position an item within a <td> element? For instance see below. The table has multiple rows, one for each database record. Each row has 3 hrefs associated with it...
1
by: HolyCow | last post by:
I've laid out a web page, and it looks exactly how I like it. But I want it to behave well should the user decide to increment the size of the text. The layout is basically a solid colored bar...
7
by: DaWoE | last post by:
Hi, I want to place a div centered of another div in IE. I get this to work in Mozilla, but not in IE. The code i use for mozilla is the following : <html> <head> <style type="text/css">
2
by: Al | last post by:
Hi, Is there any way to replace a character at a position? Without cussing the RichTextBox to scroll. For example the following code will replaces the by removing but the side effect is that it...
8
by: Edward | last post by:
I used to do this all the time in HTML-table layouting. How do I do this in CSS? -------------------------------------------------- <table width="400px"> <tr> <td bgcolor="beige">one line of...
4
by: Petra Meier | last post by:
Hi, I use the common code to determine the position of an element getTop = function(o){ var nTop = null; if(o){ do{ nTop += o.offsetTop;
2
by: agbee1 | last post by:
Hello: I've finally made the effort to ween myself from overly using tables and use CSS for my positioning. However, I am having a problem with my navigational menu properly aligning in Firefox,...
0
by: crisscross27 | last post by:
Hi, I found a page called "myflashfetish" where you chan choose mp3 players for my space, well the problem is this, I wanted to place 2 or more players in myspace in a particular place, I read...
10
by: VividWeb | last post by:
Hi. I am relatively new to CSS and HTML but have a basic understanding of most things. One of my backgrounds is not positioning correctly in IE 7 or AOL. The background behind the content...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.