Immagine con testo 
Autore: Carmelo C.
Visite 1736,
Followers 1,
Condiviso 0
Salve a tutti!
Qualcuno mi sa dire come poter ottenere un effetto come quello indicato in allegato (i due effetti cerchiati in rosso)? Nel senso di avere una immagine di sfondo e del testo con link sopra all'interno di un quadrato colorato? Il sito a cui faccio riferimento è www.lcalex.it
Postato il
Faccio riferimento alla prima riga della tua immagine
Devi creare un'unica immagine larga quanto l'intero sito ed alta quanto vuoi tu assemblando le 3 immagini componenti ed assegnando ad ognuna di esse un terzo della larghezza totale. L'immagine risultante deve contenere anche i bordini bianchi.
Tramite "Stile righe" assegni questa immagine come sfondo alla riga dove inserirai tre oggetti testo, assegnando ad ognuno di essi un terzo delle colonne disponibili.
Ad ognuno degli oggetti testo, tramite "Stile" assegnerai il colore di sfondo (quella specie di arancione scuro) con la voluta opacità. Agendo sui margini esterni si posizionano gli oggetti all'interno della riga, agendo sui margini interni si posiziona il testo all'interno dell'oggetto testo.
Ai testi assegni i link che vuoi.
Autore
Grazie per la soluzione. Avevo già testato questa idea, l'unico problema è che alle diverse risoluzioni "sballano" i margini, o meglio vengono riadattati ma non coincidono con l'immagine di sfondo. Inoltre assemblando le 3 immagini in unica immagine da utilizzare come sfondo riga, non posso ottenere l'effetto responsive, cioè ad una larghezza da cellulare ognuna delle immagini non si disporrà su una riga, non so se sono chiaro.
Vediamo se qualche altro utente ha altra soluzione.
... io non ho programmi per entrare nel merito, ma secondo me (venendo io da SwishMax) con WebAnimator potresti ottenere quel che ti serve in modo molto amichevole...
... sempre secondo me, l'approccio più banale potrebbe essere in certi casi quello più semplice, pratico e valido...
... per esempio con intabellamento...
... oppure tramite un qualsiasi metodo di mappatura, HTML<MAP>, oppure con DIV_CUSTOM, semplicissimi, che puoi ambedue valutare da >> questo Topic
.
Autore
Ciao KolAsim, non ne capisco molto ma ho fatto alcune prove. Interessante il post che mi hai indicato. Purtroppo la mia conoscenza su questi argomenti è limitata, ho provato con le risorse on line e sono riuscito a mappare l'area ma poi non capisco come inserire il testo all'interno dell'area mappata.
Mi sembra invece più semplice l'approccio con intabellamento ma c'è qualcosa che non riesco a sfruttare bene.
1. Ho inserito l'oggetto tabella in una cella.
2. Nello stile dell'oggetto tabella ho messo come sfondo l'immagine
3. Nel contenuto dell'oggetto tabella ho creato una tabella 1x1 con del testo all'interno
Ma poi come faccio ad inserire all'interno un rettangolo colorato con una percentuale di opacità?
Grazie.
Ciao, ... purtroppo non posso entrare nel merito del programma, che attualmente non ho...
... l'idea partiva dai miei vecchi esempi sulle tabelle elastiche, per esempio >> questo ...apparentemente assimilabile alla tua richiesta...
... sfruttando questa idea ed usando la tabella del programma, potresti:
1) - assegnare allo sfondo delle celle della tabella
un colore semi trasparente, oppure usare una immagine 
PNG in trasparenza ALFA come nel mio esempio;
2) - assegnare alla cella che fa da contenitore
l'immagine 
da usare come sfondo generale...
.
... provaci, e nel caso fatti risentire...
.
Autore
Ho provato.....allo sfondo delle celle della tabella non mi fa assegnare colori semi trasparenti, mentre se uso una immagine PNG in trasparenza ALFA non mi fa scrivere all'interno, non capisco come hai fatto ad inserire il testo all'interno....ti allego screenshot per maggiore chiarezza
Un effetto simile potresti ottenerlo con l'oggetto animated buton, inserendo l'immagine di sfondo nello stile e un'immagine ddi fondo dell'animated button semitrasparente (png) e regolando il tipo di effetto su bordo con colore trasparente
ciao
ciao Varmelo, se vuoi ti do una mano volentieri. contattami via email
ops Carmelo. .
... dal tuo STAMP mi sembra di capire che l'immagine che hai inserito l'hai messa nel contenuto della cella stessa della tabella come fosse un testo, il che non andrebbe bene,...
... potresti eventualmente risolvere immediatamente con un semplice codice extra, più semplice di quanto immagini...
... se ti interessasse rispetto a quanto avevo precedentemente detto nel secondo mio post, posta il link di un semplice tuo esempio che abbia queste caratteristiche:
1) - una piccola tabella di esempio (o due), come la mia, contenente solo del testo nelle celle;
2) - assegna nello stile della cella che fa da contenitore esterno della tabella (
Stile) una immagine di sfondo;
3) -dopo che hai postato il link di dirò il codice da usare;
... se vuoi procedere da te e provare subito, e se la tabella fosse l'unica! della pagina, puoi provare immediatamente questo codice:
<style> td { background: url(http://www.kolasim-zone.it/immagini/sfondotraspgiallo.png) repeat;background-color:transparent !important;}</style>
... oppure incolla questo:
<style> td {background-color: rgba(255, 255, 0, 0.5) !important;} </style>
... codice da incollare nel pannello ESPERTO | Codice personalizzato | opzione: Prima della chiusura del TAG </HEAD>
... casomai fatti risentire, postando il link del tuo esempio per semplificare e velocizzare il tutto...
.