Srollbar in un
<\div> HTML

mercoledì 19 marzo 2008 - 14.33
Elenco Threads
Stanze Forum
Aggiungi ai Preferiti
Cerca nel forum

ciccios100 Profilo | Junior Member

167 messaggi | Data Invio: mer 19 mar 2008 - 14:33
Ciao a tutti...premetto di non essere una persona molto pratica di HTML e dei linguaggi di script ad esso correlati......
cmq volevo chiedere una cosa,vorrei realizzare una cosa del genere:
Ho una home page con un menu sul lato destro e nel centro della pagina un immagine di sfondo,quando clicco su una opzione del menù l'immagine al centro vieno inserito il testo associato a quella scelta di menu.Come nella foto


812x503 40Kb


Ho già quasi del tutto realizzato questa parte......come vi sarete resi conto dall'immagine voglio inserire il testo nello sfondo bianco,ma cosa succede quando il testo ha bisogno di più spazio rispetto a quello disponibile nello sfondo bianco?allora ho pensato che ci sarà sicuramente l'opportunità di inserire una srollbar associata allo sfondo bianco,ma come?qualcuno potrebbe farmi degli esempi?grazie mille
Ciccio
>>Domandare è lecito,rispondere è cortesia

alx_81 Profilo | Guru

8.814 messaggi | Data Invio: mer 19 mar 2008 - 14:42
>Ciao a tutti...
Ciao!
>allora ho pensato che ci sarà sicuramente l'opportunità di inserire una srollbar
>associata allo sfondo bianco,ma come?qualcuno potrebbe farmi degli esempi?
Basta aggiungere al div uno stile come il seguente (provalo su un div per vedere l'effetto):

.scrolldiv
{
    overflow:auto;
    height:200px;
    padding: 4px;
    border: 1px solid;
}
>grazie mille
di nulla!
Alx81 =)

http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi
http://italy.mvps.org

gene_old Profilo | Junior Member

55 messaggi | Data Invio: mer 19 mar 2008 - 14:46
Dai all'elemento che contiene il tuo testo la proprietà "overflow:auto" e dichiarala nei css.

gene_old Profilo | Junior Member

55 messaggi | Data Invio: mer 19 mar 2008 - 14:48
Scusa alx_81 nn avevo visto la tua risposta.

alx_81 Profilo | Guru

8.814 messaggi | Data Invio: mer 19 mar 2008 - 15:11
>Scusa alx_81 nn avevo visto la tua risposta.
Figurati, un forum è fatto di interventi
Alx81 =)

http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi
http://italy.mvps.org

ciccios100 Profilo | Junior Member

167 messaggi | Data Invio: mer 19 mar 2008 - 15:53
Ciao ragazzi,per prima cosa volevo ringraziarvi per la velocità con cui avete risposto alla mia domanda!
ma volevo dirvi che la soluzione che mi avete proposto sembra non funzionare .........ecco il mio codice:

<table class="scrolldiv">
<table border="0" width="600" height="400" background="..//Allegati/Inverno.jpg">
<tr>
<td>Biografia</td>
</tr>
</table>
ed ecco la classe scrolldiv che ho implementato nel css:
.srolldiv
{
overflow:auto;
height:200px;
padding: 4px;
border: 100px solid;
}
ma se inserisco più righe del previsto mi viene ridimensionata l'immagine,ma io vorrei che l'immagine rimanesse delle stesse dimensioni e vorrei leggere tutto il testo tramite una scrollbar da posizionare a lato dell'immagine!
Ciccio
>>Domandare è lecito,rispondere è cortesia

alx_81 Profilo | Guru

8.814 messaggi | Data Invio: mer 19 mar 2008 - 16:00
>ma se inserisco più righe del previsto mi viene ridimensionata
>l'immagine,ma io vorrei che l'immagine rimanesse delle stesse
>dimensioni e vorrei leggere tutto il testo tramite una scrollbar
>da posizionare a lato dell'immagine!
Scusa ma il div dove sarebbe?
Alx81 =)

http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi
http://italy.mvps.org

ciccios100 Profilo | Junior Member

