[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 254
  • Last Modified:

Optimise / Verify CSS

Hi,

I'm putting together a tabbed menu using css and although it works to all intents and purposes I'm looking for an expert eye to check my css code.

I'm using an unordered list for my menu, with the background image twice the height of the li, the background-position being changed for the hover state or 'current' item.

Is there any way to improve this code that I haven't seen.. I'm still in the process of learning and always concious of duplicating / over complicating my style-sheets. My menu will contain around 14 tabs eventually so I want to minimise where possible.  (I also seem to have a small area around the li items which I can't account for?)

I've stripped the code as shown below to it's bare minimum for testing and just used the same icon (class="tab1") for several tabs. Any help appreciated; my test page can be viewed at test page 1

Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<html>
<head>
<title>Tabs test1</title>

    <style type="text/css" media=screen>
	ul#tabs {
	  padding: 0;
	  margin: 0;
		}
	ul#tabs a {
	  text-decoration:none;
		}
			
	ul#tabs li {
	  padding: 0;
	  margin: 0;
	  display:inline;
	  list-style-type: none;
	  height:50px;
	  width:50px;
		}
	ul#tabs li.tab1 a, ul#tabs li.tab1 a:visited, ul#tabs li.tab1 a:active{
		background-image: url(images/test1.gif);
		background-position: left top;
		background-repeat:no-repeat;
		display:inline-block;
		height:50px;
		width:50px;
		}
	ul#tabs li.tab1 a:hover, ul#tabs li.tab1_current a{
	  background-image: url(images/test1.gif);
	  background-position:left bottom;
	  background-repeat:no-repeat;
	  display:inline-block;
	  height:50px;
	  width:50px;
		}

    </style>
</head>

<body>
    <div>
	<ul id="tabs">
		<li class="tab1"><a href="#">&nbsp;</a></li>
		<li class="tab1_current"><a href="#">&nbsp;</a></li>
		<li class="tab1"><a href="#">&nbsp;</a></li>
	</ul>
    </div>
</body>
</html>

Open in new window

0
nigelr99
Asked:
nigelr99
  • 7
  • 5
  • 5
2 Solutions
 
boraganeshCommented:
as per my experince your code looks to be small but perfect..go ahead...
0
 
boraganeshCommented:
one small there is no use of class="tab1" so remove it
0
 
Mark StegglesWeb DeveloperCommented:
Hello Nigel,

Your code is ok. However, I can see a few improvements:

1) CSS is parsed from right to left. Therefore, the more complicated your selector is, the more work the browser has to do to. Example from your code:

ul#tabs li.tab1 a {}

The browser sees the anchor first then it has to check that it is a descendant of class tab1, then it has to check that class is on an li, then it has to check that it is a descendant of id tabs and also check that #tabs is a ul.

A far more efficient way would be to put the .tab1 class directly on the <a href="">. Then your css would just be

.tab1 {}

which is much easier for the browser. If you have to keep the class on the li then you can remove the element types from the selector to make it like this:

#tabs .tab1 a   or    .tab1 a


Hope this helps
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
nigelr99Author Commented:
Thanks very much for the quick replies.

boraganesh.. surely I need class="tab1" to style each tab accordingly (they will be all different as below).

Steggs.. modified code below.. so this is as small as I can get?

<style type="text/css" media=screen>
	ul#tabs {
	  	padding: 0;
	  	margin: 0;
		}
	ul#tabs a {
	 	text-decoration:none;
		}
	
	ul#tabs li {
	  	padding: 0;
	  	margin: 0;
		display:inline;
		list-style-type: none;
		height:50px;
		width:50px;
		}
    /*1st tab--*/

	.tab1 a, tab1 a:visited, .tab1 a:active{
		background-image: url(images/tab1_image.gif);
		background-position: left top;
		background-repeat:no-repeat;
		display:inline-block;
		height:50px;
		width:50px;
		}
	.tab1 a:hover, .tab1_current a{
	  background-image: url(images/tab1_image.gif);
		background-position:left bottom;
		background-repeat:no-repeat;
		display:inline-block;
		height:50px;
		width:50px;
		}
    /*2nd tab--*/

	.tab2 a, tab2 a:visited, .tab2 a:active{
		background-image: url(images/tab2_image.gif);
		background-position: left top;
		background-repeat:no-repeat;
		display:inline-block;
		height:50px;
		width:50px;
		}
	.tab2 a:hover, .tab2_current a{
	  background-image: url(images/tab2_image.gif);
		background-position:left bottom;
		background-repeat:no-repeat;
		display:inline-block;
		height:50px;
		width:50px;
		}

    /*3rd tab--*/
	.tab3----- etc.

	
