[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.403
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
trattorino css solo se richiama un class di un div HTML e CSS 1
P nascondere div con css inline Javascript 2
C CSS elemento tagliato fuori da div HTML e CSS 9
gandalf1959 Background image in un div con CSS non funziona HTML e CSS 4
bluettina Odio amore per i div e figlio css HTML e CSS 1
M CSS...dinamico? Altezza div variabile, ma con immagine come bordo HTML e CSS 4
V css div testo "nascosto" se supera il width HTML e CSS 16
Monital [DIV/CSS] evidenziare risultato array all'interno di un div PHP 0
M Centrare un DIV nel BODY (usando i CSS) HTML e CSS 1
B Flash & CSS: caricare pagina esterna in DIV Flash 2
N [PHP+HTML+CSS] Problema con un div HTML e CSS 4
G Css: come mettere il collegamento al div header? HTML e CSS 8
F [CSS] Problema con IE e div fixed HTML e CSS 2
MattiaBergomi [DIV e CSS] Far contenere ad un Div un immagine senza che esca dai margini HTML e CSS 9
R [css] lunghezza div dei contenuti principali HTML e CSS 2
L div nascosti via CSS Javascript 1
Kerotan Div, css e testo (prime armi) HTML e CSS 35
gladenko CSS e DIV problema di dimensionamento HTML e CSS 3
M css div w3c posso iniziare? HTML e CSS 1
L padding e mozilla (in css e div) HTML e CSS 8
grottafelix Div O Table [css] HTML e CSS 4
M cosa servono i tag div + guida sui CSS HTML e CSS 5
G Input checkbox in CSS HTML e CSS 0
G classe CSS sovrascritta HTML e CSS 2
G file CSS contenente variabili HTML e CSS 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
L problema collegamento file css con html HTML e CSS 1
M CSS "puro" HTML e CSS 0
D Aiuto CSS in ELEMENTOR - Cambiare un testo CMS (Content Management System) 0
Z Google Fonts CSS tra desktop e responsive HTML e CSS 1
Z Slide show CSS HTML e CSS 1
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
StephenSoftware Flexbox: definizione nel CSS HTML e CSS 4
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
R javascript lettura css cross-browser Javascript 1

Discussioni simili