Come creare un'area di download

[Stemby]

Buongiorno,
sto cercando la strada migliore (semanticamente ed esteticamente) per realizzare in modo semplice ed efficace un'area di download, ovvero un blocco in cui vengano elencati i documenti scaricabili, con indicato, tramite un'icona, il formato degli stessi.

Il mio primo tentativo è questo:

<div class="download">
  Dépliant
  Statuto dell'associazione
</div>

.download {
	background-color: #d2d2d2; /* gray 20% */
	padding: 5px 20px;
	/* unofficial border-radius rules */
	-moz-border-radius: 15px;
	-khtml-border-radius: 15px;
}

.download a {
	display: block;
	color: #b22222;
	font-size: small;
	font-weight: bold;
	border: none;
}

.download a:hover {color: red;}

.download a:before {
	content: url(../images/Icona-generica-48x48.png) " ";
	vertical-align: middle;
}

.download a[href$=".pdf"]:before {
	content: url(../images/Icona-PDF-48x48.png) " ";
	vertical-align: middle;
}

Il risultato mi soddisfa abbastanza, ma mi piacerebbe fare di meglio.

In particolare, vorrei aggiungere l'indicazione della dimensione del file. Ho pensato allora che una tabella sarebbe stata forse una scelta più adeguata:

<div class="download">
  <table>
  <tr>
    <td>Dépliant</td>
    <td>512 kB</td>
  </tr>
  <tr>
    <td>Statuto dell'associazione</td>
    <td>718 kB</td>
  </tr>
  </table>
!-- end download --></div>

solo che poi non riesco a creare un CSS decente.

Qualcuno sa darmi una mano?

In particolare:
1) Come faccio ad allineare verticalmente il testo delle due celle affiancate? (ricordo che, nella prima cella, a sinistra viene aggiunta l'icona).

2) Perché non riesco ad eliminare completamente i margini della tabella? Con Firefox (ma anche con i browser basati su webkit), anche mettendo margine, padding e bordo a 0, c'è sempre un pixel circa di sfasatura rispetto a ciò che sta fuori dalla tabella.


Ovviamente sono ben accette anche soluzioni completamente diverse

Grazie!

[Mich_]

Tecnicamente la tua e` una lista. Renderla con una tabella non e` sbagliato (in effetti ci sono varie colonne e varie righe), ma io valuterei la possibilita` della lista:

<div class="download">
  <h2>Area di download</h2>
  <ul>
    <li class="pdf">
      Dépliant
      <span>512 kB</span>
    
    <li class="pdf">
      Statuto dell'associazione
      <span>718 kB</span>
    [/list]
</div>

Poi occorre pensare al CSS:

.download {
  ...
}
.download ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.download li {
  list-style-type: none;
  height: 50px; 
  margin: 0 0 0 50px;       /* lo spazio per l'icona del tipo file */
  padding: 0;                 /* necessario per sistemare i vari browser */
  display: table-cell;         /* per poter usare il vertical-align */
  vertical-align: middle;
}
.download a {
  display: block;
  height: 100%;
  width: 30em;            /* valore da sistemare - se vuoi avere i "kB" allineati */
}
.download span {
  ...
}

.download .pdf { list-style-image: url(../images/Icona-PDF-48x48.png); }
.download .gener { list-style-image: url(../images/Icona-generica-48x48.png); }
...

[Stemby]

Bello!!!

Grazie mille, stasera, quando arrivo a casa, lo provo.

[Stemby]

Purtroppo non funziona, né con Firefox né con webkit...



La riga che non permette la visualizzazione dell'icona è questa:

display: table-cell;      /* per poter usare il vertical-align */

Solo che senza di essa, succede un casino.

Grazie per il supporto!

[Mich_]

Mi sono dimenticato di farti aggiungere
float: left;
sia alla formattazione di <a> che a quella di <span>

In alternativa prova a togliere il display: block da <a>. non si sistemano piu` i kB uno sotto l'altro, ma si evita di farli andare a capo.
In tal caso puoi anche togliere il display dal[*]: anche questo peggiora un po', ma ti aiuta a sistemare i margini e padding.


Altra prova: prova a sostituire il margin con il padding per lo spazio per l'icona: alcuni brwoser lo preferiscono.

[Stemby]

