UL in "directory" style

**cicciput** · 08-09-2005, 20:52

Vorrei mostrare una lista di categorie con lo stile tipico delle directory ovvero con le stesse raggruppate a due a due (o tre a tre ecc) per riga.
So che questo layout viene fatto con le tabelle ma mi chiedevo se si può fare con un UL e i CSS.

(vedi immagine allegata...)

**thomas_anderson** · 08-09-2005, 21:02

Puoi usare list-style-image per aggiungere l'immagine della cartella alle voci. La lista può essere contenuta in un div che a sua volta puoi ripartire in due col float.

**cicciput** · 08-09-2005, 21:13

Argh! Non ho capito, per l'immagine non è un problema, come divido le categorie una div in due colonne float???

Esempio, lasciando perdere immagini e descrizioni che metto io dopo, come faccio con questa UL a ottenere il risultato dell'immagine?

codice:

<ul>[*]Acquisti[*]Computer[*]Divertimento[*]Grafica[*]Internet[*]Italia[*]Società[*]Webmatser[/list]

Grazie 1000

**thomas_anderson** · 08-09-2005, 21:20

codice:

<div id="mastcol">
        <div id="coleft">
          <ul>[*]voce 1[*]voce2[/list]
        </div>
        <div id="colright">
          <ul>[*]voce1[*]voce2[/list]
        </div>
     </div>

**cicciput** · 08-09-2005, 21:25

Ho capito, col mio html sopra non si può fare...

Grazie

**Mich_** · 12-09-2005, 09:50

Secondo me si puo` fare.
Non so se ha senso per una lista cosi` corta, ma io farei un CSS di questo tipo:

codice:

ul li {
  width: 40em;
  height: 2em;
  float: left;
  display: inline;
  /* eventuali formattazioni del 'punto' */
}

Edit: ho guardato ora l'immagine. Il CSS sopra va bene per il primo livello;
Per il secondo (cioe` per le scritte piccoline sotto il link), occorre fare modifiche anche all'HTML:

codice:

<ul>[*]Acquisti<span>qui la descrizione del link acquisti</span>[*]Computer...[*]Divertimento...[*]Grafica...[*]Internet...[*]Italia...[*]Società...[*]Webmatser...[/list]

(tutti i link con la stessa struttura)

Ed occorre poi dare una descrizione CSS del link:
ul li a { ... }
e dello span
ul li span { ...}

**cicciput** · 12-09-2005, 20:35

Beh, la lista sarà anche più lunga ed ha principalmente lo scopo di non lasciare categorie fuori dalla vista.
In effetti funziona, ho tolto la descrizione dal link e ho usato le percentuali per evitare spiacevoli "a capo" inoltro ho messo tutto in una div per "compattare" al centro dello schermo ed ecco il risultato:

codice:

<style type="text/css">
/*<![CDATA[*/
ul li {
	width: 46%;
	padding: 0 2% 1em 2%;
	float: left;
	display: inline;
}
ul li a {
	font-weight: bold;
	text-decoration: none;
}
ul li span{
	display: block;
}
div {
	width: 50%;
	margin: 0 25%;
}
/*]]>*/
</style>
</head>
<body>
<div>
 <ul>[*]Acquisti<span>qui la descrizione del link</span>[*]Computer<span>qui la descrizione del link</span>[*]Divertimento<span>qui la descrizione del link</span>[*]Grafica<span>qui la descrizione del link</span>[*]Internet<span>qui la descrizione del link</span>[*]Italia<span>qui la descrizione del link</span>[*]Società<span>qui la descrizione del link</span>[*]Webmatser<span>qui la descrizione del link</span>[/list]
</div>
</body>
</html>

Unica cosa... è sparito il pallino e con lui eventuali immagini al suo posto... dov'è finito???

**Mich_** · 13-09-2005, 08:53

Ci sono alcune cose che non vanno bene. Ma l'hai provato seriamente o hai testato solo in qualche browser bacato?

Non ci puo` essere un elemento blocco all'interno di uno inline. forse non devi mettere inline il[*]

Il div lo hai definito 50% del body, ma se il body risulta stretto, ti scombina il tutto. Io definirei piu` largo:
width: 70%; /* o un valore ragionevole */
margin: o auto;
In tal modo le colonne saranno 2 o tre a seconda della larghezza dei singoli[*] all'interno dello spazio del <div>

Poi al body (o div che contiene il tutto) dovrai definire
text-align center;
per far centrare anche per il browser IE.

Per quanto riguarda il[*], la somma di 2% + 46% + 2% + eventuali bordi (che non hai azzerato) puo` essere maggiore di 50%, che ti fa stare una sola colonna.
Non credo ti convenga usare il padding, che viene interpretato diversamente da IE.
Inoltre 46% di qualcosa di stretto, se poi i caratteri sono larghi, potrebbe scombinare il tutto. Meglio sarebbe dare una larghezza fissa (rispetto al carattere), lasciando poi al browser inserire due o tre colonne a seconda della larghezza.
ul li {
width: 45%;
margin: 0 2% 1em 2%;
padding 0;
border 0;
float: left;
/*display: inline;*/
/* qui puoi metterci gli attributi per definire il punto o l'immagine*/
}

**cicciput** · 13-09-2005, 10:59

Testato con IE e FF non fa una grinza. So che dovrei lasciare spazio x eventuali margin non azzerati eccetera e allargare per testi grandi in finestre piccole ma volevo riportare solo il codice essenziale, significativo.
Senza mettere un elemento block in uno
inline non c'è stato verso di ottenere l'effetto desiderato (2 (due) colonne)
Nessuna notizia del pallino ancora...

Discussione: UL in "directory" style

Strumenti discussione

Ricerca discussione

Visualizza

UL in "directory" style

Permessi di invio