div con overflow auto

[bmw]

Ciao, non sono molto pratico di CSS e avrei un problema con un div:

ho un div che ha larghezza del 98% ealtezza massima di 600 pixel. vorrei che se la lunghezza superasse i 600 pixel comparisse la barra laterale all'interno del div per scorrerlo.

Con FIREFOX funziona alla perfezione, con EXPLORER no, infatti mi compare la barra della pagina e non quella del div....

se qualcuno ha voglia di darmi una mano metto il link alla pagina:

clicca qui!

il percorso è: menu 001 --> funzione 001

grazie e se dovesse servire posto il codice....

[gengix]

Per prima cosa dichiara un doctype, possibilmente rigido. In questo momento il tuo codice ogni browser lo interpreta come vuole lui e non segue gli standard.

Vedo che utilizzi molti posizionamenti.
I posizionamenti sono proprietà particolari che bisognerebbe conoscerli a fondo prima di utilizzarli. Vanno impiegati solo quando serve e con cognizione di causa. Te lo dico perchè all'inizio hai ammesso di non essere molto esperto.
Secondo me in questo caso sono la causa del tuo problema, soprattutto nel div che ha l'overflow. Prova tirare via la position.

[bmw]

ciao, ho tolto l'overflow dal div ma non è cambiato niente.... ti posto un po di codice:

HTML:

<div id=contenuto1 class=contenuto>
    <div id=barra class=finestra align=right> [url="#"] [img]chiudi.png[/img] [/url] </div> 

        <div id=testo>        
                qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 .
        </div>
        


    </div> 

CSS:

.contenuto { 
    VISIBILITY: hidden; 
    BACKGROUND-COLOR: #ffffff; 
    LAYER-BACKGROUND-COLOR: #ffffff; 
    BORDER-LEFT: 1px solid black; 
    BORDER-TOP: 1px solid black; 
    BORDER-BOTTOM: 3px solid black; 
    BORDER-RIGHT: 3px solid black; 
    PADDING: 3px; 
    z-index: 10; 
    width: 98%;
    max-height: 600px;
    overflow: auto
    }
    
#contenuto1 { 
    position: absolute; 
    left: 10; 
    top: 60; 
    font-size: 14px
    } 

grazie...

[gengix]

ciao, ho tolto l'overflow dal div ma non è cambiato niente..

Hao inteso male quello che ti ho scritto. Non devi tirare via l'overflow, se tiri via quest'ultimo non ti farà comparire la barra di scorrimento.
Devi tirare via la position:absolute in contenuto1 con le relative coordinate.

[bmw]

non posso togliere la proprietà absolute e le coordinate a "contenuto1" altrimenti va su e copre il menu, io avrei bisogno che fosse il div "test" a mostrare la barra laterale se la lunghezza supera quella massima fissata...

[gengix]

A parte che guardando bene il codice non so come fai a vedere il div.
Per prima cosa sarebbe opportuno che nel codice di struttura racchiudessi i nomi degli id e delle classi tra gli apici.
Seconda cosa se imposti la proprietà visibility:hidden non so come tu riesca a vedere il div.
Imposta anche una height.

[bmw]

ciao, è hidden perchè compare solo quando cliccando nel menu un javascript lo fa comparire....

caspita non riesco ad uscirne, su firefox va che è una meraviglia....

[gengix]

Cerca di pulire il codice, come ti ho detto prima. Sia come sintassi che come semantica. Alcune proprietà che hai messo nel css non esistono o cmq non sono valide.
Questo pezzo di codice "ripulito" è testato e funziona:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
#contenuto1 {
    /*visibility: hidden;*/
    z-index: 10;
    position: absolute;
    left: 10;
    top: 60;
    width:98%;
    height:600px;
    padding: 3px;
    overflow: auto;
    font-size: 14px; 
    background: #fff;
    border-width:1px 3px 3px 1px;
    border-color:#000;
    border-style:solid;
}
</style>
</head>
<body>
	<div id="contenuto1">
		<div id="barra" class="finestra">
			[img]chiudi.png[/img]
		</div>
		<div id="testo">        
			

qui metto testo contenuto1 qui metto testo contenuto1 qui metto testo     
                             contenuto1 qui metto testo contenuto1 qui metto testo contenuto1 qui 
                             metto testo .
                        </p>
		 </div>
	</div>
</body>
</html>

Prova superare la dimensione dichiarata e vedrai che la compare la scrollbar.

[bmw]

...funziona !!! grazie !!!!

vedo che te la cavi davvero bene, posso approffitarne per chiederti un ultima cosa ??

vorrei che la barra grigia con la X rossa rimaesse ferma e invece scorresse solo il div contenente il testo. In pratica il DIV "barra" rimanesse ferma in alto e solo il DIV "testo" possa scorrere se il testo supera l'altezza massima fissata...


grazie ancora !!

[gengix]

Una soluzione potrebbe essere spostare nella struttura il div#barra fuori da #contenuto1.
Al padre diretto di #barra dare una position:relative .
A #barra darei:
position:absolute;
top:0
left:0;
e una larghezza, indicativamente quella di #contenuto1.

Dovrebbe funzionare.