menù verticale

**holden_1972** · 09-02-2005, 14:53

Vorrei ottenere un menù di link a bottoni senza immagini, a questo proposito ho creato questi stili:

codice:

<style>
.menu1  a:link, .menu1 a:visited {
background:#80FFFF;
color: black;

 
} 
.menu1 a:hover, .menu1 a:active {
background: #eee;
color:#c00;


} 
</style>

Quello che ottengo non mi soddisfa, ho ottenuto un effetto tasti con un'interlinea "inline", ma non riesco a dimensionare i link in modo che lo sfondo del link sia di uguali dimensioni, non so se sono stato chiaro, vi posto anche il codice corrispondente:

codice:

<div style="font-family: verdana; font-family: 14px; line-height: 1.5; ">
<div class="menu1">
>">FRANCIA

>">GERMANIA

>">ITALIA


</div>
</div>

Spero in un vostro aiuto, ciao,

holden

ps se poi volete consigliarmi qualche guida esaustiva sui css fate pure

**mandp** · 09-02-2005, 15:23

con il codice che stai usando ora non puoi ottenere quello che stai cercando di ottenere perchè se imposti il colore di sfondo per un tag A ovviamente lo sfondo colorato sarà lungo solo quanot è lungo il testo.
nel tuo caso, quindi, essendo i link di lunghezze diverse ottieni sfondi di lunghezza diversa.
se vuoi semplificare la creazione di un elenco potresti usare, appunto, gli elenchi cioè:
<ul>[*]primo link[*]secondo link[*]terzo link[/list]

così facento la struttura si crea da sè, intendo gli a capi, senza usare i Br perchè gli elementi LI sono fatti per essere visualizzati uno sotto l'altro.
a questo punto puoi impostare il colore di sfondo per il tag LI e dargli una larghezza standard (che dovrai però prima calcolarti in modo che poi ci stiano tutti i link) per es. 100px.
in questo modo avrai uno sfondo sempre lungo uguale. nota però che lasciando le impostazioni come sono ora per quanot riguarda le situazioni di link visitato etc etc... otterrai quanod ci vai sopra con il mouse un cambio di sfondo solo nella parte coperta dal testo.
quesot perchè, appunto, le impostazioni CSS relative al tag A "coprono" ovviamente solo la lunghezza del link stesso

**holden_1972** · 09-02-2005, 18:47

ho provato a impostare così l'elemento[*]:

codice:

li {background: grey; width:200px; margin: 10px 5px; border: 1 }

ma non cambia molto, gli elementi continuano ad essere diversi in lunghezza.

holden

**mandp** · 09-02-2005, 19:11

prova questo codice, funziona di sicuro, l'ho provato. imposti la larghezza per l'elemento A invece che per LI, però in questo codice si perde la separazione tra le righe.
il che è ovvio perchè lo sfondo viene impostato per l'elemento A e quindi la distanza tra le linee è sempre del colore di sfondo.
ti ho fatto alcune modifiche al codice, è sempre bene impostare tutti gli stili CSS nello stesos modo e non un po' "in linea" (cioè all'interno di style="" del tag specifico) e un po' all'interno del documento in <style></style>

<html>
<head>
<style>
.menu1 {
font-family: verdana;
font-family: 14px;
line-height: 1.5;
}
.menu1 li a:link, .menu1 li a:visited {
background-color:#80FFFF;
color: black;
width: 100px;
}
.menu1 li a:hover, .menu1 li a:active {
background: #eee;
color:#c00;
width: 100px;
}
ul {
list-style-type: none;
}
</style>
</head>
<body>
<div>
<div class="menu1">
<ul>[*]GERMANIA[*]ITALIA[*]FRANCIA[/list]
</div>
</div>
</body>
</html>

Discussione: menù verticale

Strumenti discussione

Ricerca discussione

Visualizza

menù verticale

Permessi di invio