Problema con div sovrapposti

[4NG3LUS]

Salve a tutti, ho realizzato un menù in cui ogni singola voce richiama un div che da display: none; passa a display: block; tramite JS.
I div sono tutti perfettamente sovrapposti, così da simulare un effetto frame. Ogni voce corrisponde ad una pagina il cui contenuto è all'interno del div corrispondente. Fin qui tutto ok. Il problema è che se clicco i link dal primo all'ultimo funziona, se faccio al contrario ad esempio, resta visibile sempre l'ultimo. Se ad esempio clicco su link5 e dopo voglio vedere div3, cliccando su div3, resta visibile sempre il div5.
Il div principale in cui si aprono tutti i div è così formattato:

.main_content {
background: #ffffff;
width: 290px;
height: 397px;
overflow: auto;
overflow-x: hidden;
position: absolute;
top: 100px;
left: 300px;
z-index: auto;
display: none;
}

a tutti i div è associata la classe main_content. poi facendo riferimento all'id di ogni singolo div JS setta display su block.
Cosa non va?

[Mich_]

1. Quando posti codice, usa i tag VB. Per il codice hai a disposizione il tasto # sopra l'area di scrittura.
2. Il codice CSS ssenza l'HTML e` monco e non da` info sufficienti
3. Probabilmente l'errore sta nella non corretta gestione da parte del JS (mancato reset del display nel blocco che deve essere nascosto?)

Comunque la stessa cosa si realizza anche con solo CSS: vedi nelle raccolte di menu quelli chiamati menu a tab (nei link utili ci sono alcuni riferimenti - a me piacciono quelli di CSSplay)

[4NG3LUS]

si infatti quello che vorrei sapere è lo script che resetta tutti gli altri display su none quando clicco su una voce qualsiasi.

[4NG3LUS]

nessuno mi aiuta?

[Mich_]

Cerca di essere un po' chiaro.
Sembra che fai confusione tra script e CSS. Sono due tecniche diverse, tra l'altro trattate in due forum diversi.

Qui ci occupiamo dei problemi CSS.

Nel tuo caso hai postato un pezzo di CSS, pero` fai riferimento a tecniche JS, di cui non posti informazioni.
Non ti si puo` quindi dare una risposta mirata.

Ho gia` scritto che quello che vuoi fare si puo` realizzare con solo CSS (senza JS), pero` devi partire dal CSS che puoi trovare in vari siti, abbandonando il JS che sembra che usi.

Comunque "lo script che resetta tutti gli altri display su none" e` uan domanda che non ha senso. Se usi solo CSS non esiste proprio; se usi JS si puo` realizzare, ma occorre conoscere come e` fatto il tuo script.

[spadescience]

se posso ti aiuto volentieri, ma dovresti postare anche il codice html ed il codice javascript. Altrimenti o ti scrivo il codice da zero (anche no ) oppure vado per ipotesi.

Sospetto che sia sbagliato il codice javascript. Ogni voce rende visibile il div corrispondente... ma non nasconde gli altri. Quindi resta visibile il div con posizione assoluta "ultimo" rispetto agli altri (che quindi si posiziona sopra). Plausibile?

[4NG3LUS]

Si ho realizzato la cosa tramite JS. Ma dato che mi dite che la stessa, può essere utilizzata utilizzando esclusivamente CSS, preferirei di gran lunga questa soluzione.
Al momento la cosa è stata realizzata così:

<table border="1">
<tr>
<td width="300" height="397">
<ul class="menu">[*]link1[*]link2[*]link3  [/list]
</td> 
<td width="290" height="397"> <div class="main_content" id="link1"">link1
link1.</div> <div class="main_content" id="link2"">link1
link2.</div> <div class="main_content" id="link3"">link1
link3.</div> </td> </tr> </table>

[spadescience]

Certo che non funziona. Tu rendi visibile un div, ma dovresti anche nascondere gli altri due. Se non lo fai si sovrappongono.

Non l'ho mai fatto solo coi Css, ma il codice sarebbe questo
http://www.gsdesign.ro/blog/tabs-without-javascript/

[4NG3LUS]

eh si, chiedevo proprio quale fosse il codice per nascondere gli altri.
se è possibile senza utilizzare JS è meglio ancora.
comunque il link non mi funziona.

[spadescience]

Strano, a me quel link funziona ancora.
c'è un esempio anche qui
http://webdevel.blogspot.com/2008/06...avascript.html
Altrimenti cerca su google "tab without javascript".

In javascript, a volerlo scrivere "sporco":

<ul>
	[*]link1
	[*]link2
	[*]link3[/list]