[CSS] Vert. centreren in parent element zonder vaste hoogte? - Softwareontwikkeling

dinsdag 22 september 2009 01:40

Acties:

0 Henk 'm!

Moderator Devschuur®

Demotivational Speaker

Topicstarter

Pff, hoe maak ik in hemelsnaam in HTML een content block wat verticaal gecentreerd is (waarbij ik de hoogte van de parent én die van de content niet weet), waarbij ik een verticale scrollbar te zien krijg als de content te lang is voor z'n parent.

Ik heb zo'n beetje alle verticale alignment trucjes die er op internet te vinden zijn geprobeerd, maar bijna allemaal gaan ze uit van een parent div met vaste hoogte, of de scrollbar werkt dan niet fatsoenlijk...

CSS zuigt.

Post afgesplitst uit De Devschuur Coffee Corner

[ Voor 8% gewijzigd door BtM909 op 22-09-2009 18:46 ]

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

dinsdag 22 september 2009 02:02

Acties:

0 Henk 'm!

BalusC

Carpe diem

Edit: laat maar, kun je een grafisch voorbeeld geven van wat je wilt bereiken?

[ Voor 92% gewijzigd door BalusC op 22-09-2009 02:04 ]

dinsdag 22 september 2009 07:28

Acties:

0 Henk 'm!

momania

iPhone 30! Bam!

Lukt dat niet door een absolute position op bottom zoals hier: http://www.jakpsatweb.cz/...ical-center-solution.html ?
En dan voor de scrolling een overflow: scroll

Neem je whisky mee, is het te weinig... *zucht*

dinsdag 22 september 2009 10:04

Acties:

0 Henk 'm!

.oisyn

Moderator Devschuur®

Demotivational Speaker

Topicstarter

BalusC schreef op dinsdag 22 september 2009 @ 02:02:
Edit: laat maar, kun je een grafisch voorbeeld geven van wat je wilt bereiken?

Zeg maar gewoon een box met een bepaald aantal pixels afstand van de body (onder, boven, links, rechts), met daarin content dat verticaal gecentreert staat wat eventueel overflowt. Het punt is, ik krijg het pas goed op het moment dat ik de box een harde height geef. Zodra je procentuele heights gaat gebruiken werkt het al niet meer fatsoenlijk. Ook het trucje met top: 50% en dan een margin van -25% gaat niet goed, omdat hij dan dat lege gedeelte van de margin ook mee wilt nemen in het scrollbereik (met andere woorden, als je teveel content hebt zit je altijd naar een heel leeg stuk te kijken voordat de content pas begint)

momania schreef op dinsdag 22 september 2009 @ 07:28:
Lukt dat niet door een absolute position op bottom zoals hier: http://www.jakpsatweb.cz/...ical-center-solution.html ?
En dan voor de scrolling een overflow: scroll

Ja, maar die gebruikt een harde height van een aantal pixels.

[ Voor 17% gewijzigd door .oisyn op 22-09-2009 10:05 ]

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

dinsdag 22 september 2009 13:34

Acties:

0 Henk 'm!

R4gnax

.oisyn schreef op dinsdag 22 september 2009 @ 01:40:
Pff, hoe maak ik in hemelsnaam in HTML een content block wat verticaal gecentreerd is (waarbij ik de hoogte van de parent én die van de content niet weet), waarbij ik een verticale scrollbar te zien krijg als de content te lang is voor z'n parent.

Ik heb zo'n beetje alle verticale alignment trucjes die er op internet te vinden zijn geprobeerd, maar bijna allemaal gaan ze uit van een parent div met vaste hoogte, of de scrollbar werkt dan niet fatsoenlijk...

CSS zuigt.

Zie mijn voorbeeld uit de 'tables vs. semantic' thread hier op het GoT forum, wat onder alle browsers behalve Opera (want Opera gaat weer eens niet correct om met dit randgeval van de vertical-align property) zo ongeveer doet wat jij wilt. Je kunt daar vast nog wel een beetje aan sleutelen om een scrollbar tevoorschijn te toveren.

Dit is vanwege de scrollbar waarschijnlijk dan weer net niet in elkaar te sleutelen mbv een display: table-cell oplossing, wat het alternatief was voor mijn techniek.

dinsdag 22 september 2009 13:55

Acties:

0 Henk 'm!

.oisyn

Moderator Devschuur®

Demotivational Speaker

Topicstarter

R4gnax schreef op dinsdag 22 september 2009 @ 13:34:
[...]

Zie mijn voorbeeld uit de 'tables vs. semantic' thread hier op het GoT forum, wat onder alle browsers behalve Opera (want Opera gaat weer eens niet correct om met dit randgeval van de vertical-align property) zo ongeveer doet wat jij wilt.

