I dont want my ID to use rules for CLASS

[wright67uk]

<ul id="image"><li>

has a rule: #image...

 

but is actually using the css rule that I had intended for

<ul class="blue"><li>

which is: ul li...

 

Can anyone take two minutes and explain the best method to assign the right rules ensuring that all elements

in ul class = blue

only use ;

 

ul

ul li

ul li a

ul li a span

ul.blue li a.current, ul.blue li                                                                                                      

ul.blue li a.current span, ul.blue li span                                                                              

ul.blue li a.current, ul.blue li a:hover                                                                                        

ul.blue li a.current span, ul.blue li a:hover span

 

and all elements in ul id = image only use;

 

#image

#image li

#image li a:hover

#A1

#A2

#A3

#A4

#A5

 

Ive tried to merge two projects and Ive somehow made a hash of it.

 

 

<link href="reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body 	{margin:0px; padding:0px; background-color:f2f2f2; background-image:url(bgtop1px.jpg); background-repeat:repeat-x;}
ul 	{padding: 5px;margin: 10px 0;list-style: none;background-color: f2f2f2;border-bottom: ;float: left;clear: left;}
ul li 	{float: left;display: inline; /*For ignore double margin in IE6*/margin: 0 10px;}
ul li a 	{text-decoration: none;float:left;color: #666; cursor: pointer; font: 600 11px/22px "Arial", Helvetica, sans-serif;}
ul li a span {margin: 0 10px 0 -10px;padding: 1px 8px 5px 18px;position: relative; 				
                  /*To fix IE6 problem (not displaying)*/float:left;}
ul.blue li a.current, ul.blue li 	                              {background: url(grey.png) no-repeat top right;color: #0d5f83;}
                                                                              /*STANDARD STATE right side of rectangle*/
ul.blue li a.current span, ul.blue li span 	              {background: url(grey.png) no-repeat top left;}       			                                                              /*STANDARD STATE left side of rectangle*/
ul.blue li a.current, ul.blue li a:hover 	             {background: url(blue.png) no-repeat top right;color: #0d5f83;} 
                                                                              /*HOVER STATE right side of rectangle*/
ul.blue li a.current span, ul.blue li a:hover span   {background: url(blue.png) no-repeat top left;}       			
                                                                              /*HOVER STATE left side of rectangle*/
#top 	{height:345px; width:830px; background-color:#0F0;  margin-left:auto; margin-right:auto; margin-top:100px; clear:both;}
#buttons 	{padding-left: 50px; padding-top:30px; padding-left:220px; margin: 0;}
#image	{height:320px; width:570px; background:url(back.png) no-repeat; list-style:none;}
#image li	{display:inline;}
#image li a{width:30px; height:320px;display:block;float:left;}
#image li a:hover{width:450px;}
#A1	{background:url(1.jpg) no-repeat;}
#A2	{background:url(2.jpg) no-repeat;}
#A3	{background:url(3.jpg) no-repeat;}
#A4	{background:url(4.jpg) no-repeat;}
#A5          {background:url(5.jpg) no-repeat;}

</style>

</head>

<div id="buttons">
<ul class="blue">
<li><a href="#" title="home" ><span>Home</span></a></li>
    <li><a href="#" title="products"><span>About</span></a></li>
    <li><a href="#" title="blog"><span>Treatments</span></a></li>
    <li><a href="#" title="contact"><span>Contact</span></a></li>
</ul>
</div>

<ul id="image">        
<li><a id="A1"href=""></a></li><!--is using ul.li from the buttons above -->        
<li><a id="A2"href=""></a></li>        
<li><a id="A3"href=""></a></li>        
<li><a id="A4"href=""></a></li>        
<li><a id="A5"href=""></a></li>    
</ul>

</div>
</body>
</html>

[cssfreakie]

you should read this article: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

 

Also after you read that, inspect your elements with firebug and you will see what is going on.

[wright67uk]

Firebug shows me that ul Li is affecting my #image elements however I understood the article as saying that id properties were more important than class properties.

[cssfreakie]

I hope you agree with me that if you say ul li has some property that that is a pretty generic approach.

 

for example:

ul li { color:green;}

 

What does that do? It tells every list item to use the color green

 

Now what if I add an id to a second list would that make a difference?? WOuld that prevent the color green to be inherited?

 

<ul id="list1">
   <li>bla</Li>
   <li>bla</Li>
</ul>
< hr />
<ul id="list2">
   <li>bla</Li>
   <li>bla</Li>
</ul>

 

No!, not unless we say that each <li> that is part of #list2 has a different color.

 

Hence the name cascading style sheets: Cascading Style Sheets get their name from the way in which they determine order of precedence when more than one rule applies to a given element in the Web page.  (more than 1 rule... so if you only have 1 rule, that one will ofcourse prevail )

Now, if our page would have looked like this:

 

<style type="text/css">
ul li {color:green;} */We could have just used li, but since you used ul li i thought it would be a nice example */
#list2 li {color:orange;} /* this overwrites the more generic color assignment. */
</style>
<body>
<ul id="list1">
   <li>bla</Li>
   <li>bla</Li>
</ul>
< hr />
<ul id="list2">
   <li>bla</Li>
   <li>bla</Li>
</ul>
</body>

 

Besides the above, your code had some errors in it.  2 times you missed the '#'- character and you had an extra </div> in there.

 

Hope this helps.

[wright67uk]

Hi got this sorted now, thankyou for the explanation, it cleared things up for me.

 

http://www.1pw.co.uk/combined

 

I was wondering wether its worth looking into animating the pictures to give them a sliding effect.

Would I be best to look towards jquery opposed to css (webkits etc.) furthermore is it even possible using just CSS?

[cssfreakie]

Hi got this sorted now, thankyou for the explanation, it cleared things up for me.

 

http://www.1pw.co.uk/combined

 

I was wondering wether its worth looking into animating the pictures to give them a sliding effect.

Would I be best to look towards jquery opposed to css (webkits etc.) furthermore is it even possible using just CSS?

you would require javascript for that. So yes jquery can be an option.