Wardy118
02-21-2007, 01:09 PM
Hi all,
Right, basically what i am trying to achieve is a menu similar to that of this site http://flamingmedia.growldesign.co.uk/. So far I have the black border going along the top of the page but i'm having trouble getting the effect of 'selected' option, i.e. once you have clicked on one of the targets the selected target changes to black and the original target changes to white. Its really hard to describe you really need to look at the site to see what i mean. This is my code so far and you can see what it looks like here http://www.geocities.com/motors_4_u//proper.html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#invertedtabs{
margin:auto;
width: 510px;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
#invertedtabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em;
padding:0;
list-style-type:none;
text-align:center; }
#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
line-height: 1.5em;
}
#invertedtabs a{
float: left;
color: white;
background: #050110 url(http://www.geocities.com/motors_4_u/color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}
#invertedtabs a span{
float:left;
display:block;
background: transparent url(http://www.geocities.com/motors_4_u/color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}
#invertedtabs a span{
float:none;
}
#invertedtabs a:hover{
background-color: #000000;
}
#invertedtabs a:hover span{
background-color: #000000;
color: #ffffff;
}
#invertedtabs #current a, #invertedtabs #current span{
background-color: #150bde;
}
#invertedtabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #050110;
border-bottom: 1px solid #000000; }
</style>
</head>
<body>
<div id="invertedtabsline"> </div>
<div id="invertedtabs">
<ul>
<li style="margin-left: 1px"><a href="#nogo" title="FAQ"><span>FAQ</span></a></li>
<li><a href="#nogo" title="About Us"><span>About Us</span></a></li>
<li><a href="#nogo" title="Terms & Conditions"><span>Terms & Conditions</span></a></li>
<li><a href="#nogo" title="Cancellations"><span>Cancellations</span></a></li>
<li><a href="#nogo" title="Contact Us"><span>Contact Us</span></a></li>
</ul>
</div>
<br style="clear: left" />
</body>
</html>
I know how to change the background to white but i just wanted to keep it black so you could see how i wanted the selected target to look like once it had been 'selected'.
Thanks:thumbsup:
Right, basically what i am trying to achieve is a menu similar to that of this site http://flamingmedia.growldesign.co.uk/. So far I have the black border going along the top of the page but i'm having trouble getting the effect of 'selected' option, i.e. once you have clicked on one of the targets the selected target changes to black and the original target changes to white. Its really hard to describe you really need to look at the site to see what i mean. This is my code so far and you can see what it looks like here http://www.geocities.com/motors_4_u//proper.html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#invertedtabs{
margin:auto;
width: 510px;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
#invertedtabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em;
padding:0;
list-style-type:none;
text-align:center; }
#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
line-height: 1.5em;
}
#invertedtabs a{
float: left;
color: white;
background: #050110 url(http://www.geocities.com/motors_4_u/color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}
#invertedtabs a span{
float:left;
display:block;
background: transparent url(http://www.geocities.com/motors_4_u/color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}
#invertedtabs a span{
float:none;
}
#invertedtabs a:hover{
background-color: #000000;
}
#invertedtabs a:hover span{
background-color: #000000;
color: #ffffff;
}
#invertedtabs #current a, #invertedtabs #current span{
background-color: #150bde;
}
#invertedtabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #050110;
border-bottom: 1px solid #000000; }
</style>
</head>
<body>
<div id="invertedtabsline"> </div>
<div id="invertedtabs">
<ul>
<li style="margin-left: 1px"><a href="#nogo" title="FAQ"><span>FAQ</span></a></li>
<li><a href="#nogo" title="About Us"><span>About Us</span></a></li>
<li><a href="#nogo" title="Terms & Conditions"><span>Terms & Conditions</span></a></li>
<li><a href="#nogo" title="Cancellations"><span>Cancellations</span></a></li>
<li><a href="#nogo" title="Contact Us"><span>Contact Us</span></a></li>
</ul>
</div>
<br style="clear: left" />
</body>
</html>
I know how to change the background to white but i just wanted to keep it black so you could see how i wanted the selected target to look like once it had been 'selected'.
Thanks:thumbsup: