Newsgroup: it.comp.www.html
Titolo: [ css ] problemi nel creare un blocco fisso nella pagina

Salve a tutto il news!
Ho il seguente problema:
sto lavorando su un foglio di stile che mi blocchi la testata della 
pagina durante lo scroll del resto ma ovvimanete quando passo in 
rassegna i browsers, specie quello M$, non ho l'effetto desiderato.
ho provato: mozilla 1.5, firebird 0.7, epiphany 1.0.3, ie 6
posto nell'ordine parte della pagina e il css e tralascio tutti gli 
altri css su cui non ho problemi.
Grazie a chi mi darŕ un chiarimento per sistemarmi con IE.
[pagina]***********************************************************************
[snip]
	<div class="Head">
     		<div class="Sezione">
         		<div class="Titolo">Titolo pagina</div>
		        <div class="Bck">Indietro</div>
         		<div class="Fwd"><a href="pagSuccessiva.html" 		
			target="_self">Avanti</a></div>
		</div>
	</div>
 
	<!-- fine della parte fissa -->
	<br/><br/><br/>
	<div class="comp">
		<div class="titleComp">
		<div class="title">titolo composizione</div>
	</div>
         <div class="bodyComp">
		testo...<br/>
		bla bla bla<br/>
		bla bla bla<br/>
		bla bla bla<br/>
	        <div class="sign">firma</div>
	</div>
	<!-- seguiranno N blocchi comp che scrolleranno sotto Head-->
[snip]
[css]**************************************************************************
/* riquadro di testa della pagina */
..Head{
    position: fixed;
    background:  #FFFFFF url(../images/testalino_sezioni.jpg) no-repeat 
top right;
    margin-top: -25px; /*porto in su il logo cosě copro il testo che vi 
scorre sotto */
    height: 60px;
    width:97%;
    z-index:1;
    color: #A94145;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
}
/* configurazione comune per l'area contenente il testo (titolo + link 
avanti e indietro) */
..Head .Sezione{
/*   position: relative;*/
    margin-left: 5px;
    width: 100%;
}
/* titolo della sezione + numero */
..Head .Sezione .Titolo{
    position:relative;
    border-bottom: 1px dotted #7D7D7D;
    width: 400px;
    font-size: 14px;
    padding-rigth: 20px;
    text-align:right;
}
/* area per link indietro */
..Head .Sezione .Bck{
    position: absolute;
    text-align: left;
    z-index:1;
    width: 50px;
    color: #eceaea; /* cosě sembra disabilitato */
}
/* area per link avanti */
..Head .Sezione .Fwd{
    position: relative;
    padding-left:60px;
    color: #eceaea; /* cosě sembra disabilitato */
}
/* --------------- struttura di una composizione --------------- */
/* box principale */
..comp{
	position: relative;
	margin-bottom: 15px;
	margin-top: 30px;
	width:100%;
}
/* Box per titolo della composizione */
..comp .titleComp{
    position: absolute;
    width:150px;
    font-family: verdana,geneva,arial,helvetica,sans-serif;
    font-weight: normal;
    font-size: 11px;
    text-align:left;
}
/* box per l'area destinata al testo */
..comp .bodyComp{
    position: relative;
    font-family: verdana,geneva,arial,helvetica,sans-serif;
    font-size: 11px;
    font-weight: normal;
    text-align:left;
    padding-left: 155px;
    color: #7D7D7D;	/* grigio */
}
/* titolo della composizione */
..comp .title{
     border-top: 1px solid #CECECE;
     border-bottom: 1px solid #CECECE;
     font-weight: bold;
     text-align:left;
     background-color: #F5F5F5;
}
/* firma dell'autore */
..comp .sign{	
     margin-top:5px;
     border-bottom: 1px dotted #d7d7d7;
     font-weight: bold;
     text-align:right;
     color: #7D7D7D;
     background:  transparent url(../images/signature.jpg) no-repeat top 
left;
}
-- 
  [ Running Debian Sid - GNU/Linux ]
  ~ 
