Salve ragazzi, mi chiamo Daniele e sono nuovo del forum... vi espongo subito il problema!
Ho bisogno di un layout di questo tipo: header fisso in cima, footer fisso in basso, contenuto diviso in due colonne. La colonna di sinistra dovrebbe restare fissa, senza subire l'effetto della scrollbar verticale che dovrebbe far scorrere solo il contenuto della colonna di destra.
Questo è quanto più son riuscito ad avvicinarmi:
Ecco l'HTML:
Ed il CSS:codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento senza titolo</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="container"> <div id="header"> header </div> <div id="content1"> content1 content1 </div> <div id="content2"> content2 content2 </div> <div id="footer"> footer </div> </div> </body> </html>
Il problema è che così, stringendo la finestra al punto da necessitare di una scrollbar orizzontale, questa non ha effetto sulla colonna sinistra, che va a coprire (o viene coperta, a seconda dello z-index) da quella di destra...codice:@charset "utf-8"; body, html { margin:0; padding: 0; width: 100%; } div { margin: 0; border-style: dashed; border-width: 1px; } div#container { background-color: grey; border-color: black; width: 900px; margin: 2em auto 1em 0; } div#header { background-color: orange; border-color: red; position: fixed; top: 0; left: 0; z-index: 3; height: 2em; width: 100%; min-width: 900px; } div#content1 { background-color: lime; border-color: green; position: fixed; z-index: 1; left: 0px; top: 2em; width: 400px; } div#content2 { background-color: aqua; border-color: blue; position: relative; left: 400px; width: 500px; } div#footer { background-color: yellow; border-color: orange; position: fixed; z-index: 2; bottom: 0; left: 0; height: 1em; width: 100%; min-width: 900px; }
Inoltre dovrei risolvere un altro paio di cose: il footer continua a seguire il fondo della pagina quando la finestra viene rimpicciolita, ma vorrei che ad una tot altezza minima si fermasse e diventasse raggiungibile tramite la scrollbar, un po' come avviene all'home page di google.
Inoltre avrei bisogno di far sì che la colonna sinistra, anziché avere una larghezza fissa come quella destra, prenda tutta la larghezza disponibile nella finestra meno quella della colonna destra, espressa in pixel. Anche in questo caso, raggiunta una dimensione minima della colonna sinistra dovrebbe smettere di ridursi e attivare la scrollbar orizzontale.
Vorrei cercare di ottenere il tutto, o quanto più simile possibile, senza l'utilizzo di Javascript...
Spero di essermi spiegato bene e che possiate aiutarmi... Grazie!
Rispondi quotando