</style>

Open in new window

0
 
boraganeshCommented:
all the tab1, tab2, tab3 are only diffrent in iameg..other things are same so combine all these properties into one place insted of repeting it
0
 
nigelr99Author Commented:
Sorry Steggs - a bit premature with last reply, I've now tried the modifed code with the following :

<ul id="tabs">
		<li><a class="tab1" href="#">&nbsp;</a></li>
		<li><a class="tab1_current" href="#">&nbsp;</a></li>
		<li><a class="tab1" href="#">&nbsp;</a></li>
</ul>

Open in new window

.. not working? Have I misunderstood somewhere?
0
 
Mark StegglesWeb DeveloperCommented:
No it can be much smaller. Look for repeated code and try to combine it into one selector i.e. all the height width, background image etc could go on #tabs a then just modify the background-position for each class.

Also, if you read my post, I said that #tabs is more efficient than ul#tabs
0
 
boraganeshCommented:
no need to define tab_current... use a:hover and a:active...
0
 
nigelr99Author Commented:
boraganesh.. can you maybe point me in the right direction as this is my main aim .. to avoid repeating etc. Thanks
0
 
boraganeshCommented:
sure..
for li element only use the class="tab" and in css define the code like
tab a:hover,
tab a:active,
{
...
/*effect which u would like for tab_current*/.....
}
0
 
Mark StegglesWeb DeveloperCommented:
like this:
#tabs a {common css for all anchors, width, height etc}
.tab1 {background for anchor with tab1 class}
.tab2 {background for anchor with tab2 class}

Open in new window

0
 
boraganeshCommented:
yes rights but for hover and active li you can use
#tabs a:hover {common css for hover anchors, width, height etc}
#tabs a:active {common css for hover anchors, width, height etc}
0
 
nigelr99Author Commented:
OK.. I'm nearly there but I realise how little I understand now! Modified code is as follows but can't get it to work so I'm way off somewhere...
(test page 2 here)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<html>
<head>
<title>Tabs test2</title>

<style type="text/css" media=screen>

	#tabs { 
		list-style-type:none;
		}
	#tabs a, #tabs a:visited {
	 	text-decoration:none;
		background-position: left top;
		background-repeat:no-repeat;
		display:inline-block;
		height:50px;
		width:50px;
		}
	#tabs a:hover, #tabs a:active {
	 	text-decoration:none;
		background-position:left bottom;
		background-repeat:no-repeat;
		display:inline-block;
		height:50px;
		width:50px;
		}
	.tab1{background-image: url(images/test1.gif);}
	.tab2{background-image: url(images/test2.gif);}

</style>
</head>

<body>
	<div>
	    <ul id="tabs">
		<li><a class="tab1" href="#">&nbsp;</a></li>
		<li><a class="tab2" href="#">&nbsp;</a></li>
	    </ul>
	</div>
</body>
</html>

Open in new window

0
 
Mark StegglesWeb DeveloperCommented:
Don't forget to style your li's (#tabs li)

All browsers have tools to help you understand your html. Press f12 in internet explorer. Or the web inspector in safari/chrome. I usually use firebug which is an add-on for firefox
0
 
boraganeshCommented:
yes,firebug and web devloper tool are perfect add-ons to play with css, html...

you can add it by Firefox->addons and firebug, web devloper tool

then on any page right click and say inspect elemet and play with css, html.

also using web devloper you can get the information by dom, elemets, div, table, css, form fields many more
0
 
nigelr99Author Commented:
Thanks guys.. I was aware of developer tools in browsers of course but never made much use of them! Anyway, having now used google chrome's tools, I found the problem and it works great!

If acceptable I'll split the points 2 ways?

Cheers.
0
 
Mark StegglesWeb DeveloperCommented:
No problem. Glad we could help. Good luck
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 7
  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now