WebSite X5Help Center

 
Luigi Dell'aquila
Luigi Dell'aquila
User

In oggetto HTML scrivere accanto all'immagine  it

Auteur : Luigi Dell'aquila
Visité 2960, Followers 1, Partagé 0  

Ciao a tutti.
Avrei bisogno di inserire nell'oggetto HTML alcune immagini con del testo.
Con il seguente codice il testo inizia accanto all'imagine, ma parte dall'alto mentre io vorrei farlo partire dalla metà. Come posso fare?
Grazie
Ecco il codice:

img style="height: auto; max-width: 100%; float: left; margin: 10px 20px 10px 20px; border: none;" alt="img" src="http://www....jpg"

Posté le
28 RéPONSES - 4 UTILE - 1 CORRECT
Skeggia 12
Skeggia 12
Moderator

Devi utilizzare il metodo

display: table per il div contenitore img e display:table-cell per il contenitore testo... con vertical-align: middle per il secondo div... nidificati...

www.w3schools.com

Sono stringato nella risposta xke sono al cellulare e scrivere codice è un'impresa...

Lire plus
Posté le de Skeggia 12
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

Ciao Skeggia. Ecco di seguito il codice che ho inserito e funziona. Soltanto che la quantità del testo scritto va a discapito dell'immagine, come se ci fosse uno spazio condiviso tra testo e immagine. Più scrivi e più l'immagine si riduce per dare spazio al testo.

Link di prova: http://www.prova.luigidellaquila.it/testo.html

Codice inserito:

div style="display: table;">
<img style="height: auto; max-width: 100%; float: right; border: none;" alt="img" src="riccio.jpg">
<div style="display:table-cell; vertical-align: middle;">Qui inserire il testo
</div></div

Lire plus
Posté le de Luigi Dell'aquila
Skeggia 12
Skeggia 12
Moderator

Penso dipenda dal valore in percentuale dato all'immagine... non posso provare ma puoi mettere un valore 50% all'immagine e stabilire anche per il div del testo il 50% e vedere l'effetto che fa...

Lire plus
Posté le de Skeggia 12
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

Ho provato a inserire width: 50% in div style="display:table-cell; Adesso l'immagine non si riduce però se si inserisce molto testo, superando l'altezza dell'immagine, questo non va ad occupare lo spazio libero sotto l'immagine, ma continua nella sua colonna ed esteticamente è bruttissimo.
Guarda l'esempio col mobile per capire meglio cosa intendo.

http://www.prova.luigidellaquila.it/testo.html

Lire plus
Posté le de Luigi Dell'aquila
Skeggia 12
Skeggia 12
Moderator

In effetti è così essendo due entità differenti... questa tecnica funziona se il testo deve essere centrato all'immagine e non la supera... se devi contornare l'immagine con il testo bisogna cambiare tattica...

Lire plus
Posté le de Skeggia 12
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

Grazie comunque Skeggia. Se ci fosse qualcuno che ha qualche idea ringrazio anticipatamente.

Nel frattempo posto la domanda anche in altro forum. Se arrivo alla soluzione la pubblico così se altri avessero la stessa mia necessità troveranno la risposta.

Lire plus
Posté le de Luigi Dell'aquila
Skeggia 12
Skeggia 12
Moderator

Ok luigi.. io sono fuori e non posso fare prove per ora... da domani...

Lire plus
Posté le de Skeggia 12
Giorgio C.
Giorgio C.
User

Secondo me questo succede perchè hai inserito gli elementi in tabella quindi  il testo rimane incolonnato e non può scorrere al di sotto dell'immagine.

quello che mi viene da suggerirti è di impostare l'immagine al 50% e creare un'altra immagine delle stesse dimensioni ma trasparente impostata al 25%. Magari non è ortodosso ma funziona.

Ciao

<div><img style="height: auto; max-width: 50%; float: left; border: none; " alt="img" src="a.jpg"></div>
<div><img style="height: auto; max-width: 25%; border: none; " alt="img" src="immagine_trasparente.jpg">
<p>Qui inserire il testo </p> </div>

