div con float e div che lo attraversano

[s0r42]

ok titolo un po criptico

in una pagina volevo creare l'effetto del testo che avvolge altri elementi
in pratica sulla destra (con un float) c'è il menu ed altre cose, ed il testo è alla sua sinistra

funziona bene, solo che poi ho avuto bisogno di separare i vari testi (come in un blog), ed ho usato un tag p con un colore di fondo
e solo a questo punto mi sono accorto che anche se il testo rispetta i margini del float, p e div se ne fragano e passandogli sotto arrivano a prendere tutta la larghezza

spero di essere riuscito a spiegare il problema :S

ho provato varie soluzioni, ma nessuna va bene
per il momento mi sto accontentando di impostare il tag p con una larghezza fissa, in modo da non attraversare il div, ma nel punto in cui il testo è libero di prendere tutta la larghezza fa un effetto brutto

adesso lo so che qualcuno mi passerà direttamente il link alla pagina in cui si spiegano i float ed il position, ma le ho già lette e sperimentate

ditemi solo se quelo che voglio fare è possibile o no così almeno mi metto il cuore in pace

[Mich_]

Il sospetto e` di un errore di impostazione del layout.
Pero` per esserne sicuri e` necessario vedere il codice (HTML+CSS oltre che il DOCTYPE).
Meglio se puoi postare un link alla pagina.

[s0r42]

la pagina non è ancora online, ed il codice completo del template è un po complesso
vi faccio un riassunto e vedo di allegare qualche immagine, eventualmente schiaffo la pagina per intero + il css

<div class="contenitore">
	<div class="elementi">
		<immagine png semitrasparente />
		testo link e roba varia 
		testo link e roba varia 
		testo link e roba varia 
		testo link e roba varia 
		testo link e roba varia 
		testo link e roba varia 
		testo link e roba varia 
		testo link e roba varia 
		testo link e roba varia 
		testo link e roba varia 
		testo link e roba varia 
		testo link e roba varia 
		testo link e roba varia 
		testo link e roba varia 
	</div>
	testo testo testo testo testo testo testo testo testo testo 
	testo testo testo testo testo testo testo testo testo testo 
	testo testo testo testo testo testo testo testo testo testo 
	testo testo testo testo testo testo testo testo testo testo 
	testo testo 
	<p class="separatore"></p>

	testo testo testo testo testo testo testo testo testo testo 
	testo testo testo testo testo testo testo testo testo testo 
	testo testo testo testo testo testo testo testo testo testo 
	testo testo testo testo testo testo testo testo testo testo 
	testo testo 
	<p class="separatore"></p>

	testo testo testo testo testo testo testo testo testo testo 
	testo testo testo testo testo testo testo testo testo testo 
	testo testo testo testo testo testo testo testo testo testo 
	testo testo testo testo testo testo testo testo testo testo 
	testo testo 
	<p class="separatore"></p>
</div>

<style>
.contenitore {margin:auto; width:850px;}
.elementi {float:right; width:220px; margin-bottom:20px; margin-left:10px;}
.separatore {height:2px; background:#999999; margin-bottom:42px;}
</style>

il testo avvolge perfettamente il div "elementi", il tag p che uso come riga orizontale (poi volevo mettere un'immagine di sfondo) lo attraversa andando da un lato all'altro del div "contenitore"

[Mich_]

Non hai postato il DOCTYPE.

Comunque ci sono errori di semantica in quella pagina:
1. il testo non e` racchiuso nei


2. il separatore e` creato tramite un

: se devi usare un separatore puoi usare <hr/> oppure <br/>, ma forse il "separatore" puo` essere un margin-bottom (o border-bottom) applicato ai vari

che devono racchiudere i paragrafi

Comunque il div #contenitore passa per forza sotto all'elemento flottato: questo e` contenuto dentro ad esso.

E lo hai testato in IE? Portesti avere qualche sorpresa sull'altezza dei vari

.

[s0r42]

la pagina è XHTML 1.0 Transitional

devo racchiudere per forza il testo in un tag p? ehm... non lo sapevo

comunque il problema non è il div contenitore, ma il tag p "separatore"
capisco che sarebbe meglio un hr, ma voglio separarli visivamente, e quindi pensavo di mettere un'immagine di sfondo nel tag p che si adatti alle due larghezze

poi ovviamente nel tag p ci metto una gif da 1x1pixel apposta per evitare i problemi di altezza, l'ho tralasciato per evitare confusione

[s0r42]

ho provato a formattare un tag hr con colore di sfondo altezza bordi etc, su firefox funziona perfettamente e si adatta pure alla larghezza senza creare problemi!
su ie6 no

[Mich_]

Su IE devi comunque metterci
font-size: 1px;
Altrimenti qualunque oggetto non sara` mai piu` basso del font. Ma questo vale per l'hr, per il br ma anche per il p


Ma tieni presente che se usi XHTML Strict (senza prologo XML), hai meno problemi ad adattare per IE.

[s0r42]

lo strict l'avevo provato tempo fa ma le limitazioni mi erano sembrate troppe
in pratica ho sempre scritto in transitional senza saperlo, ma lo strict è troppo, anche se questa cosa di ie lo rende più intressante

adesso che mi hai convertito all'hr mi sai dire se è possibile applicare uno sfondo settare l'altezza e togliere il bordo in ie?

[Mich_]

Originariamente inviato da s0r42
lo strict l'avevo provato tempo fa ma le limitazioni mi erano sembrate troppe
in pratica ho sempre scritto in transitional senza saperlo, ma lo strict è troppo, anche se questa cosa di ie lo rende più intressante

Devi scegliere se proiettarti al futuro o al passato.
Una cosa e` accettata da tutti i programmatori piu` esperti: le pagine con DTD XHTML 1.0 strict sono sicuramente piu` compatibili con i browser futuri; in pratica avranno vita piu` lunga. Le DTD precedenti potrebbero avere problemi nei browser futuri (ad iniziare da quelli che stanno uscendo ora, tipo Safari, Google, ecc).

adesso che mi hai convertito all'hr mi sai dire se è possibile applicare uno sfondo settare l'altezza e togliere il bordo in ie?

Non mi risulta che ci siano problemi, ma non ho modo di testare. Prova con browsershots o servizi simili (io ho questi link: vista con browser diversi (lento), Test diversi browser (necessaria iscriz.)).
Non vedo pero` la necessita` di settare lo sfondo: l'oggetto hr e` una riga orizzontale di cui puoi scegliere colore, spessore, margini, larghezza, ...