Mezzo overflow

domenica 20 agosto 2004

• Il position fixed
• Il segreto dell'overflow: hidden
• gomma layout
• a fine pagina (non con opera)

CSS Un layout con una barra che invece di essere quella che fa scorrere la pagina serve a far scorrere solo un div con overflow, la barra normale non viene visualizzata sfruttando un altro overflow:auto in concomitanza col mantenere la pagina dentro i limiti del body

Più d'uno mi ha chiesto in privato una soluzione del genere e siccome è più comodo fornire un link a tutti che rispondere singolarmente ho preparato questa pagina che può tornare utile a qualcuno

L'inconveniente è che con opera l'ancora alla parte nascosta della zona colla barra non funziona, e non ho idea se si può rimediare, di certo so che invece cose del genere funzionano benissimo nel passo successivo a questa soluzione che è l'implementazione nei browser monopolio del position:fixed, è un po' strano che la roba normale non funzioni benissimo e quella fuori dalla norma invece vada meglio, in effetti però con opera il position:fixed è nella normissima

il problema è aggiungere sufficiente testo per lo scroll e ovviamente si metterà mano ai br

e se invece ci metto il css?

e lo metto pure in un tag pre, così evidenzio i problemi di questa soluzione con formattazione fissa

---

	* {margin:0;padding:0}
html, body {height:100%}
body {background:#a4876c;
text-align:center;
overflow:auto;
font-size:90%;
font-family: georgia, garamond, serif
}
.contenitore {background:#7ec9b5;
width:90%;
height:100%;
margin:auto;
text-align:left;
border-left:3px solid #eecf66;
}
	
#testata {background:#7ec9b5;
color:#ff8346;
height:20%;
overflow:auto;
}
	
#barra {
color:#a73f5e;
font-weight:bold;
width:27%;
float:left;
}
#corpo {background:#e2decf;
height:80%;
overflow:auto;
width:69%;
float:right;
color:#3a8143;
border-left:3px solid #ff8346
}

h1 {background:#eecf66;
padding-left:.4em;
font-size:3em;
font-style:italic;
}


h3 {padding:.8em}
 
#corpo p {padding:2em}


h2 {text-align:center}
h4 {background:#ceeecc;
text-align:right;
margin-left:30%;
font-size:.8em
}

#corpo h4 {background:#eecf66}


ul {list-style:none;
background:#eecf66;
}

li a {width:100%;
padding-left:.4em;
display:block;
}
		
a {text-decoration:underline;
background:#da7836;
color:#faeaff;
}

a:hover {background:#faeaff;
color:#a6427b;
text-decoration:none;
}

li {margin-top:.2em;}
		
#corpo div a {height:3em;
border:3px solid #7ec9b5;
padding:1em;
font-size:1em;
font-weight:bold;
display:block;
}
		
#corpo div a:hover {
border:3px solid #ff8346;}


#footer {background:silver;
}


h1 span {background:#7ec9b5;
color:#bb3780;
padding:1.2em;
border:3px solid #ff8346;
border-top:none;
}
#corpo h1 {font-size:1.2em;
background:#3d9c89;
color:white;
font-style:normal;
border-top:3px solid #ff8346;
padding:1em;
font-size:1.4em;
padding-top:0;
text-align:justify
}

#corpo h1:first-line {font-size:1.6em}		
		
#corpo h1:first-letter {font-size:1.6em;
font-style:italic;

}		
pre {color:#bb3780;
padding-left:.4em;
font-weight:bold;
font-family:monospace;
background:#d0d0e8
}

---

e ho fatto a meno dei br

e ci metto un'ancora tanto per provare l'effetto

---

É arrivato il momendo di...