Joomla.it Forum
Joomla! 3 => Joomla! 3 => : lionel hutz 17 Feb 2015, 22:00:29
-
Ciao ragazzi,
vi chiedo prima di tutto se il problema ch riscontro č legato agli editor degli articoli di joomla.
Ho necessitą di inserire del testo sopra a delle immagini. Ho un codice (che incollo sotto) con cui visualizzo correttamente la pagina solo su alcuni browser e sistemi operatvi. Su altri il testo se ne va per i fatti suoi dove non dovrebbe essere. Dopo avere cercato ovunque e fatto parecchie modifiche provo a chiedere a voi.
Grazie!
Codice:
<style type="text/css">.immagine {
position: relative;
width: 100%;
}
h1 {
position: absolute;
color: #ffffff;
font: bold 17px Trebuchet;
padding:10px;
top: 247px;
left: 850px;
width: 100%;
}
h2 {
position: absolute;
color: #3C3C3C;
font: 16px Verdana;
padding:10px;
top: 400px;
left: 96px;
width: 100%;
}
</style>
<div class="immagine"><img alt="testo alternativo" src="http://www.videotake.it/prova/images/foto%20prova.jpg" />
<h1>TESTO 1</h1>
<h2>TESTO 2</h2>
-
prova con
<div style="position:relative">
<div class="immagine"><img alt="testo alternativo" src="http://www.videotake.it/prova/images/foto%20prova.jpg (http://www.videotake.it/prova/images/foto%20prova.jpg)" />
<h1>TESTO 1</h1>
<h2>TESTO 2</h2>
</div>
Se posso ti consiglierei di utilizzare meno possibile i posizionamenti assoluti proprio per evitare questi problemi, se poi parliamo di design responsive č il peggio che si possa fare
-
Intanto grazie della risposta.
In questa maniera va sicuramente meglio ma continua a vedersi diversamente a seconda dei browser e sistemi operativi usati (almeno, facendo delle prove su browserstack).
Ho provato anche ad utilizzare la percentuale "em" anzichč i pixel.
Ho modificato la posizione in relative come hai suggerito (il sito č responsive), ma in questo modo per l'altezza ho dovuto usare valori negativi (-40px pr farti un esempio).
Se conosci altri metodi o codici diversi da quello che sto usando li provo molto volentieri!
Grazie ancora
-
Mi appello ancora a voi. Premetto che il codice da me proposto č solo un esempio e se avete una soluzione diversa va benissimo uguale.
L'obiettivo č creare una pagina potendo mettere del testo sopra a delle immagini e nelle posizioni che decido, facendo in modo che il sito responsive sia visualizzato correttamente su ogni browser.
Se č fattibile mi salvate!