info menu

[Scalatore]

Guardate il menù su www.stefanopisciella.it per fare una cosa cosi in orizzontale che si deve fare? http://www.stefanopisciella.it/wai.css aspetto vostre indicazioni grazie

[panta1978]

Originariamente inviato da Scalatore
Guardate il menù su www.stefanopisciella.it per fare una cosa cosi in orizzontale che si deve fare? http://www.stefanopisciella.it/wai.css aspetto vostre indicazioni grazie

Tramite i CSS puoi fare una cosa di questo genere:

file .css

div#navigation ul{
margin:0;
padding:0;
list-style-type:none
}
	
div#navigation li{
display:inline;
margin:0px;
margin-right:2em;
padding:0
}

Ti faccio notare l'elemento chiave, ovvero display:inline. E' lui che ti consente di creare un elenco che non va a capo.

file .htm

<div id="navigation">
<ul>[*]Pagina 1[*]Pagina 2[*]Pagina 3[*]Pagina 4[/list]
</div>

[thomas_anderson]

La soluzione proposta da panta ha delle limitazioni sui browser versione 5. per IE5 bisogna dichiarare height: 0 per[*]. detto questo si può fare col float:

ul {
  margin: 0;
  padding: 0;
 list-style: none;
}

li {
  display: iniline; /* IE */
  float: left;
}

a:link, a:visited {
  display: block;
  float: left;
  width: 120px;
  margin: 0 0.5em; /* 0.5em distanza standard link */
  padding: 2px 3px;
  background: #f8f8ee;
  color: #900;
  font-weight: bold;
  font-size: 0.8em;
  text-decoration: none;
}
a:hover {
  background: #666;
  color: #fff;
}

La soluzione display:iniline, come dicevo, ha dei limiti su IE5, che tende a ravvicinare i margini e a non espandere l'area cliccabile se non si dichiara height: 0 per[*]. Il bug di IE si trova descritto su http://www.satzansatz.de/cssd/onhavinglayout.html