PDA

Click to See Complete Forum and Search --> : Line up string.

LLIYXER
12-14-2007, 10:01 AM
I have a HTML table with 3 columns. One of the column can have a long string, so it moves to another line.
This string starts from bullet point , something like this:

• This is sentence number one.
• This sentence is number two
and it is very long
• This is sentence number three

So my question is how can I shift it a little bit to the right to be inline with other records?

Thank you
Centauri
12-14-2007, 10:14 AM
list-style-position: outside; on the lists <li> style. This may cause the bullets to be displayed off the left edge of any container (or dissapear in IE), and if so, add left padding to the <ul>.
LLIYXER
12-14-2007, 12:30 PM
list-style-position: outside; on the lists <li> style. This may cause the bullets to be displayed off the left edge of any container (or dissapear in IE), and if so, add left padding to the <ul>.

I should clarify something here. The list is not being coded as a list(<ul><li>), but as regular paragraphs with a dot as the first character.

Thanks again.
WebJoel
12-14-2007, 01:34 PM
Any 'bulleted sentence' should probably warrant an "<ul>", so that the bullets are defined via the tag. 'bullets' are line-item markers, pointing out similar traits or qualities. Again, the defination of a "list" is invoked or implied..

Else, you will need to maybe use a "bullet image" and install it as "background-image:url(image.jpg) no-repeat; padding-left:30px;" . This is a silly way of doing this though..

And, the "padding-left" is to move the text of every new paragraph 30-pixels to the right so as to not overlie upon the 'bullet background image'..

A bonus of using "<ul>" is that you could use a true image as "list-style-image: url(picture.gif). If your web site is about ferrets for instance, a small 'ferret's head icon' could be used, like I did here: http://ca.geocities.com/troublewp3/
Centauri
12-14-2007, 08:38 PM
I should clarify something here. The list is not being coded as a list(<ul><li>), but as regular paragraphs with a dot as the first character.

Ahh, I see. As Joel points out, a list is probably better semantically.

However, there is a way to do this with your situation. If you put a left margin on the text and a negative text indent to match, you can simulate what you want - play with the size of the margin / indent to achieve the look. Sizes in ems would be better here to allow for text resizing.
LLIYXER
12-15-2007, 03:28 AM
Ahh, I see. As Joel points out, a list is probably better semantically.

However, there is a way to do this with your situation. If you put a left margin on the text and a negative text indent to match, you can simulate what you want - play with the size of the margin / indent to achieve the look. Sizes in ems would be better here to allow for text resizing.

Can you put some examples please?
Centauri
12-15-2007, 05:18 AM
Here is a quick example :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
td.bullet {
padding-left: 1em;
text-indent: -0.8em;
}
-->
</style>
</head>

<body>
<table width="200" border="0">
<tr>
<td class="bullet">• This is sentence number one.</td>
</tr>
<tr>
<td class="bullet"> • This sentence is number two <br>
and it is very long</td>
</tr>
<tr>
<td class="bullet"> • This is sentence number three</td>
</tr>
</table>

</body>
</html>
The left padding spaces the text from the left edge, while the negative text indent pulls the first line back.