Sent by Charles Wyke-Smith on 28 February 2005 22:10
Simon,
http://www.bbd.com/css_discuss_demo/text_indent_floats.htm
....and here's an alternative approach that lines up nicely with any font.
Basically, you create one element for the date and one for the other text
and float both of them. It's the same idea as when you use floats to make a
two column layout. You could experiment with fixing the width of the span
and align the text within it right or left to get some layout consistency
between items with different lengths of date text.
Charlie
"if it was easy, everyone would do it..."
-------------------------
Charles Wyke-Smith
Principal, BBd
707 552 2225 work
707 552 2226 fax
707 567 BBD1 (2231) cell
[EMAIL-REMOVED]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Text indent demo</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css">
body {font-family:verdana, arial, sans-serif; font-size:1em; }
span {float:left;}
p {float:left; margin-bottom:1.5em;}
</style>
</head>
<body>
<span>10/10/2005 - </span><p>Here is some demo text to show the
simulated text indent created by floating two elements. Here is some demo
text to show the simulated text indent created by floating two elements.
Here is some demo text to show the simulated text indent created by floating
two elements.</p>
<span>10/11/2005 - </span><p>Here is some demo text to show the
simulated text indent created by floating two elements. Here is some demo
text to show the simulated text indent created by floating two elements.
Here is some demo text to show the simulated text indent created by floating
two elements.</p>
</body>
</html>
-----Original Message-----
From: [EMAIL-REMOVED]
[EMAIL-REMOVED]] On Behalf Of Simon Scudder
Sent: Monday, February 28, 2005 11:17 AM
To: [EMAIL-REMOVED]
Subject: [css-d] Help with text indent
I´m trying to get the following effect in a list item:
10/10/2005 - bla bla bla bla bla bla bla bla bla bla bla ...
And have the text wrap, so that the next line starts under the first "bla",
ike this (this will only work with a fixed-width font):
10/10/2005 - bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla.
I've tried text-indent with negative values, but it throws the whole list
off screen.
I appreciate any pointers in the right direction.
Simon Scudder
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
