We help IT Professionals succeed at work.

css for tabs problem

Panos
Panos asked
on
Hello experts.
I need help to style my tabs menu.
The problem i have is to "hide" the border at the bottom on hover and second  trying to style the active tab  with the same hover style.
I'm trying to use a negative bottom margin for the ul tag but it is not working.
Any help?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.tabs {height:26px; margin:0}
.tabs ul,.tabs li,.tabs a{font-family: Verdana,Helvetica,Arial,Sans-Serif;
    font-size: 12px;text-decoration:none;color:#272727;list-style:none;margin:0;padding:0;line-height:1}
.tabs li{display:inline}
.tabs li a,.tabs li span{height:26px;float:left;cursor:pointer}
.tabs a{background:url('menu/images/Detailmenu/left.jpg') left no-repeat;padding-left:47px;}
.tabs .right{padding-right:47px}
.tabs .center{background:url('menu/images/Detailmenu/center.jpg') repeat-x;margin-right:-47px;min-width:47px;padding:11px 0 0px 0;height:15px;}
.tabs .start{background:url('menu/images/Detailmenu/farleft.jpg') left no-repeat}
.tabs .end{background:url('menu/images/Detailmenu/farright.jpg') right no-repeat;padding-right:94px}
.tabs a:hover{background:url('menu/images/Detailmenu/right.jpg');}
.tabs a.start:hover{background:url('menu/images/Detailmenu/farlefthover.jpg');}
.tabs a:hover .end{background:url('menu/images/Detailmenu/farrighthover.jpg') right;}
.tabs a:hover .center{background:url('menu/images/Detailmenu/centerhover.jpg');font-weight:bold;color:#F60;;padding:8px 0 0 0;height:18px;}
.tabs a:hover .right{background:url('menu/images/Detailmenu/lefthover.jpg') right;padding-right:94px;margin-right:-47px;position:relative;}
.divcontainer{width:400px; height:100px;text-align:left;margin-bottom:10px;border: thin solid #CCC;}
</style>
</head>
<body>
 <ul class="tabs">
  <li id="li_tab1" class="li_tab1">
   <a href="#" class="start">
    <span class="right"><span class="center">Test</span></span>
   </a>
  </li>
  <li id="li_tab2" class="li_tab2">
   <a href="#">
    <span class="right"><span class="center">Test</span></span>
   </a>
  </li>
  <li id="li_tab3" class="li_tab3">
   <a href="#tab3">
    <span class="end"><span class="center">Test</span></span>
   </a>
  </li>
 </ul>
<div class="divcontainer">
</div>
</body>
</html>

Open in new window

screen.gif
Comment
Watch Question

Top Expert 2013

Commented:
From what you have there it appears that the border is from divcontainer.  You need to remove the top border I think.  Playing with negative margins will probably mess up the whole layout.  To work, the neg margin would probably have to be applied to the li and that would take it out of alignment if it worked.

trying to style the active tab  with the same hover style.

I'm not sure what you are asking for there, but if by active you mean the clicked tab then you can do that with a selector of a:visited using the same attributes as you have for a:hover



Author

Commented:
Hi COBOLdinosaur.
To the first part.
I did add a negative -1px value to the tabs class and it seems it is working. I have only to add a 2 pix border to the images. (see first image)

To the second.
Can you please write the code for the active tab?
Do you mean the code below?

Take a look at a screen shot using this with IE 6.
Using small text it is not working.(second screen)


<style type="text/css">
.tabs {height:26px;margin-top: 0;margin-right: 0;margin-bottom: -1px;margin-left: 0;}
.tabs ul,.tabs li,.tabs a{font-family: Verdana,Helvetica,Arial,Sans-Serif;
    font-size: 12px;text-decoration:none;color:#272727;list-style:none;margin:0;padding:0;line-height:1}
.tabs li{display:inline}
.tabs li a,.tabs li span{height:26px;float:left;cursor:pointer}
.tabs a{background:url('menu/images/Detailmenu/left.jpg') left no-repeat;padding-left:47px;}
.tabs .right{padding-right:47px}
.tabs .center{background:url('menu/images/Detailmenu/center.jpg') repeat-x;margin-right:-47px;min-width:47px;padding:11px 0 0px 0;height:15px;}
.tabs .start{background:url('menu/images/Detailmenu/farleft.jpg') left no-repeat}
.tabs .end{background:url('menu/images/Detailmenu/farright.jpg') right no-repeat;padding-right:94px}
.tabs a:hover,.tabs a:active{background:url('menu/images/Detailmenu/right.jpg');}
.tabs a.start:hover,.tabs a.start:active{background:url('menu/images/Detailmenu/farlefthover.jpg');}
.tabs a:hover .end,.tabs a:active .end{background:url('menu/images/Detailmenu/farrighthover.jpg') right;}
.tabs a:hover .center,.tabs a:active .center{background:url('menu/images/Detailmenu/centerhover.jpg');font-weight:bold;color:#F60;;padding:8px 0 0 0;height:18px;}
.tabs a:hover .right,.tabs a:active .right{background:url('menu/images/Detailmenu/lefthover.jpg') right;padding-right:94px;margin-right:-47px;position:relative;}
.divcontainer{
	width:400px; height:100px;
	text-align:left;
	margin-bottom:10px;
	border: thin solid #CCC;
}
</style>

Open in new window

screen-1.gif
screen-2.gif
Top Expert 2013

Commented:
I would not have code the active quite that way, but yes that was the intended approach.

As to the matter of IE6.  The only way you are going to get IE6 to do it right is to basically code the CSS twice because it does virtually everthing to do with positioning wrong. You may even have to do some scripting to make it behave.

I no longer support IE 6 because no one is using it anymore.  In most stats it shows up with a very tiny share and that is primarily developers testing to see what works.

I'm not sure how much of the old IE6 hacks and workarouunds are still around.  You can get most of what you need at
Quirksmode  where the compatibility tables show that IE6 is broken, wrong, or does not support just about everything you need for those tabs.  After seeing how much has to be done you will probably understand why it make no sense to support a browser that is no longer being used.

Author

Commented:
Hi again COBOLdinosaur
Sorry for the delay but i have some connection problems this weekend.

You are right for the IE6 part. It is time to stop supporting this browser version.

"I would not have code the active quite that way"
Can you please show me the way you would code the active?

Because i'm using jquery i want to see what is the best way to add - remove class to the elements.
Top Expert 2013
Commented:
You put yourself in a box when you do to much of this:

.tabs a:hover,.tabs a:active{background:url('menu/images/Detailmenu/right.jpg');}
.tabs a.start:hover,.tabs a.start:active{background:url('menu/images/Detailmenu/farlefthover.jpg');}
.tabs a:hover .end,.tabs a:active .end{background:url('menu/images/Detailmenu/farrighthover.jpg') right;}
.tabs a:hover .center,.tabs a:active .center{background:url('menu/images/Detailmenu/centerhover.jpg');font-weight:bold;color:#F60;;padding:8px 0 0 0;height:18px;}
.tabs a:hover .right,.tabs a:active .right{background:url('menu/images/Detailmenu/lefthover.jpg') right;padding-right:94px;margin-right:-47px;position:relative;}

Open in new window


You are not using any inheritance, and you limit the scope of your classes. You are over using classes.

Look at this line:
.tabs a:hover .center,.tabs a:active .center{background:url('menu/images/Detailmenu/centerhover.jpg');font-weight:bold;color:#F60;;padding:8px 0 0 0;height:18px;}

Open in new window


You are not just applying the presentation, you are trying to declare structure.  That is not what CSS is for.  CSS sets up presentation. Structure is part of content and that is the job of HTML. A class should have a broad scope. I doubt you will use the tabs class for anything else, and if you do the class name will be misleading.  You probably have a single set of tabs for navigation so you should use a narrower declaration with the id.  Everything under tabs inherits the attributes of tabs.  So #tabs can be declared and then forgotten about.

Now look at the detailed level.  Is there more than one center?  If not, then how is it a class?

If the link for center is within tabs how would a:hover #center { ...  be different from  .tab a:hover .center

I don't have all of your CSS and HTML, so I don't know if you actually have .tabs declared as a separate class. The same for .center  and the other classes.  If they are only being declared as part of these hierarchies, then they are not classes.  What is the style of  .tabs or .center when they stand on their own? If they do not have an independent style, then they are not classes.
 
To avoid messy CSS that is difficult to work with do thing in sequence when you are developing a page.  First develop the content and do all the HTML to put it in the page, apply structure.  Don't worry about the style while you are doing the HTML. Second do the CSS top down. Start with the broadest scope first; the tag. Are there defaults you want to apply to the page like font and the overall background color.  Anything you apply to the body, div or ul tags will apply everywhere in the page except where you override with a more localized style.  That way you do not have to repeat attributes that are default.  Next look at the large blocks within the page. If there are sections that you want to have overall styles, use the large containers in the section with Id to apply the sectional styles.  Now you can do the detail.  If you have a nav section, the defaults are already declared and will inherit down.  Use classes where a style will be applied to more than one element, and ids where the style is specific and not applied anywhere else don't build long hierarchical declarations, when you can inherit.  When you are finished with the page you will have a stylesheet that is easy to change and maintain; and if you are developing a site with a common look and feel, you will have
a stylesheet you can use across multiple pages with  very little adjustment.

I basically take the approach that the C in Cascading Style Sheets is the operative word, and that means let thing inherit, instead of trying to define structure.

Author

Commented:
Thank you for your detailed explanation COBOLdinosaur.
To this comment:
"You are not just applying the presentation, you are trying to declare structure"

Please write an example so that i can  100% understand the difference.
(sometimes the examples are very useful for me because of my poore english)

"Is there more than one center"
The first  code i posted has  the center class 3 times ,i suppose it is a class.

I really can use instead of ".tabs"  , a "#tabs"  and change the ul class="tabs" to ul id="class".
Top Expert 2013
Commented:
Here is a little piece I use all the time when I am doing proposals for clients.  I have used  it
in hundreds of pages, in a dozen different formats, but it is a simple small piece of code.

This used to do a single level menu with buttons sometimes I use it as a nav bar at the top of the
pageand by changing the width and height at the top level I can use it as a side bar menu

#PFeature {
		background-image:url(http://localhost/COBOLdinosaur/images/texture12.gif);
		height:120px;
		text-align:center; 
		clear:both;
		width:100%;
		min-width:800px
		}			
// that defines the section No attempt to link it with the content.
.menubutton {
			color:white;
			background-image:url(http://localhost/COBOLdinosaur/images/blue040.gif);
			font-weight:bold;
			font-size:120%;
			margin-left:40px;
			height:30px;
			cursor:pointer
		    }
// that declares the base style for the menu for any number of buttons.  Notice no width
// so the button will size to the content automatically  If I want specific widths I can specify 
// that for all buttons or I can apply it at the detail level using an id on the specific buttons I 
// want to control
.menubutton:hover 	{
					background-image:url(http://localhost/COBOLdinosaur/images/marb046.gif);
					color:navy
									}
// the hover just flips the background an text color, everything else continues to be inherited

Open in new window


The HTML deals with the content .  This could just a easily be a list with links and stle directly on the links.

<div id="PFeature">
<button class="menubutton" onclick="location.href='http://localhost/COBOLdinosaur/'" title="Hello World">CSS</button>
<button class="menubutton" onclick="location.href='http://localhost/COBOLdinosaur/'" title="Hello World">HTML</button>
<button class="menubutton" onclick="location.href='http://localhost/COBOLdinosaur/'" title="Hello World">Javascript</button>
<button class="menubutton" onclick="location.href='http://localhost/COBOLdinosaur/'" title="Hello World">Server Side</button>
<button class="menubutton" onclick="location.href='http://localhost/COBOLdinosaur/'" title="Hello World">Other Stuff</button>
</div>

Open in new window


If the menu is a nested set of list everything still inherits and it should not be necessary to define the hierarchy in the
CSS.  All it takes is a class on the inner level that applies specific values or overrides a higher level.

If the ul sets a color of green and one of the li elements needs to be red then an id or class can be used:

#activeEL {color:red}
<li id="activeEL">

Open in new window


Will override the color without changing anything else so you should never need:
ul li ul #activeEL {
or something like that

The most important thing is to do the HTML first.  Once you have the structure laid out with the HTML it is
easier to see simple ways to get the presentation you want.

Learning to do web pages well takes some time, and a lot of experimentation.  When you make a mistake or
run into a problem, you just go back and fix it, and learn from it.  The more you do, the easier it gets.

Author

Commented:
Thank you very much for your help and examples COBOLdinosaur.

Author

Commented:
Thank you
regards
panos
Top Expert 2013

Commented:
panos,

I am always happy to try and help someone who wants to get better.  I try to learn a little each day, but no matter how old I get, I am certain there will still be thing I can learn.

Author

Commented:
COBOLdinosaur anyone on this planet should do and think like you .We are saying in our country: "If you not give you will not get"
Thank you again.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.