[CSS] elementen alleen horizontaal laten scrollen

[Verwijderd]

Dag allemaal,

ik heb een <div> waar ik thumbnails in heb die ik enkel horizontaal wil laten scrollen. De thumbnails moeten dus op 1 lijn blijven. de div heeft een bepaalde breedte en een bepaalde hoogte, maar de thumbnails springen natuurlijk automatisch naar de volgende regel. Hoe kan ik dit oplossen met css?

[Dirtbiter]

http://www.w3schools.com/css/css_reference.asp

Cascading Stylesheet:

overflow: hidden;
of
overflow: scroll;

Links / Rechts scrollen uitschakelen mogelijk?
scrollbalk uitschakelen/weghalen...

[ Voor 14% gewijzigd door Dirtbiter op 21-04-2005 09:42 ]

[Sappie]

Ik ben bang dat je aangewezen zal zijn op het gebruik van een <iframe> in plaats van een <div>, maar pin me hier niet op vast. Gebruik maken van de overflow property gaat je namelijk denk ik ook niet helpen, omdat de <div> dan afaik, in jouw specifieke geval, slechts in verticale richting gaat overflowen.

[ Voor 35% gewijzigd door Sappie op 21-04-2005 09:57 ]

[Verwijderd]

'float'?

[Verwijderd]

Kijk hier eens, daar vind je je antwoord wel: www.dyn-web.com

Of zo:

code:

<div style="width: 500px; height: 200px; overflow-x: auto;">
    <div style="width: 2000px; height: 200px; background: yellow;">&nbsp;</div>
</div>

[ Voor 59% gewijzigd door Verwijderd op 21-04-2005 10:14 ]

[Sappie]

Verwijderd schreef op donderdag 21 april 2005 @ 10:04:
'float'?

Ik heb daar net ook wat mee zitten klooien, maar kon daarmee niet 123 een oplossing bewerkstelligen. Misschien ben ik nog niet helemaal goed wakker vanmorgen of interpreteer ik het probleem van de TS op een andere manier, maar zou je dat ff kunnen toelichten?

Verwijderd schreef op donderdag 21 april 2005 @ 10:08:
Of zo:

code:

<div style="width: 500px; height: 200px; overflow-x: auto;">
    <div style="width: 2000px; height: 200px; background: yellow;">&nbsp;</div>
</div>

Met een 'child' div die gewoon breder is dan de parent div is het geen probleem nee, maar de TS wil, zoals ik uit zijn post opmaak, meerdere kleinere elementen ervoor laten zorgen dat de parent div horizontaal gaat overflowen.

[ Voor 53% gewijzigd door Sappie op 21-04-2005 10:15 ]

[Verwijderd]

Gaat ook niet werken. (Ik dacht alleen aan het feit dat de thumbnails block-level waren en naast elkaar zouden moet komen.)

'position:absolute' zou kunnen. Of wellicht een child element maken met 'width:1000%' waarin je de thumbnails laat floaten die in een parent element met 'width:200px' staat ofzo. Dat zou misschien kunnen werken.

[Sappie]

met "position: absolute;" zit je met het probleem dat je moet weten hoeveel thumbnails er zich in de container bevinden. Een ander daaruitvolgend probleem is dat je dan voor elke thumbnail een aparte positie op moet geven. Of zie ik dat verkeerd?

Verder begrijp ik je tweede oplossing niet echt. ("1000%" is een tikfout?)

[Verwijderd]

Verwijderd schreef op donderdag 21 april 2005 @ 10:08:
Kijk hier eens, daar vind je je antwoord wel: www.dyn-web.com

Of zo:

code:

<div style="width: 500px; height: 200px; overflow-x: auto;">
    <div style="width: 2000px; height: 200px; background: yellow;">&nbsp;</div>
</div>

Bedankt! dit werkt prima

[JHS]

Wat Anne zegt, werkt inderdaad (zie de source) .

[Sappie]

ok.. dan heb ik je probleem niet helemaal goed begrepen uit je post Of is het zo dat je altijd weet hoeveel thumbnails er in je parent element komen te staan? Want dan werkt dit uiteraard goed.

Wanneer het een variabel aantal thumbnails betreft wordt het een ander probleem.

JHS schreef op donderdag 21 april 2005 @ 10:27:
Wat Anne zegt, werkt inderdaad (zie de source) .

Maar dat werkt dus weer alleen voor een bekend aantal child elementen Anders gaat die parent div alsnog in verticale richting overflowen.

[ Voor 43% gewijzigd door Sappie op 21-04-2005 10:31 ]

[Verwijderd]

Sappie schreef op donderdag 21 april 2005 @ 10:13:
[...]

Ik heb daar net ook wat mee zitten klooien, maar kon daarmee niet 123 een oplossing bewerkstelligen. Misschien ben ik nog niet helemaal goed wakker vanmorgen of interpreteer ik het probleem van de TS op een andere manier, maar zou je dat ff kunnen toelichten?


