[CSS] horizontale scrollbar in div

[ormagon]

Goedemiddag Tweakers,

Voor de opleiding is het de bedoeling een Portfolio op het schoolnet neer te plempen met daarin je opdrachten en dergelijke. Nu probeer ik echter een horizontale scrollbar in een divje te krijgen, enkel een horizontale, geen verticale. De objecten moeten dan ook horizontaal aansluiten, en dat is problematisch. Ik heb als voorbeeld even twee youtube filmpjes op de pagina geplakt:

http://www.midden-aarde.nl/portfolio/film.html

Zoals je ziet lukt de horizontale scrollbar wel, maar ik krijg de objecten niet horizontaal aangesloten. Hieronder de code die het zou moeten regelen:

Cascading Stylesheet:

div#media {
    font-weight:            bold;
    margin:             0px 0px 10px 0px;
    text-align:             center;
    padding:                10px;
    float:                  right;
    height:             410px;
    width:              490px;
    background-color:       #000000;
    text-align:             center;
    overflow:               auto;
    overflow:               -moz-scrollbars-horizontal;
    overflow-x:         scroll;
    overflow-y:         hidden;}

Het is uiteraard op te lossen met tabellen, maar daar ga ik niet meer aan beginnen. Wil gewoon gebruik maken van div. Verder heb ik al flink zitten proberen binnen de overflow mogelijkheden, auto, hidden, none, scroll, maar op geen enkele manier schijnen de objecten zich horizontaal te plaatsen, altijd verticaal.

Hopelijk kan iemand mij hier verder helpen.

[ Voor 15% gewijzigd door ormagon op 23-10-2008 15:05 ]

[Bosmonster]

Zou je niet eens wat aan de objecten ZELF veranderen met CSS, ipv alleen de container?

[ormagon]

Als dat het oplost wil ik dat uiteraard maar wat graag doen. Mijn CSS/HTML kennis reikt niet zo heel ver, gegoogle levert me op dat 'float: left' het één en ander zou kunnen fixen. Maar waar moet ik dan aan denken? Want op het moment dat ik object {float: left;} zou doen krijg ik gewoon de objecten aan de linkerkant geplakt.

[ Voor 20% gewijzigd door ormagon op 23-10-2008 15:21 ]

[Bosmonster]

Dat is omdat als je de elementen left float, ze naast elkaar komen, zolang er ruimte voor is. Dit betekent dat ze nooit een scrollbar zullen produceren.

Zoals je al ziet zijn html-pagina's niet echt bedoeld voor horizontaal scrollen. De hele layout-engine is gericht op verticale orientatie.

[ Voor 31% gewijzigd door Bosmonster op 23-10-2008 15:50 ]

[brtk]

check ook de DISPLAY (inline, block etc) settings van je divje

[ormagon]

Ik heb het nu opgelost met good old html: <nobr> tags om de objecten heen. En hoewel dit het oplost ben ik er niet tevreden mee omdat ik nu elke pagina apart moet regelen, en ik dit graag gewoon in CSS zou regelen. Ik heb the internetz al flink afgespeurd maar niemand schijnt rechtoe/rechtaan de oplossing te kunnen geven. Is er hier iemand die me rechtstreeks de code zou kunnen geven of weten jullie het zo ook niet?

[Leftblank]

Wellicht kun je met CSS ook het een en ander uithalen; een 'white-space: nowrap;' op je div zou 'n optie kunnen zijn, dit werkt bijvoorbeeld bij tekst prima, of dat met andere dingen ook zo is durf ik niet te zeggen.

[ Voor 11% gewijzigd door Leftblank op 23-10-2008 16:04 ]

[moozzuzz]

Ik denk dat je twee divscontainers nodig zult hebben:

• één als viewport, waar de scrollbalk terecht komt
• één als container om je elementen heen die magischerwijs even breed of breder is als de elementen die ie bevat. 'white-space: nowrap;' zal je daarin al bijstaan en ik vrees dat er ook een JS'je aan te pas zal komen om je container-breedte te berekenen.

offtopic:
: hé ik ben ineens uitgelogd

[ormagon]

Oef, dus niet zo'n hele makkelijke oplossing voor handen! Vreemd dat het in HTML zo makkelijk op te lossen is (<nobr> hoewel dit niet XHTML strict is, dus waarschijnlijk levert het me ook gezeur op bij het inleveren) en dat het CSS amper te doen is...

[tonyisgaaf]

Dit is al een paar keer voorbij gekomen, degene die ik me nog kan herinneren is deze:
[CSS] Floats in een container breder dan de viewport

[moozzuzz]

ormagon schreef op donderdag 23 oktober 2008 @ 16:25:
Oef, dus niet zo'n hele makkelijke oplossing voor handen! Vreemd dat het in HTML zo makkelijk op te lossen is (<nobr> hoewel dit niet XHTML strict is, dus waarschijnlijk levert het me ook gezeur op bij het inleveren) en dat het CSS amper te doen is...

