larghezza cella O allineamento verticale

[Bregovic]

Devo creare una sorta di griglia in cui mettere cinque immagini affiancate per due righe.

Ho pensato di farlo con le tabelle (che odio e non so nemmeno usare) perchè con i contenitori non funziona l'allineamento verticale...

MA con le tabelle non mi funziona la larghezza fissa delle celle!
Cioè io non voglio mettere immagini traspareti o spazi quando non ho dati per evitare che la cella si espanda!!!!!!
ANche perchè le celle devono avere dei bordi!!!


IO spero ci sia una soluzione, che per ora non ho trovato, o per allineare verticalmente il contenuto di un box o per non fare espandere le celle ma fissarle in una posizione!!!!!

Spero nei css, visto che non ho avuto altri consigli!!!!

[Mich_]

Con i CSS si fa tranqullamente, ma non ho capito bene come deve venir fatto esattamente.

Ci provo:

<div id="contenitore">
  <div class="piccolo">[img]uno.gif[/img]</div>
  <div class="piccolo">[img]due.gif[/img]</div>
  <div class="piccolo">[img]tre.gif[/img]</div>
  ...
  <div class="separ">& nbsp;</div>
  <div class="piccolo">[img]qua.gif[/img]</div>
  <div class="piccolo">[img]cin.gif[/img]</div>
  ...
</div>

dove i CSS saranno del tipo:

#contenitore {
  width:98%;
  ...
}
.piccolo {
  float:left;  /* necessario */
  width: ... ; /*se si vuole*/
  border: solid 2px black; /*se serve*/
}
.separ {
  clear:all; /* annulla l'effetto del float */
  height:1px;
  width:100%;
}
/* se si vuole il bordo all'immagine, anziche` al div: */
.piccolo img {
  border: solid 2px black;
}

[Bregovic]

Ok,
ma la cosa che mi serve è che le immagini contenute dentro ai piccoli div siano allineate verticalmente quando troppo corte...

Come allineo verticalmente il boxino???

Grazie

[Mich_]

I boxini nella mia proposta sono allineati al bordo superiore.
Se li metti della stessa altezza, si allinea anche il bordo inferiore; oppure devi inserirli in un ulteriore <div> che identifica una "riga".

Poi il blocco dell'immagine puoi spostarlo come vuoi all'interno del boxino: devi solo settare gli attributi opportuni nel CSS di
.piccolo img {...}

Vedi anche il reference CSS di w3schools

[Bregovic]

Si,
hai ragione,
sto guardando l'allineamento verticale e pare si possa applicare...

Bah, chissà perchè non ci sono mai riuscita!

Allora faccio una prova...

Sai che gioia l'idea di non lavorare con le tabelle???
Io le odio e non le so nemmeno usare!

Grazie

[Bregovic]

ok,
tolte le tabelle,
ho fatto qualcosa di un pò diverso da te, ma non funziona il vertical align:

.griglia {
position:absolute;
width: 705px;
height: 270px;
margin:0px;

.cella {
margin-right:7px;
margin-bottom:7px;
border: 1px solid #CCCCCC;
height:131px;
width:131px;
background-color:#F5F5F5;
text-align: center;
float:left;


img.a{
vertical-align:middle;


<div class="griglia">
<div class="cella">
[img]uploads/UKL-047-001Small.jpg[/img]
</div>
<div class="cella">
[img]uploads/UKL-047-001Small.jpg[/img]
</div></div>

et c etc

[Mich_]

Non so con quale browse stai testando.
Comunque mi pare che vuoi anche un allineamento al centro delle singole immagini nelle (hai messo text-align nelle celle), ma manca il comando per i browser conformi al W3C: devi mettere margin:auto nel CSS dell'immagine.

Il margin:auto potrebbe anche risolverti il problema dell'allineamento verticale dell'immagine stessa.

C'e` anche uan cosa che non mi piace: il nome a della classe. Forse va bene, ma e` anche il nome di un tag, e questo potrebbe creare confusione.

[Bregovic]

Guarda ora ho fatto cos^.

IMG.middle{
margin:auto;
vertical-align:middle;



ma non funziona.

Sto provando su macintosh, firefox safari e mozilla...
Ma non funziona su nessuno dei tre...

non dirmi che devo tornare alle tabelle...

a me serve l'immagine centrata nel boxino.
Verticalmente e orizzontalmente...

[Mich_]

E` la seconda volta che posti un CSS senza la graffachiusa finale. Non e` che la hai dimenticata nel file?

Dopo prova anche a togliere il vertical-align (nei browser conformi, il margin:auto dovrebbe bastare).

PS nei CSS i nomi degli elementi del DOM vanno scritti minuscoli:
img ; non IMG
(pero` di solito i browser non ci badano).

PPS. non e` che hai una pagina pubblicata (anche provvisoria) da far vedere?

[Bregovic]

img.middle{
margin:auto;
}