DIV nidificati e sulla stessa riga

[epiworld]

Sto litigando con i DIV di una pagina, perchè non vorrei...... usare le
tabelle e la visualizzazione in IE e FF.

La pagine deve essere "fluida", spero di avere usato il temine adatto.
In questa pagina ci devono essere 6 DIV che a loro volta contengono
un'immagine 100x100 px a sinistra e del testo che deve essere a destra
dell'immagine.
Insomma, il testo però non deve mai finire sotto l'immagine.

Io ho pensato di fare così:
******************************************

<div class="ppage_blc">

<div class="ppage_blcleft">
[img]img1.jpeg[/img]
</div>

<div class="ppage_blcright">
Titolo



Questo è il testo.
</div>

</div>

per altre 5 volte
******************************************

Di seguito il CSS

******************************************

.ppage_blc {
float: left;
width: 100%;
background: yellow;
}

.ppage_blcleft {
float: left;
width: auto;
background: red;
}

.ppage_blcright {
float: left;
width: auto;
padding-left: 15px;
text-align: justify;
background: blue;
color: white;
}

.ppage_imgleft {
float: left;
border: 0px;
}

.ppage_space {
float: left;
height: 20px;
}


******************************************

Così come è specificato in HTMLe CSS, il contenuto viene esposto secondo le
mie aspettative solo da IE7,
mentre FF mi mette il div del testo sotto l'immagine e la sua larghezza non
è tutto i corpo,
ma tutto - un pezzo.

Ho provato anche a definire in percentuale la width di ppage_blcright, ma
restringendo la pagina finisce per sovrapporsi per un pezzo (questo pezzo
non capisco dove lo prenda), ma è una cosa che non voglio assolutamente
vedere.

Ho provato un po' di combinazioni senza mai trovare quelle corretta.

Sper di essere stato chiaro.
Qualcuno mi può consigliare?

Grazie
Ciao
Eugenio

[Mich_]

benventuo sul forum!

Mancano un po' di informazioni per poterti aiutare.

I 6 blocchi come devono essere posizionati?
Ecco un esempio:

/---------|---------\
| blocco1 | blocco2 |
|---------|---------|
| blocco3 | blocco4 |
|---------|---------|
| blocco5 | blocco6 |
\---------|---------/

Se questa e` la situazione, devi anche definire la larghezza dei blocchi, ad esempio potresti definire
width: 48%;
Poi il padding ti conviene evitarli: viene interpretato diversamente da IE e gli altri browser: probabilmente un margin rende meglio del padding.
Inoltre, dato che vuoi un layout elastico, al posto dei 15px, ci starebbe meglio una misura in %, ad esempio 3%

Poi all'interno dei blocchi dovrai usare il float per l'immagine.
E qui la cosa si complica: sarebbe piu` semplice se usassi il float:right per allineare i blocchi, e tenessi il float:left per posizionare l'immagine. Poi alla fine di ogni blocco ci dovrai mettere un clear:left, in modo da evitare sovrapposizioni strane (vedi ad esempio [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float).

Se usi il clear:right per i blocchi, allora dovrai partire da blocco 2, poi l'1, poi il 4, ecc.

[epiworld]

I sei blocchi sono uno sopra l'altro (magari con uno spazio tra uno l'altro).
Come dicevo, dentro ogni blocco c'è un immagine a sinistra e il testo a destra.

I consigli che mi hai dato li ho usato un po' tutti nel senso che:

- Clear left non c'è nell'esempio che ho postato, ma in realtà non avevo nessun effetto;

- la dichiarazione esplicita del width l'avevo adottata, ma c'è un brutto effetto quando la pagina passa da una dimensione 1280, come è quella che adotto abitualmente, alla 1024.
I divi si sovrappongono un pezzettino che non capisco come se lo dimensiona. Poi a meno di 1024 il secondo div viene posizionato a capo.
Purtroppo la dimensione "auto" sarebbe ottima per IE, ma non per FF.

Grazie il suggerimento FabClearing. Ora vedo e provo.

Ciao

[Mich_]

