incolonnare div in base alla percentuale del browser

[deio]

Salve ragazzi, è possibile far incolonnare div diversi che contentengono una immagine all'interno di una pagina in percentuale?

Esempio:

<div centrale in percentuale 100%>
Qui dentro avrò tutti i miei div (sono moduli con foto) che andranno poi a capo a seconda della dimensione del proprio browser.

Grazie anticipatamebnte,

De ;-)

[lila89]

ciao,
penso che tu non ti stia riferendo al browser che si utilizza (in quanto viene visualizzato sempre uguale)....ma quanto più alla risoluzione dello schermo, per cui, hai 2 soluzioni:

1) metti tutto in percentuale, sia la larghezza dei div sia delle immagini dando anche il minimo width; (oppure lasci le immagini grandi normali e metti in % solo il div)

2) aggiungi uno script javascript che riesce a capire con che risoluzione l'utente sta guardando la pagina, e a seconda della risoluzione gli associ fogli di stile diversi (per cui avrai un foglio di stile per ogni risoluzione)

[deio]

Thanks,
ma credo di non aver inquadrato bene il mio problema..

Praticamente,
per il div centrale ho utilizzato un cointainer div elastico,

<style type="text/css">
body{
font-size: 76%;
text-align: center;
}

div#container{
width: 60em;
margin: 0px auto;
text-align: left;
}

</style>

All'interno di questo div voglio inserire ulteriori blocchi (div o tabelle non importa) che vanno automaticamente a capo. Ma non riesco proprio.

Quindi:

<div id="container">
<div>contenuto</div>
<div>contenuto</div>
<div>contenuto</div>
<div>contenuto</div>
<div>contenuto</div>
<div>contenuto</div>
</div>

Il contenuto che nel mio caso sono immagini devono andare a capo da sole, come per il testo ad esempio che se supera la dimensione della tabella va a capo da solo..

[Mich_]

Le immagini sono di default oggetti inline, per cui sono come testo e vanno a capo da sole. Basta che le inserisci tramite i tag <img>. Tramite CSS puoi dare dei margini, in modo che non stiano appiccicate.

Se vuoi avere lo stesso effetto con degli oggetti di tipo blocco, o vuoi trasformare le immagini in oggetti di tipo blocco (ad esempio per dare dimensioni esplicite), allora devi definire
float: left
in ciascun blocco (o img) che viene inserito: anche in tal caso gli oggetti vanno a capo quando non ci stanno piu` nella "riga".
IMPORTANTE: se usi il float, alla fine, prima della fine del contenitore, occorrera` inserire un oggetto contenente il clear.

Esempio:

<div id="contenitore">
  [img]... alt=[/img]
  [img]... alt=[/img]
  ...
</div>

CSS:
#contenitore {
  width: ...;
}
#contenitore img { 
  float: left;
}
#contenitore:after {
  clear: left;
  ... vedi [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float
}

[lila89]

Originariamente inviato da deio
Thanks,
ma credo di non aver inquadrato bene il mio problema..

Praticamente,
per il div centrale ho utilizzato un cointainer div elastico,

<style type="text/css">
body{
font-size: 76%;
text-align: center;
}

div#container{
width: 60em;
margin: 0px auto;
text-align: left;
}

</style>

non mi sembra elastico...visto che gli hai dato una larghezza fissa (60em)... devi mettere una percentuale per farlo diventare elastico;

poi devi anche creare la classe per il conetnuto, e io fossi in te ogni immagine la racchiuderei in <a></a> in modo che capisce da solo se ci sta o no..

[deio]

perfetto risolto
Grazie ragazzi!!

qui il codice utilizzato:

html, body {
width: 95%; /* necessario per dare significato al successivo 100% */
}
.container {
width: 100%;
background-color: #000000;
}
.container:after {
width: 100%;
clear: both;
}
.content {
float: left;
width: 160px;

}

<div class="container">

<div class="content">
[img]immagine.jpg[/img]

Nome immagine
</div>

...

<div class="content">
[img]immagine.jpg[/img]

Nome immagine
</div>

</div>

[Mich_]

Aggiungo alcuni commenti al tuo codice.

html, body {
  text-align: center;   /* per centrare il container in IE */
  width: 95%; /* necessario per dare significato al successivo 100% */
}  /* in generale non e` possibile dare dimensione ad HTML diversa da 100%
      in alcuni browser il <body> coincide con <html>, quindi anche il body e` escluso */
.container {
  width: 100%;      /* qui puoi dare invece 95% */
  margin: 0 auto;    /* per centrare il container nella finestra */
  background-color: #000000;
  text-align: left;     /* per evitare di ereditare il center di cui sopra */
}
.container:after {
  width: 100%;
  clear: both;
  /* qui ci manca qualcosa, altrimenti il clear potrebbe non funzionare: copia dal link al post preced */
}
.content {
  float: left;
  width: 160px;
  test-align: center;   /* per centrare la didascalia sotto l'img */
}
.content img {  /* questo sostituisce l'attributo inserito nell'HTML */
  border: 0;
  margin: 0;
}
====
<div class="container">

  <div class="content">
    [img]immagine.jpg[/img] 
    
    
    
Nome immagine
  </div>

...

</div>

[deio]

Ho fatto alcune modifiche puoi vederel qui:
http://www.piacenzanight.com/sezione...night-2008.asp

perchè, il cointainer non riesco a metterlo centrato?

Quale altra proprietà devo aggiungere??

[Mich_]

Se un oggetto e` largo 100%, non puo` essere centrato.

Prova a dare sfodni diversi ai vari oggetti, per renderti conto di cosa succede.

E comunque le immagini (cioe` i blocchi che le contengono) saranno sempre allineate a sinistra, visto il float dei blocchi stessi: se avanza posto questo sara` sempre a destra (all'interno del container).

E ti manca qualche attributoper far funzionare il clear: il trucco di fcaldera dovrebbe funzioanre in tutti ii brwoser, ma devi applicarlo correttamente

[Mikimimiki85]

Ciao a tutti,
riprendo questo topic per una domanda, sto realizzando il footer di un sito web e nella parte contatti devo inserire quanto segue:
- IMMAGINE CORNETTA con numero di telefono cliccabile alla sua destra
- IMMAGINE EMAIL con testo cliccabile a lato che apre la mail

Ho usato il seguente codice:

<div style="float:left; margin-bottom:0.5em; margin-right:0.5em; margin-top: 4px;"><img src="CORNETTA TELEFONO"</div>
 <div style="float:left"><a data-rel="external" href="tel:+39xxxxxxxxxxx" target ="_blank">(+39) xxxxxxxxxxx</a></div>
<div style="float:left; margin-bottom:0.5em; margin-right:0.5em; margin-top: 4px;"><img src="BUSTA EMAIL"</div>
 <div style="float:left"><a href="mailto:xxxxxxxxxxx">Scrivici qui</a></div>

Ma il risultato è questo:
Colonna DIV.jpg

Come faccio a incolonnare il tutto staccando la busta email dal numero di telefono?