Scrollbar in orizzaontale

**Chandler** · 24-12-2006, 19.20.43

Ciao ragazzi...non sono riuscito a capire come faccio a realizzare una scrollbar in orizzontale per far scorrere le small_thumb di una gallery...sapreste aiutarmi??

**funcool** · 24-12-2006, 19.24.34

Cerca di spiegarti meglio e magari scrivi qualche link alla pagina in questione.

**silverseraph** · 24-12-2006, 19.27.14

Di solito uno scrollbar orizzontale compare quando una pagina è più grande dello schermo. Potresti inserire un div, gli imposti delle dimensioni fisse e gli setti overflow: auto.

**Chandler** · 24-12-2006, 19.53.55

qui potete vedere come dovrebbe essere la barra
http://www.dammispazio.it/SVILUPPO_2...ata.php?id=101

il principio è questo solo che ci saranno molte + foto che dovranno scorrere orizzontalmente

**funcool** · 24-12-2006, 19.56.49

Allora fai come detto da Silverseraph:

Codice HTML:

<div style="width:500px; overflow:auto;">Tutte le foto</div>

**Chandler** · 24-12-2006, 20.04.47

ok grazie mille!! Se ho altri problemi mi faccio vedere...

Auguri a tutti!!

**funcool** · 24-12-2006, 20.06.35

Prego e auguri!

**Chandler** · 21-01-2007, 16.56.59

Cia rega...ho provato col metodo sopra citato ma la scrollbar è sempre verticale:
http://www.dammispazio.it/SVILUPPO_2...ata.php?id=101

Un esempio è visibile su www.bravoclub.it ... basta selezionare un villaggioe poi andare sulla galleria foto (l'unica differenza è che quella è fatta in flash)

vi prego di farmi sapere....grazie mille

**funcool** · 21-01-2007, 17.26.27

Beh, sul tuo sito non vedo le modifiche che ti sono state suggerite.

**heracleum** · 21-01-2007, 18.08.23

Beh veramente.. se lui chiede la scrollbar orizzontale non si deve fissare in pixel la width bensì la height!
dunque invece di:

Codice HTML:

<div style="width:500px; overflow:auto;">Tutte le foto</div>

che serve a far comparire la scrollbar verticale, bisogna usare:

Codice HTML:

<div style="height:100px; overflow:auto; white-space:nowrap">
Tutte le foto</div>

Dunque la height (altezza) fissa a tot pixel che vuoi, overflow sempre auto per far comparire la scrollbar. In più l'ingrediente esseziale:
white-space:nowrap
dice che gli eventuali spazi tra una foto e l'altra non devono andare a capo , questo fa sì che le immagini continuino tutte su una riga, forzando dunque la scroll orizzontale e basta.
Se comparisse anche un po' di scroll verticale è OVVIO che le foto sono troppo alte rispetto alla height che hai fissato, quindi adattarla di conseguenza.

**funcool** · 21-01-2007, 18.16.09

Originalmente inviato da heracleum

Beh veramente.. se lui chiede la scrollbar orizzontale non si deve fissare in pixel la width bensì la height!

Ma per scroolbar orizzontale non si intende quella in basso che va a destra e a sinistra?
Dandogli una larghezza fissa se le foto superano questa larghezza appare la scrollbar in basso.

**Chandler** · 21-01-2007, 18.22.02

quindi non ho capito cosa devo fare...scusatemi

p.s. ho provato sia col primo che con white-space:nowrap ma il prolbema nn si è risolto!

**funcool** · 21-01-2007, 19.07.22

Ho utilizzi il codice che ti ho suggerito o quello di Heracleum. Uno dei due sicuramente ti dovrebbe andare bene.

**heracleum** · 21-01-2007, 19.23.11

Originalmente inviato da funcool

Ma per scroolbar orizzontale non si intende quella in basso che va a destra e a sinistra?
Dandogli una larghezza fissa se le foto superano questa larghezza appare la scrollbar in basso.

Sì è quella che si estende lungo il lato basso, che scrolla a destra e sinistra.
Dandogli una larghezza fissa non aiuta perché vuol dire che le foto che non entrano nei tot px di larghezza andranno a capo per forza creando una nuova riga e via così.. e non va bene perché così apparirà SOLO una scrollbar verticale, il browser pensa che non c'è bisogno di una scroll orizzontale visto che le foto vanno a capo su più righe rispettando la larghezza data.

Invece -come dicevo su- se si vieta alle foto di andare a capo sicuramente apparirà la scroll verticale, in più gli si dà una height fissa.

Chandler:
Se ti ho consigliato quel codice vuol dire che non solo funziona ma l'ho anche testato personalmente poco prima. Quindi dire "non funziona" e basta non aiuta né me né sopratutto te

Quindi o ci fai vedere bene il codice come hai tentato di implementarlo così possiamo correggertelo... altrimenti c'è poco da fare..

PS:
Ragazzi vi faccio notare che questa tendenza a ripondere "non mi funziona" e basta sta diventando veramente noiosa per chi tenta di aiutare (soprattutto visto che p sicuro che il codice consigliato sia buono)..
quindi vedete un po'...

**funcool** · 21-01-2007, 19.28.45

Scusa se continuo a rompere le balle, ma ho capito che stiamo parlando di cose diverse. Nel senso che io davo una larghezza massima (mancava comunque il "white-space:nowrap") e tu dai come larghezza massima lo schermo o l'elemento che contiene il div.

**Chandler** · 21-01-2007, 19.29.07

Ho provato con entrambi ma non funzionano perchè le thumb vanno sempre a capo...le modifiche le ho inserite nel file .css (css/serate.css)

@heracleum
ti chiedo scusa ma nn era mia intenzione non aiutarti ad individuare il problema...solo che ho provato a mettere white-space:nowrap nel css ma nn ho risolto e non ho idea di cosa non vada visto che non conosco bene la struttura delle scrollbars...

**heracleum** · 21-01-2007, 21.07.08

@funcool:
hai visto il link al sito che realizzava questo scroll in flash? così.

Avevo provato la cosa con una struttura xhtml semplicissima, quel div come l'avevo indicato nel primo consiglio, e sotto SOLO e DIRETTAMENTE alcune foto: invece di andare a capo continuavano su una riga e l'unica scrollbar che appariva era appunto orizzontale.

@Chandler:
Ora il codice+css di Chandler, che vedo sul sito, è estremamente "a scatole cinesi" fin troppo oserei dire. E invece di usare elementi inline come gli <span> o <a> ha usato massicciamente i div, dentro div, dentro div :)
Ho provato in una copia locale della pagina + css e ho modificato solo il css, queste tre class:

