Posizionamento dinamico e compatibilità browser

[Butik]

Ciao ragazzi,
ho necessità di inserire del testo sopra a delle immagini. Ho un codice (che incollo sotto) con cui visualizzo correttamente la pagina solo 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.
Sapete dirmi cosa c'è da modificare o cosa c'è di sbagliato nel codice?

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>

[Experiment8]

Ciao Butik,

Sarebbe bene chiudere il codice nel tag apposito per renderlo piu' leggibile, comunque riguardo al tuo codice, noto che hai posizionato tutto in relative o absolute positioning, tali posizionamenti possono essere utili in certi ambiti ma è meglio sempre evitarli quando possibile, perché leghi l'elemento a delle coordinate fisse per cui potrebbe rivelarsi difficile farlo digerire a tutti i browser di dimensioni anche differenti.

Dal codice mi sembra di capire che la tua sia una sorta di splash page o di "under construction", corretto? Se è così invece di incasinarti con i position absolute, puoi semplicemente evitarli e centrare il testo:

<style type="text/css">
.immagine > img { // Indico soltanto che l'immagine all'interno sia responsiva e centrata
display: block;
margin: 0 auto;
max-width: 100%;
}
h1 { // Uso display block per trasformare il titolo in blocco, e applico un padding superiore per spostarlo dal top come avevi fatto col le coordinate "top"
display: block;
color: #ffffff;
font: bold 17px Trebuchet;
padding: 247px 10px 10px;
text-align: center;
}
h2 { // Stesso discorso che per l'h1, ho inserito il padding per posizionarlo, se non è esattamente alla stessa posizione di prima puoi giocare sui 100px di padding superiore per allinearlo
display: block
color: #3C3C3C;
font: 16px Verdana;
padding:100px 10px 10px; 
text-align: center;
}
</style>

Questa soluzione non è del tutto responsive, se deve esserlo vediamo di pensare il tutto diversamente, ma questo è comunque un buon inizio e prima non era responsive, quindi do per scontato che vada bene anche così.

In questo modo avrai una cosa centrata sempre e comunque, prima usando i left, se avessi cambiato il testo ed avesse avuto una larghezza differente, avresti dovuto aggiustarlo di conseguenza per avere tutto allineato, ora saranno sempre centrati. Prova e dimmi se hai dubbi.

P.s Il codice HTML non è cambiato.

[Butik]

Ciao Experiment8.

Stasera provo a smanettare ma per ora ti rispondo su quello che mi hai chiesto. La pagina contiene delle informazioni per la sezione di un negozio, il sito è responsive e il testo centrato non va bene perchè devo mettere dei blocchi di testo uno a fianco dell'altro (2 o 3 blocchi di testo sulla stessa linea).

Intanto grazie mille per la risposta!

[Experiment8]

Ciao Butik,

ho capito, scusa la mia interpretazione sbagliata, comunque sia è bene evitare i posizionamenti assoluti in casi come questi. Riusciresti a farmi una grafica semplice con dei rettangoli di quello che vorresti ottenere? mi sarebbe molto più semplice capire come vuoi posizionare i vari elementi. Grazie.

[Butik]

Io avevo in mente una cosa del genere...però se è poco attuabile nella pratica mi limito a fare diversamente eh (unendo le varie immagini in una sola per esempio). Ti preciso anche che il codice va in un articolo di joomla.

blocchi pagina web.jpg

[Experiment8]

Ciao!

Posto anche qui la risposta in modo che tutti possano vederla:

Scusami tanto hai ragione, mi sono perso via e ho dimenticato di risponderti, perdonami

Allora per ottenere un testo sopra a delle immagini ci sono due modi:

- Imposti l'immagine come background di un box e il testo lo inserisci normalmente all'interno;
- Utilizzi posizionamenti assoluti/relativi.

Seguendo la tua immagine guida verrebbe una cosa così:

HTML:

<div class="relative box-uno">
  <img src="" alt="" />
<p class="abs pos-uno">Testo</p>
</div>
<div class="relative box-due">
  <img src="" alt="" /><p class="abs pos-uno">Testo</p><p class="abs pos-due">Testo</p><p class="abs pos-tre">Testo</p><p class="abs pos-quattro">Testo</p>
</div>
<div class="box-testo">
  <img src="" alt="" />
<p>Testo</p>
</div>

e nel CSS:

.relative          { display: block; position: relative; margin: 0 auto; // Crei il contenitore relative }
.relative > img { position: relative; max-width: 100%; z-index: 998; // Rende le immagini adaptive, per questo non devi settare dimensioni alle immagini, si adatteranno al loro contenitore  }

.box-uno   { width: XXXpx; }
.box-due   { width: XXXpx; //Se è larga tutto lo spazio disponibile evita di metterla }

.box-testo          { float: left; width: 50%; padding: 5%; box-sizing: border-box; }
.box-testo > img { display: block; margin: 0 auto 20px; }

.abs             { position: absolute; z-index: 999; }
.pos-uno       { width: XXXpx; bottom: 10px; right: 10px; }
.pos-due       { width: XXXpx; bottom: 10px; left: 10px; }
.pos-tre        { width: XXXpx; bottom: 10px; left: 100px; }
.pos-quattro  { width: XXXpx; top: 10px; right: 10px; }

A grandi linee così dovrebbe darti un indicazione di come lavorare per sistemare i vari elementi, ovviamente i posizionamenti io gli ho messi, ma non ho idea degli spazi di cui hai necessità per cui lascio a te se e di quanto definire le dimensioni/posizionamenti.

Sinceramente non ho modo ora di testare questo codice adesso, l'ho scritto sul pezzo, probabilmente ci sarà qualche cosa da sistemare, fammi sapere se ti è chiaro comunque