[thelist] CSS <UL> background corners part 3
Andrew
andrew at humanbehaviour.co.uk
Wed Mar 10 08:38:40 CST 2004
This is becoming very tedious and annoying, I have read the article
http://www.complexspiral.com/publications/rounding-tabs/
which is fairly clear however what is meant by this >>> At the time this article
was written, there was no way in CSS to assign more than one background image to
a given element.
Is it possioble to have 2 different images assigned to the same element?
Somehow I doubt it.
I am failing miserably to get a left corners and right corners image attributed
to each <LI> IU can get one or the other but not both :(
at the moment I have right so left as well would be nice :) this is the code I
have ( a bit of a mess sorry guys)
Andrew
#secondarynav UL {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px 0px 0px 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
BORDER-RIGHT-WIDTH: 0px;
BORDER-TOP: #000000 2px solid;
BORDER-BOTTOM: #000000 1px solid;
background: url(http://www.graffititrading.co.uk/images/left.gif) top left
no-repeat;
}
#secondarynav LI {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
FONT: 11px/17px Verdana, Lucida, Arial, sans-serif;
WIDTH: 100%;
COLOR: #FFFFFF;
PADDING-TOP: 0px;
BORDER-BOTTOM: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
BORDER-LEFT: #000000 0px solid;
BORDER-RIGHT: #000000 0px solid;
TEXT-ALIGN: center;
list-style : none;
display: inline;
background: #F38731 url(http://www.graffititrading.co.uk/images/left.gif) top
left no-repeat;
}
#secondarynav LI A {
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT: 0px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 0px;
WIDTH: 100%;
COLOR: #FFFFFF;
PADDING-TOP: 0px;
TEXT-DECORATION: none;
voice-family: inherit;
background: #F38731 url(http://www.graffititrading.co.uk/images/right.gif) top
right no-repeat;
}
#secondarynav LI A:hover {
FONT-WEIGHT: bold;
BACKGROUND: #F7BF66 url(http://www.graffititrading.co.uk/images/right.gif) top
right no-repeat;
COLOR: #000000;
TEXT-DECORATION: none;
}
More information about the thelist
mailing list