Codice HTML:

.sezione_small {
	height:100px;
	padding:0px;
	margin-bottom:10px;
	position:relative;
	overflow:auto;
	white-space: nowrap;
}

.sezione_lr_small {
	display:inline;
	width: 66px;
	height: 68px;
	margin-right:10px;
	background-color:black;
	margin-bottom:10px;
}

.boxtable_small {
	width: 100%;
	height: 100%;
	display:inline;
	border-color: #333333;
	border-style: solid;
	border-width: 1px;
	padding: 6px;
	color: white;
}

Dunque funziona benissimo con Mozilla
..su IE invece ho aperto un attimo e ho richiuso subito, il solito bug vivente.
Quindi intanto provalo su Mozilla/firefox e vedi cosa intendevo, poi eventualmente cerca di semplificare la struttura di quei div altrimenti la cosa si complica, soprattutto assicurati di avere un codice html / css validato.

**funcool** · 23-01-2007, 12.21.56

Originalmente inviato da heracleum

hai visto il link al sito che realizzava questo scroll in flash? così.

A dir la verità non ho trovato nessuna scrollbar.

Originalmente inviato da heracleum

Avevo provato la cosa con una struttura xhtml semplicissima, quel div come l'avevo indicato nel primo consiglio, e sotto SOLO e DIRETTAMENTE alcune foto: invece di andare a capo continuavano su una riga e l'unica scrollbar che appariva era appunto orizzontale.

Originalmente inviato da funcool

Scusa se continuo a rompere le balle, ma ho capito che stiamo parlando di cose diverse. Nel senso che io davo una larghezza massima (mancava comunque il "white-space:nowrap") e tu dai come larghezza massima lo schermo o l'elemento che contiene il div.

Non ho detto che il tuo metodo è sbagliato, anzi.

**heracleum** · 23-01-2007, 17.43.01

Originalmente inviato da funcool

A dir la verità non ho trovato nessuna scrollbar.

Sì hai ragione, era solo per dare l'idea di come intendesse lui il modivento orizzontale delle thumb, a "striscia"; diciamo, non sono proprio le classiche scrollbar di sistema, ci sono solo due pulsantini a destra e sinistra in alto: immaginati in più il "carrello" e relativa "corsia" (tipico di una scrollbar di sistema) tra i due pulsantini a freccia, poi prendi il tutto e spostato in basso. Questa è la configurazione "trasposta" adatta ad una pagina web (senza flash) e quello volevo realizzare.

Solo che l'esempio che mi ero provato prima di consigliargli era mooolto semplice di struttura, mentre la struttura di div che ha lui è molto più intricata.

Poi vabè ora è sparito.. si vede che -oltre ad avere un sito non AV- il nostro aiuto non è stato soddisfacente

**Chandler** · 23-01-2007, 20.03.52

No, scusatemi ma nn ho avuto veramente tempo per provarci...per adesso sono in un internet point...appena ho provato vi facio sapere! Per la cronaca ho il mio spazio altervista ma il favore mi serviva per un altro sito come avete già notato

Byez

Discussione: Scrollbar in orizzaontale

LinkBack

Strumenti discussione

Display

Scrollbar in orizzaontale

Regole di scrittura