Si, ma non mi e' chiaro perche' va a capo!

**buonste** · 08-09-2007, 01:00

Per iniziare, buona notte e buon weekend a tutti.
Vi sottopongo un problema:
Vorrei costruire un menu di header con 5 link con un immagine che cambia 'onmouseover'.
Ho seguito tutte le istruzioni come crearla con i CSS ma non capisco perche' non funziona.
Di seguito trovate il codice che ho scritto: perche' nel caso del 1' Tentativo ritorna a capo dopo ogni elemento? Come devo fare per aver tutte le immagini disposte orizzontalmente senza utilizzare la tabella?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset=UTF-8" />
<title></title>
<style type="text/css">
#btn {
height: 19px;
width: 130px;
text-indent: 10000px;
overflow: hidden;
display: list-item;
}
.btnHome { background: url(http://www.gisport.org/images/btnHome.gif) top center no-repeat; }
.btnHome:hover { background-position: bottom center; }
.btnSquadre { background: url(http://www.gisport.org/images/btnSquadre.gif) top center no-repeat; }
.btnSquadre:hover { background-position: bottom center; }
.btnAllenatori { background: url(http://www.gisport.org/images/btnAllenatori.gif) top center no-repeat; }
.btnAllenatori:hover { background-position: bottom center; }
.btnImpianti { background: url(http://www.gisport.org/images/btnImpianti.gif) top center no-repeat; }
.btnImpianti:hover { background-position: bottom center; }
.btnContatti { background: url(http://www.gisport.org/images/btnContatti.gif) top center no-repeat; }
.btnContatti:hover { background-position: bottom center; }
body {
background: #42afdc url(http://www.gisport.org/images/background.jpg);
background-attachment: fixed;
}
</style>
</head>
<body>

<div>
Home
Squadre
Allenatori
Impianti
Contatti
</div>

<table style="align:center; width:100%">
<tr>
<td align="center">Home</td>
<td align="center">Squadre</td>
<td align="center">Allenatori</td>
<td align="center">Impianti</td>
<td align="center">Contatti</td>
</tr>
</table>
</body>
<html>

Grazie a tutti anticipatamente!
Stefanoprova

**fcaldera** · 08-09-2007, 09:04

una lista di link va formattata di norma con una <ul>

un id è univoco e non può essere usato per più di un elemento (non puoi assegnare un id uguale a tutte le voci del menu.

a meno che tu non debba usare quel menu più di una volta per pagina non ha senso assegnare delle classi ai link. Tanto vale assegnare id diversi a cui associare l'immagine

Non serve ripetere allineamento e ripetizione delle immagini ogni volta: fallo nel caso de link e del link:hover

codice:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset=UTF-8" />
<title></title>
<style type="text/css">
body { 
  background: #42afdc url(http://www.gisport.org/images/background.jpg);
  background-attachment: fixed;
}

#menu { height: auto; overflow: hidden;}

#menu li{
  height: 19px;
  width: 130px;
  float:left;
}

#menu a {  background-position: top center; background-repeat: no-repeat; }
#menu a:hover {  background-position: bottom center; }

#btn_h { background-image: url(http://www.gisport.org/images/btnHome.gif);  }
#btn_s { background-image: url(http://www.gisport.org/images/btnSquadre.gif); }
#btn_a { background-image: url(http://www.gisport.org/images/btnAllenatori.gif); }
#btn_i { background-image: url(http://www.gisport.org/images/btnImpianti.gif); }
#btn_c { background-image: url(http://www.gisport.org/images/btnContatti.gif); }
</style>
</head>
<body>

<ul id="menu">[*]Home[*]Squadre[*]Allenatori[*]Impianti[*]Contatti[/list]

</body>
<html>

**buonste** · 09-09-2007, 11:14

Ciao fcaldera, grazie per il prezioso suggerimento.

Mi permetto di disturbarvi (tu o chi vorra' darmi una mano) sull'argomento poiche' ho problemi nella centratura del menu nella pagina:

Questo e' il CSS modificato come m'hai suggerito:

#btnMenu {
list-style: none;
text-align: center;
width: 100%;
height: auto;
overflow: hidden;
}

#btnMenu li{
width: 135px;
float: left;
}

#btnMenu li.separator {
background-image: url(http://www.gisport.org/images/btnSeparatore.gif);
background-position: top center;
background-repeat: no-repeat;
width: 20px;
height: 20px;
float: left;
}

#btnMenu a { display: block; height:19px; background-position: top center; background-repeat: no-repeat; }
#btnMenu a:hover { background-position: bottom center; }

#btnMenu_h { background-image: url(http://www.gisport.org/images/btnHome.gif); }
#btnMenu_s { background-image: url(http://www.gisport.org/images/btnSquadre.gif); }
#btnMenu_a { background-image: url(http://www.gisport.org/images/btnAllenatori.gif); }
#btnMenu_i { background-image: url(http://www.gisport.org/images/btnImpianti.gif); }
#btnMenu_c { background-image: url(http://www.gisport.org/images/btnContatti.gif); }

e questo il codice HTML per visualizzare il menu orizzontalmente:

<ul id="btnMenu">
<li class="separator">[*]
<li class="separator">[*]
<li class="separator">[*]
<li class="separator">[*]
<li class="separator">[*]
<li class="separator">[/list]

Ho provato a racchiuderlo tra <div align="center"></div> ma picche... dove sto sbagliando (ancora)?!?

**fcaldera** · 09-09-2007, 13:11

http://forum.html.it/forum/search.ph...by=&sortorder=

Discussione: Si, ma non mi e' chiaro perche' va a capo!

Strumenti discussione

Ricerca discussione

Visualizza

Si, ma non mi e' chiaro perche' va a capo!

Permessi di invio