Dreamweaver - Menu - CSS Padding for aligned right link

Author

Menu - CSS Padding for aligned right link

dburke91980

2004-09-15, 7:15 pm

http://www.saintelizabethhighschool.com/menu.html

Look at the page above. I'd like to have the black background extend all the
way to the vertical red line, but still maintain the 8px padding/margin from
the right.

The relevant CSS is embedded. Note the two-line menu item should also align
right with 8px padding.

Has anyone done this? Who would like to be my hero du jour? (If you'd
rather, convert the menu into a ul with text-decoration:none.)

much appreciated!

Baxter

2004-09-15, 11:51 pm

..menu1 A:hover {
COLOR: #cc0033;
BACKGROUND-COLOR: #000000;
background-position: right;

then reapply the menu1 style
Dave
"dburke91980" <webforumsuser@macromedia.com> wrote in message
news:ci4gg8$8s8$1@forums.macromedia.com...
> http://www.saintelizabethhighschool.com/menu.html
>
> Look at the page above. I'd like to have the black background extend all
the
> way to the vertical red line, but still maintain the 8px padding/margin
from
> the right.
>
> The relevant CSS is embedded. Note the two-line menu item should also
align
> right with 8px padding.
>
> Has anyone done this? Who would like to be my hero du jour? (If you'd
> rather, convert the menu into a ul with text-decoration:none.)
>
> much appreciated!
>

Osgood

2004-09-15, 11:51 pm

Should be

#menu a:active {
color: #CC0033;
}

not

#menu1 a:active {
color: #CC0033;
}

Osgood

2004-09-15, 11:51 pm

That wont work because the 8px padding has actually been set on the <td>
cells, which the <a> links are in. The only way to get the black
background to butt up to the red vertical line is remove it from the
<td> and put it on the <a> tag itself.

Baxter wrote:

> .menu1 A:hover {
> COLOR: #cc0033;
> BACKGROUND-COLOR: #000000;
> background-position: right;
>
> then reapply the menu1 style

dburke91980

2004-09-15, 11:51 pm

First (and second) response work great. Thanks!

Osgood

2004-09-15, 11:51 pm

dburke91980 wrote:

> First (and second) response work great. Thanks!

by 'and second' I assume you mean this?

..menu1 a {
display: block;
text-decoration: none;
padding:0 8px 0 0;

}

if so you'll have to also remove width: 100%, which I have done above.

if by 'and second' you mean this I cant honestly see how, at least it
doesnt for me on Mac.

..menu1 A:hover {
COLOR: #cc0033;
BACKGROUND-COLOR: #000000;
background-position: right;

dburke91980

2004-09-15, 11:51 pm

Yes, by second, I mean:

#menu a:active {
color: #CC0033;
}

Sorry that wasn't clearer.

dburke91980

2004-09-15, 11:51 pm

Interesting IE phenomenon... (IE6, XP Pro)

Check out http://www.saintelizabethhighschool.com/menu2.html

Mozilla obeys the display:block on hover. IE only obeys the display:block on
the first element 'Admissions', not on any other element, not on the left side
or the right side padding.