[CSS] Div e menu sovrapposti, attributi 'absolute', 'relative' (schema in allegato)

[LacioDrom1986]

Salve a tutti,
avrei bisogno di creare un layout (possibilmente senza usare tabelle) per un sito che sto facendo utilizzando i div. Ma ho alcuni problemi.

Devo realizzare 2 menu uno dentro l'altro, quello interno è composto da delle miniature di immagini (oppure dei link) e da un div più grande che conterrà l'immagine a maggiore risoluzione con una breve descrizione.

Il menu esterno, invece, permette di visualizzare diversi menu interni a seconda delle tipologie di immagini.

Personalmente sono riuscito a fare quello interno: ho un div che rappresenta la sidebar con le immagini e tanti div quante sono le immagini (tutti sovrapposti). Il click su un'immagine richiama una funzione che, attraverso l'attributo z-index, permette di mettere in evidenza l'immagine cliccata e nascondendo gli altri div.

Il problema è che non sono riuscito ad estendere il concetto anche al menu esterno.

Per creare il menu interno ho utilizzato questo codice HTML:

<div id="interno1" class="container">
    
        <div class="menu">
            --- menu con i link o le immagini ---
        </div>
        
        
        <div id="1" class="immagine">IMMAGINE1</div> 
        <div id="2" class="immagine">IMMAGINE2</div>  
    
</div>

e il relativo CSS:

.container
{
	position:relative;
}

.immagine {
	top:0;
	right:0;
	width:auto;	
	background-color:#CCFF33;
	position:absolute;
}

.menu
{
	width:auto;
	background-color:#0099FF;
	position:relative;
}

I colori di sfondo mi servono per capire meglio le posizioni.

Se volessi creare un altro div di classe 'container' e chiamarlo interno2, in modo che sia sovrapposto a interno1 e venga visualizzato con lo stesso procedimento come dovrei fare?
Il problema è negli attributi position che mi stanno facendo dannare.
Preferisco non usare più tabelle, però se non risolvo al più presto sarò costretto.

[Mich_]

Il codice postato non e` semanticamente valido per realizzare un menu.

Nasciamo autodidatti e moriamo autodidatti!

Pero` anche gli autodidatti devono partire con le info corrette.

Prova a vedere nei "link utili", nella sezione menu: specie nel sito di CSSplay trovi vari menu, da cui puoi prendere ispirazione.
Il tuo menu esterno, assomiglia ad un menu a tab.
Quello interno un menu semplice verticale; in alternativa puo` essere assimilato ad una galleria.

[LacioDrom1986]

Originariamente inviato da Mich_
Il codice postato non e` semanticamente valido per realizzare un menu.

Cosa intendi per semanticamente valido?

Ho mezzo risolto impostando larghezza/altezza fissa per i contenitori (anche se non mi piacciono le cose statiche) e funziona sia il menu interno che quello esterno.

Come dici tu il menu esterno potrebbe essere visto come un menu a tab, ma anche quello interno è esattamente la stessa cosa (ma con i tab orizzontali).

[Mich_]

Cosa intendi per semanticamente valido?

Esattamente quello che ho scritto. Non c'e` possibilita` di interpretare in modo difforme.

Un processo automatico (motore di reicerca, spider di tipo aggregativo, ...), oppure una persona che naviga senza vedere la pagina con gli occhi, come fa a capire che quello e` un menu?
L'unico modo che hai per farglielo capire (al momento attuale, con XHTML1, XHTML2, o anche HTML5) e` usare una lista.

Se guardi tra i menu a tab, vedrai che sono realizzati mediante liste; ed i menu a piu` livelli mediante liste innestate.
E non e` strettamente necessario usare strutture rigide: si puo` realizzare anche con una struttura elastica.

[LacioDrom1986]

Originariamente inviato da Mich_
Un processo automatico (motore di reicerca, spider di tipo aggregativo, ...), oppure una persona che naviga senza vedere la pagina con gli occhi, come fa a capire che quello e` un menu?

Intendi quello interno o esterno?

Il menu esterno è come una specie di sotto-navigazione, solamente che al posto di cambiare pagina viene visualizzato un div diverso. Magari per far capire che è un menu potrei usare gli elenchi puntati (che vengono utilizzati nei menu a tab)

Quello interno è soltanto una specie di slideshow, uno clicca sull'immagine e nel div grande viene visualizzata l'immagine grande.