Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
HTML / CSS - Div con scrollbar in tabella a pieno schermo
Forum - HTML / CSS - Div con scrollbar in tabella a pieno schermo

Avatar
00bullo00 (Normal User)
Newbie


Messaggi: 17
Iscritto: 19/09/2010

Segnala al moderatore
Postato alle 10:25
Domenica, 08/05/2011
Scusate il titolo poco chiaro ma non ho saputo sintetizzarlo meglio.

In pratica stavo facendo un sito web in cui c'è una tabella che, necessariamente, deve essere grande quanto l'intero schermo (quindi l'utente deve vedere sia l'inizio che la fine, niente scrollbar laterali). Nella cella più grande di questa tabella ci deve stare un contenuto enorme. Per non far quindi uscire la tabella dai margini è necessario che solo in quella cella ci sia una scrollbar.
Mi è stato detto che le soluzioni sono con l'iframe (e funziona) o con i div. Mi interessava risolvere con i div perchè l'iframe mi complicherebbe la situazione.

Ho tentato con un div che contiene il contenuto della cella grande, gli ho messo la proprietà overflow:auto e al body della pagina ho messo overflow:hidden (codice css). Ebbene, non funziona perchè la tabella esce dalla pagina e, oltretutto, con la scrollbar disattivata non posso neanche vedere cosa c'è dopo.

Sono sicuro di nomi di classi e tutto il resto, quindi il problema è altrove.

C'è per caso da fare qualche altro trucchetto? Ad esempio un div che comprende tutta la pagina o bloccare in qualche modo la dimensione della tabella? Come potrei fare?

Vi ringrazio in anticipo dell'aiuto.

Ultima modifica effettuata da 00bullo00 il 16/05/2011 alle 18:51
PM
Avatar
netarrow (Admin)
Guru^2


Messaggi: 2502
Iscritto: 12/05/2004

Up
1
Down
V
Segnala al moderatore
Postato alle 14:15
Domenica, 08/05/2011
E' scorretto utilizzare le tabelle ai fini del layout.

Questo esempio crea un div grande quanto lo schermo, e un secondo div innestato in quello liquido grande la metà che contiene una parte della divina commedia che ovviamente lo supera in altezza e lo rende quindi scrollabile:

Codice sorgente - presumibilmente HTML / CSS

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="it">
  5.     <head>
  6.         <title>Div scrollabile</title>
  7.         <style type="text/css">    
  8.             #main {
  9.                 position : fixed;
  10.                 top : 0;
  11.                 left : 0;
  12.                 right : 0;
  13.                 bottom : 0;
  14.                 background : red;
  15.                 width : 100%;
  16.                 height : 100%;
  17.             }
  18.             #scrollable {
  19.                 background : black;
  20.                 width : 99%;
  21.                 height : 50%;
  22.                 overflow : auto;
  23.                 margin : auto;
  24.                 margin-top : 0;
  25.             }
  26.             pre {
  27.                 color : white;
  28.             }            
  29.             </style>
  30.        
  31.     </head>
  32.    
  33.     <body>
  34.         <div id="main">
  35.             <div id="scrollable">
  36.                 <pre>
  37.                     Nel mezzo del cammin di nostra vita
  38.                     mi ritrovai per una selva oscura,
  39.                     ché la diritta via era smarrita. 3
  40.                    
  41.                     Ahi quanto a dir qual era è cosa dura
  42.                     esta selva selvaggia e aspra e forte
  43.                     che nel pensier rinova la paura! 6
  44.                    
  45.                     Tant’è amara che poco è più morte;
  46.                     ma per trattar del ben ch’i’ vi trovai,
  47.                     dirò de l’altre cose ch’i’ v’ ho scorte. 9
  48.                    
  49.                     Io non so ben ridir com’i’ v’intrai,
  50.                     tant’era pien di sonno a quel punto
  51.                     che la verace via abbandonai. 12
  52.                    
  53.                     Ma poi ch’i’ fui al piè d’un colle giunto,
  54.                     là dove terminava quella valle
  55.                     che m’avea di paura il cor compunto, 15
  56.                    
  57.                     guardai in alto e vidi le sue spalle
  58.                     vestite già de’ raggi del pianeta
  59.                     che mena dritto altrui per ogne calle. 18
  60.                    
  61.                     Allor fu la paura un poco queta,
  62.                     che nel lago del cor m’era durata
  63.                     la notte ch’i’ passai con tanta pieta. 21
  64.                    
  65.                     E come quei che con lena affannata,
  66.                     uscito fuor del pelago a la riva,
  67.                     si volge a l’acqua perigliosa e guata, 24
  68.                    
  69.                     così l’animo mio, ch’ancor fuggiva,
  70.                     si volse a retro a rimirar lo passo
  71.                     che non lasciò già mai persona viva. 27
  72.                    
  73.                     Poi ch’èi posato un poco il corpo lasso,
  74.                     ripresi via per la piaggia diserta,
  75.                     sì che ’l piè fermo sempre era ’l più basso. 30
  76.                    
  77.                     Ed ecco, quasi al cominciar de l'erta,
  78.                     una lonza leggera e presta molto,
  79.                     che di pel macolato era coverta; 33
  80.                    
  81.                     e non mi si partia dinanzi al volto,
  82.                     anzi ’mpediva tanto il mio cammino,
  83.                     ch’i’ fui per ritornar più volte vòlto. 36
  84.                    
  85.                     Temp’era dal principio del mattino,
  86.                     e ’l sol montava ’n sù con quelle stelle
  87.                     ch’eran con lui quando l’amor divino 39
  88.                    
  89.                     mosse di prima quelle cose belle;
  90.                     sì ch’a bene sperar m’era cagione
  91.                     di quella fiera a la gaetta pelle 42
  92.                    
  93.                     l’ora del tempo e la dolce stagione;
  94.                     ma non sì che paura non mi desse
  95.                     la vista che m'apparve d'un leone. 45
  96.                    
  97.                     Questi parea che contra me venisse
  98.                     con la test’alta e con rabbiosa fame,
  99.                     sì che parea che l’aere ne tremesse. 48
  100.                    
  101.                     Ed una lupa, che di tutte brame
  102.                     sembiava carca ne la sua magrezza,
  103.                     e molte genti fé già viver grame, 51
  104.                    
  105.                     questa mi porse tanto di gravezza
  106.                     con la paura ch’uscia di sua vista,
  107.                     ch’io perdei la speranza de l’altezza. 54
  108.                    
  109.                     E qual è quei che volontieri acquista,
  110.                     e giugne ’l tempo che perder lo face,
  111.                     che ’n tutti suoi pensier piange e s’attrista; 57
  112.                    
  113.                     tal mi fece la bestia sanza pace,
  114.                     che, venendomi ’ncontro, a poco a poco
  115.                     mi ripigneva là dove ’l sol tace. 60
  116.                    
  117.                     Mentre ch’i’ rovinava in basso loco,
  118.                     dinanzi a li occhi mi si fu offerto
  119.                     chi per lungo silenzio parea fioco. 63
  120.                    
  121.                     Quando vidi costui nel gran diserto,
  122.                     "Miserere di me", gridai a lui,
  123.                     "qual che tu sii, od ombra od omo certo!". 66
  124.                    
  125.                     Rispuosemi: "Non omo, omo già fui,
  126.                     e li parenti miei furon lombardi,
  127.                     mantoani per patrïa ambedui. 69
  128.                    
  129.                     Nacqui sub Iulio, ancor che fosse tardi,
  130.                     e vissi a Roma sotto ’l buono Augusto
  131.                     nel tempo de li dèi falsi e bugiardi. 72
  132.                    
  133.                     Poeta fui, e cantai di quel giusto
  134.                     figliuol d’Anchise che venne di Troia,
  135.                     poi che ’l superbo Ilïón fu combusto. 75
  136.                    
  137.                     Ma tu perché ritorni a tanta noia?
  138.                     perché non sali il dilettoso monte
  139.                     ch’è principio e cagion di tutta gioia?". 78
  140.                    
  141.                     "Or se’ tu quel Virgilio e quella fonte
  142.                     che spandi di parlar sì largo fiume?",
  143.                     rispuos’io lui con vergognosa fronte. 81
  144.                    
  145.                     "O de li altri poeti onore e lume,
  146.                     vagliami ’l lungo studio e ’l grande amore
  147.                     che m’ ha fatto cercar lo tuo volume. 84
  148.                    
  149.                     Tu se’ lo mio maestro e ’l mio autore,
  150.                     tu se’ solo colui da cu’ io tolsi
  151.                     lo bello stilo che m’ ha fatto onore. 87
  152.                    
  153.                     Vedi la bestia per cu’ io mi volsi;
  154.                     aiutami da lei, famoso saggio,
  155.                     ch’ella mi fa tremar le vene e i polsi". 90
  156.                    
  157.                     "A te convien tenere altro vïaggio",
  158.                     rispuose, poi che lagrimar mi vide,
  159.                     "se vuo’ campar d’esto loco selvaggio; 93
  160.                    
  161.                     ché questa bestia, per la qual tu gride,
  162.                     non lascia altrui passar per la sua via,
  163.                     ma tanto lo ’mpedisce che l’uccide; 96
  164.                    
  165.                     e ha natura sì malvagia e ria,
  166.                     che mai non empie la bramosa voglia,
  167.                     e dopo ’l pasto ha più fame che pria. 99
  168.                    
  169.                     Molti son li animali a cui s’ammoglia,
  170.                     e più saranno ancora, infin che ’l veltro
  171.                     verrà, che la farà morir con doglia. 102
  172.                    
  173.                     Questi non ciberà terra né peltro,
  174.                     ma sapïenza, amore e virtute,
  175.                     e sua nazion sarà tra feltro e feltro. 105
  176.                    
  177.                     Di quella umile Italia fia salute
  178.                     per cui morì la vergine Cammilla,
  179.                     Eurialo e Turno e Niso di ferute. 108
  180.                    
  181.                     Questi la caccerà per ogne villa,
  182.                     fin che l’avrà rimessa ne lo ’nferno,
  183.                     là onde ’nvidia prima dipartilla. 111
  184.                    
  185.                     Ond’io per lo tuo me’ penso e discerno
  186.                     che tu mi segui, e io sarò tua guida,
  187.                     e trarrotti di qui per loco etterno; 114
  188.                    
  189.                     ove udirai le disperate strida,
  190.                     vedrai li antichi spiriti dolenti,
  191.                     ch’a la seconda morte ciascun grida; 117
  192.                    
  193.                     e vederai color che son contenti
  194.                     nel foco, perché speran di venire
  195.                     quando che sia a le beate genti. 120
  196.                    
  197.                     A le quai poi se tu vorrai salire,
  198.                     anima fia a ciò più di me degna:
  199.                     con lei ti lascerò nel mio partire; 123
  200.                    
  201.                     ché quello imperador che là sù regna,
  202.                     perch’i’ fu’ ribellante a la sua legge,
  203.                     non vuol che ’n sua città per me si vegna. 126
  204.                    
  205.                     In tutte parti impera e quivi regge;
  206.                     quivi è la sua città e l’alto seggio:
  207.                     oh felice colui cu’ ivi elegge!". 129
  208.                    
  209.                     E io a lui: "Poeta, io ti richeggio
  210.                     per quello Dio che tu non conoscesti,
  211.                     acciò ch’io fugga questo male e peggio, 132
  212.                    
  213.                     che tu mi meni là dov’or dicesti,
  214.                     sì ch’io veggia la porta di san Pietro
  215.                     e color cui tu fai cotanto mesti". 135
  216.                    
  217.                     Allor si mosse, e io li tenni dietro.
  218.                    
  219.                 </pre>
  220.             </div>
  221.         </div>
  222.     </body>
  223. </html>


