left and right text align in li

[frank.vandenbogerd]

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!

 

[Steve Pugh]

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

 

[frank.vandenbogerd]

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?

 

[Andy Dingley]

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.

 

[frank.vandenbogerd]

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

 

[Jonathan N. Little]

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

 

[Jukka K. Korpela]

Scripsit Andy Dingley:

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.