[thelist] CSS <UL> background corners part 3
Simon Perry
simon.perry at si-designs.co.uk
Wed Mar 10 09:43:57 CST 2004
Andrew wrote:
>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.
>
>
No that is why you have to think a bit laterally and use the hooks
provided by other elements.
>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;
>
>
/* remove
> background: url(http://www.graffititrading.co.uk/images/left.gif) top left
>no-repeat;
>
>
this*/
>}
>#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;
>
>
remove this as you it will disable a lot of the styling above
> 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;
>
>
Why is this here? Looks like a left over from a hack... should be safe
to remove
>voice-family: inherit;
>
>
not sure you need the background color here as it may be covering the
left.gif underneath
>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;
> }
>
>
>
>
A URL to your test page would be really helpful.
Simon
More information about the thelist
mailing list