Ciao e grazie in anticipo per l'aiuto![]()
Devo convertire da tabelle a css il sito del mio corso universitario all'indirizzo www.campivisivi.net
Il sito in questione si sviluppa in orizzontale con la testata + navigazione fissa utilizzando due frames. Ho pensato di utilizzare la proprietà fixed per il <div> che continene appunto la testata + navigazione e fin qui tutto bene. Il problema sorge quando vado a stringere la finestra del browser dal basso, rendendo visibile la barra di scorrimento laterale: scorrento con la barra tutto il contenuto del sito si va a sovrapporre al layer della testata + menu. Ho messo online la pagine in questione http://www.morfina.it/layout_css/index.html
Esiste un modo per evitare la sovrapposizione del <div> dei contenuti con il <div> fixed?
Ho notato anche che la proprietà fixed non funziona in IE6. Qualche consiglio su come risolvere la questione? Forse con ajax creare un <div> contenente la testata + menu che scorre orizzontalmente quando si scrolla la pagina verso destra?
Questo il codice della pagina html:
E questo 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=ISO-8859-1" /> <title>Documento senza titolo</title> <link href="stile.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="fisso">[img]logo.gif[/img]</div> <div id="container"> <div id="header"></div> <div id="navigation"></div> <div id="content"> </div> <div id="footer">©</div> </div> </body> </html>
codice:/* CSS Document */ /*stili per il layout fisso*/ html,body{position:absolute;;margin: 0;padding:0;} body{font-family: arial,sans-serif;font-size: 11px;text-align: left} div#container{width: 1500px;margin: 0 auto; margin-top:100px; text-align: left; } /*stili generici, su header e footer*/ div#header{background-color:#36C;color: #ff0; height:101px;} div#footer{padding: 1px; background-color: #69c; color: #000} div#footer a{color: #fff;} /*stili specifici per il layout*/ div#navigation{background-color:#9cf; height:120px;} div#content{height:120px;} /*menu fisso*/ #fisso { margin-left:100px; height:100px; position:fixed; background-color:#000000; display:block;}

Rispondi quotando