[...]

Met een 'child' div die gewoon breder is dan de parent div is het geen probleem nee, maar de TS wil, zoals ik uit zijn post opmaak, meerdere kleinere elementen ervoor laten zorgen dat de parent div horizontaal gaat overflowen.

Even overheen gekeken, dan kun je dit doen, IE only vermoed ik...

code:

<div style="width: 500px; overflow: auto; white-space: nowrap;">
    <img width="100" height="100" />
    <img width="100" height="100" />
    <img width="100" height="100" />
    <img width="100" height="100" />
    <img width="100" height="100" />
    <img width="100" height="100" />
    <img width="100" height="100" />
</div>

Edit:
overflow-x: auto veranderd in overflow: auto, zou in ale browsers moeten werken.

[ Voor 18% gewijzigd door Verwijderd op 21-04-2005 10:34 ]

[JHS]

Sappie schreef op donderdag 21 april 2005 @ 10:29:
Maar dat werkt dus weer alleen voor een bekend aantal child elementen Anders gaat die parent div alsnog in verticale richting overflowen.

Mja, je kan dan ook een width: 10000% doen, werkt het, alleen scroll je dan op een gegeven moment alleen in het niks... Hoewel niet helemaal CSS, zou ik dan denk ik toch maar iets doen als met JS de breedte corrigeren, omdat ik op het moment niet echt iets beters kan bedenken...

edit:

Wat Anoniem: 75213 zegt dus.. .

[ Voor 5% gewijzigd door Moonsugar op 16-12-2021 11:18 . Reden: Geanonimiseerde gebruiker ]

[Sappie]

Wat Anoniem: 75213 hierboven zegt is een mooie oplossing idd "white-space: nowrap;" daar had ik zo op de vroege morgen nog niet aan gedacht

[ Voor 5% gewijzigd door Moonsugar op 16-12-2021 11:18 . Reden: Geanonimiseerde gebruiker ]

[Verwijderd]

Sappie schreef op donderdag 21 april 2005 @ 10:36:
Wat Anoniem: 75213 hierboven zegt is een mooie oplossing idd "white-space: nowrap;" daar had ik zo op de vroege morgen nog niet aan gedacht

gheghe... had juist een flinke bak koffie op en ik maar zoeken in topstyle, waar zat die nowrap ook alweer

[ Voor 2% gewijzigd door Moonsugar op 16-12-2021 11:18 . Reden: Geanonimiseerde gebruiker ]

[Verwijderd]

JHS schreef op donderdag 21 april 2005 @ 10:35:
[...]
Mja, je kan dan ook een width: 10000% doen, werkt het, alleen scroll je dan op een gegeven moment alleen in het niks... Hoewel niet helemaal CSS, zou ik dan denk ik toch maar iets doen als met JS de breedte corrigeren, omdat ik op het moment niet echt iets beters kan bedenken...

edit:

Wat Anoniem: 75213 zegt dus.. .

ik pas de breedte dynamisch aan, aangezien de thumbnails toch allemaal dezelfde breedte hebben kan ik makkelijk de volledige breedte berekenen

[ Voor 1% gewijzigd door Moonsugar op 16-12-2021 11:18 . Reden: Geanonimiseerde gebruiker ]

[Sappie]

Verwijderd schreef op donderdag 21 april 2005 @ 10:53:
ik pas de breedte dynamisch aan, aangezien de thumbnails toch allemaal dezelfde breedte hebben kan ik makkelijk de volledige breedte berekenen

Als je nog even naar de oplossing van Anoniem: 75213 kijkt dan hoef je helemaal niks te berekenen..

[ Voor 2% gewijzigd door Moonsugar op 16-12-2021 11:19 . Reden: Geanonimiseerde gebruiker ]

[Verwijderd]

offtopic:
En nu weer allemaal aan het werk, hup hup

[Sappie]

offtopic:
hehe.. maar ik moet aan mn stageverslag werken en ik ben vandaag nog ff niet gemotiveerd genoeg daarvoor

[Verwijderd]

Sappie schreef op donderdag 21 april 2005 @ 10:56:
[...]

Als je nog even naar de oplossing van Anoniem: 75213 kijkt dan hoef je helemaal niks te berekenen..

jip ,maar werkt helaas niet op firefox

[ Voor 3% gewijzigd door Moonsugar op 16-12-2021 11:19 . Reden: Geanonimiseerde gebruiker ]

[Sappie]

toch wel hoor.. je moet wel gebruik maken van inline elementen (img's zijn dit standaard)

[Verwijderd]

Sappie schreef op donderdag 21 april 2005 @ 11:17:
toch wel hoor.. je moet wel gebruik maken van inline elementen (img's zijn dit standaard)

En anders ff display: inline proberen als het block level elementen zijn.

[ Voor 9% gewijzigd door Verwijderd op 21-04-2005 11:48 ]