Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Optimise / Verify CSS

Posted on 2010-11-19
17
Medium Priority
?
250 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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:Mark Steggles
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
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 

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:Mark Steggles
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
 

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:
Mark Steggles earned 500 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 500 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:Mark Steggles
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:Mark Steggles
ID: 34172414
No problem. Glad we could help. Good luck
0

Featured Post

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

636 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