Lire plus
Posté le de Giorgio C.
 lemonsong  
 lemonsong  
User

@Luigi

Se ho capito bene, QUI un'alternativa dinamica con jQuery.

Se invece le immagini hanno la stessa altezza e non si ridimensionano, puoi semplicemente impostare un valore fisso al padding-top del testo.

Non so se esiste un metodo dinamico con solo i CSS.

Lire plus
Posté le de  lemonsong  
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

Grazie a tutti.
Ho fatto un riepilogo in: http://www.prova.luigidellaquila.it/testo.html

@Giorgio: effettivamente non è ortodosso, ma funziona. Puoi anche decidere da quale punto far partire il testo (dalla metà, più alto o più basso) regolando la percentuale dell'immagine trasparente.

@Lemonsong: funziona, però ti volevo chiedere se ci sia la possibilità di riempire prima lo spazio vuoto che c'è in alto per poi occupare quello libero sotto l'immagine. Così com'è, il testo parte da metà immagine lasciano la metà superiore vuota. Ti volevo chiedere anche se posso scaricare il CSS e jquery e caricarlo sul mio sito?

Grazie

Lire plus
Posté le de Luigi Dell'aquila
 lemonsong  
 lemonsong  
User

Beh, da quello che hai scritto:

Luigi Dell'aquila
Con il seguente codice il testo inizia accanto all'imagine, ma parte dall'alto mentre io vorrei farlo partire dalla metà. Come posso fare?

... mi sembrava di aver capito che lo volevi far partire da metà.

Se hai cambiato idea, non ti serve niente di particolare, in poche parole è una tabella.

Se la vuoi fare con i div, usa le proprietà display:table e display:table-cell come consigliato.

Sempre che abbia capito...

Luigi Dell'aquila

Ti volevo chiedere anche se posso scaricare il CSS e jquery e caricarlo sul mio sito?

Grazie

Certo che puoi, l'ho messo apposta.

Lire plus
Posté le de  lemonsong  
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur
 lemonsong  
Beh, da quello che hai scritto: Luigi Dell'aquila Con il seguente codice il testo inizia accanto all'imagine, ma parte dall'alto mentre io vorrei farlo partire dalla metà. Come posso fare? ... mi sembrava di aver capito che lo volevi far partire da metà. Se hai cambiato idea, non ti serve niente di particolare, in poche parole è una tabella. Se la vuoi fare con i div, usa le proprietà display:table e display:table-cell come consigliato. Sempre che abbia capito... Luigi Dell'aquila

Non ho cambiato idea e solo che mi sono dimenticato di precisarlo. Quello che vorrei è qualcosa di automatico che fa partire il testo dal centro e pian piano riempire prima tutta la parte laterale e poi va ad occupare lo spazio sotto l'immagine per far si che se il testo è breve parte dalla metà, ma se fosse lungo piano piano riempie la parte laterale.

 lemonsong  

Luigi Dell'aquila

Ti volevo chiedere anche se posso scaricare il CSS e jquery e caricarlo sul mio sito?

Grazie

Certo che puoi, l'ho messo apposta.

Grazie

Lire plus
Posté le de Luigi Dell'aquila
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

@lemonsong: mi sono dimenticato di dire che la tabella "display:table e display:table-cell " come consigliato, non va bene perchè se il testo è molto lungo resta incolonnato e non va ad occupare lo spazio sotto l'immagine.

Lire plus
Posté le de Luigi Dell'aquila
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

@lemonsong: lo script tuo fissa l'immagine a sinistra e il testo a destra, ma per fare il contrario, immagine a destra e testo a sinistra?

Grazie

Lire plus
Posté le de Luigi Dell'aquila
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur
Luigi Dell'aquila
@lemonsong: lo script tuo fissa l'immagine a sinistra e il testo a destra, ma per fare il contrario, immagine a destra e testo a sinistra? Grazie

Ho risolto. Ho inserito due "content" uno "content_dx" con float:right; e l'altro "content_sx" con float:left;

Lire plus
Posté le de Luigi Dell'aquila
Skeggia 12
Skeggia 12
Moderator

vedo che hai risolto... bene... ciao...

