Click per tornare alla pagina Home
I Forum di GiapCMS
Consulta i nostri Forum, troverai gli interventi e le soluzioni dei nostri esperti.
Partecipa anche tu alle discussioni, indicando le tue personali scoperte e trucchi.
Torna alla Home Page
Cerca nel forum:
Categoria:
N.B. Per poter intervenire nel forum devi prima registrarti oppure effettuare il login.
Forum > Editor Pagina > Testo che contorna un oggetto irregolare non rettangolare (es: immagine scontornata)
Non risoltoTesto che contorna un oggetto irregolare non rettangolare (es: immagine scontornata)

StefanoRofena25/05/2012
Egregi Giappisti,
come è possibile ottenere quanto in oggetto?
Grazie!

Giap-admin07/09/2011
Gentile Stefano,
come al solito abbiamo voluto raccogliere la tua sfida ed il risultato puoi ammirarlo nell'immagine sottostante.
Per chiarezza, dobbiamo dire che non esiste un comando in GiapCMS che permetta di fare questo con "un click", ma bisogna impegnarsi un pochino.
Tuttavia questo risultato è stato possibile grazie alla possibilità di sovrapposizione degli oggetti, che è invece una prerogativa dell'editor pagina visuale di cui è dotato GiapCMS.
Ti elenco la procedura da seguire per replicare questo risultato su una qualunque immagine.
1) Importa l'immagine che vuoi scontornare con il testo tramite l'oggetto "Risorsa Grafica" e posizionala in pagina.
2) Inserisci un oggetto "Htmlbox" con il testo e sovrapponilo all'immagine nel modo in cui vuoi che poi il testo la scontorni (nell'esempio qui sotto i due box coincidono con l'angolo alto a sinistra).
3) Fai un grab dello schermo ed utilizzando un software di grafica, vai a contare la distanza in pixel tra due righe di testo (interlinea) e di quanto deve essere distanziata l'inizio di ciascuna riga rispetto al lato sinistro.
4) Apri l'oggetto htmlbox che contiene il testo che deve circondare l'immagine, vai nel contenuto e da qui nella visualizzazione "Html" dell'editor ed incolla il seguente codice html all'inizio del testo:
<div style="width: 260px; height: 17px; clear: left; float: left;"></div>
<div style="width: 285px; height: 16px; clear: left; float: left;"></div>
<div style="width: 305px; height: 17px; clear: left; float: left;"></div>
<div style="width: 320px; height: 16px; clear: left; float: left;"></div>
... una "div" per ciascuna riga ...

Nel codice html noterai un width ed un height in ciascuna div, le misure di questi vanno sostituite da quelle rilevate al punto 3.
Buon divertimento.

Luigi Gaeta
GiapCMS team