167 messaggi | Data Invio: gio 20 mar 2008 - 10:27
>Scusa ma il div dove sarebbe?
Hai ragione ...........
Questo è l'esempio con il div:

<li><div style="position: absolute;width: 505px; height: 305px; z-index: 1; left: 325px; top:
150px; background-color:#FFFFF2 class="srolldiv" id="contenitore">
&nbsp;</div></li>

La classe scrolldiv nel css è sempre la stessa,ma in questo caso il problema cambia,quando inserisco l'attributo class=srolldiv il contenuto di div(uno sfondo avorio dove inserire il testo) scompare,quindi non riesco a provare la scrollbar..........
Ciccio
>>Domandare è lecito,rispondere è cortesia

alx_81 Profilo | Guru

8.814 messaggi | Data Invio: gio 20 mar 2008 - 10:33
><li><div style="position: absolute;width: 505px; height:
>305px; z-index: 1; left: 325px; top:
>150px; background-color:#FFFFF2 class="srolldiv" id="contenitore">
> </div></li>
se hai proprio scritto così, la classe non è "srolldiv" ma "scrolldiv"..

Alx81 =)

http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi
http://italy.mvps.org

ciccios100 Profilo | Junior Member

167 messaggi | Data Invio: gio 20 mar 2008 - 10:55
No nell'html ho scritto "scrolldiv"...........
Ciccio
>>Domandare è lecito,rispondere è cortesia

alx_81 Profilo | Guru

8.814 messaggi | Data Invio: gio 20 mar 2008 - 11:02
>No nell'html ho scritto "scrolldiv"...........
facciamo così, passami la pagina.. sennò non riesco a mettere in pratica..

Alx81 =)

http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi
http://italy.mvps.org

ciccios100 Profilo | Junior Member

167 messaggi | Data Invio: gio 20 mar 2008 - 12:13
593_PS.zip
Ok,eccho il file html e il css........ora sono riuscito a far comaprire il div,ma la scrollbar non funziona ancora e inoltre ti volevo chiedere come risolvere un altro problemino,per posizionare il div ho usato la proprieta left:470px ma cambiando la grandezza dello schermo il div si sposta ed esce dallo sfondo della foto,come posso ovviare a questo problema?Grazie mille
Ciccio
>>Domandare è lecito,rispondere è cortesia

alx_81 Profilo | Guru

8.814 messaggi | Data Invio: gio 20 mar 2008 - 14:49
594_prova.zip
Il tuo problema sta nel fatto che usi una sequenza di caratteri per commentare errato "//".
Per commentare in css devi utilizzare il commento a blocchi: /* commento */
Vedrai che gà qualcosa cambia.
Inoltre sul css c'è la classe .srolldiv mentre nell'html richiami scrolldiv.
Infine, cerca di indentare il codice per bene aprendo e chiudendo correttamente tutti i tag.
ciao!
Alx81 =)

http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi
http://italy.mvps.org

ciccios100 Profilo | Junior Member

167 messaggi | Data Invio: ven 21 mar 2008 - 09:32
OK....in effetti c'erano un pò di errori,ora li ho corretti e in effetti la scrollbar funziona benissimo,grazie!
cmq volevo chiederti informazioni per altri 2 problemi:
1)Il div continua a spostarsi se cambio la risoluzione del mio monitor,a casa utilizzo la 1024*768(ho un 15 pollici) e si vede benissimo,mentre in ufficio utilizzo la 1280*1024 e il div mi copre una parte dei menù perchè si sposta verso sinistra,come faccio a fare un qualcosa che vada bene per ogni risoluzione?
2)Mi è capitato di far girare la prova di sito che ti ho postato in precedenza su mozilla firefox e la formattazione della pagina viene sballata...come faccio a creare dell'HTML che vada bene almeno per Internet Explorer e Mozilla Firefox?
Intanto accetto la risposta precedente perchè il problema della scrollbar è stato risolto grazie mille dell'aiuto che mi stai dando,ciao!
Ciccio
>>Domandare è lecito,rispondere è cortesia

alx_81 Profilo | Guru

