Previous Message
Next Message

Client wants "button" effect in (css) Nav Bar

Sent by Martin Heiden on 17 December 2004 08:08


Hi!

T> Do I assign background images on the anchors? Anyone have any ideas how I
T> could make this look more like buttons? Here is the site.

You could do it like this:

<a href="#" class="leftupper"><span class="leftlower"><span class="rightupper"><span
class="rightlower">Text</span></span></span></a>

CSS:
a.leftupper {
        background: transparent url(/img/button_leftupper.gif) top left no-repeat;
}

a.leftupper span {
        display: block;
        color: #ffffff;
}

a.leftupper .leftlower {
        background: transparent url(/img/button_leftlower.gif) bottom left no-repeat;
        padding: 0 0 0 3px;
}

a.leftupper .rightupper {
        background: transparent url(/img/button_rightupper.gif) top right no-repeat;
}

a.leftupper .rightlower {
        background: transparent url(/img/button_rightlower.gif) bottom right no-repeat;
        padding: 1px 5px 2px 2px;
        text-align: center;
        min-width: 3em;
}

Make the backgroundimage much larger than you need it and slice it
into four pieces. This way you could size the whole page in ems and
your buttons will fit even if the user resizes the font.

regards

  Martin



______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: