Tabs con i CSS

[cali1981]

Tabs con i CSS

Ho fatto dei tabs in css, usando ul e li. Il problema è che usando il codice css seguente:

ul.tabs { border:1px solid #194367; height: 20px; width: 520px; margin: 0; padding: 0; background:#C0D9DE; overflow:hidden; }
ul.tabs li { float: left; background-image: url(tab.gif); display:inline; width: 82px; height: 20px; margin: 0px; padding: 0px; text-align: right; }

I tabs stessi mi vengono separati da un pò di pixel direi circa 60. Ne ho messi tre, potrebbe dipendere dal fatto che cercano di riempire tutto lo spazio del genitore, in questo caso l'ul?

Grazie

[cali1981]

PS: non dipende dalla larghezza dell'ul, perchè se la restringo non si vede il terzo tab!

[cali1981]

Nessuno sa darmi qualche dritta?

[misterwo]

io ho provato e non vedo nessun problema, scusa invece che dare un bg immagine alla li, prima prova con un fondo colorato e guarda, magari il tuo sfondo è sbagliato e ti confonde

[cali1981]

No, il problema penso dipenda dal resto del css... Se mi mandi un pm posso mandarti l'url...

[karedas]

Ciao Cali1981

Se dai una dimensione fissa ai tuoi "li" fai in modo che i contenuti più piccoli di 82 px di larghezza creino uno spazio tra loro e il successivo elemento.

Se rimuovi quella dimensioni vedrai che ti si affiancano.
Altrimenti prova un attimo a inserirci una fonte online in modo da capire se il problema risiede da qualche altra parte

Ciao!

[cali1981]

mmm no ora ho cambiato ma da lo stesso problema

ul.tabs
{
text-align: left; /* set to left, right or center */
margin: 0px; /* set margins as desired */
font: bold 11px verdana, arial, sans-serif; /* set font as desired */
border-bottom: 1px solid #6c6; /* set border COLOR as desired */
list-style-type: none;
padding: 3px 3px 3px 3px; /* THIRD number must change with respect to padding-top (X) below */
}
/*ul.tabs li { float: left; background-image: url(tab.gif); display:inline; width: 82px; height: 20px; margin: 0px; padding: 0px; text-align: right; }*/
ul.tabs li {
display: inline;
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
margin: 0px;
padding: 0px;
padding-top: 3px; /* must change with respect to padding (X) above and below */
}
/*ul.tabs a:hover, ul.tabs a.tab-active { text-decoration: none;}
ul.tabs a { text-decoration: none; font-weight:bold;  margin: 0; padding: 0; color:#2B4353; }*/
ul.tabs a {
padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid; /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #cfc; /* set unselected tab background color as desired */
color: #666; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;
border-bottom: none;
}

[karedas]

Ok il problema risiede nei link.
Aggiungi questo attributo:
[html]
ul, ul *{
float:left;
}
[/html]

[cali1981]

No in quel modo peggiora soltanto. Posso darti il link della pagina se vuoi...

[karedas]

A me funziona perfettamente. Si dammi pure grazie

[cali1981]

Inviato PM