- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Lista orizzontale con margine sinistro
-
Lista orizzontale con margine sinistro
Salve a tutti!
devo costruire una lista con visualizzazione orizzontale e tutti gli elementi della lista, che sono links, devono avere un bordo bianco.
Il primo problema è che il primo elemento della lista non deve avere questo bordo perchè contiene una immagine.
Il secondo problema è che i link devono essere posizionati in alto.
Il terzo problema è che uno dei link, quello attivo, deve essere di un determinato colore.
Vi allego il codide del CSS interessato:
#tabs { border: 0; margin: 0; margin-bottom: 5px; padding: 5px; background-color: #231f20; width: 690px; min-height: 80px; } ul { margin: 0; padding: 0; display: inline; } ul li { padding: 12px; list-style: none; display: inline; } ul li.active { list-style: none; display: inline; } ```e qui l'html prodotto:
<div id="tabs">
<ul>
<li ><img src="i/idee.jpg"></li><li class="active"><a href="../index.php?s=noi">.Noi</a></li>
<li><a href="../index.php?s=progetti">.Progetti</a></li>
<li><a href="../index.php?s=sostienici">.Sostienici</a></li>
<li><a href="../index.php?s=comunichiamo">.Comunichiamo</a></li>
<li><a href="../index.php?s=novita">.Novità</a></li>
<li><a href="../index.php?s=contatti">.Contatti</a></li>
</ul>
</div>
-
@Rinino said:
Il primo problema è che il primo elemento della lista non deve avere questo bordo perchè contiene una immagine.
li.primoelemento {border:0} ...prova a dare una classe al primo elemento dove azzeri il bordo (N.b. in questo caso azzera tutti i bordi...se vuoi che nasconda solo il sinistro -> border-left:0px;)
@Rinino said:
Il secondo problema è che i link devono essere posizionati in alto.
In alto in che senso? vedo che tabs ha un padding di 5px anche dall'alto...forse devi vedere come posizionare la ul
@Rinino said:Il terzo problema è che uno dei link, quello attivo, deve essere di un determinato colore.
li.active {color:#000; se lo vuoi nero oppure altri}
spero di averti aiutato...salut
-
il terzo l'ho risolto...
Scusa l'italiano maccheronico, intendevo:
Il menu ha una certa altezza e i link sono posizionati in basso, sulla "base" diciamo...
Grazie per la risp...