Se volessi cambiare l'intera tabella con dei div, devo impostarli come la tabella ed hanno lo stesso effetto? (quindi supportano la proprietà Width, Height e border?) - 00bullo00 - 10/05/11 21:26
PM
Avatar
a_butta (Member)
Expert


Messaggi: 578
Iscritto: 16/03/2010

Up
0
Down
V
Segnala al moderatore
Postato alle 11:01
Domenica, 08/05/2011
Beh intanto devi tener conto di cosa intendi per "farcelo stare sull'intera pagina": la visualizzazione tra i vari monitor cambia pesantemente in base alla risoluzione.
A parte questo io darei delle dimensioni fisse alla tabella (o addirittura alle sue celle) in modo che comunque sia non eccedano.
Poi non vorrei dire una bestialità, dunque parti già dal presupposto che possa essere sbagliato:
td {overflow: auto}
potrebbe funzionare?

Già lavoro con le proprietà overflow:hidden per l'intera pagina e overflow:auto per il div, ma non funziona (da il problema sopra descritto). Grazie comunque^^ - 00bullo00 - 10/05/11 21:22
PM
Avatar
Mte90 (Member)
Guru


Messaggi: 1144
Iscritto: 25/03/2008

Up
0
Down
V
Segnala al moderatore
Postato alle 16:40
Lunedì, 09/05/2011
un link alla pagina che hai fatto per capire meglio la situazione?
le tabelle per i layout non sono il massimo e hai motori di ricerca non gli piacciono tanto...

Che intendi che ai motori di ricerca non piacciono? Comunque non posso linkare la pagina perchè c'è l'ho salvata su locale :S, mi spiace. - 00bullo00 - 10/05/11 21:22
Se non hai la pagina pubblicata potresti aggiungere un zip allegato qui sul forum - netarrow - 13/05/11 19:48
Ecco a voi un link al sito, guardate la pagina FunzioniGrafiche.asp dato che li è contenuto il codice per costruire le varie pagine e il problema dato nella pagina ProgrammiRete.asp http://www.megaupload.com/?d=45U0ZHQG - 00bullo00 - 16/05/11 18:58
PM