left and right text align in li

Discussion in 'HTML' started by frank.vandenbogerd@pandora.be, Dec 14, 2006.

  1. Guest

    Hi,

    how can I do the following :
    http://users.pandora.be/solitaire2/prtscrn.gif

    I should have a list, and in that list have an right and left
    text-align...

    I know I can't use div's in a <li> , but this is what it should do:

    <li><div style="width:20px;text-align:right;color:#66ccff">12 Dec</div>
    Lorem ipsum dolor sit amet</li>

    Is there a (valid) solution?

    Thanks in advance!
    , Dec 14, 2006
    #1
    1. Advertising

  2. Steve Pugh Guest

    wrote:

    > how can I do the following :
    > http://users.pandora.be/solitaire2/prtscrn.gif


    Looks like a table to me.

    > I should have a list, and in that list have an right and left
    > text-align...


    Use a table instead.

    > I know I can't use div's in a <li> ,


    Rubbish. Divs are allowed inside list items.

    > but this is what it should do:


    > <li><div style="width:20px;text-align:right;color:#66ccff">12 Dec</div>
    > Lorem ipsum dolor sit amet</li>


    That's valid but not ideal. What happens when the date is more than
    20px wide? Remember that the user may be using a larger font size than
    you anticipated. And you forgot to set a background-color with your
    color.

    > Is there a (valid) solution?


    Use a table.

    Steve
    Steve Pugh, Dec 14, 2006
    #2
    1. Advertising

  3. Guest

    Actually the real problem is, both <td>'s contain one link : the date &
    the text are one <a href>

    That's why I couldn't split it into 2 div's, or 2 td's...


    Or is there a way?
    , Dec 15, 2006
    #3
  4. Andy Dingley Guest

    wrote:

    > Actually the real problem is, both <td>'s contain one link : the date &
    > the text are one <a href>
    >
    > That's why I couldn't split it into 2 div's, or 2 td's...


    You can split it easily, just use two <a> with the same href values.
    Andy Dingley, Dec 15, 2006
    #4
  5. Guest

    > You can split it easily, just use two <a> with the same href values.

    Yes but the markup of the first a href tag wil nog change if I hover
    over the second one : the markup of both href's-should be
    linke...something I believe is not possible.

    So I thought you could only use one <a href> tag
    , Dec 15, 2006
    #5
  6. wrote:
    >> You can split it easily, just use two <a> with the same href values.

    >
    > Yes but the markup of the first a href tag wil nog change if I hover
    > over the second one : the markup of both href's-should be
    > linke...something I believe is not possible.
    >
    > So I thought you could only use one <a href> tag
    >

    Use CSS and :hover the container element. Note IE will need some help,
    either JavaScript or in a HTA file...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 15, 2006
    #6
  7. Scripsit Andy Dingley:

    > wrote:
    >
    >> Actually the real problem is, both <td>'s contain one link : the
    >> date & the text are one <a href>
    >>
    >> That's why I couldn't split it into 2 div's, or 2 td's...

    >
    > You can split it easily, just use two <a> with the same href values.


    That's bad usability and bad accessibility, especially as regards to
    tabbing. It _doubles_ the number of times you need to press Tab to get to a
    specific link. It also pollutes the list of all links on the page; such a
    list is available to the user in some browsers, and essential to some users.

    I would expect that one could set up one <a> element inside a <td> element,
    with some inner inline markup (probably <span>) inside the <a> element, and
    then set display: block and width: 100% for the <a> element and align the
    inner elements suitably. But I'm now too tired to test it.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Dec 15, 2006
    #7
    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. Kay
    Replies:
    2
    Views:
    7,134
  2. John Salerno

    left and right align on the same line

    John Salerno, Feb 11, 2006, in forum: HTML
    Replies:
    10
    Views:
    11,885
    Jonathan N. Little
    Feb 13, 2006
  3. Paul Lautman

    left align within centre align

    Paul Lautman, Mar 3, 2006, in forum: HTML
    Replies:
    3
    Views:
    558
    Paul Lautman
    Mar 3, 2006
  4. =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=

    Help on table align on left of page vs left hanging indent

    =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=, Jul 10, 2007, in forum: XML
    Replies:
    2
    Views:
    984
    =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=
    Jul 16, 2007
  5. Oran
    Replies:
    2
    Views:
    511
Loading...

Share This Page