Allora non ho capito che ci fanno le due classi blcleft e blcright: evidentemente c'e` qualcosa allineato a sinistra e qualcos'altro a destra, ma non conoscendo il contenuto ne` come va sistemato non riesco a capire.

Comunque un layout cosi` largo ti "taglia fuori" molti utenti, che magari non navigano con il browser a tutta pagina, o che tengono il monitor a 800x600.
A quel punto dovresti valutare un layout fluido: ci sono varie raccolte, alcune citate tra i "link utili". Prova a darci un'occhiata.

[epiworld]

Originariamente inviato da Mich_
Allora non ho capito che ci fanno le due classi blcleft e blcright: evidentemente c'e` qualcosa allineato a sinistra e qualcos'altro a destra, ma non conoscendo il contenuto ne` come va sistemato non riesco a capire.

In blclef conterrà un'immagine ed eventualmente una didascalia sotto (non prevista nell'esempio), mentre in blcright sarà contenuto un testo.
Entrambi i DIV sono contenuti nel DIV blocco.

Originariamente inviato da Mich_
Comunque un layout cosi` largo ti "taglia fuori" molti utenti, che magari non navigano con il browser a tutta pagina, o che tengono il monitor a 800x600.
A quel punto dovresti valutare un layout fluido: ci sono varie raccolte, alcune citate tra i "link utili". Prova a darci un'occhiata.

Ma infatti deve essere fluido; l'ho scritto nella premessa del mio primo post.

Originariamente inviato da epiworld
La pagine deve essere "fluida", spero di avere usato il temine adatto.

Grazie
Ciao

[Mich_]

Che dovesse essere fluido l'avevo capito.
"layout fluido" e` una parola chaive che ti serve per cercare un layout che ti vada bene.

Pero` non puoi affiancare due oggetti ambedue con width:auto; : almeno uno (ma sei piu` tranquillo se ambedue) deve avere un width definito. Per una soluzione fluida/elastica devi usare misure %.
Il problema del width:auto sta nel fatto che ciascuno puo` allargarsi il piu` possibile (ad esempio se contiene testo lungo), ed a quel punto non ci sanno in due sulla stessa riga, cosi` il secondo va a capo.

Quindi il tuo CSS potrebbe essere del tipo:

html, body {
  width: 100%;     /* necessario per dare significato al successivo 100% */
}
.ppage_blc {
  /*float: left;*/
  width: 100%;
  background: yellow;
}
.ppage_blc:after {
  width: 100%;
  clear: both;
  /* ... vedi [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float */
}
.ppage_blcleft {
  float: left;
  width: 30%;
  background: red;
}

.ppage_blcright {
  float: left;
  width: 68%;
  margin-left: 1%;
  text-align: justify;
  background: blue;
  color: white;
}

[epiworld]

Mich ti ringrazio ancora per la pazienza.

Quello che voglio ottenere è questo


+----------------------+
|+------++------------+|
||IMG___||TEXT________||
|+------++------------+|
+----------------------+

+----------------------+
|+------++------------+|
||IMG___||TEXT________||
|+------++------------+|
+----------------------+

+----------------------+
|+------++------------+|
||IMG___||TEXT________||
|+------++------------+|
+----------------------+

+----------------------+
|+------++------------+|
||IMG___||TEXT________||
|+------++------------+|
+----------------------+

+----------------------+
|+------++------------+|
||IMG___||TEXT________||
|+------++------------+|
+----------------------+

+----------------------+
|+------++------------+|
||IMG___||TEXT________||
|+------++------------+|
+----------------------+



Inizialmente avevo impostato il box IMG <div class="ppage_blcleft"> con width = 100px (ma anche 10%), così come la dimensione dell'immagine e il box TEXT <div class="ppage_blcright"> con width = auto.
IE si compartava come pensavo (schema in alto), mentre FF riportava a capo il box TEXT.

Il problema, stranamente per me, è solo la visualizzazione con FF.
L'impostazione width in pecentuale per entrambi i box, funziona, ma appena la pagina si restringe, il box TEXT si sovrappone per un tot all'immagine e appena la pagina è minore (questa è una mia supposizione) della percentuale del width, il box viene riportato a capo.

La definizione di HTML, BODY è superflua in questo caso, perchè la pagina in questione è una pagina che si inserirà nel corpo di una pagina php di un cms a tre colonne (colonna centrale). C'è già quello della pagina "principale".

Grazie di nuovo.
Ciao.