XHTML heeft enkel zin als je niet voor IE brouwt :^)

[ormagon]

Nuja, mijn site is XHTML strict en is zowel in IE, FF, Opera, Safari vrijwel hetzelfde. Het kan dus wel, maar IE is inderdaad raar. Verder heb ik weinig keuze omdat dit nu eenmaal de opdracht is. Als je site niet XHTML 1.0 strict is haal je het sowieso niet.

[DiSiLLUSiON]

moozzuzz schreef op donderdag 23 oktober 2008 @ 18:30:
[...]

XHTML heeft enkel zin als je niet voor IE brouwt :^)

XHTML is prima te doen in IE7, mits je gebruik maakt van document.createElement(); en je zo de XHTML-only elementen langsgaat. Wel zit er een bug in Firefox 2 wat het gebruik van die elementen nagenoeg onbruikbaar maakt (waar ik onlangs pijnlijk achter gekomen ben). Voor zover ik weet (correct me if i'm wrong), is die bug alleen gefixt sinds 3.0.

[ Voor 0% gewijzigd door DiSiLLUSiON op 25-10-2008 09:48 . Reden: Negeer deze post, ik had het over HTML5 ]

[moozzuzz]

offtopic:
ormagon schreef op donderdag 23 oktober 2008 @ 19:04:
Als je site niet XHTML 1.0 strict is haal je het sowieso niet.

Misschien moet je je leraar erop wijzen dat de meeste webservers text/html versturen ipv text/x-html :^) en dat IE échte xhtml niet vreet (xhtml als xhtml geserveerd ipv xhtml als html geserveerd).

[ Voor 3% gewijzigd door moozzuzz op 24-10-2008 14:11 ]

[Saeverix]

De vraag van mijn kant is waarom je een XHTML doctype hebt gekozen... Want je gebruikt totaal geen XHTML in je code.

Je ziet dit heel vaak gebeuren. En bij veel gevallen gebruiken ze het onbewust, omdat een editor als Dreamweaver standaard zijn doctype op XHTML heeft staan

Beginnen met het kiezen van een juiste doctype kan je al veel problemen schelen...

[Bosmonster]

DiSiLLUSiON schreef op donderdag 23 oktober 2008 @ 20:22:
[...]

