salve a tutti,
scusate in anticipo se il titolo non è molto esplicito ma non sapevo come estrapolare il problema in un'unica frase.
In pratica non ho la più pallida idea di come realizzare lo stile per il layout che vedete in allegato:
in pratica si tratta di fondere l'odioso problema del 100% height con elementi scrollevoli affiancati ad altri con posizione fissa.
l'elemento verde, deve essere scrollevole (anche a livello di browser, non per forza internamente) passando "sotto" i due piccoli header e footer che dovranno rimanere in posizione fissa (e rispettivamente in alto e in basso alla finestra del browser) e cicliegina sulla torta vi è anche una a fianco sidebar (destra o sinistra fa lo stesso), di posizione fissa e alta quanto la pagina del browser.
Il grosso del mio problema sta nel non sapere come far apparire i mini header e footer in posizione fissa e in modo che se il contenuto dell'elemento verde diventa scrollabile, esso "passi sotto" questi due.
codice:<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Documento senza titolo</title> <link href="styles/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div class="clean">header</div> <div id="navbar"> navbar <ul> [*] home [*] help desk [*] logout [/list] </div> <div id="content"> contenuto</p> contenuto</p> contenuto</p> contenuto</p> contenuto</p> contenuto</p> contenuto</p> contenuto</p> contenuto</p> contenuto</p> contenuto</p> </div> <div class="clean">footer</div> </div> </body> </html>codice:@charset "utf-8"; /* CSS Document */ html { height: 100%; } body { background-color: #EEE; height: 100%; margin: 0; padding: 0; } #container { background-color: #CCFF00; height: 100%; margin: 0 auto; width: 1024px; } #navbar { background-color: #FFCC00; height: 100%; position: fixed; float: left; width: 192px; } #content { background-color: #FF6666; margin-left: 192px; overflow: auto;; } .clean { position: fixed; }
Rispondi quotando