Lire plus
Posté le de Skeggia 12
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur
Skeggia 12
vedo che hai risolto... bene... ciao...

Ho risolto la posizione destra o sinistra dell'immagine, ma resta ancora aperto quanto di seguito. Grazie

Quello che vorrei è qualcosa di automatico che fa partire il testo dal centro e pian piano riempire prima tutta la parte laterale e poi va ad occupare lo spazio sotto l'immagine per far si che se il testo è breve parte dalla metà, ma se fosse lungo piano piano riempie la parte laterale.

Lire plus
Posté le de Luigi Dell'aquila
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois IT

...scusate l'intromissione , ma @Luigi, quale sarebbe lo scopo di inserirlo in oggetto html ?

Lire plus
Posté le de Claudio D.
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur
Claudio D.
...scusate l'intromissione , ma @Luigi, quale sarebbe lo scopo di inserirlo in oggetto html ?

Ho creato una pagina web che devo richiamare con un iframe inserito in un sito creato con WS. Ho tantissime pagine che richiamo nell'iframe, questo per evitare di rendere pesantissimo il progetto WS con infinite pagine. 

Lire plus
Posté le de Luigi Dell'aquila
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

Mi sono dimenticato di dire che non è nell'oggetto HTML (l'ho citato per rendere più semplice la mia domanda), ma come ho detto, devo creare delle pagine web che dovranno essere richiamate da un iframe del sito con WS.

Lire plus
Posté le de Luigi Dell'aquila
 lemonsong  
 lemonsong  
User
Luigi Dell'aquila
Quello che vorrei è qualcosa di automatico che fa partire il testo dal centro e pian piano riempire prima tutta la parte laterale e poi va ad occupare lo spazio sotto l'immagine per far si che se il testo è breve parte dalla metà, ma se fosse lungo piano piano riempie la parte laterale.

OK, adesso ho capito, tu vorresti un comportamento misto tra una cella di una tabella e immagine in float

Lire plus
Posté le de  lemonsong  
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur
 lemonsong  
OK, adesso ho capito, tu vorresti un comportamento misto tra una cella di una tabella e immagine in float

Esatto. Hai centrato il problema.

Con la tabella si può avere il risultato "vertical-align: middle;", ma se supera l'immagine continua in verticale e non si dispone sotto.

Con l'immagine in float se il testo supera l'immagine si dispone automaticamente sotto, ma non si può avere l'effetto "vertical-align: middle;".

Lire plus
Posté le de Luigi Dell'aquila
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

Ho risolto in questo modo, non so se sia corretto oppure potrebbe dare qualche problema nella versione mobile. 
Uso l'mmagine in float. Se il testo è poco, utilizzo più <br> mentre se il testo è molto, riduco <br> fino a non inserirlo se il testo è molto lungo.

Lire plus
Posté le de Luigi Dell'aquila
 lemonsong  
 lemonsong  
User

Prova a vedere questo esempio grezzo per "automatizzare" il tutto.

Eventualmente dovrai adeguarlo alle tue esigenze.

Lire plus
Posté le de  lemonsong  
Skeggia 12
Skeggia 12
Moderator

fantastico... funziona benissimo....

se posso fare una domanda... perchè se si mette float:right nel "#content img" si sposta a dx la seconda foto e non la prima? mentre i margini funzionano su tutte e due le foto?
Grazie

Lire plus
Posté le de Skeggia 12
 lemonsong  
 lemonsong  
User

Perché se l'altezza del testo è inferiore all'altezza dell'immagine viene visualizzato il tutto come se fosse una tabella (vedi if).

Preciso che è solo un accrocchio e così com'è va bene per le immagini a sinistra.

Senza alcun dubbio si può fare di meglio.

Lire plus
Posté le de  lemonsong  
Skeggia 12
Skeggia 12
Moderator

grazie lemon...

Lire plus
Posté le de Skeggia 12
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

Perfetto, anche se pecca un po' per l'immagine a destra... laughing

Scherzo, quoto Skeggia, è fantastico. 

Grazie Lemonsong

Lire plus
Posté le de Luigi Dell'aquila