Forum Moderators: not2easy
Basically, what I'm trying to do is make a tabbed interface (search Google for a similar example on a w3 site). I want the tabs to highlight when I click it, and also to switch to a different div.
Right now I'm stuck on the tabs. I haven't even considered the showing and hiding of the different divs yet.
The problem with the w3 example is that it's just way too complicated. I've got something nice looking set up using a list for the tabs, where they've got divs for them. The more I think about that example, the less I think my approach might work.
Anyway, here's the code I'm working with. It's all valid. I think I was on the right track, but like I said, I may also be way off.
<!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>Test page</title>
<style type="text/css" media="screen">* {
padding: 0;
margin: 0px auto;
}img { border: 0; }
body {
font-family: verdana, arial, sans-serif;
font-size: x-small;
background: #fff;
}
/* navigation */#navlist { }
#navlist ul {
color: #fff;
float: left;
width: 100%;
}#navlist ul li {
display: inline;
}.selected {
background: #fff
}#navlist ul li a {
background: #999;
padding: .5em;
color: #000;
text-decoration: none;
float: left;
border-right: #666 solid 1px;
border-top: #fff solid 1px;
margin-right: 5px;
}a:target {
background-color: #ccc;
color: #fff;
}/*
#navlist ul li a:hover {
background-color: #ccc;
color: #fff;
}
*//* end navigation */
#clearing {
clear: both;
}#main {
font-family: verdana;
font-size: 10px;
color: #000000;
text-align: left;
margin: 1px auto;
margin-top: 10px;
width: 97%;
}.content {
background: #ccc;
float: left;
width: inherit;
padding: 10px;
}</style>
</head>
<body>
<div id="main"><div id="clearing"></div>
<div id="navlist">
<ul>
<li><a href="#" id="tab1">Today only</a></li>
<li><a href="#" id="tab2">Two days</a></li>
<li><a href="#" id="tab3">Three days</a></li>
<li><a href="#" id="tab4">Four days</a></li>
<li><a href="#" id="tab5">Five days</a></li>
<li><a href="#" id="tab6">Special</a></li>
</ul>
</div><div class="content">
This is some content.
</div>
</div>
</body></html>
[edited by: SuzyUK at 7:16 pm (utc) on July 20, 2005]
[edit reason] fixed horizontal scrollism [/edit]
Maybe the mods will indulge me and not delete a link to w3.org: [w3.org...]
:target is a CSS3 pseudo selector. Are you sure you want to use it? Not supported by Win/IE.
Second, the :target pseudo-class is CSS3 and from my quick testing on a PC, it is not supported by IE6 or Opera, but only by Firefox at present. If you are not seeing what you expect in FireFox - what is actually happening?
Anyway, I'm expecting to click the "tabs" and have it behave like the example near the bottom of the W3C page. I know I haven't done the z-axis hidden content stuff yet, but I'm sort of working my way down the page. For now, I'd be happy if the tabs changed color.
