On 30/8/07 (02:33) Marcelo said:

>I'm creating a horizontal icon-based menu. Each item has an icon and a
>legend. 

.. / snip / ..

>Being a container, <il> elements will stack over one another. So, I floated
>them left.
>There's a <div> wrapping the <img>. There's another <div> for the legend. I
>let the default block behaviour: They stack ontop of one another, and this
>is what I want since I want the legend to be below the icon.
>I then make the text centered by applying a text-align:center; to the second
>div.
>
>However, wrapping both the image and the text inside an <a>, I've lost the
>default browser behaviour of underlining the text link.
>
>The question is: How can I get this legend link to be underlined like any
>other default link text?
>
>You can see the rendered menu in the attached JPG.

First off Marcello, this list won't accept attachments, so yours just
got stripped away. Much better to give a link to the URL if possible.

Secondly, I'm relatively new to full-blown CSS (as opposed to just
styling text with it) but it seems to me that the extra divs wrapping
each image AND each legend are a rather cumbersome way to build the menu. 

Try just putting your legend text inside the li tags and setting the li
to display: block. Give the list items a size equal to that of the icons
(best to make you icons a standard size to simplify this). Then the
icons can be set as background images for each li (give each li an ID),
whilst the block display setting will make the whole thing clickable,
not just the legend text.

Sorry if this is a bit brief and poorly explained but I'm just running
out to a meeting. Hopefully other, smarter people can fill in the gaps.

Best regards; 
-- 
Rick Lecoat

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to