Posizionare un'immagine con proprietà 'relative' in mezzo ad un testo tramite coordinate

[danielepalmas88]

Salve a tutti, mi occorrerebbe inserire tramite coordinate una piccola immagine in mezzo ad un lungo testo, ma ovviamente non posso utilizzare l'attributo 'absolute' perché essa sovrascriverebbe la parte testuale che va a coprire.

Il problema è che mediante coordinate riesco a posizionarla là in mezzo al testo solamente mediante proprietà 'absolute' o 'fixed', ma in entrambi i casi il testo non si sposta, ma rimane là sotto, coperto.

Esiste un modo per ovviare a questo problema? Immagino di sì, visto che certe ads di Google mi pare facciano automaticamente proprio un lavoro simile...

Ecco qui un'esempio:



Ed ecco il mio attuale codice:

.table {
width: 600px;
margin: 10px auto;
padding: 0 0 10px;
box-sizing: border-box;
background: #fff;
border: 0;
border-radius: 3px;
font: 1rem/1.1 Cabin Condensed,arial,sans-serif;
color: #64696a;
text-align: justify;
}

.table>p {
margin: 10px;
}

.img {
display: inline-block;
float: left;
width: 213px;
height: 302px
position: relative;
margin: 0 15px 15px 15px;
}

.banner {
display: inline-block;
width: 282px;
height: 89px;
position: fixed/absolute/relative???;
top: 55%;
left: 52%;
margin: 3px 3px 3px 3px;
}



<div class="table">
<div class="img"><img src="immagine"></div>
<p>testo</p>
<div class="banner"><img src="banner"></div>
</div>

[danielepalmas88]

Aggiungo un dettaglio: ho questo problema perché intendo lavorare in 'bulk' su tutti i post del sito.
La parte testuale arriva con un php echo postmeta description, dunque NON posso intervenire manualmente su ogni singolo post inserendo il banner verde dell'immagine verso metà testo, ma ho bisogno di infilarcelo a forza mediante coordinate.

[fcaldera]

Non puoi inserire a forza delle immagini in un punto con delle coordinate sperando che il testo si scansi da una parte per farci stare le immagini

potresti appendere via js le immagini in un punto determinato del testo (se ci sono elementi in cui appenderle ovviamente, altrimenti non puoi) e dare loro float:left o float:right

[danielepalmas88]

Purtroppo non potendo intervenire direttamente a centro testo in quanto il testo stesso è un custom field il cui richiamo arriva nel file single.php (uso wordpress), l'unico modo che mi rimane sarebbe infilarcelo per coordinate come si fa con l'absolute, ma rendendolo di fatto relative, per spostare il testo.

Ma se come dici te questo non è possibile, allora mi occorre adottare un qualche altro escamotage.

Ho notato che se uso entrambe le immagini (la rossa e la verde in foto) impostate su relative, una con float left e una right, il testo risulta comunque "abbracciarle" entrambe.
Ma a me serve che l'immagine verde scali un bel po' più giù.

Ho provato a far precedere il div dell'immagine verde da tanti <br>&nbsp;<br> per portarla giù fin dove serve a me, ma questo fa slittare anche l'inizio del testo, che a queste condizioni, anziché partire dalla destra dell''immagine rossa, inizierebbe giù direttamente assieme alla verde. Quindi da scartare anche questa soluzione.

Spero che esista qualche soluzione, perché come detto mi pare di vedere spesso delle ads di adsense che si infilano proprio in mezzo al testo, facendosi abbracciare da quest'ultimo.

Dici che potrebbe esistere in js la funzione di definire un elemento relative pur infilandocelo a forza con coordinate come se fosse un absolute?