[css]Vertical scrollbar in parent div

woensdag 30 juni 2010 21:03

Acties:

0 Henk 'm!

Topicstarter

Ik ben bezig met het opbouwen van een website en loop helaas tegen een probleem aan waar ik niet uit kom. Het probleem is als volgt. Ik heb een container div met een vaste hoogte en breedte. Binnen deze divs zitten 0 of meer kinderen met een vast breedte en hoogte en float left. De hoogte van de kinderen is iets minder dan die van de parent, de breedte is veel kleiner. Wat ik wil is dat de parent div een horizontale scrollbar krijgt op het moment dat de totale breedte van de alle child div's binnen de parent groter is dan de breedte van de parent. Dit krijg ik helaas niet voor elkaar. De child div's die in de breedte niet meer passen komen onder de eerste child div te staan. Een stukje (vereenvoudigde) voorbeeld code:

HTML:

<html>
<head>
</head>
<body>
<div style="width:500px; background-color:#AAA; height:100px; margin:0">
    <div style="height:95px; background-color:#BBB">
        <div style="float: left; width: 50px; height:90px;background-color:#DDD;"></div>
        <div style="float: left; width: 50px; height:90px;background-color:#DDD;"></div>
        <div style="float: left; width: 50px; height:90px;background-color:#DDD;"></div>
        <div style="float: left; width: 50px; height:90px;background-color:#DDD;"></div>
        <div style="float: left; width: 50px; height:90px;background-color:#DDD;"></div>
        <div style="float: left; width: 50px; height:90px;background-color:#DDD;"></div>
        <div style="float: left; width: 50px; height:90px;background-color:#DDD;"></div>
        <div style="float: left; width: 50px; height:90px;background-color:#DDD;"></div>
        <div style="float: left; width: 50px; height:90px;background-color:#DDD;"></div>
        <div style="float: left; width: 50px; height:90px;background-color:#DDD;"></div>
        <div style="float: left; width: 50px; height:90px;background-color:#DDD;"></div>
        <div style="float: left; width: 50px; height:90px;background-color:#DDD;"></div>
        <div style="clear:both"></div>
    </div>
</div>
</body>
</html>

Ik heb opties gezien uit css3 met overflow-x en overflow-y maar hiermee wilde het nog niet lukken. Ook op google kwam ik nog niet de goede oplossing tegen.

Iemand een idee hoe ik dat kan oplossen?

EDIT
Stom, had vertical gezet terwijl ik horizontal bedoelde.

woensdag 30 juni 2010 21:58

Acties:

0 Henk 'm!

pieturp

gaffa!

Gebruik ajb classes ipv inline styles (zéker als je steeds dezelfde styles gebruikt.). Geef ook een doctype mee. Als antwoord op je vraag, kijk eens naar de css properties overflow: hidden; overflow-y: scroll; max-height en height

Edit:
Overigens moet dat niet allemaal op de container die om de floats heen staat, maar om een container die dáár weer omheen komt

[ Voor 23% gewijzigd door pieturp op 30-06-2010 22:00 ]

... en etcetera en zo

woensdag 30 juni 2010 22:35

Acties:

0 Henk 'm!

Gerrit88

Topicstarter

Gerrit88 schreef op woensdag 30 juni 2010 @ 21:03:
.... Een stukje (vereenvoudigde) voorbeeld code:
...

Uiteraard gebruik ik dit soort code niet in live omgevingen, stukje code was om het probleem even te isoleren. Zelfde geldt voor doctype etc.

Dus een container-div maken waarop de properties die je noemde toegepast worden? Zie nog niet direct waarom dat de oplossing zou moeten bieden maar ga er in elk geval even mee spelen. Bedankt!

EDIT:

Zie trouwens nu dat ik vertical gezet heb, ik wil juist een horizontale scrollbar.

Stom!
Ook even aangepast in openingspost.

[ Voor 15% gewijzigd door Gerrit88 op 30-06-2010 22:40 ]

donderdag 1 juli 2010 11:11

Acties:

0 Henk 'm!

martin149

scrolling=auto ik weet het niet mer precies, maar zoiets

donderdag 1 juli 2010 11:50

Acties:

0 Henk 'm!

mcDavid

In je voorbeeld is helemaal geen brede div te bekennen. Alleen ééntje van 500px breed, ééntje daarin zonder breedte die dus automatisch de breedte van zijn parent aanneemt en dus ook 500px is, en daarin weer de kleine divs.

Die tweede zul je breder moeten maken.

donderdag 1 juli 2010 11:53

Acties:

0 Henk 'm!

d4jo

overflow-y:scroll?

donderdag 1 juli 2010 12:05

Acties:

0 Henk 'm!

Zoefff

❤ 

De truc is om een parent element een kleinere breedte mee te geven dan de container van je scrollbare elementen. Wanneer de parent een overflow auto of scroll heeft komt de boel naast elkaar te staan. Let wel dat je de container met scrollbare elementen een gedefinieerde breedte moet hebben. Of je dit ook voor elkaar kan krijgen zonder dit van tevoren (of met javascript) te definiëren weet ik niet. Het is mij zo snel in ieder geval niet gelukt.

HTML:

<body>
    <div>
        <ul>
            <li>Waa?</li>
            <li>Waa?</li>
            <li>Waa?</li>
            <li>Waa?</li>
            <li>Waa?</li>
            <li>Waa?</li>
            <li>Waa?</li>
            <li>Waa?</li>
            <li>Waa?</li>
        </ul>
    </div>
</body>

Cascading Stylesheet:

body {
    width: 20em;
    margin: 2em auto;
}

div {
    overflow: auto;
}

ul {
    background: #eee;
    list-style-type: none;
    overflow: hidden;
    width: 60em;
    margin: 0;
    padding: 0;
}

li {
    float: left;
    width: 3em;
    height: 3em;
    border: 1px solid red;
    margin: 0.5em;
    padding: 0.5em;
}

Zie ook http://home.react.nl/~sandervl/horizontal-scroll.html

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

Onderwerpen