http://space.virgilio.it/swa...@tin.it/
  ~ ICQ: 61670579

 ..Head{
<cut>
no chiedetemi perché nel copia incolla son saltati fuori sti i due .!
ok? cmq ce ne è uno solo.


 rassegna i browsers, specie quello M$, non ho l'effetto desiderato.
In uno dei miei siti ho fatto una cosa del genere:
www.arpnet.it/uciim
E' un adattamento da un "ie hack" un po' bacatello
che era stato postato qua sul newsgroup qualche mese fa.
Praticamente explorer legge una pagina priva di scrolling verticale,
dove però c'è un div che ha la scrollbar ed è grande quanto la finestra.
Viceversa, opera, mozilla & co. leggono una pagina normale
in cui il div superiore e quello di sinistra hanno position:fixed.
L'effetto "visivo" dovrebbe essere quello che stai cercando.
Non ho ancora finito di testare il sistema su tutti i browser
(ovvio che su netscape4 la pagina scrolla tutta, non basterebbe lourdes...)
cmq per ora l'unico inconveniente che ho riscontrato è il mancato
supporto della rotellina del mouse su IE5.0.
Di sicuro avendo tempo e voglia si può mettere a posto anche quello...
MaRoK

 
<cut>
grazie per lo spunto! domani sera dò un occhio, ora non ci riesco.


 grazie per lo spunto! domani sera dň un occhio, ora non ci riesco.
Ok, se č quello che cerchi ti spiego i dettagli!
MaRoK

 Ok, se è quello che cerchi ti spiego i dettagli!
va bene! ho appena acceso il pc per scaricare la posta, semmai facciamo 
che ti mando un mail provatamente per avvisarti che ho postato sul news?
così tutti sono partecipi e non rompo con subject del tipo "x marok"
o ancora + semplice tieni d'occhio questo thread per almeno qualche 
giorno... sono purtroppo tiratissimo con i tempi. devo già scappare. :(
cmq confermo, mi interessa.


 cmq confermo, mi interessa.
non ti preoccupare, un'occhiata la do sempre! :)
MaRoK

 MaRoK
allora, ho dato un occhio al css e all'html del sito ma non riesco a 
capire come questo sia legato al mio caso... spiega un pò, please.
l'unico tag che non ho conosco e su cui mi son documentato or ora è 
overflow-y ma non sembra essermi utile.


 overflow-y ma non sembra essermi utile.
Infatti è praticamente il *centro* di tutto quanto... :D
overflow-y è un tag proprietario di internet explorer5+.
Se settato a hidden, non fa comparire la barra di scrolling verticale
dell'elemento a cui è applicato.
Quindi, scrivendo body {overflow-y:hidden},
su internet explorer non comparirà la barra di scrolling verticale della pagina.
Dunque di default tutti i div che vi sono contenuti, per IE saranno fissi.
Per il div che invece dev'essere scrollabile (il contenuto della pagina...)
definirai overflow:auto.
Così facendo comparirà (quando serve) a lato del div la scrollbar verticale.
Se fai occupare al div scrollabile l'intera finestra, puoi ampiamente spacciare
la scrollbar del div per la scrollbar dell'intera finestra, ottenendo su IE
un effetto visivo analogo a quello che si ottiene su Opera, Mozilla e soci
con position:fixed
MaRoK

 
eureka! adesso posso completare il mio "hack" per far comparire una 
pagina con le dimensioni che voglio anche su ie!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html lang="it">
<head>
<title>Hack!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	overflow-y: hidden;
	overflow-x: hidden;
}
#pagina {
	width: 400px;
	height: 400px;
	overflow: scroll;
}
</style>
</head>
<body>
<div id="pagina">My Hack!</div>
</body>
</html>
due nei: il css non č valido e anche se la larghezza del testo non 
supera quella del div, le barre di scorimmento appaiono lo stesso anche 
su moz

 su moz
Hai provato a settare overflow ad auto invece che a scroll?
MaRoK

 Dunque di default tutti i div che vi sono contenuti, per IE saranno fissi.
<cut>
ah, grazie!
sta cosa non la sapevo... appena ho tempo provo.
Grazie ancora. Cheers
