Problema con lista e anchor

[Ania81]

Salve a tutti,

sono il solito principiante ignorante che decide di imbarcarsi in imprese improbabili...

Sto rinnovando il sito web che gestisco e vorrei ottenere un effetto ma temo di aver imboccato la strada sbagliata.

Vi linko la pagina dove vi mostro quello che sono, in parte, riuscita a fare:

http://www.bunkersoratte.it/2013/prova%20div.html

In sostanza vorrei che il testo si leggesse come accade la prima volta che si clicca la freccia, ma la cosa dovrebbe proseguire, e dovrebbe essere possibile tornare indietro.

Per ottenere questa cosa io ho creato una lista che ha per elementi sia le frecce (o la casella vuota come nel caso della prima a sinistra che non avrebbe senso) sia i testi. Per muoversi da una "casella di testo" all'altra, ho messo degli anchor sul testo che si attivano cliccando sulle frecce.
Per evitare che la lista fosse completamente visibile ho creato un div contenitore con proprietà overflow= hidden.
Ecco: ho generato un mostro vero??

Mi piacerebbe capire perchè non funziona come speravo... o meglio, se avete altri sistemi, sono aperta a suggerimenti!

Grazie!

[Prill]

restando col tuo codice e rivedendolo:

<div id="finestra_testo_frecce">
<ul id="contenitore">
  <li id="zero"><div class="testo">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <li id="uno">
   <div class="testo">secondo paragrafo</div>
  <li  id="due">
   <div class="testo">terzo paragrafo</div> 
  
  <li id="tre">
   <div class="testo">bla bla</div>
  [/list]

css, piccole variazioni:

.testo {
width: 400px;
height: 380px;
margin:40px auto
}
							
ul#contenitore {
 position:absolute;
width: 5000px;
height: 400px;
overflow:hidden;
background: url(immagini/back_chi_siamo_div.png);
}

ul#contenitore li { 
position:relative;
display:block;
float:left;
height:400px;
width: 600px;
}
ul#contenitore a.freccia_dx { 
display:block;
float:right;
height:400px;
width: 50px;
 background: url(immagini/freccia-dx.png) no-repeat 0 0;
}
ul#contenitore a.freccia_dx:hover {
 background: url(immagini/freccia-dx.png) no-repeat 0 -447px;
 }
ul#contenitore a.freccia_sx { 
display:block;
float:left;
height:400px;
width: 50px;
background: url(immagini/freccia-sx.png) no-repeat 0 0;
 }
ul#contenitore a.freccia_sx:hover{ 
 background: url(immagini/freccia-sx.png) no-repeat 0 -447px;
}

[Ania81]

Ti adoro!
Soprattutto perché hai mantenuto il mio codice, anche se non so come tu sia riuscito a districarti nel macello che avevo combinato!

Comunque ora funziona perfettamente! Ho solo dovuto modificare i riferimenti delle frecce a sinistra che avevi messo male ma è perfetto!!

Stra-grazie!

Posso chiederti solo un chiarimento, se non è troppo lunga? Non ho capito perché hai scritto 'li id="uno" '? Mi spiego meglio: per me (perfetta ignorante) associare al tag li un id significa dire al browser che il 'li' in questione ha le caratteristiche che noi abbiamo descritto nei css con l'id "uno". é una mia visione distorta? Oppure è così? Nel secondo caso non ho capito dove prende le caratteristiche.

Anyway, ri-grazie per l'impegno profuso nella lettura del mio aberrante codice

[Prill]

Ho assegnato l'id alle voci elenco così che siano quelle direttamente e precisamente, senza spostamenti, il punto di arrivo dei tuoi link interni (eliminando i vari ancoraggi con <a name ... id ...>, l'id di <a> è stato spostato su[*] sostituendo nei nomi al numero - che avrebbe creato problemi - le lettere. Un id identifica un elemento in maniera univoca, poi possiamo se necessario impostarne le caratteristiche nel css oppure no

[Ania81]

Spiegazione chiarissima!

Di nuovo mille grazie!