Elenco categorie e sottocategorie stile yahoo con css e senza tabelle

[jesus]

Ciao a tutti amici, avrei un consiglio da chiedervi, stamattina ho la mente svuotata e non riesco a pensare bene .

Dovrei costruire un elenco di categorie e sottocategorie nello stile di yahoo, divise su tre colonne.
Avevo pensato, da XHTML, di impostare un elenco con il tag ul dove carico tutte le categorie e sottocategorie del tipo:

<ul id="elenco-categorie">[*]
    <big>Categoria</big>

    Sottocategoria 1, 
    Sottocategoria 2, 
    Sottocategoria 3...
  [*]
    <big>Categoria</big>

    Sottocategoria 1, 
    Sottocategoria 2, 
    Sottocategoria 3...
  [*]
    <big>Categoria</big>

    Sottocategoria 1, 
    Sottocategoria 2, 
    Sottocategoria 3...
  [/list]

Mi sembra la soluzione semanticamente più corretta in termini di XHTML.
Il mio problema nasce su come visualizzare queste voci in file di tre, cioè scorrendole in orizzontale.

Ho provato a dare un float:left agli elementi li e una width di 30% e più o meno funziona ma mi crea un pò di casini.

Come posso impostare al meglio il css?

[jesus]

Allora sto provando a realizzarlo. Ho messo la pagina in questione in rete così potrete dargli un'occhiata.

http://www.sindbad.it/directory_test.asp

Il foglio di stile che ho usato è:

#directory ul#elenco-categorie {
	margin: 5px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style-type: none;
}
#directory ul#elenco-categorie li {
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	width: 32%;
	float: left;
	min-height: 3em;         /*misura per browser seri*/ 
	height: auto !important; /*misura per browser seri*/ 
	height: 3em;             /*misura per IE, che interpreta height come min-height*/ 
}
#directory ul#elenco-categorie li big {
	font-size: 1.25em;
	font-weight: bold;
}
#directory ul#elenco-categorie li a {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-weight: normal;
}

Sta quasi funzionando... però guardate la voce "Arte e cultura", perchè viene visualizzata lì? Dovrebbe essere sotto "Economia e aziende" e seguire il foat invece no . Dove è che sbaglio?

[span]

404 Impossibile trovare la pagina

È possibile che la pagina che si sta cercando sia stata rimossa, rinominata oppure che sia temporaneamente non disponibile.

[jesus]

Originariamente inviato da span
404 Impossibile trovare la pagina

È possibile che la pagina che si sta cercando sia stata rimossa, rinominata oppure che sia temporaneamente non disponibile.

Ho tolto la pagina perchè ho risolto. Bastava mettere un dopo il
quando non c'erano sottocategorie.

Per vedere il risultato
www.sindbad.it/directory.asp

[jesus]

Salve a tutti... ho ancora problemi riguardo questa pagina.

Per notare il problema potete andare sulla pagina http://www.sindbad.it/directory.asp e cliccate, in fondo alla pagina, sulla bandierina Inglese.

Il problema sta nel fatto che appaiono dei vuoti ogni tanto nell'elenco, eppure sul codice html sembra tutto apposto. Se clicco sulla bandierina in italiano questo problema non esiste.

Qui (http://www.sindbad.it/problema.jpg) potete vedere un'immagine che spiega il problema.

Il codice css che uso è questo (ho omesso le parti non pertinenti):

#directory ul#elenco-categorie {
	margin: 5px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style-type: none;
}
#directory ul#elenco-categorie li {
	display:block;
	margin: 0px 5px 15px 0px;
	padding: 0px 0px 0px 0px;
	width: 30%;
	float: left;
}
#directory ul#elenco-categorie li big {
	font-size: 1.25em;
	font-weight: bold;
}
#directory ul#elenco-categorie li a {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-weight: normal;
}

Dove sto sbagliando?

Dimenticavo, il problema me lo da sia su IE6, sia su Firefox 1.0

[jesus]

up

[span]

Ti posso solo spiegare il problema...

Ogni[*] crea un blocco alto min-height 4em.

Fino a che il testo sta dento a queste misure non ci sono problemi, i blocchi si affiancano ed ogni riga composta da 3 blocchi è alta uguale, 4em.

Nel momento in cui il primo o il secondo blocco supera i 4em, e gli altri bolocchi, essendo indipendenti, restano di 4em, i blocco nella riga successiva cerca di fluttuare alla destra del blocco che a superato i 4em.

Non so se sono riuscito a spiegarmi, ma se pensi ad una struttura come questa:

|-------| |-------|
|W50%   | | W50%  |
|h100px | | h50px |
|       | |-------|
|       |
|-------|

E' chiaro che un terzo box si allineerà alla destra del primo box, occupando lo spazio lasciato dal secondo.

[jesus]

E come potrei ovviare a questo? Non so come muovermi

[Mich_]

Non ho seguito tutto il thread, ma in genere si consiglia di inserire un blocco con clear:all; (eventualmente anche un blocco alto un solo px e largo 100%)

Ad esempio:
<br style="clear:all;" />

per altri esempi fai una ricerca nel forum.

[span]

*potresti* aggiungere al 4° 8° 12° ecc...[*] una classe con clear: left, ma non so come reaggirà il layout con IE. Dipende da che tecnica usi per affiancare le colonne.

nel caso ti crei dei problemi con ie inverti... float: right; clear: right