justify <li> list to the right

Discussion in 'HTML' started by Norman, Mar 6, 2007.

  1. Norman

    Norman Guest

    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
    Norman, Mar 6, 2007
    #1
    1. Advertising

  2. 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!

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Mar 6, 2007
    #2
    1. Advertising

  3. Norman wrote:

    > 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!
    Toby A Inkster, Mar 6, 2007
    #3
  4. Norman

    Norman Guest

    On Mar 6, 12:17 pm, "Jukka K. Korpela" <> wrote:
    > 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!
    >
    > --
    > Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/


    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
    Norman, Mar 6, 2007
    #4
  5. 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; }

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Mar 6, 2007
    #5
  6. Jukka K. Korpela wrote:

    > 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!
    Toby A Inkster, Mar 6, 2007
    #6
  7. Norman

    Norman Guest

    On Mar 6, 1:18 pm, "Jukka K. Korpela" <> wrote:
    > 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 thehttp://uktravellist.infosite 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; }
    >
    > --
    > Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/



    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
    Norman, Mar 6, 2007
    #7
  8. 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.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    To join the Clueless Club, just quote this sig.
    Jukka K. Korpela, Mar 6, 2007
    #8
  9. Jukka K. Korpela wrote:
    > 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.
    >
    >


    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.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 6, 2007
    #9
  10. Norman

    Norman Guest

    On Mar 6, 2:58 pm, "Jukka K. Korpela" <> wrote:
    > 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.
    >
    > --
    > Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/
    > To join the Clueless Club, just quote this sig.


    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, Mar 6, 2007
    #10
  11. Norman

    Norman Guest

    On Mar 6, 3:21 pm, "Jonathan N. Little" <> wrote:
    > Jukka K. Korpela wrote:
    > > 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.

    >
    > 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.
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


    Thank you Jonathan,

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

    Have a nice day.

    Cheers to all.

    Norman
    Norman, Mar 6, 2007
    #11
  12. Norman wrote:
    > On Mar 6, 3:21 pm, "Jonathan N. Little" <> wrote:
    >> Jukka K. Korpela wrote:
    >>> 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.

    >> 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.


    >
    > 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.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 6, 2007
    #12
  13. Norman

    dorayme Guest

    In article <8a170$45ed7fe5$40cba7b3$>,
    "Jonathan N. Little" <> wrote:

    > 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.

    --
    dorayme
    dorayme, Mar 6, 2007
    #13
  14. dorayme wrote:
    > In article <8a170$45ed7fe5$40cba7b3$>,
    > "Jonathan N. Little" <> wrote:
    >
    >> 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.
    >

    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.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 6, 2007
    #14
  15. Norman

    dorayme Guest

    In article <9568b$45edd37a$40cba7b3$>,
    "Jonathan N. Little" <> wrote:

    > > 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!


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

    --
    dorayme
    dorayme, Mar 6, 2007
    #15
  16. Norman

    Andrew Guest

    On Wed, 07 Mar 2007 07:09:54 +1100, dorayme wrote:

    > 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

    --
    A: Because it disturbs the logical flow of the message.
    Q: Why is top posting frowned upon?
    Andrew, Mar 6, 2007
    #16
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tina

    Right Justify Hyperlink Buttons?

    Tina, Dec 8, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    596
    G Dean Blake
    Dec 9, 2004
  2. John Wilson

    right justify a column?

    John Wilson, Jun 21, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    655
    John Wilson
    Jun 22, 2005
  3. John Wilson

    Right justify text in textbox in web page

    John Wilson, Oct 8, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    6,482
    John Wilson
    Oct 8, 2005
  4. How to right justify a column

    , Jul 23, 2003, in forum: C Programming
    Replies:
    2
    Views:
    10,549
  5. Replies:
    1
    Views:
    1,088
    Beauregard T. Shagnasty
    May 1, 2007
Loading...

Share This Page