jess116
06-18-2007, 12:35 AM
Hi everyone,
I'm making a website and am trying to use a bit of css, rather than just tables which i'm used to! My problem is this, i have made a css tab menu, but don't know how to get the "tab" for the "current" page to show up different, so that you know what tab you are currently on, if that makes sense!
Here is the code i'm using :
<style type="text/css">
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
/*- Menu Tabs D--------------------------- */
#tabsD {
float:left;
width:100%;
background:#;
font-size:93%;
font-weight:;
line-height:normal;
border-bottom:0px solid #999999;
}
#tabsD ul {
margin:0;
padding:5px 5px 0 0px;
list-style:none;
}
#tabsD li {
display:inline;
margin:0;
padding:0;
}
#tabsD a {
float:left;
background: url(../../tableftD.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsD a span {
float:left;
display:block;
background: url(../../tabrightD.gif) no-repeat right top;
padding:4px 15px 3px 6px;
color:#ffffff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsD a span {float:none;}
/* End IE5-Mac hack */
#tabsD a:hover span {
color:#000000;
}
#tabsD a:hover {
background-position:0% -42px;
}
#tabsD a:hover span {
background-position:100% -42px;
}
</style>
</head>
<body text="#000000" leftmargin=0 topmargin=0 bottommargin=0 bgcolor="#FFFFFF">
<div id="container">
<div id="tabsD">
<ul>
<li><a href="index.htm"><span>Main</span></a></li>
<li><a href="filmog.htm"><span>You know her from...</span></a></li>
<li><a href="wp.htm"><span>Wallpapers</span></a></li>
<li id="current"><a href="avatars.htm"><span>Avatars</span></a></li>
<li><a href="myspace.htm"><span>Myspace Graphics</span></a></li>
<li><a href="links.htm"><span>Links</span></a></li>
</ul>
</div>
Is there anyone who can help me?
Jessica
I'm making a website and am trying to use a bit of css, rather than just tables which i'm used to! My problem is this, i have made a css tab menu, but don't know how to get the "tab" for the "current" page to show up different, so that you know what tab you are currently on, if that makes sense!
Here is the code i'm using :
<style type="text/css">
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
/*- Menu Tabs D--------------------------- */
#tabsD {
float:left;
width:100%;
background:#;
font-size:93%;
font-weight:;
line-height:normal;
border-bottom:0px solid #999999;
}
#tabsD ul {
margin:0;
padding:5px 5px 0 0px;
list-style:none;
}
#tabsD li {
display:inline;
margin:0;
padding:0;
}
#tabsD a {
float:left;
background: url(../../tableftD.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsD a span {
float:left;
display:block;
background: url(../../tabrightD.gif) no-repeat right top;
padding:4px 15px 3px 6px;
color:#ffffff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsD a span {float:none;}
/* End IE5-Mac hack */
#tabsD a:hover span {
color:#000000;
}
#tabsD a:hover {
background-position:0% -42px;
}
#tabsD a:hover span {
background-position:100% -42px;
}
</style>
</head>
<body text="#000000" leftmargin=0 topmargin=0 bottommargin=0 bgcolor="#FFFFFF">
<div id="container">
<div id="tabsD">
<ul>
<li><a href="index.htm"><span>Main</span></a></li>
<li><a href="filmog.htm"><span>You know her from...</span></a></li>
<li><a href="wp.htm"><span>Wallpapers</span></a></li>
<li id="current"><a href="avatars.htm"><span>Avatars</span></a></li>
<li><a href="myspace.htm"><span>Myspace Graphics</span></a></li>
<li><a href="links.htm"><span>Links</span></a></li>
</ul>
</div>
Is there anyone who can help me?
Jessica