Dat werkt niet in IE7 zodra ik er een absoluut gepositioneerde div omheen zet. Dan aligned ie niet meer verticaal. Het had wel handig geweest als je kon zeggen: height: 100% - 44px

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
        <style> 
            body, html, div 
            { 
                margin: 0; 
                padding: 0; 
            } 

            body, html 
            { 
                height: 100%; 
            }

            div.outer2
            {
                position: absolute;
                left: 20px;
                right: 20px;
                top: 20px;
                bottom: 20px;
                border: solid 2px black;
                overflow: auto;
            }

            div.outer 
            {
                width: 100%;
                height: 100%;
                line-height: 1em; 

                text-align: center; 
            } 

            div.helper 
            { 
                width: 0; 
                height: 100%; 

                vertical-align: middle; 

                display: inline-block; 
                zoom: 1; 
                *display: inline; 
            } 

            div.inner{ 
                vertical-align: middle; 

                display:inline-block; 
                zoom: 1; 
                *display: inline; 
            } 

        </style> 
    </head> 
    <body> 
        <div class="outer2"> 
        <div class="outer"> 
            <div class="helper"></div> 
            <div class="inner"> 
                <p>Hello world</p> 
                <p>Hello world</p> 
                <p style="height: 150px">Hello world</p> 
            </div> 
        </div> 
        </div>
    </body> 
</html>

[ Voor 63% gewijzigd door .oisyn op 22-09-2009 14:09 ]

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

dinsdag 22 september 2009 14:25

Acties:

0 Henk 'm!

MTWZZ

One life, live it!

@.oisyn:
is dit niet iets:

HTML:

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            body, html {
                margin:0;
                padding:0;
                background:white;
            }
            div#wrapper {
                background:#FFCC00;
                width:400px;
                height:400px;
                position:absolute;
                left:50%;
                top:50%;
                margin:-200px 0 0 -200px;
                padding:0;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            CONTENT
        </div>
    </body>
</html>

Even snel getest en het werkt in FF 3.5, IE7 en Opera 9.64

[ Voor 5% gewijzigd door MTWZZ op 22-09-2009 14:26 ]

Nu met Land Rover Series 3 en Defender 90

dinsdag 22 september 2009 14:32

Acties:

0 Henk 'm!

.oisyn

Moderator Devschuur®

Demotivational Speaker

Topicstarter

MTWZZ schreef op dinsdag 22 september 2009 @ 14:25:
@.oisyn:
is dit niet iets

Dat is idd niet iets, want zoals ik al zei weet ik niet hoe hoog en breed de div wordt. Ik weet alleen dat hij een aantal pixels van de randen van het scherm moet zijn. Daarnaast gaat dat met die margin-truc niet werken omdat hij dan de margin ook mee wilt scrollen als de content te lang is.

Ik wil dus dit:

HTML:

<html>  
    <head>  
        <style>  
            #outercontent
            { 
                position: absolute; /* relative of fixed mag evt. ook, als hij maar een marge binnen de body heeft */
                left: 20px; 
                right: 20px; 
                top: 20px; 
                bottom: 20px; 
                border: solid 2px black; 
                overflow: auto; 
            } 
        </style>  
    </head>  
    <body>  
        <div id="outercontent">
            Hier content (1 enkel plaatje) die verticaal gecentreerd moet worden, en moet scrollen
            *binnen deze div* als het plaatje te groot is.
        </div> 
    </body>  
</html>

De HTML in mijn vorige post werkt in Chrome en FF3, maar niet in IE7.

[ Voor 71% gewijzigd door .oisyn op 22-09-2009 14:53 ]

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

dinsdag 22 september 2009 14:50

Acties:

0 Henk 'm!

.oisyn

Moderator Devschuur®

Demotivational Speaker

Topicstarter

Good Fella schreef op dinsdag 22 september 2009 @ 14:43:
@.oisyn: waarom bereken je de viewport niet gewoon met JS? Dan heb je tenminste een cijfer in pixels waar je mee kunt gaan rekenen.

Dat is de laatste optie die ik wilde gaan proberen, maar ik hoopte in eerste instantie dat het aan mijn eigen onkunde aangaande CSS lag

.edit: oh, trouwens, wat extra informatie die de zaak evt. wat vergemakkelijkt: de content in die div is in feite alleen maar een enkel plaatje, niets anders. Dus wellicht valt er wat met een line-height van 100% te spelen oid?

[ Voor 22% gewijzigd door .oisyn op 22-09-2009 14:52 ]

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

dinsdag 22 september 2009 16:49

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

.oisyn schreef op dinsdag 22 september 2009 @ 14:32:
[...]

Ik wil dus dit:

HTML:

<html>  
    <head>  
        <style>  
            #outercontent
            { 
                position: absolute; /* relative of fixed mag evt. ook, als hij maar een marge binnen de body heeft */
                left: 20px; 
                right: 20px; 
                top: 20px; 
                bottom: 20px; 
                border: solid 2px black; 
                overflow: auto; 
            } 
        </style>  
    </head>  
    <body>  
        <div id="outercontent">
            Hier content (1 enkel plaatje) die verticaal gecentreerd moet worden, en moet scrollen
            *binnen deze div* als het plaatje te groot is.
        </div> 
    </body>  
</html>

Wat gaat hier dan precies mis

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 22 september 2009 16:58

