justify <li> list to the right

[Norman]

hello,

i have an <li> list with the following css

#leftcontent ul li {
background-color:transparent;
list-style: none;
list-style-position: outside;
}

the problem which i cannot see how to solve is that if the list item
wraps in two line i get the following effect:

text text text
second line text

next next next
second next next

....

how can i modify the css so that the text aligns under the text rather
then the bullet point?

i have tried both

list-style-position: outside;
list-style-position: inside;

but nothing happens?!

cheers

norman

 

[Jukka K. Korpela]

Scripsit Norman:

#leftcontent ul li {
background-color:transparent;
list-style: none;
list-style-position: outside;
}

The identifier "leftcontent" is not semantic but reflects the intended
rendering, so it does not fit into the idea of separating content from
presentation.

Setting "background-color" without setting "color "is pointlessly risky,
especially since "transparent" is the default value.

Setting "list-style-position" is generally pointless after setting
"list-style" to "none". What does it matter where you position a nonexistent
marker?

the problem which i cannot see how to solve is that if the list item
wraps in two line i get the following effect:

text text text
second line text

Huh? This, together with the Subject-line, suggests that you are doing
something that supposedly aligns to the right. What else is there that you
are not telling us? Besides the URL, that is.

how can i modify the css so that the text aligns under the text rather
then the bullet point?

What bullet point? You just said list-style: none.

i have tried both

list-style-position: outside;
list-style-position: inside;

but nothing happens?!

Miraculously, the nonexistent bullet does not care whether it is outside or
inside! Oh, you nonchalant universe! What a Weltschmerz we must experience!

 

[Toby A Inkster]

list-style-position: outside;

That *ought* to do the trick.

list-style: none;

What happens if you remove this? Does it fix your alignment issue? (Yes, I
know it will add the bullet back in, but does it fix the alignment too?)

cheers

URL?

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!

 

[Norman]

Scripsit Norman:


The identifier "leftcontent" is not semantic but reflects the intended
rendering, so it does not fit into the idea of separating content from
presentation.

Setting "background-color" without setting "color "is pointlessly risky,
especially since "transparent" is the default value.

Setting "list-style-position" is generally pointless after setting
"list-style" to "none". What does it matter where you position a nonexistent
marker?



Huh? This, together with the Subject-line, suggests that you are doing
something that supposedly aligns to the right. What else is there that you
are not telling us? Besides the URL, that is.


What bullet point? You just said list-style: none.




Miraculously, the nonexistent bullet does not care whether it is outside or
inside! Oh, you nonchalant universe! What a Weltschmerz we must experience!

thanks for your reply, i have removed the 'useless' entries from the
css.

i don't have a url to show as this is on my local development machine,
i am currently re-working the http://uktravellist.info site at the
moment the live site uses tables to display the left navigation, i am
replacing it with a list.

my template file has this entry for the leftcolumn

<div id="container">
<div id="left">
<div id="leftcontent">
<ul stl:repeat="topic topics">
<li>
<a href="${topic/href}">${topic/title}</a>
</li>
</ul>
</div><!-- /leftcontent -->


this is why i use the identifier "leftcontent"

so i guess to rephrase my question

on a list-style: none, how can i align the wrapped text so that it
sits under the first line?

cheers

norman

 

[Jukka K. Korpela]

Scripsit Norman:

thanks for your reply

By a comprehensive quotation, you indicate lack of comprehensive reading.

i don't have a url to show as this is on my local development machine,

If you want help from the public, you need to give the public a working
chance to help you. Minimally this includes the small trouble of uploading
your demo page onto a web server.

i am currently re-working the http://uktravellist.info site at the
moment the live site uses tables to display the left navigation, i am
replacing it with a list.

I'd suggest learning how to use normal mixed case and normal punctuation in
simple texts before trying to get any further in the path of authoring.

so i guess to rephrase my question

on a list-style: none, how can i align the wrapped text so that it
sits under the first line?

The question is still obscure, but it sounds like you would actually want to
have the first line in a list item indented more than the other lines. This
would be e.g.

ul { list-style-type: none; }
li { text-indent: 1em; }

(without considering the overall left margins of the <li> and <ul> elements,
which are a distinct and easily manageable issue)

