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

LacioDrom

Nuovo Utente
13 Feb 2008
14
4
0
38
Sardegna
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:
Codice:
<div id="interno1" class="container">
    
        <div class="menu">
            --- menu con i link o le immagini ---
        </div>
        
        <!-- l'ultimo creato è il primo visualizzato -->
        <div id="1" class="immagine">IMMAGINE1</div> 
        <div id="2" class="immagine">IMMAGINE2</div>  
    
</div>

e il relativo CSS:

Codice:
.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. :incazz:
 

Allegati

  • Immagine.JPG
    Immagine.JPG
    11,3 KB · Visite: 1.482
Ultima modifica:

Discussioni simili