tabs: primo selezionato?

[cloti]

Ciao a tutti!
Sto facendo una pagian con tabs. Questo sono riuscita a farlo , solo che voglio che uno dei tabs sia selezionato al caricare la pagina, come faccio?

il mio CSS e:
#navegacion{
position:absolute;
left:135px;
top:110px;
width:865px;
background:transparent;
height: 16px;
padding: 0 0 0 0;
}



ul.navigation {
list-style:none;
padding:0;
margin:0
}

.navigation li {
float:left;
margin:0;
padding:0
}

.navigation a, .navigation a:visited {
color: #810b0d;
background: #d9a997 url(images/left-tab.gif) left top no-repeat ;
font-weight:bold;
padding-left: 10px;
text-decoration:none
}

ul.navigation a, ul.navigation span {
display:block;
float:left
}

/* Hide from IE5-Mac \*/
ul.navigation a, ul.navigation span {
float:none
}
/* End IE5-Mac hide */

.navigation a span, .navigation a:visited span {
background: url(images/right-tab.gif) right top no-repeat;
padding-right: 10px
}


.navigation a:hover, .navigation a:active, .navigation a:focus {
color:#810b0d;
background:#ffffff url(images/left-tab-hover.gif) left top no-repeat;
font-weight:bold;
padding-left:10px
}

.navigation a:hover span, .navigation a:active span, .navigation a:focus span {
background:url(images/right-tab-hover.gif) right top no-repeat;
padding-right:10px
}


La mia lista è:
<div id="navegacion">
<ul class="navigation">[*]<span>Home</span>[*]<span>Services</span>[*]<span>Take a tour</span>[*]<span>About us</span>[*]<span>Contact us</span>[/list]


Grazie in anticipo

[ricman]

Se non usi un linguaggio di programmazione e ripeti sempre il menu in ogni pagina html ti basta creare, nel foglio di stile, una classe tab_attivo (per esempio) e assegnargli i colori e le caratteristiche che vuoi. Poi ad ogni assegnerai quella solo classe all'appropriata voce del menu.

[cloti]

se ho capito bene quello che dici devo aggiungere al css i colori di a:hover, a:active, a:focus, ed è questo quello che ho messo:

.tab_selezionato{
color:#810b0d;
background:#ffffff url(images/left-tab-hover.gif) left top no-repeat;
font-weight:bold;
padding-left:10px
}

.tab_selezionato span{
background:url(images/right-tab-hover.gif) right top no-repeat;
padding-right:10px
}

Poi, il mio menu e diventato cosi:
<div id="navegacion">
<ul class="navigation">[*]<span>Home</span>[*]<span>Services</span>[*]<span>Take a tour</span>[*]<span>About us</span>[*]<span>Contact us</span>[/list]
</div>

Non funziona lo stesso. Dove sto sbagliando?
Grazie!

[cloti]

Solo per la cronaca. HO risolto!!
Ho continuato a provare e la soluzione è mettere nel menu cosi:

<div id="navegacion">
<ul class="navigation_principal">
<li class="tab_selezionato"><span>Home</span>
<li class="navigation" ><span>Services</span>
<li class="navigation" ><span>Take a tour</span>
<li class="navigation" ><span>About us</span>
<li class="navigation" ><span>Contact us</span>[/list]
</div>

dove navigation_principal solo è
ul.navigation_principal {
list-style:none;
padding:0;
margin:0
}

.navigation_principal li {
float:left;
margin:0;
padding:0
}

poi il resto del css come scritto prima

Grazie mille a chi mi ha risposto!!!!

[ricman]

Originariamente inviato da cloti
Grazie mille a chi mi ha risposto!!!!

Beh... hai fatto tutto da sola

Cmq reputo inutili gli span. Non potresti ridefinire gli altri tag?