or - perhaps somewhat clumsier but possibly more robustly (browsers have
some bugs with text-indent in printing) - with the second rule replaced by

li:first-letter { padding-left: 1em; }

 

[Toby A Inkster]

The question is still obscure, but it sounds like you would actually want to
have the first line in a list item indented more than the other lines.

No, I think the opposite is the case.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!

 

[Norman]

Scripsit Norman:


By a comprehensive quotation, you indicate lack of comprehensive reading.


If you want help from the public, you need to give the public a working
chance to help you. Minimally this includes the small trouble of uploading
your demo page onto a web server.


I'd suggest learning how to use normal mixed case and normal punctuation in
simple texts before trying to get any further in the path of authoring.



The question is still obscure, but it sounds like you would actually want to
have the first line in a list item indented more than the other lines. This
would be e.g.

ul { list-style-type: none; }
li { text-indent: 1em; }

(without considering the overall left margins of the <li> and <ul> elements,
which are a distinct and easily manageable issue)

or - perhaps somewhat clumsier but possibly more robustly (browsers have
some bugs with text-indent in printing) - with the second rule replaced by

li:first-letter { padding-left: 1em; }

Here is the URL

http://uktravellist.info/information/template.xhtml.en

Any advise on how to make the left navigation aligned when wrapped
will be much appreciated.

Cheers

Norman

 

[Jukka K. Korpela]

Scripsit Norman:

http://uktravellist.info/information/template.xhtml.en

You have _far_ worse problems than you have mentioned so far. Calling the
page appearance crap would be an insult to crap, to put it mildly. For
example, horrendously small serif text in light blue on white background is
basically criminal, or should be declared criminal. Consider learning the
basics of web design from a good book.

Any advise on how to make the left navigation aligned when wrapped
will be much appreciated.

It's _really_ a ridiculously irrelevant issue before some basic problems
have been solved, and you _still_ not saying what you want (the text _is_
aligned, really), but what you want is probably the thing that _is_
achievable using the properties I mentioned. Would it help if I quoted your
quotation of them? You might want to use negative rather than positive first
line indentation, but I'm really not very experienced in mind reading.

 

[Jonathan N. Little]

Scripsit Norman:


You have _far_ worse problems than you have mentioned so far. Calling
the page appearance crap would be an insult to crap, to put it mildly.
For example, horrendously small serif text in light blue on white
background is basically criminal, or should be declared criminal.
Consider learning the basics of web design from a good book.

Totally agree, you have a real mess here guy! If you have problems you
need to simplify to isolate...it looks like you have
DIViditous....overly complicated.

But back you the *one* problem which you are asking about. The problem
is *not* with your DIV, UL, or LI! But a padding issue your can see by
adding temporarily to your style:

#leftcontent ul li a {
background-color: #ffe;
}

And you will discover the source of your (this) problem.

 

[Norman]

Scripsit Norman:


You have _far_ worse problems than you have mentioned so far. Calling the
page appearance crap would be an insult to crap, to put it mildly. For
example, horrendously small serif text in light blue on white background is
basically criminal, or should be declared criminal. Consider learning the
basics of web design from a good book.


It's _really_ a ridiculously irrelevant issue before some basic problems
have been solved, and you _still_ not saying what you want (the text _is_
aligned, really), but what you want is probably the thing that _is_
achievable using the properties I mentioned. Would it help if I quoted your
quotation of them? You might want to use negative rather than positive first
line indentation, but I'm really not very experienced in mind reading.

Thanks for your comments, as I said previously this is only a draft
and I am still working on it, I hope you don't get too depressed about
it on my account

I will look at the negative line indentation, but the point of my post
(perhaps not very elegantly put), was why the wrapped text goes under
the non-existent bullet?

Cheers

Norman

 

[Norman]

Totally agree, you have a real mess here guy! If you have problems you
need to simplify to isolate...it looks like you have
DIViditous....overly complicated.

But back you the *one* problem which you are asking about. The problem
is *not* with your DIV, UL, or LI! But a padding issue your can see by
adding temporarily to your style:

#leftcontent ul li a {
background-color: #ffe;

}

