gestione img verticali e orizzontali

[blur]

Ciao,

avrei bisogno di un consiglio.
Come gestire le immagini ( le miniature ) verticali e orizzontali all'interno di vari div affiancati con float:left?
Perchè se le img fossero tutte dello stesso tipo, cioè tutte verticali o tutte orizzontali potrei specificare l'altezza del div contenitore, ma non sapendolo?

grazie

[webbeloz]

si suppone che questi div abbiano il compito di mantenere allineate le thumb...
Se si, ti basta definire un'altezza max ed il gioco è fatto.

Ma se hai sufficiente dimestichezza con i CSS3 potresti definire:
- quanti div inline / sulla stessa linea
- spazio tra i vari div / shadow ecc...

tutto con un div wrap ed una classe per i div content. / img

Aggiungi maggiori info e vedrai che arriveranno molte idee e anche qualche semplice esempio.

webbeloz

[blur]

altezza max riferita a che cosa? le img o il div?


Ti spiego brevemente cosa voglio fare.
ho questa pagina in cui voglio visualizzare i prodotti. La stampa dei risultati avviene dentro a un box in cui metto i classici dati quali nome, img miniatura, descrizione e tasto "clicca".
i box sono allineati in orizzontale a blocchi di 3, poi vanno a capo ed iniziano una nuova riga.
Il problema sono le img, perchè se un'immagine è più alta in verticale rispetto alle altre, mi sballa l'allineamento dei box.

Avrei risolto mettendo un'altezza height fissa al box che contiene l'img, ma IE7 invece, continua a sballarmi l'allineamento.

la mia (più o meno) situazione:

contenitore principale:
.row {
margin-top: -40px;
margin-left:-30px;
*zoom:1;
}

.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
}

.row:after {
clear: both;
}

il box contenitore dell'img:

.span4{
width:348px;
height: 380px;
}

[Nobody33]

Avrei risolto mettendo un'altezza height fissa al box che contiene l'img, ma IE7 invece, continua a sballarmi l'allineamento.

Dimentica IE7. Qui in europa non lo usa più quasi nessuno.
E se qualcuno lo usa, metti un alert con link alla microsoft per aggiornare.

Altrimenti fai un foglio di stile a parte per IE7.

[webbeloz]

senza esempi si fa sempre fatica a capire tutto quello che uno vorrebbe realizzare...
bstarebbe anche una immagine con i box disegnati, e si capirebbe meglio.

Ma una cosa potresti fare, forzare IE7 a far quello che tu vuoi che faccia:

tuo-box {
   height: auto !important;
   height: 380px;
   min-height: 380px;
}

e se vuoi tenere allineati i box:

....{float:left;display:inline; o anche: display:inline-block;]

[cassano]

Non è meglio display:inline-block cosi da dare le dimensioni ?

[Nobody33]

Non è meglio display:inline-block cosi da dare le dimensioni ?

IE7 sopporta inline-block solamente per elementi che sono inline in maniera "naturale" (come i span ecc..); del resto non se ne cura.

[webbeloz]

Originariamente inviato da cassano
Non è meglio display:inline-block cosi da dare le dimensioni ?

magari, potresti aggiornarci sugli esperimenti... ( T.AGG. )
ma potresti tuttavia provare una cosa:

  display: inline-block;
  *display: inline;
 zoom: 1;

e vedere come si comporta Explorer, se si comporta male... al massimo lo ELIMINI.
dovrebbe andare, i miei esperimenti danno esito ++

( T.AGG. )