Newbie CSS - how to make wrapped text indent?
Govinda
I am slowly learning css as necessary to solve real work issues (not
as fast as if I studied it like a school subject)... and I seem
especially bull-headed to grok what are undoubtedly very basic
principles. Like this one keeps coming up and I want to know how to
it PROPERLY:
I have a list where the text in a list item may or may not wrap
depending on how wide is the user's window. I want any text that does
wrap to be indented by an amount I can define/change. Here is an
example of why:
say I have the <li>'s text like this:
.................HeadLine1 - now for some long-winded Subead1 about
that
I want it that in case the user's window is to narrow to keep all of
that on one line, then my css will effectively wrap it like this:
.................HeadLine1 - now for some long-winded Subead1 about
that
and NOT like this:
.................HeadLine1 - now for some long-winded Subead1 about
that
This is a breeze with two adjacent table cells in the same row... the
first w/right alignment and the second w/left alignment. But I want
to do it w/css to get off my old <table> dependence.
Would your css suggestion be the same for any <div>'s text the same as
a <li>'s? I need to do this in both elements.
I appreciate any guidance. Thanks,
-Govinda
klan...@gmail.com
>I have a list where the text in a list item may or may not wrap
>depending on how wide is the user's window. I want any text that does
>wrap to be indented by an amount I can define/change. Here is an
>example of why:
>
>say I have the <li>'s text like this:
>.................HeadLine1 - now for some long-winded Subead1 about
>that
>
>I want it that in case the user's window is to narrow to keep all of
>that on one line, then my css will effectively wrap it like this:
>.................HeadLine1 - now for some long-winded Subead1 about
>that
>
>and NOT like this:
>.................HeadLine1 - now for some long-winded Subead1 about
>that
>
>This is a breeze with two adjacent table cells in the same row... the
>first w/right alignment and the second w/left alignment. But I want
>to do it w/css to get off my old <table> dependence.
>
>Would your css suggestion be the same for any <div>'s text the same as
>a <li>'s? I need to do this in both elements.
Take a look at the text-indent property of CSS. It will indent
the first line of an element (li, div, whatever) by your desired
amount. In order to achieve what you want, you can use a
negative measurement for the indentation:
li {text-indent: -50px;}
This will extend the text leftward by 50px rather than indenting
it. You will likely need to compensate for this by giving the
<li> some left-padding. Experiment with different values.
Hope I understood what you were asking for.
Ken
--
Simple Lives Web Design
http://simplelives.com
Govinda
> the first line of an element (li, div, whatever) by your desired
> amount. In order to achieve what you want, you can use a
> negative measurement for the indentation:
>
> li {text-indent: -50px;}
>
> This will extend the text leftward by 50px rather than indenting
> it. You will likely need to compensate for this by giving the
> <li> some left-padding. Experiment with different values.
>
> Hope I understood what you were asking for.
>
> Ken
It is squirrelly.
...kind of a relief in a way... in that css does not seem to be so
precise as one could be led to believe... So I don't feel like such
an idiot for not beating my presentation into shape right off the bat.
Govinda
> ...kind of a relief in a way... in that css does not seem to be so
> precise as one could be led to believe... So I don't feel like such
> an idiot for not beating my presentation into shape right off the bat.
that that precision does not necessarily come as intuitively nor as
easily as one might think at first pass. Blah, blah, blah...
Thanks to Ken again, and to all who watch, know, and remain silent.
-G