And you will discover the source of your (this) problem.

Thank you Jonathan,

It was the padding in the ul li a that was the cause.

Have a nice day.

Cheers to all.

Norman

 

[Jonathan N. Little]

It was the padding in the ul li a that was the cause.

Yes it was. But as both Jukka and I have said, it is the least of your
problems. You need to simplify. No need for so many wrapping DIVs. Strip
your markup up down to the bare essentials and learn about about CSS and
*selectors*. Development will be much easier in the long run.

 

[dorayme]

Yes it was. But as both Jukka and I have said, it is the least of your
problems.

So here is this poor guy, Norman, an innocent, just walking down
the street, his sick mum has asked him to go beg for some pennies
to buy milk so she can dip the little bit of bread they have left
to help her maintain her strength given she has trouble
swallowing dry things. But, uh oh! Along the way, poor Norman
passes a lane where a breakaway group of fanatic priests are
lurking about. Poor Norman, in his innocence, asks for a penny or
two...

"A penny or two! For your sick mother! Why is she sick? Have you
got a job? Why not? Why can't she swallow? Does she smoke? ..."

After a bit of of gratuitous violence to him, a few kicks and
stuff, not too hard and avoiding the head, one of them throws him
a little crumb. Norman, who knows how he suffered inside his
soul, shows grace under pressure (to say the least) but he gets a
parting kick for good measure.

All for his own good of course.

 

[Jonathan N. Little]

So here is this poor guy, Norman, an innocent, just walking down
the street, his sick mum has asked him to go beg for some pennies
to buy milk so she can dip the little bit of bread they have left
to help her maintain her strength given she has trouble
swallowing dry things. But, uh oh! Along the way, poor Norman
passes a lane where a breakaway group of fanatic priests are
lurking about. Poor Norman, in his innocence, asks for a penny or
two...

"A penny or two! For your sick mother! Why is she sick? Have you
got a job? Why not? Why can't she swallow? Does she smoke? ..."

After a bit of of gratuitous violence to him, a few kicks and
stuff, not too hard and avoiding the head, one of them throws him
a little crumb. Norman, who knows how he suffered inside his
soul, shows grace under pressure (to say the least) but he gets a
parting kick for good measure.

All for his own good of course.

Hey, I thought I have him good advice! Yes well all had to start
somewhere and a newbie error is often to over-wrap stuff with DIViditus.
I wish someone tipped me when I started, world have saved a lot of time
and I find that I am still paring down my markup.

Norman, honestly, learn what can be self-contained block units, like
ULs. Trim out extra wrapping DIVs and study CSS with respect to
selectors (may time your don't need so many classes) and you will find
you will run into less problems.

 

[dorayme]

After a bit of of gratuitous violence to him, a few kicks and
stuff, not too hard and avoiding the head, one of them throws him
a little crumb. Norman, who knows how he suffered inside his
soul, shows grace under pressure (to say the least) but he gets a
parting kick for good measure.

All for his own good of course.

Hey, I thought I have him good advice![/QUOTE]

The story was not about the good advice. It was about the
institutionalised violent method of imprinting it on a novice
monk. <g>

 

[Andrew]

So here is this poor guy, Norman, an innocent, just walking down
the street, his sick mum has asked him to go beg for some pennies
to buy milk so she can dip the little bit of bread they have left
to help her maintain her strength given she has trouble
swallowing dry things. But, uh oh! Along the way, poor Norman
passes a lane where a breakaway group of fanatic priests are
lurking about. Poor Norman, in his innocence, asks for a penny or
two...

"A penny or two! For your sick mother! Why is she sick? Have you
got a job? Why not? Why can't she swallow? Does she smoke? ..."

After a bit of of gratuitous violence to him, a few kicks and
stuff, not too hard and avoiding the head, one of them throws him
a little crumb. Norman, who knows how he suffered inside his
soul, shows grace under pressure (to say the least) but he gets a
parting kick for good measure.

Hi dorayme,

You, Norman and others in alt.html might be interested in a 'Rough
Justice' page that I am currently researching while I should be doing
other things:

http://people.aapt.net.au/~adjlstrong/rough_justice.html

My all time hero is Neal on alt.html.critique

Andrew