muovere css fuori l'area principale

[skz]

salve,

premetto che sono nuovo al mondo css... quindi se dico troppe vaccate scusatemi

allora, sto sistemando il sito personale, e un amico mi ha aiutato con la prima stesura del layout con il css, ma al momento è oberato di lavoro e non voglio stressarlo..

quello che vorrei fare è quello che vedete nell immagine

[/URL]

in pratica il layout è formato da 2 div. sull'immagine a sx il sito si trova nella pagina iniziale, poi quando si clicca nei vari menu (che sono contenuti nel div superiore, il rosso) vorrei che tutto si muovesse nella posizione che vedete nel layout di destra... ovvero il rosso che esca fuori lo schermo visibile in verticale (ma non completamente una 20ina di pixel devono rimanere visibili ) tirandosi dietro il div sotto.

ho provato a modificare il css fatto dal mio amico ma nulla... ho provato a leggere qua,

http://www.w3.org/TR/CSS21/visuren.html#choose-position

ma sono piu confuso di prima... in realtà non mi è nemmeno chiaro se questo movimento è possibile, ho il dubbio che i movimenti possano essere fatti solo da dx a sx o viceversa?

questo è il css se può servire

html,body{
margin: 0;
padding:0;
background-color:#000;
}

#container {

width:100%;
}

#menu {
position:absolute;
top:0;
left:0;
padding-left:10px;
height:131px;
width:892px;
background:#000;
}

#content {
margin-top:131px;
padding-left:10px;
background:#000;
overflow:auto;
height:667px;
}


grazie in anticipo

[fmortara]

Prova questo:
assegni una classe al div rosso quando è cliccato

html,body{
margin: 0;
padding:0; 
background-color:#000;
}

#container { 

width:100%; 
}

#menu {  
padding-left:10px;
height:131px; 
width:892px; 
background:#000;
margin: 0;
}

#menu.active {
margin-top: -110px;
}

#content {
padding-left:10px;
background:#000;
overflow:auto;
height:667px;
}

[skz]

niente... non si muove di un millimetro. dovrebbe farlo automaticamente, o devo aggiungere qualcosa anche .html per farglielo capire?

Originariamente inviato da fmortara
Prova questo:
assegni una classe al div rosso quando è cliccato

html,body{
margin: 0;
padding:0; 
background-color:#000;
}

#container { 

width:100%; 
}

#menu {  
padding-left:10px;
height:131px; 
width:892px; 
background:#000;
margin: 0;
}

#menu.active {
margin-top: -110px;
}

#content {
padding-left:10px;
background:#000;
overflow:auto;
height:667px;
}

[fmortara]

quando clicchi, il <div> deve diventare <div class="active">

[skz]

ok..


ma di niente di nuovo... e non muove, taglia la pagina in orizzontale...

Originariamente inviato da fmortara
quando clicchi, il <div> deve diventare <div class="active">

[fmortara]

cosi non va?

#menu {  
padding-left:10px;
height:131px; 
width:892px; 
background:#000;
margin: 0;
}

#menu.active {
margin-top: -110px;
}


<div id="menu"></div>
<div></div>

#menu {  
padding-left:10px;
height:131px; 
width:892px; 
background:#000;
margin: 0;
}

#menu .active {
margin-top: -110px;
}


<div id="menu" class="active"></div>
<div></div>

[softhare]

Non credo si possa fare solo coi css: temo sia necessario usare javascript.
Il problema è che la posizione di due div (menu, content) deve venire modificata non in base ad un evento degli stessi div, ma in base ad un evento dei singoli pulsanti/link del menù.

Io metterei sia menu che div in un ulteriore div contenitore, scriverei una funzione javascript di spostamento del contenitore e la chiamerei all'onclick dei singoli item del menu.

[fmortara]

se ricarica la pagina con il click, come penso, allora via php o altro, deve assegnare la classe al div...
è sufficiente questo, ma dipende appunto dal fatto che ricarichi la pagina, io lo do per scontato.

[Mich_]

Cerco di fare un minimo di chiarezza.

Se l'evento richiesto e` il click, e dopo il click deve rimanere fermo, con i CSS non si riesce a realizzare.
In tal caso e` necessario JS (se non si deve far ricorso a richieste al server), oppure e` necessario ricaricare la pagina (o una parte di essa - vedi AJAX o sim).

Se invece l'evento puo` essere l'hover e non sono necessarie richieste al server, allora si puo` realizzare tramite CSS.
In tal caso la cosa piu` semplice e` nascondere un pezzo (ad esempio un <div>).
L'effetto visibile e` lo stesso dello spostamento.

Esempio:

<body>
  <div id="header">
    <div id="header_sup">
      

 qui la parte che verra` nascosta </p>
    </div>
    <div id="header_inf">
      

 qui la parte dell'header che resta visibile </p>
    </div>
  </div> 
  <div id="content">
    ... il resto della pagina 
  </div>
</body>

Con questa marcatura e` semplice cambiare il valore dell'attributo display della parte #header_sup da block a none, e si ha l'effetto di spostamento.
La stessa marcatura e` comoda anche se si usa una tecnica JS o di ricaricamento di parte della pagina, dato che la marcatura stessa semplifica il comando da dare.

[skz]

pensi bene
ricarica la pagina con il click

in pratica nel menu sopra ho messo delle mappe. clicco nel menu mappato che mi interessa e ricarico tutto. nel div sotto vanno solo immagini... a seconda della scelta fatta nel menu sopra.

premessa, il div sopra è _bloccato_ mentre il div sotto scorre in _orizzontale_ perchè le immagini contenute sono estese in larghezza non in altezza...

quindi l'idea che mi era venuta era di fare un altro css (da collegare ad ogni diverso menu mappato) che contenesse quello che mi hai scritto nell ultimo msg

solo che continua ad allargare...

non è calcola i pixel solo all'interno dell'area visibile?

Originariamente inviato da fmortara
se ricarica la pagina con il click, come penso, allora via php o altro, deve assegnare la classe al div...
è sufficiente questo, ma dipende appunto dal fatto che ricarichi la pagina, io lo do per scontato.