div con bordi smussati e overflow:auto

[mosquito70]

Ciao a tutti,
sto utilizzando questo CSS per la creazione di un div stile "riquadro" con i bordi smussati.

<style type="text/css">
.curvy {position:relative; width:190px; background:#fff; color:#000; margin:1em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#009999; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#fff; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}
</style>

E funziona tutto bene, fino a quando abilito l'overflow, inserendo "auto". (ovvero la barra laterale di scorrimento.
La barra infatti non si vede e viene modificato in alto ed in basso la definizioe dei bordi smussati.

Sapete perchè e nel caso avete alternative?

Grazie per qualsiasi consiglio.
Ciao

[fcaldera]

Originariamente inviato da mosquito70
Ciao a tutti,
sto utilizzando questo CSS per la creazione di un div stile "riquadro" con i bordi smussati.



E funziona tutto bene, fino a quando abilito l'overflow, inserendo "auto". (ovvero la barra laterale di scorrimento.
La barra infatti non si vede e viene modificato in alto ed in basso la definizioe dei bordi smussati.

Sapete perchè e nel caso avete alternative?

Grazie per qualsiasi consiglio.
Ciao

non mi è ben chiara la situazione: avresti una pagina di test da vedere?

[mosquito70]

Intanto grazie della risposta e scusate se rispondo solo ora.

Non ho un sito di test dove poter farti vedere la prova. Ho però l'immagine della prima pagina, dove indico cosa intendo per overflow.

Premetto che non sono un grafico (e quindi l'immagine non è delle migliori) e che il sito va terminato, ma spero che quello che invio possa chiarire meglio quello di cui ho bisogno.

Grazie per qualsiasi suggerimento.
Ciao


Edit:
Non ricordavo di essere riuscito a correggere l'errore. La richiesta è un'altra. Ovvero come poter modificare la barra di scorrimento. Vorrei inserire solo due frecce, che sono due mie immagini (1 in alto e l'altra in basso) senza la visualizzazione della barra "grigia".
Si può fare?




Questo il codice finale, che probabilmente non è perfetto e si protrebbe scrivere meglio


Css

.curvy {position:relative; width:190px; background:#fff; color:#000; margin:1em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#009999; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#fff; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}

#news {
font-size: 11px;
color: #000000;
font-family: Verdana, Helvetica, sans-serif;
height: 200px;
overflow: auto;
margin-left: 2px;
background-color : #ffffff;
}

Codice

<div class="curvy">
    <em id="ctl">[b]&bull;[/b][/i]
    <em id="cbl">[b]&bull;[/b][/i]
    <em id="ctr">[b]&bull;[/b][/i]
    <em id="cbr">[b]&bull;[/b][/i]
    


        <font style="font-family: Verdana, sans-serif; font-weight : bold; font-size: 13px; color:#008483; align:center">Risultanze di Gara</font>
        <div id="news">    
                      


                     <font style="font-size: 11px; color: #008483; font-family: Verdana, Helvetica, sans-serif; font-weight : bold; font-style: italic;titolonews">In provincia di <%=rs("DESC_PROV")%></font>

                    <font class="datanews">[b]<%=rs("DESC_CATE_VISU")%>[/b]</font>

                    <font class="testonews">[i]Data Licitazione:[/i] <%=rs("DATA_LICI_ESTE_RISU")%> - [i]Importo:[/i] <%=vc_descnoteimpo%> [i]Ditta Agg.: [/i]<%=desctipoaggi%></font>


           </div>
    </p>
</div> 

[fcaldera]

modificare la barra di scorrimento in quel modo implica il ricorso a javascript

ti sposto di là e ti suggerisco uno script (non intrusivo) da cui prendere spunto
http://javascript.html.it/script/ved.../div-scroller/

[mosquito70]

Grazie!!!
E' perfetto. Proprio quello che mi serviva.

[OT CSS]
Ho tolto comunque i bordi smussati del riguadro.
L'effetto è migliore così.
[/OT CSS]


A buon rendere!
Ciao