[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