Menu con css

**marcorai** · 24-03-2004, 13:44

Ciao a tutti e scusate il disturbo.

Il menù a questo link
http://www.maxmile.it/testmenu.html

mi dà 2 problemucci:
a) la tabella si allunga leggermente quando si va sui link
b) non riesco ad eliminare in nessun modo la riga bianca in fondo

O come fo?

Grazie per ora!

Marco

**stefanomasetti** · 24-03-2004, 13:53

a) la tabella si allunga leggermente quando si va sui link
- Hai settato il bordo di un 1px sull'over, è quello che ti fa aumentare la tabella.

b) non riesco ad eliminare in nessun modo la riga bianca in fondo
- Devi proprio usare un elenco? Non sarebbe più semplice senza? Prob. è proprio l'elenco (ul) che ti genera questa riga.

Ciao

**herrel** · 24-03-2004, 13:56

l'errore sull rollover era causato da un width nel a:hover

<html>
<head>
<title>Testmenu</title>
<meta http-equiv="Content-Type" content="text/html;">

<style>
body {font:12px Verdana, Arial, Helvetica, sans-serif}
a:link {text-decoration:none; color:red;}
a:visited {text-decoration:none; color:red;}
a:hover {background-color:#E8B900; color:black; border:1px solid black;}
a:active {color:red; text-decoration:none}
ul li {list-style:none outside; margin-left:-40px;}
#testata {background-color:#E8B900; font-color:black; padding:4px; width:120px}
#menu {border:1px solid #E8B900; padding:4px; width:120px;}
</style>
</head>
<body>
<div id="testata">Testata</div>
<div id="menu">
<ul>[*]Home[*]Pagina 1[*]Pagina 2[*]Pagina 3[*]Pagina 4[/list]
</div>
</body>
</html>

**marcorai** · 24-03-2004, 14:11

stefano:
a) hover: vero! potrei togliere il bordo, però mi viene un po' più bruttino. Potrei provare a spaziare gli elementi del menù di 1px con line-height?
b) le guide sui css (anche di questo sito) consiglierebbero l'elenco... cmq proverò senza!

herrel:
a) nel tuo modo però l'hover non copre tutta la riga, ma solo il testo (mi sembra un effetto un po' più bruttino...)

Buon appe!

Marco

**herrel** · 24-03-2004, 14:24

prova

<html>
<head>
<title>Testmenu</title>
<meta http-equiv="Content-Type" content="text/html;">

<style>
body {font:12px Verdana, Arial, Helvetica, sans-serif}
a:link {text-decoration:none; color:red; border:1px solid white;}
a:visited {text-decoration:none; color:red; border:1px solid white;}
a:hover {background-color:#E8B900; color:black; border:1px solid black;}
a:active {color:red; text-decoration:none}
ul li {list-style:none outside; margin-left:-40px;}
ul li a {width:110px;position:relative;}
#testata {background-color:#E8B900; font-color:black; padding:4px; width:120px}
#menu {border:1px solid #E8B900; padding:4px; width:120px;}
</style>
</head>
<body>
<div id="testata">Testata</div>
<div id="menu">
<ul> [*]Home [*]Pagina 1 [*]Pagina 2 [*]Pagina 3 [*]Pagina 4 [/list]
</div>
</body>
</html>

</body>
</html>

**Marcolino's** · 24-03-2004, 14:55

Le guide ti consigliano sempre l'elenco per i menù perchè così risulteranno comunque sempre impilati, anche quando i vechci browser o quelli testuali, non supportando la grafica, ti faranno comunque vedere un elenco di link.
L'elenco lo puoi mettere in un layer, o anche da fuori come puoi vedere negli esempi di www.constile.org ma in una tabella non ha senso, lo dovresti comunque mettere in una sola cella, quindi a che pro?
E togli l'outside da list-type

**marcorai** · 24-03-2004, 15:59

Grazie a tutti dei consigli!

In effetti il "problema" sembrava essere generato dal <div>.
Ho optato per una classe.

http://www.maxmile.it/testmenu.html
(sicuramente migliorabile, per ora mi accontento!

)

Marco

**kaze** · 24-03-2004, 16:40

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML LANG="IT">
<HEAD>
<style>
.menu{
background-color:#FFFFFF;
}
.titolo{
padding:5px;
width:100px;
text-align:center;
color:#000000;
background-color:#FF9900;
font-family:verdana;
font-weight:bold;
font-size:10px;
}
.contenitore{
padding:1px;
width:100px;
background-color:#FFFFFF;
border:1px solid #FF9900;
font-family:verdana;
font-weight:bold;
font-size:10px;
}
a,active,link,visited{
text-decoration:none;
color:#000000;
border:1px solid #FFFFFF;
font-family:verdana;
font-weight:bold;
font-size:10px;
width:100%;
}
a:hover{
text-decoration:none;
color:#FFFFFF;
background-color:#FF9900;
border:1px solid #000000;
font-family:verdana;
font-weight:bold;
font-size:10px;
width:100%;
}
ul,li{
text-decoration:none;
list-style:none;
text-align:left;
margin:0px;
}
</style>
</HEAD>
<BODY>
<div class="titolo">Capoverso</div>
<div class="contenitore">
<ul>[*]prova 1[*]prova 2[*]prova 3[*]prova 4[*]prova 5[*]prova 6[/list]
</div>
</BODY>
</HTML>

Dovrebbe eesere (se ho capito

) quello che volevi
o

?????

Discussione: Menu con css

Strumenti discussione

Ricerca discussione

Visualizza

Menu con css

Prova un pò qst

Permessi di invio