Anzitutto devi mettere il DOCTYPE nel tuo codice, altrimenti i browser non sanno come interpretare e fanno di testa loro (ciascuno interpreta come vuole).
Poi vedo che usi tanto JS, per cui non so se gli effetti sono dati dal CSS o dal JS (e non ho tempo per "andar dietro" al tuo codice complesso). Il mio consiglio e` di evitare di usare il JS, dato che si puo` fare quasi tutto (comprese le transizioni, nei browser moderni) tramite CSS: questo alleggerisce il lavoro del client (gli utenti con computer lenti te ne saranno grati) e non incappi in problemi se l'utente ha JS disabilitato.
E comunque, se devi sviluppare il CSS, il JS non deve interferire: eventualmente potrai aggiungerlo dopo.
Inoltre io consiglio sempre di non usare formattazione HTML (v. ad esempio height="35" ), che puo` confliggere con la formattazione CSS (e i conflitti vengono risolti in modo diverso dai vari browser).
E ci sono degli errori di sintassi ( id="1" ): un nome non puo` iniziare con una cifra - Magari passa dai validatori, che ti trovano tutti gli errori, in modo da evitare di sbattere la testa per delle stupidaggini.
Non ci possono essere due oggetti diversi con lo stesso id ( id="contenitore" )
Per quanto riguarda il tuo problema specifico, non ho controllato il codice CSS, ma vedi che il relative si comporta meglio, a parte che probabilmente hai sbagliato qualche innestamento di blocchi (in effetti non capisco come il titolo possa essere lo stesso per due immagini diverse). La logica dovrebbe essere:
codice:
<div id="spazio_immag">
<ul> <!--NOTA: e` una lista di immagini: va resa con i tag di lista-->
<li id="foto1>
<img src="..." alt="...">
<h3>titolo immagine 1</h3>
</li>
<li id="foto2>
<img src="..." alt="...">
<h3>titolo immagine 2</h3>
</li>
...
</ul>
</div>
Dove chiaramente il <div> ha posizione relative, e l'<ul> viene spostato al suo interno ed ha dimensione sufficiente per contenere tutti i <li>. I vari <li> stanno affiancati all'interno del <ul>
Gli <h3> hanno posizione absolute all'interno dei <li>.
La posizione del <ul> dentro il <div> viene definita in base al mouse sulle miniature, oppure tramite JS per il funzionamento automatico.
Passi da fare:
1. fare tutto a scatti e verificare che funzioni
2. inserire le transizioni
3. (evt) applicare JS
Rispondi quotando
