Paginazione con immagini

[Diddlina]

Ciao a tutti,

ho questo problema, non riesco ad impaginare le immagini suddivise in due colonne in questo modo:
[PRE]
|
imm1 |imm2
|
---- +----
imm3 |imm4
|

[/PRE]

Sto usando CSS2 e XHTML 1.0.

Grazie 1000!

[Mich_]

Evidentemente il forum non conosce il [ PRE ], e il tuo tentativo di incolonnamento non e` riuscito. Forse con il [ code ] avresti avuto piu` fortuna.

Ora non ho capito cosa ci deve essere in orizzontale tra le due righe, per cui non posso essere piu` preciso.
Puoi pero` vedere questa pagina, in cui ho usato testi su due colonne, intervallati da qualcosa che spazia su tutta la larghezza della pagina.

Ciao
Michele

[Diddlina]

Ci provo...

                        |
                  TAB1  |  TAB2
                        |
                  ------+------
                        |
                  TAB3  |  TAB4
                        |

Comunque sì, più o meno è come quella della pagina che mi hai mostrato.

[Mich_]

Originariamente inviato da Diddlina
Comunque sì, più o meno è come quella della pagina che mi hai mostrato.

Allora ti conviene copiare quel codice ed adattarlo alle tue esigenze. Io ho inserito il testo dentro i vari <div>, tu devi invece inserirvi le tue immagini.

E` critico l'uso dei corretti elementi dei CSS (ci ho perso diversi giorni a studiare i CSS per arrivare a quel risultato).

Ciao
Michele

[Diddlina]

Ciao Michele,

ho ottenuto il layout con position:relative. Provo ad allineare le immagini con questo metodo trovato alistapart:

div .container {
border: 2px dashed #333;
background-color: #ffe;
}


div .float {
width: 40%;
padding: 10px;
float:left;
display:inline
}

div .float img { border:0; margin-left: 10px; }

div .float p { text-align: center;}

<div class="container">
<div class="spacer">

</div>

<div class="float">
[img]image1.gif[/img]



caption 1</p>
</div>

<div class="float">
[img]image2.gif[/img]



caption 2</p>
</div>

<div class="float">
[img]image3.gif[/img]



caption 3</p>
</div>

<div class="spacer">

</div>

</div>

Però è come se tutto il contenuto si nascondesse dietro il layout della pagina.
Ci sto perdendo la testa. Questo metodo funziona in una pagina vuota quindi non vorrei che c'entrasse l'uso del posizionamento relativo del layout.


Grazie

[Mich_]

Punto 1. Non mi piace il nome float per una classe (potrebbe essere riservato in quel contesto).

Punto 2. usi la stessa classe per le cose che vanno a sin e a destra: questo non funziona.

Punto 3.
Se non vuoi sovrapposizioni, tra una riga e l'altra ci devi mettere qualcosa con il clear:both;

==> studiati meglio i CSS della mia pagina.

Ciao
Michele

[Diddlina]

Ciao Michele,

grazie a te e al tuo consiglio di non usare la classe float, funziona alla grande.
Ho risolto!!!

Grazie grazie grazie!!!!!!!