XHTML is prima te doen in IE7, mits je gebruik maakt van document.createElement(); en je zo de XHTML-only elementen langsgaat. Wel zit er een bug in Firefox 2 wat het gebruik van die elementen nagenoeg onbruikbaar maakt (waar ik onlangs pijnlijk achter gekomen ben). Voor zover ik weet (correct me if i'm wrong), is die bug alleen gefixt sinds 3.0.

Dat vind ik dus echt zo bah he. Gebruik een doctype waar je mee kunt werken, en daarnaast is een doctype ook echt niet heilig.

Maar om met allemaal lelijke scripts te gaan zitten werken om elementen te kunnen gebruiken die eigenlijk niet kunnen in xhtml, alleen maar zodat je basis-code valideert.. dan heb je het idee van doctypes en validatie niet helemaal begrepen imho.

[DiSiLLUSiON]

Bosmonster schreef op vrijdag 24 oktober 2008 @ 17:35:
[...]


Dat vind ik dus echt zo bah he. Gebruik een doctype waar je mee kunt werken, en daarnaast is een doctype ook echt niet heilig.

Maar om met allemaal lelijke scripts te gaan zitten werken om elementen te kunnen gebruiken die eigenlijk niet kunnen in xhtml, alleen maar zodat je basis-code valideert.. dan heb je het idee van doctypes en validatie niet helemaal begrepen imho.

Ik had het ook niet begrepen, want ik was in de war met HTML5. Dat krijg je als je doorhaalt..

HTML5 wordt in IE7 prima ondersteunt, behave de HTML5-only tags. Die dienen met createElement(); in de tree gezet te worden, voordat ze gestyled kunnen worden met CSS.

Voor XHTML heb je vanzelfsprekend géén extra scriptjes nodig. Het is ook niet beter of slechter dan HTML4, tenzij je de opmaak prettiger vindt (het afsluiten van tags ed.), het oogt immers wel een stuk netter en overzichtelijker.

Bosmonster heeft helemaal gelijk; gebruik de doctype waar je je het prettigst bij voelt en welke geschikt is voor die toepassing.

[ Voor 26% gewijzigd door DiSiLLUSiON op 25-10-2008 09:52 ]

[Gomez12]

DiSiLLUSiON schreef op zaterdag 25 oktober 2008 @ 09:48:
[...]
Voor XHTML heb je vanzelfsprekend géén extra scriptjes nodig.

Nee, vanzelfsprekend niet. Het werkt namelijk gewoon niet in IE.
Schrijf 100% goede XHTML, laat je webserver dit serveren als text/xhtml en in IE werkt het niet...

[DiSiLLUSiON]

Gomez12 schreef op zondag 26 oktober 2008 @ 12:17:
[...]

Nee, vanzelfsprekend niet. Het werkt namelijk gewoon niet in IE.
Schrijf 100% goede XHTML, laat je webserver dit serveren als text/xhtml en in IE werkt het niet...

Dat soort dingetjes hou je altijd. Niet dat ik graag voor IE opkom, maar wat is het probleem met het serveren van je XHTML als text/html?

Oké, het is niet meer volgens de spec, maar het werkt goed genoeg. En voor zover ik weet, hebben andere browsers er ook geen problemen mee.

Nu ben ik het wel met je eens, het zou moeten. Maar als ik mag kiezen m'n XHTML pagina te moeten serveren als text/html zodat IE 'm nog parsed, of alle XHTML om te zetten naar HTML voor IE omdat 'ie (helaas) nog een aardig marktaandeel heeft, kies ik voor het eerste. Websites compatible krijgen met IE kost al genoeg tijd as it is.

[Bosmonster]

DiSiLLUSiON schreef op maandag 27 oktober 2008 @ 09:31:
[...]
Dat soort dingetjes hou je altijd. Niet dat ik graag voor IE opkom, maar wat is het probleem met het serveren van je XHTML als text/html?

Wat is dan nog het nut van XHTML als je verder geen gebruik maakt van de X-functionaliteiten? Pak dan gewoon HTML4 strict.

[DiSiLLUSiON]

Bosmonster schreef op maandag 27 oktober 2008 @ 10:12:
[...]
Wat is dan nog het nut van XHTML als je verder geen gebruik maakt van de X-functionaliteiten? Pak dan gewoon HTML4 strict.

Je persoonlijke voorkeur voor een bepaalde syntax. En namespaces; ik kan het mis hebben, maar ik geloof dat die functionaliteit niet beschikbaar is in HTML4, maar werkt wel in XHTML (eventueel geserveerd als HTML).

[ Voor 6% gewijzigd door DiSiLLUSiON op 27-10-2008 11:04 ]

[moozzuzz]

DiSiLLUSiON schreef op maandag 27 oktober 2008 @ 11:03:
[...]
Je persoonlijke voorkeur voor een bepaalde syntax. En namespaces; ik kan het mis hebben, maar ik geloof dat die functionaliteit niet beschikbaar is in HTML4, maar werkt wel in XHTML (eventueel geserveerd als HTML).

syntax: niemand dwingt je om er een tagsoup van te maken in HTML
namespace: is dat nodig in een HTML-document? (want als ik het goed lees, blijken je X-documenten dan html-documenten met xhtml syntax te zijn )

[Gomez12]

DiSiLLUSiON schreef op maandag 27 oktober 2008 @ 11:03:
[...]
Je persoonlijke voorkeur voor een bepaalde syntax. En namespaces; ik kan het mis hebben, maar ik geloof dat die functionaliteit niet beschikbaar is in HTML4, maar werkt wel in XHTML (eventueel geserveerd als HTML).

Dus feitelijk wil je geen xhtml schrijven ( want je serveert het niet zo ) en ook geen html4.

Tsja dan ben je imho gewoon bezig met een tagsoup te schrijven en de browser moet er maar uitkomen...

[Bosmonster]

DiSiLLUSiON schreef op maandag 27 oktober 2008 @ 11:03:
[...]
Je persoonlijke voorkeur voor een bepaalde syntax. En namespaces; ik kan het mis hebben, maar ik geloof dat die functionaliteit niet beschikbaar is in HTML4, maar werkt wel in XHTML (eventueel geserveerd als HTML).

Voorkeur voor syntax is zo estetisch, ik kan me niet voorstellen dat dat een onderdeel is van je keuze voor een standaard.

En wat namespaces betreft, dat is een van die X-functionaliteiten die ik bedoelde. Maar kan me ook daarvan eigenlijk niet voorstellen dat je dat echt nodig hebt.

Tenzij je bijvoorbeeld XSLT gebruikt (wat vandaag de dag geloof ik aardig uitgestorven is), zie ik eigenlijk geen redenen om XHTML te hanteren en jezelf onnodige beperkingen op te leggen.

[ Voor 13% gewijzigd door Bosmonster op 27-10-2008 14:02 ]

[Saeverix]

Wat wel leuk is: Iedereen zit te discuseren over wel of geen XHTML terwijl de topicstarter al sinds vorige week Donderdag niet meer gereageerd heeft... Hoop dat het hem nu wel duidelijk is...