contornare immagine da testo

[legal-x]

salve a tutti,
come nell'esempio allegato,
ho un problema nel fare questo tipo di impaginazione, ovvero:

elemento contenitore,
all'interno c'è una foto che voglio distanzianziare di 50px dal bordo top dell'elemento contenitore..
..e poi del testo che deve iniziare subito nel contenitore, e che poi verrai posizionato tutto attorno all'immagine ...il problema forse è che il testo è preso da un DB e quindi non posso agire all'interno delle stesso come se lo stessi battendo ...
..chi mi aiuta ?

[panta1978]

Originariamente inviato da legal-x
salve a tutti,
come nell'esempio allegato,
ho un problema nel fare questo tipo di impaginazione, ovvero:

elemento contenitore,
all'interno c'è una foto che voglio distanzianziare di 50px dal bordo top dell'elemento contenitore..
..e poi del testo che deve iniziare subito nel contenitore, e che poi verrai posizionato tutto attorno all'immagine ...il problema forse è che il testo è preso da un DB e quindi non posso agire all'interno delle stesso come se lo stessi battendo ...
..chi mi aiuta ?

Inserisci nel CSS:

div.foto{
float:left
}

E, nel file HTML

<div class="foto">[img]foto.htm[/img]</div>

[legal-x]

non funge

io faccio così, dimmi cosa sbaglio:


CSS:

#contenitore{
position:absolute;
left: 125px;
top: 80px;
width: 323px;
height: 246px;
border:1 solid #000000;
padding:5 5 5 5;
}
div.foto{
float:left;
margin-top:50px;
}


HTML:

<div id="contenitore">
<div class="foto">[img]image.gif[/img]</div>
<%=response.write "stampo la mia stringa di testo presa da DB"%>
</div>

Non funge ? vorrei che il testo "sfruttasse" quel margin-top dato alla foto per inserirsi, per poi continuare contornado

[legal-x]

nessun altro consiglio ?

[Mich_]

Attenzione, che con quel codice si inseriscono degli elementi inutili e controproducenti.

Ci sono oggetti che hanno display:block ed altri con display:inline.
Gli oggetti inline non possono contenere oggetti blocco


e` un oggetto di tipo blocco che non puo` contenere altri oggetti di tipo blocco.
<img> e` un oggetto di tipo inline
<div> e` di tipo blocco; <span di tipo inline.
Un'immagine puo` essere iserita dentro un testo.

Con queste premesse, il codice diventa

<div class="contenitore">
  

 testo testo ...
    testo testo ...
    [img]foto.htm[/img]
    testo testo ...
  </p>
</div>

Da posizionare con il CSS

.contenitore {
  ... quello che vuoi (quasi) ...
}
.contenitore p {
  font ...
}
.contenitore img {
  float: left;
  margin: ...;
  border: ...;
}

L'immagine va posizionata dentro il testo, senza altri tag attorno, sulla riga dove vuoi che sia posizionata. Il float:left la sposta a sinistra.

[vinarcid0810]

ragazzi mi ritrovo nella stessa situazione

mich_ ho capito il tuo codice ma ho un dubbio..........
tu dici di mettere l'immagine tra il testo...... ma se il testo viene preso dal DB come faccio??????

io prendo il testo dal DB con questa stringa

<?
for ($c=0; $c<count($sql); $c++) {
echo nl2br($sql[$c][articolo] ); //stampa l'articolo con gli a capo
}
?>



aiuto ragà sono fermo

p.s. alla fine dovrei ottenere un risultato del genere
http://www.elpais.es/articulo/espana...pepunac_4/Tes/

[fcaldera]

recuperi il testo dal db (o file) e lo salvi in una variabile (lato server)

poi
-stampi le prime 10 parole (o 20, o 30 che siano) della variabile
-inserisci l'immagine
-stampi la parte restante della variabile