8.814 messaggi | Data Invio: ven 21 mar 2008 - 10:20
>1)Il div continua a spostarsi se cambio la risoluzione del mio
>monitor,a casa utilizzo la 1024*768(ho un 15 pollici) e si vede
>benissimo,mentre in ufficio utilizzo la 1280*1024 e il div mi
>copre una parte dei menù perchè si sposta verso sinistra,come
>faccio a fare un qualcosa che vada bene per ogni risoluzione?
>2)Mi è capitato di far girare la prova di sito che ti ho postato
>in precedenza su mozilla firefox e la formattazione della pagina
>viene sballata...come faccio a creare dell'HTML che vada bene
>almeno per Internet Explorer e Mozilla Firefox?
Aspettiamo gli esperti, non vorrei darti soluzioni non troppo ortodosse
Ciao!
Alx81 =)

http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi
http://italy.mvps.org

gene_old Profilo | Junior Member

55 messaggi | Data Invio: ven 21 mar 2008 - 10:30
Ho dato un occhio veloce al file che hai allegato. Basterebbe che tu provassi a validare il codice e vedresti che il tuo documento è quasi interamente deprecato:
-La dichiarazione del DOCTYPE è incompleta.
- Manca il tag di apertura dell'elemento html.
-Molti elementi e attributi che hai dichiarato sono deprecati come ad esempio "marquee" "bgColor" "font".
-Nn c'è molta pulizia di codice, alterni stili inline con stili interni e stili esterni. Questo modo di scrivere codice crea confusione in primis a te, perchè rischi di trovare conflitti di importanza e specificità tra le regole che dichiari.
-Tanti errori di semantica, ad esempio hai inserito degli <a> dentro degli <ul>, questo nn puoi farlo nell'xhtml, se vuoi inserire un link dentro un listato lo devi annidare dentro l'elemento <li> e nn nell'<ul>.
Nn so che piattaforma di sviluppo utilizzi, ma dovrebbe segnalarteli questi errori.

Per quanto riguarda il tuo problema, ( prima è meglio se risolvi quelli appena elencati) è che dai una position absolute al div. Quando dai una position absolute, l'elemento che la riceve si estrae dal flusso normale del documento e se nn fai attenzione può avere dei comportamenti diversi dal solito.
L'elemento genitore che contiene il div con position absolute deve avere la proprietà position:relative, nel tuo caso il div "center " nn ce l'ha.
Cmq evita il più possibile le position e inizia a validare il codice che scrivi.

Ciao!

ciccios100 Profilo | Junior Member

167 messaggi | Data Invio: ven 21 mar 2008 - 14:18
>Ho dato un occhio veloce al file che hai allegato. Basterebbe
>che tu provassi a validare il codice e vedresti che il tuo documento
>è quasi interamente deprecato:
>-La dichiarazione del DOCTYPE è incompleta.
>- Manca il tag di apertura dell'elemento html.
>-Molti elementi e attributi che hai dichiarato sono deprecati
>come ad esempio "marquee" "bgColor" "font".
>-Nn c'è molta pulizia di codice, alterni stili inline con stili
>interni e stili esterni. Questo modo di scrivere codice crea
>confusione in primis a te, perchè rischi di trovare conflitti
>di importanza e specificità tra le regole che dichiari.
>-Tanti errori di semantica, ad esempio hai inserito degli <a>
>dentro degli <ul>, questo nn puoi farlo nell'xhtml, se
>vuoi inserire un link dentro un listato lo devi annidare dentro
>l'elemento <li> e nn nell'<ul>.
>Nn so che piattaforma di sviluppo utilizzi, ma dovrebbe segnalarteli
>questi errori.
Ok qndo torno a casa provo a mettere il codice dentro dreamweaver e vedo cosa ne esce fuori. ........so che il mio nn codice deve essere un gran che ma il fatto e che alterno dreamweaver all'inserimento di nuovi tag da blocco note
Cmq vi ringrazio per i consigli che mi avete dato,nel caso dovessi avere ancora bisogno posterò in una nuova discussione,ciao!
Ciccio
>>Domandare è lecito,rispondere è cortesia
Torna su
Stanze Forum
Elenco Threads
Partecipa anche tu! Registrati!
Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !
Copyright © dotNetHell.it 2002-2024
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5