paragrafo a fianco ad un'immagine ...

[sandu]

ciao a tutti , qualcuno potrebbe spiegarmi come si può fare con html o con i css ad ottenere un paragrafo che si sviluppa a fianco ad una immagine senza che lerighe si spostino al di sotto dell'immagine quando il testo è più lungo dell'immagine stessa ?

tanto per capirci:

NON COSI'

-immagine-testo
testo

MA COSI'

-immagine-testo
_________testo

grazie in anticipo

[nuky]

Si può fare con l'uso dell'attributo di stile float :

<img style="float:left" ... />
<p style="float:right"> ..... </p>

[GreyFox86]

Puoi mettere insieme qualcosa del genere, ma stai attento perchè devi impostare bene le misure della colonna di sinistra con l'immagine e di quella di destra con il testo in base alla larghezza dell'immagine. Occhio anche alle diverse interpretazioni del box-model (che IE sia maledetto).

Qui il css
.leftColumn img {
	display:block;
	float:left;
	clear:left;
	margin-right:10px;
	border:1px dotted red;
}

.leftColumn {
	margin:0;
	width:20%;
	float:left;
	clear:left;
	border:1px solud red;
}
.rightColumn {
	margin:0;
	width:80%;
	float:left;
	clear:right;
	border:1px solud red;
}

.rightColumn p {height:400px; background-color:#0099CC;}

Qui l'XHTML
<div class="leftColumn">
	<img href="" height="100" width="200"/>
</div>
<div class="rightColumn">
	

Lorem ipsum dolor sit amet [...]</p>
</div>

...all'incirca.

[sandu]

grazie ho provato con float ..
il problema è che quando finisce l'immagine il testo va comunque a capo sotto e non di fianco rispettando il margine del paragrafo...

l'idea delle colonne non so se può funzionare perchè le immagini hanno dimensioni diverse...

[biosimulant]

Originariamente inviato da sandu
grazie ho provato con float ..
il problema è che quando finisce l'immagine il testo va comunque a capo sotto e non di fianco rispettando il margine del paragrafo...

l'idea delle colonne non so se può funzionare perchè le immagini hanno dimensioni diverse...

Io suggerirei una via di mezzo tra le colonne e la soluzione prospettata dagli altri.....
Due gabbie affiancate, una per l'immagine euna per il testo, dimensionate adeguatamente, è ovvio......

[sandu]

e come posso realizzarla ?

[nuky]

Originariamente inviato da sandu
grazie ho provato con float ..
il problema è che quando finisce l'immagine il testo va comunque a capo sotto e non di fianco rispettando il margine del paragrafo...

l'idea delle colonne non so se può funzionare perchè le immagini hanno dimensioni diverse...

Quindi vuoi dire che con quello che ho postato io (che ho provato con IE) non sei riuscito a fare quello che volevi? Con che browser hai provato? :master:

[biosimulant]

Originariamente inviato da sandu
e come posso realizzarla ?

La prima cosa che mi viene in mente....
Due div affiancati:
uno per l'immagine, a sinistra e in alto nella pagina e l'altro a fianco....
Ad esempio, se l'immagine e 100px di larghezza e 150 di altezza,
nel Css puoi scrivere
[code]
.img
{width:100px;
height:150px;
position:absolute;
left:15px;
top:15px;
......
}
/* è solo un esempio.....per l'altra gabbia devi posizionare a destra dove quì e' posizionato a sinistra e cambiare le dimensioni ove serve....Attenzione che se usi i margini esterni ed interni (i padding), ci sono dei problemi con IE.....
Per esempi migliori del mio, con qualche adattamento, prova qui, e' in inglese comprensibile e adattabilissimo al tuo caso,credo....

[sandu]

ho provato con ie e firefox ho aggiunto

float: left;

all'interno di una classe ...

[nuky]

Originariamente inviato da sandu
ho provato con ie e firefox ho aggiunto

float: left;

all'interno di una classe ...

E hai aggiunto float:right all'interno dell'altra?