Problema cocciuto con una lista!

vale76

Problema cocciuto con una lista!

Buonasera, ho un problema con una lista; ho poca esperienza e finora non le avevo ancora usate, perché l'ergonomia del mio sito è un pò particolare, ma oggi ho letto le guide e ho fatto qualche test; finora tutto bene tranne una lista creata per un menu di navigazione. Resta una distanza dal margine superiore che nn mi piace, e che non riesco a eliminare

La pagina in questione è [url=http://www.paroledautore.net/villa_indice.htm]questa

Nel css ho messo:


div.lista_menu li {		
	padding: 1px;
	margin-top:0;
	margin-left:2px;
	margin-right:4px;
	display:inline;
	}

mentre in una vecchia versione della pagina, senza la lista sul menu, verrebbe come voglio io:

[url=http://www.paroledautore.net/poesie/amatoriali/villa_indice.htm]pagina vecchia

Come vedete, nella pagina nuova che vi ho mostrato, non riesco a far salire quel benedetto menu. Ho fatto varie prove ma non so più cosa fare.. dove ho sbagliato?

onsitus

Personalemente l'unica differenza che vedo tra le 2 pagine (con IE7 su windows) è che c'è più spazio tra la fine del menu e la parte inferiore della pagina. :bho:

vale76

no, no, c'è uno spazio di troppo tra il banner titolo e il menu dei poeti. come se ci fosse un <br>

vale76

ragazzi, perdonatemi tanto, ma dopo aver fatto altre prove e vari pasticci inimmaginabili, sono riuscita a ripristinare la situazione di partenza.. ma senza ottenere l'effetto che vorrei..
ricapitoliamo; la pagina sulla quale sto lavorando è [url=http://www.paroledautore.net/villa_indice3.htm]questa.

Come vedete, c'è il menu di navigazione, in alto, su due linee orizzonali. Sotto, la lista di link, che sono i titoli delle poesie dell'autore, questa volta, una normale lista con i links in verticale.

Per ottenere questa situazione, nel CSS collegato, per il menu superiore, orizzontale, questa dichiarazione:


div.navigazione li{
list-style-type:none;
padding:2px;
margin:0;
margin-left:2px;
margin-right:4px;
display:inline;
}

e richiamato così nella pagina:

<div class="navigazione">
 <ul>
     <li><a href></li>
     <li><a href></li>
 </ul>
</div>

(ho usato una class, anche se inizialmente era un #id, per poterla ripetere, infatti le righe sono due).

Per il menù titoli delle poesie verticali:


div#menu_titoli li{
	list-style:square inside;					
	padding: 5px;
	margin-left:40px;
	margin-right:90px;
	margin-bottom: 5px;
	}

e così richiamato nella pagina:


<div id="menu_titoli">
 <ul>
      <li><a href></li>
      <li><a href></li>
 </ul>
</div>

La mia richiesta; premessa: non visualizzate la pagina con il solito IE, in quanto non mostra la pagina come su Firefox e Opera, per quanto riguarda il menu di navigazione orizzontale in alto, infatti, con queste impostazioni non sono riuscita in nessun modo a eliminare lo spazio visivo tra il banner pagina "poesie amatoriali" e il menu.

Qualche anima pia può aiutarmi?

onsitus

[HTML]
div.navigazione ul{
margin:0;
padding:0;
}
[/HTML]

vale76

ora è salita, ma nn c'è più distanza tra le due righe!

http://www.paroledautore.net/villa_indice3.htm

onsitus

@Vale76 said:

ora è salita, ma nn c'è più distanza tra le due righe!

http://www.paroledautore.net/villa_indice3.htm

Eh si. Le due righe sono due div differente con il stesso nome di classe.

vale76

Se agisco su margin-bottom è corretto, o devo dare alle due righe due classi diverse? Perché sto provando con il bottom e si stanno distanziando.

onsitus

A quel punto, prova a metterci semplicemente:
margin-top: 0;

vale76

@Onsitus said:

A quel punto, prova a metterci semplicemente:
margin-top: 0;

no, non va bene, non c'è spazio tra le due righe, e appaiono soffocate, vedi:

http://www.paroledautore.net/villa_indice3.htm

onsitus

@Vale76 said:

no, non va bene, non c'è spazio tra le due righe, e appaiono soffocate, vedi:

http://www.paroledautore.net/villa_indice3.htm

Dal tuo css:

[HTML]
div.navigazione ul{
margin:0;
padding:0;
margin-top:0;
}

[/HTML]

Serve togliere il margin:0;

vale76

è quello che ho fatto, ma insisto, non c'è distanza tra la riga sopra e la riga sotto.

vale76

errata corrige, non avevo tolto il margin 0, ora funziona, grazie

onsitus

Ok, stavo per postarti un screenshot.:D

vale76

@Onsitus said:

Ok, stavo per postarti un screenshot.:D

ehm, visto che sei così gentile, ti faccio vedere un'altra prova ghgh :D:

http://www.paroledautore.net/villa_indice4.htm

ho realizzato l'opposto della pagina precedente, ho ottenuto tre colonne seguendo un esempio reperito da html.it
però non riesco ancora a metterlo a punto: se invece di tre colonne, volessi vederne due?

nel css:

ul#multi,ul#multi li{margin:0;padding:0;list-style:square inside;}

ul#multi{width: 100%;overflow: hidden;
    padding: 1em 0;margin:4em 0;
    line-height: 1.8;
    }

ul#multi li{float: left;width: 32%;
    margin-left: 1%;display: inline;
    border-bottom:1px dotted #777}

nella pagina:

[HTML]<ul id="multi">
<li>Elemento di lista 1</li>
<li>Elemento di lista 2</li>
</ul>[/HTML]

inoltre, così facendo non si vede più il quadratino, come mai?

onsitus

Riguardo le due colonne, in ul#multi li, c'e width: 32%;. Sarebbe l'equivalente di un terzo di ul impostato a 100%. Cambia il valore di 32% per 50% (o leggermente di meno 48/49 - fa qualche prove)

Riguardo le bullet (il quadratino), quello e piu difficile da spiegare.
Se toglie il display:inline; le bullet saranno visibile in Firefox ma non per Internet Explorer che interpreta la larghezza del ul senza includere il spazio necessario per il quadratino. Per quello viene tagliato fuori (non e visibile). Il primo problema potrebbe il text-align centrato ma anche se lo imposta a sinistra, sara cmq da aggiungere un padding-left a ul per dare spazio al quadratino erenderlo visibile. Anche facendo cosi, incontra quello che potrebbe essere il secondo problema con il float left. Di nuovo, IE spostera il testo (li) completamente a sinistra senza prendere in conto il quadratino. Va be, io mi capisco. La soluzione non c'e l'ho (non cosi senza fare prove).:D
Se vuoi capire quello che volevo dire, puoi dare un occhiata a questo articolo:
http://www.onsitus.it/index.php?option=com_content&task=view&id=43&Itemid=54
Era per un altro tipo di bug ma pure in quel caso i quadratini spariscono e puoi vedere la differenza di interpretazione del elemento ul tra Firefox e IE.;)

vale76

ma è difficile combattere con queste maledette liste! mi stanno facendo impazzire, ho fatto senza accorgermi un errore di parsing nel CSS e a momenti mi pigliava un colpo!

@Onsitus, sono stufa di combattere, è da stamattina che continuo. Lascio così a tre colonne, ma non riesco al solito a farle salire uffaaaaaaa


ul#multi,ul#multi li{margin:0;padding:0;list-style:none}			

ul#multi{width: 100%;overflow: hidden;
    padding: 1em 0;margin:4em 0;
    line-height: 1.8;
    }

ul#multi li{float: left;width: 32%;
    margin-left: 1%;display: inline;
    border-bottom:1px dotted #777}

margin-top o margin:0, non ci sto capendo più niente, dove lo devo mettere?

http://www.paroledautore.net/villa_indice4.htm

vale76

forse ho risoltoooooooooooo
ho cambiato, ho messo la dichiarazione dentro a un div li e un div ul e pare anche che non ci siano errori, ma se qualcuno gentilmente potesse controllare per dirmi se va bene, così posso andare avanti a lavorare al mio sito... chiedo scusa ancora per il continuo disturbo.. :imb:

questa la doppia dichiarazione nel CSS:


div.multicolonna li{
margin:0;padding:0;list-style:none;
float:left;width:32%;
margin-left: 1%;display: inline;
border-bottom:1px dotted #777}

div.multicolonna ul{
width: 100%;overflow: hidden;
padding: 1em 0;margin:4em 0;
line-height: 1.8;
margin-top:0;
}

questa la pagina: http://www.paroledautore.net/villa_indice4.htm

grazie in anticipo