Jump to content

Need styling help with tabs


rain13
 Share

Recommended Posts

Why doesnt following code set background color to tabs? I have background-color: defined in style.

<html><head><br><title>Tabs 2</title><style type="text/css" media="all">body {font: 0.8em arial, helvetica, sans-serif;}#header ul {list-style: none;padding: 0;margin: 0;}#header li {float: left;border: 1px solid;border-bottom-width: 0;margin: 0 0.5em 0 0;}#header a {display: block;padding: 0 1em;background: white;}#header #Selected {position: relative;top: 1px;background-color: #99ccff;}#header #NotSelected {position: relative;top: 1px;background-color: #99ccff;}#content {border: 1px solid;clear: both;}h1 {margin: 0;padding: 0 0 1em 0;}</style></head><body><h1>tabs<br></h1><div id="header"><ul><li id="NotSelected"><a href="&id=0">1</a></li><li id="Selected"><a href="&id=0">2</a></li><li id="NotSelected"><a href="&id=0">3</a></li><li id="NotSelected"><a href="&id=0">4</a></li></ul></div><div id="content"><p>Ispum schmipsum.</p></div></body></html>

Link to comment
Share on other sites

One thing I see right off is you have too many elements with the same ID. An ID can refer to EXACTLY ONE ELEMENT.If you want to style multiple elements the same way, use a class attribute in the element tag and apply your CSS ruleset to a class selector.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Still dont work. I want that inactive tabs would have different bg color from active

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>  <br>  <title>Tabs 2</title>      <style type="text/css" media="all">		body {		font: 0.8em arial, helvetica, sans-serif;	}		#header ul {		list-style: none;		padding: 0;		margin: 0;	}		#header li {		float: left;		border: 1px solid;		border-bottom-width: 0;		margin: 0 0.5em 0 0;	}		#header a {		display: block;		padding: 0 1em;		background: white;	}		li.Selected {		position: relative;		top: 1px;		background-color: #99ccff;	}	li.NotSelected {		position: relative;		top: 1px;		background-color: #99ccff;	}		#content {		border: 1px solid;		clear: both;	}		h1 {		margin: 0;		padding: 0 0 1em 0;	}		</style></head><body><h1>tabs<br></h1><div id="header"><ul>  <li class="NotSelected"><a href="&id=0">1</a></li>  <li class="Selected"><a href="&id=0">2</a></li>  <li class="NotSelected"><a href="&id=0">3</a></li>  <li class="NotSelected"><a href="&id=0">4</a></li></ul></div><div id="content"><p>Ispum schmipsum.</p></div></body></html>

Edited by SoItBegins
Link to comment
Share on other sites

1. The <li> elements are filled with <a> elements. The background color of the <a> elements is white. So that is all you see.2. The background colors for Selected and NotSelected are both #99ccff. So when you fix problem 1, the tabs will still look the same.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...