[HTML CSS] Posizionamento blocchi dinamica

[$te]

Salve,
ho notato su una mia pagina web, che con il mio smartphone, la visualizzazione non é perfetta.

Ho una tabella con 4 elementi che vorrei si mettessero in colonna, uno sotto l'altro, qnd si riduce la larghezza della pagina internet (come su un telefono).

Ho guardato i vari div, absolute, ma non ho trovato nulla di adeguato.

Sapete aiutarmi??

grazie!!

[wingman87]

La soluzione più adatta dipende da come sono strutturati gli elementi. Per questo genere di problemi a volte si usa anche javascript, magari con qualche plugin jquery tipo masonry.

[$te]

Originariamente inviato da wingman87

La soluzione più adatta dipende da come sono strutturati gli elementi. Per questo genere di problemi a volte si usa anche javascript, magari con qualche plugin jquery tipo masonry.

ma io li posso strutturare in base alla soluzione.
Non é quindi possibile farlo semplicemente con html e css?

[wingman87]

Allora la soluzione migliore secondo me sono le media queries:
http://mislav.uniqpath.com/2010/04/targeted-css/
http://www.w3.org/TR/css3-mediaqueries/
Considerato il fatto che praticamente tutti i dispositivi mobile oggi in uso dovrebbero supportarle.

[$te]

Originariamente inviato da wingman87

Allora la soluzione migliore secondo me sono le media queries:
http://mislav.uniqpath.com/2010/04/targeted-css/
http://www.w3.org/TR/css3-mediaqueries/
Considerato il fatto che praticamente tutti i dispositivi mobile oggi in uso dovrebbero supportarle.

cavoli ma sicuro che non ci sia un metodo piu semplice?

[wingman87]

Scusa, forse hai ragione, non ci ho pensato abbastanza...
Mettiamo ad esempio che tu abbia un contenitore "liquido" con all'interno 4 elementi di larghezza fissa in float.
Restringendo la pagina (e quindi il contenitore liquido) gli elementi in float che non stanno su una sola riga andrebbero a capo.
Comunque tieni buono anche il consiglio delle media query: per cose leggermente più complesse potrebbero tornarti utili.

[$te]

Originariamente inviato da wingman87

Scusa, forse hai ragione, non ci ho pensato abbastanza...
Mettiamo ad esempio che tu abbia un contenitore "liquido" con all'interno 4 elementi di larghezza fissa in float.
Restringendo la pagina (e quindi il contenitore liquido) gli elementi in float che non stanno su una sola riga andrebbero a capo.
Comunque tieni buono anche il consiglio delle media query: per cose leggermente più complesse potrebbero tornarti utili.

Il mio "problema" é che ho 4 immagini, e sotto l'immagine il link inerente.
Per allineare il tutto, ho fatto una tabella con due tr: uno per le immagini (con 4 td) e uno per le scritte.

Non fosse per quello, mi bastava mettere le 4 immagini, che stavano sulla stesa riga. Invece con la tabella non funziona.

[wingman87]

La soluzione che ti ho suggerito è comunque applicabile, dove ogni elemento sarà un div con dentro un'immagine e un testo, ad esempio così:

<div class="floatingElement">
   <img src="..." />
   <div class="imgDescription">Lorem ipsum</div>
</div>
<div class="floatingElement">
   <img src="..." />
   <div class="imgDescription">Lorem ipsum</div>
</div>
<div class="floatingElement">
   <img src="..." />
   <div class="imgDescription">Lorem ipsum</div>
</div>
<div class="floatingElement">
   <img src="..." />
   <div class="imgDescription">Lorem ipsum</div>
</div>

E il css:

.floatingElement { width:200px; float:left;}
.floatingElement img { width:200px; }

Se metti questo in una pagina vuota e restringi la finestra gli elementi che non ci stanno vanno a capo.

[wingman87]

Rileggendo però noto che forse tu vorresti le scritte tutte alla stessa altezza.
Se le proporzioni delle immagini non sono sempre le stesse dovrai usare uno script che trovi l'altezza massima e agisca di conseguenza.
Ad esempio:
La struttura degli elementi diventa così:

<div class="floatingElement">
   <div class="imgContainer">
      <img src="..." />
   </div>
   <div class="imgDescription">Lorem ipsum</div>
</div>

E poi con uno script (lo scrivo in jquery perché è molto più veloce):

$(document).load(function() {
   var maxImgHeight = 0;
   $('.floatingElement img').each(function(){
      var imgHeight = $(this).height();
      if(imgHeight > maxImgHeight){
         maxImgHeight = imgHeight;
      }
   });
   $('.floatingElement .imgContainer').height(maxImgHeight);
});

Notare che ho scelto l'evento load del document così che le immagini siano già state caricate.

[$te]

Originariamente inviato da wingman87

Rileggendo però noto che forse tu vorresti le scritte tutte alla stessa altezza.
Se le proporzioni delle immagini non sono sempre le stesse dovrai usare uno script che trovi l'altezza massima e agisca di conseguenza.
Ad esempio:
La struttura degli elementi diventa così:

<div class="floatingElement">
   <div class="imgContainer">
      <img src="..." />
   </div>
   <div class="imgDescription">Lorem ipsum</div>
</div>

E poi con uno script (lo scrivo in jquery perché è molto più veloce):

$(document).load(function() {
   var maxImgHeight = 0;
   $('.floatingElement img').each(function(){
      var imgHeight = $(this).height();
      if(imgHeight > maxImgHeight){
         maxImgHeight = imgHeight;
      }
   });
   $('.floatingElement .imgContainer').height(maxImgHeight);
});

Notare che ho scelto l'evento load del document così che le immagini siano già state caricate.

grazie per il consiglio!!!
Non era poi cosi difficile:P

Pero' ora ho un altro problema che non riesco a risolvere: queste 4 immagini le vorrei un po ben ripartite: ho quindi creato una tabella in cui metterle...ma nulla...sono tutte "schiacciate" a sinistra:S

[wingman87]

Questo effetto un po' ci sarà sempre... se il contenitore ha una dimensione massima ed una minima puoi giocare un po' con i margini (sx e dx) degli elementi ma se restringi la finestra quel poco che basta per mandare a capo uno degli elementi, gli altri non si centreranno, rimarranno al loro posto.
Se vuoi qualcosa di più complesso puoi farlo con uno script, usando l'evento resize:
http://api.jquery.com/resize/
...ma non so se ne vale la pena.