Solved

Optimise / Verify CSS

Posted on 2010-11-19
17
238 Views
Last Modified: 2012-05-10
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
Comment
Question by:nigelr99
  • 7
  • 5
  • 5
17 Comments
 
LVL 3

Expert Comment

by:boraganesh
ID: 34171663
as per my experince your code looks to be small but perfect..go ahead...
0
 
LVL 3

Expert Comment

by:boraganesh
ID: 34171681
one small there is no use of class="tab1" so remove it
0
 
LVL 30

Expert Comment

by:Steggs
ID: 34171792
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
 

Author Comment

by:nigelr99
ID: 34171909
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
 
LVL 3

Expert Comment

by:boraganesh
ID: 34171919
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
 

Author Comment

by:nigelr99
ID: 34171925
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
 
LVL 30

Expert Comment

by:Steggs
ID: 34171932
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
 
LVL 3

Expert Comment

by:boraganesh
ID: 34171933
no need to define tab_current... use a:hover and a:active...
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:nigelr99
ID: 34171934
boraganesh.. can you maybe point me in the right direction as this is my main aim .. to avoid repeating etc. Thanks
0
 
LVL 3

Expert Comment

by:boraganesh
ID: 34171944
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
 
LVL 30

Accepted Solution

by:
Steggs earned 125 total points
ID: 34171959
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
 
LVL 3

Assisted Solution

by:boraganesh
boraganesh earned 125 total points
ID: 34171967
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
 

Author Comment

by:nigelr99
ID: 34172172
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
 
LVL 30

Expert Comment

by:Steggs
ID: 34172197
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
 
LVL 3

Expert Comment

by:boraganesh
ID: 34172249
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
 

Author Comment

by:nigelr99
ID: 34172403
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
 
LVL 30

Expert Comment

by:Steggs
ID: 34172414
No problem. Glad we could help. Good luck
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
This video teaches users how to migrate an existing Wordpress website to a new domain.

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now