Need CSS help!

I want to build a CSS driven nav.. basically href links that have a dotted
line under each item, and the entire "button" (not sure if I should make
that a table cell or what) changes color appropriately.. I can set DW so
that the href text changes color, but not the entire space around it..
(thinking more that tables would be the way to go, but then EVERY table on
the page would suffer that affliction).. help????

On Tue 09 Nov 2004 04:16:40p, _Adrian wrote in macromedia.dreamweaver:

I want to build a CSS driven nav.. basically href links that have a
dotted line under each item, and the entire "button" (not sure if I
should make that a table cell or what) changes color appropriately.. I
can set DW so that the href text changes color, but not the entire
space around it..

Set display to block in css:

a {
display : block ;
....
}

For the dotted underline, you need to set text decoration to none, and the
bottom margin to dashed:

a {
text-decoration: none;
margin-bottom: 1px dashed lime;
}

However, this conflicts with your earlier desire to make the entire
container for the link clickable. It will make the bottom margin of the
entire block a dashed line, not just the space under the linked text.

Thats fine Joe.. let me give this a shot.. thx!

"Joe Makowiec" <webmaster (AT) munged (DOT) brunswicklibrary.invalid> wrote

On Tue 09 Nov 2004 04:16:40p, _Adrian wrote in macromedia.dreamweaver:

I want to build a CSS driven nav.. basically href links that have a
dotted line under each item, and the entire "button" (not sure if I
should make that a table cell or what) changes color appropriately.. I
can set DW so that the href text changes color, but not the entire
space around it..

Set display to block in css:

a {
display : block ;
...
}

For the dotted underline, you need to set text decoration to none, and the
bottom margin to dashed:

a {
text-decoration: none;
margin-bottom: 1px dashed lime;
}

However, this conflicts with your earlier desire to make the entire
container for the link clickable. It will make the bottom margin of the
entire block a dashed line, not just the space under the linked text.

Hmm.. the block display works alright.. though its only relative to the
text and not the entire space (cell?).. and am not getting my bottom margin
dotted.. will have to research further...

ah! Now *that* makes sense..

This works great Joe, but I'm wondering now if there's a way to have a
secondary <a> reference in my style sheet that doesn't use the block
property, while not screwing up the existing <a> CSS?

On 10 Nov 2004 in macromedia.dreamweaver, _Adrian wrote:

This works great Joe, but I'm wondering now if there's a way to have a
secondary <a> reference in my style sheet that doesn't use the block
property, while not screwing up the existing <a> CSS?

Quoting Murray:

Pseudo-classes and container styles are what you need - here are some
tutorials.
http://www.mako4css.com
http://www.thepattysite.com/linkstyles1.cfm
http://www.projectseven.com/tutorials/pseudoclasses/index.htm

--
Joe Makowiec
http://makowiec.net/
Email: http://makowiec.net/email.php

Hello, Oops. That commented fix I wrote in my previous post (a {height:1em;} )
was meant to be 'in addition to' the display:block info and the demo code
already mentioned. Sorry for any confusion. There's an IE6 (PC) bug with link
boxes. For example, in the demo code, only the first cell is clickable. The
next cell with the link and the div with the link in it are not in IE6. They
are, however, in FF. The commented fix takes care of this bug. Without that
fix, you could make all the cells with links in them clickable by adding a
width to the A style, but that gives you box model problems that could change
the positioning x-browser. Here's some more info on it:
http://www.projectseven.com/tutorials/css/uberlinks/index.htm Take care, Tim