Non funziona in nessuno dei modi che mi hai suggerito... (l'icona non compare)

Ho provato un metodo diverso, facendo comparire l'icona come background, e senza classe "pdf" nell'xhtml:

.download {
	background-color: #d2d2d2; /* gray 20% */
	padding: 5px 20px;
	/* unofficial border-radius rules */
	-moz-border-radius: 15px;
	-khtml-border-radius: 15px;
	font-size: small;
}

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

.download ul li { height: 50px; }

.download a {
	/* display: block; */
	float: left;
	color: #b22222;
	font-weight: bold;
	border: none;
	height: 100%;
	width: 20em;            /* valore da sistemare - se vuoi avere i "kB" allineati */
	padding-left: 45px;     /* ho ridimensionato le icone: adesso sono 35x48px */
	background: url(../images/icons/default_icon.png) no-repeat center left;
}

.download a[href$=".pdf"] {
	background: url(../images/icons/pdf_icon.png) no-repeat center left;
}

.download a:hover { color: red; }

Sento di essere vicino al risultato desiderato:


L'unica cosa che mi manca è abbassare la scritta, per centrarla o al limite allinearla al bordo inferiore dell'icona.

Come fare?


Grazie ancora!

[Mich_]

Hai tolto la classe, ma hai usato una sintassi che non e` riconosciuta da tutti i browser ...

Per poter centrare in verticale, occorre che il blocco sia di tipo table (table-cell e` il valore migliore, in quel caso) - vedi il CSS precedente.
Oppure puoi definire height e line-height e dare lo stesso valore ad entrambi.
Definire height all'oggetto <a> migliora anche l'usabilita` e l'accessibilita` (la parte sensibile risulta piu` grande della scritta).

[Stemby]

Originariamente inviato da Mich_
Hai tolto la classe, ma hai usato una sintassi che non e` riconosciuta da tutti i browser ...

Ah sì? VVoVe:
In realtà ho fatto diversi test con i 2 principali motori di rendering liberi (gecko e khtml/webkit) e non ho avuto alcun problema. Temo quindi che i browser che non riconoscono questa sintassi siano le vecchie versioni di IE. È così? Beh, in questo caso no problem, io le versioni precedenti alla 7 non le considero proprio: quelli non sono dei browser

Per poter centrare in verticale, occorre che il blocco sia di tipo table (table-cell e` il valore migliore, in quel caso) - vedi il CSS precedente.

Non funziona...

Oppure puoi definire height e line-height e dare lo stesso valore ad entrambi.

Funziona!!! Grazie mille

In realtà il comportamento è diverso rispetto a quello che mi aspettavo:

.download {
	background-color: #d2d2d2; /* gray 20% */
	padding: 5px 20px;
	/* unofficial border-radius rules */
	-moz-border-radius: 15px;
	-khtml-border-radius: 15px;
	font-size: small;
}

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

.download ul li {
	height: 50px;
	line-height: 50px;
}

.download a {
	float: left;
	color: #b22222;
	font-weight: bold;
	border: none;
	width: 20em; /* to align "kB" */
	padding-left: 45px; /* space for the icon */
	background: url(../images/icons/default_icon.png) no-repeat top left;
}

.download a[href$=".pdf"] {
	background: url(../images/icons/pdf_icon.png) no-repeat top left;
}

.download a:hover { color: red; }

Mi va già benissimo così, però mi piacerebbe capire: perché la scritta non è in basso? Altra domanda: perché devo mettere float: left?


Grazie!

[Mich_]

Mettere line-height uguale a height e` il modo piu` semplice per allineare in verticale una (singola) riga con un'immagine (o altro elemento non testuale).
In pratica dici che la riga di testo e` alta quanto lo spazio a disposizione, e allora il testo si allinea in mezzo.

L'altra alternativa e` usare il vertical-align, che pero` e` possibile solo nelle tabelle.


Il float serve per allineare piu` blocchi sulla stessa linea: tu hai il tag <a> e il <link>.


Devi preovare anche con IE7 ed IE8: la versione 7 e` ancora zoppicante sui CSS2, mentre la 8 credo abbia implementato quasi tutto.
Pero` gli altri brwoser stanno implementando i CSS3.

A proposito di CSS3, dato che usi il
-moz-border-radius:
-khtml-border-radius:
ti conviene inserire anche il
border-radius:
(con lo stesso valore) in modo che quando altri browser interpreteranno il border-radius, la tua pagina e` pronta senza ulteriori modifiche.

[Stemby]

Originariamente inviato da Mich_
In pratica dici che la riga di testo e` alta quanto lo spazio a disposizione, e allora il testo si allinea in mezzo.

Questo non mi era chiaro: il fatto che la scritta si allinei in mezzo alla riga. Quindi non c'è modo di allineare il testo in basso, giusto?

Il float serve per allineare piu` blocchi sulla stessa linea: tu hai il tag <a> e il <link>.

Non ho capito...

Devi preovare anche con IE7 ed IE8: la versione 7 e` ancora zoppicante sui CSS2, mentre la 8 credo abbia implementato quasi tutto.

Su IE7 avevo fatto qualche test giorni fa: nessun problema riguardo quella sintassi.

Pero` gli altri brwoser stanno implementando i CSS3.

Già
Se poi il W3C si desse una mossa a pubblicare la versione definitiva, sarebbe anche meglio

A proposito di CSS3, dato che usi il
-moz-border-radius:
-khtml-border-radius:
ti conviene inserire anche il
border-radius

Sì, hai ragione. Ci avevo già pensato, ma mi aveva frenato il fatto che l'unico risultato al momento è quello di avere un errore in più in fase di validazione del CSS.

Comunque provvedo, tanto errore più errore meno...
Speriamo che il CSS3 diventi definitivo presto. Sarebbe anche ora!