Acties:

0 Henk 'm!

.oisyn

Moderator Devschuur®

Demotivational Speaker

Topicstarter

Het feit dat het daar niet verticaal gecentreerd wordt?

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

dinsdag 22 september 2009 17:10

Acties:

0 Henk 'm!

BalusC

Carpe diem

.oisyn schreef op dinsdag 22 september 2009 @ 16:58:
Het feit dat het daar niet verticaal gecentreerd wordt?

Vergewis jezelf wel van dat je uberhaupt een doctype gebruikt .. Die geeft heel verschillende resultaten in IE en FF. Ik kan de HTML5 of HTML4 Strict doctype aanbevelen.

dinsdag 22 september 2009 17:28

Acties:

0 Henk 'm!

.oisyn

Moderator Devschuur®

Demotivational Speaker

Topicstarter

Ik gebruik HTML4 strict ja. Bovenstaand voorbeeld was even uit de losse pols.

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

dinsdag 22 september 2009 18:47

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

.oisyn schreef op dinsdag 22 september 2009 @ 16:58:
Het feit dat het daar niet verticaal gecentreerd wordt?

Je wilt je content verticaal gaan centreren? Hoe zie je dat dan voor je met een scrollbar in je parent?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 22 september 2009 18:52

Acties:

0 Henk 'm!

.oisyn

Moderator Devschuur®

Demotivational Speaker

Topicstarter

Euh, wat is daar lastig aan

. Het moet kunnen scrollen als de content niet in z'n parent past. En zo wel, dan wordt het gecentreerd.

Zie .oisyn in "[CSS] Vert. centreren in parent element ...", en maak dan die laatse <p> groter voor een verschil tussen wel en niet scrollen. Het probleem is alleen dat die oplossing niet werkt in IE7.

[ Voor 46% gewijzigd door .oisyn op 22-09-2009 18:54 ]

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

dinsdag 22 september 2009 18:56

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Dit is volgens mij met gewoon CSS zo goed als niet mogelijk. Er zijn wel wat trucjes (background-position: middle, of line-height zo hoog als de parent), maar die zijn maar spaarzaam toepasbaar.

Enige dat hier nog goed zou werken zou pielen met table-cell properties enzo zijn, om een tabel te emuleren. (display: table-cell; vertical-align: middle)

Het makkelijkste is gewoon het via JS ondocumentready te centreren, eventueel als fallback voor browsers die bovenstaande niet ondersteunen.

[ Voor 31% gewijzigd door Bosmonster op 22-09-2009 18:59 ]

dinsdag 22 september 2009 19:02

Acties:

0 Henk 'm!

mcdronkz

Bosmonster schreef op dinsdag 22 september 2009 @ 18:56:
Enige dat hier nog goed zou werken zou pielen met table-cell properties enzo zijn, om een tabel te emuleren. (display: table-cell; vertical-align: middle)

Daar zat ik ook aan te denken, maar dat leek me een iets te belachelijke oplossing voor een dergelijk probleem. 't Zou wel werken volgens mij, en wellicht is het zelfs een betere oplossing dan JS

dinsdag 22 september 2009 20:56

Acties:

0 Henk 'm!

.oisyn

Moderator Devschuur®

Demotivational Speaker

Topicstarter

Het probleem dat ik daarmee zag was dat de scrollbar niet werkte in table-cells

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

dinsdag 22 september 2009 22:40

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Zou volgens mij wel moeten werken, maar je kunt de container die je definieert als table-cell natuurlijk ook wrappen in een normale div met height:100%?

dinsdag 22 september 2009 22:48

Acties:

0 Henk 'm!

Willem

Komt ook even om de hoek kijken

Of een div in die table cell met een overflow:auto?

woensdag 23 september 2009 11:47

Acties:

0 Henk 'm!

.oisyn

Moderator Devschuur®

Demotivational Speaker

Topicstarter

Dan krijg ik weer niet voor elkaar dat IE de table zo uitlijnt dat ie verticaal gecentreerd wordt...

. Anyway, ik heb de centrering nu werkend in alle browsers behalve IE dmv display:table en table-cell, inclusief scrollbar wanneer nodig. Dat ie in IE nu niet is gecentreerd neem ik maar voor lief, 't is toch maar een hobby site

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

woensdag 23 september 2009 12:00

Acties:

0 Henk 'm!

Verwijderd

.oisyn schreef op woensdag 23 september 2009 @ 11:47:
Dan krijg ik weer niet voor elkaar dat IE de table zo uitlijnt dat ie verticaal gecentreerd wordt... . Anyway, ik heb de centrering nu werkend in alle browsers behalve IE dmv display:table en table-cell, inclusief scrollbar wanneer nodig. Dat ie in IE nu niet is gecentreerd neem ik maar voor lief, 't is toch maar een hobby site

Ik zou misschien speciaal voor IE7 (toch veel gebruikt die browser) even kijken wat de viewport is. Met jquery is dit probleem volgens mij in drie of vier regeltjes code te fixen.

Pagina: 1

Reageer