Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   left and right text align in li (http://www.velocityreviews.com/forums/t391815-left-and-right-text-align-in-li.html)

frank.vandenbogerd@pandora.be 12-14-2006 04:28 PM

left and right text align in li
 
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 12-14-2006 05:42 PM

Re: left and right text align in li
 
frank.vandenbogerd@pandora.be 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


frank.vandenbogerd@pandora.be 12-15-2006 08:17 AM

Re: left and right text align in li
 
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 12-15-2006 10:24 AM

Re: left and right text align in li
 

frank.vandenbogerd@pandora.be 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.


frank.vandenbogerd@pandora.be 12-15-2006 12:12 PM

Re: left and right text align in li
 
> 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 12-15-2006 02:27 PM

Re: left and right text align in li
 
frank.vandenbogerd@pandora.be 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

Jukka K. Korpela 12-15-2006 10:28 PM

Re: left and right text align in li
 
Scripsit Andy Dingley:

> frank.vandenbogerd@pandora.be 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/



All times are GMT. The time now is 11:04 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.