[html/css] cross-browser, moz-scrollbars-vertical - Softwareontwikkeling

maandag 30 januari 2006 14:10

Acties:

Verwijderd

Topicstarter

Ik heb een website opgebouwd dmv. CSS, in deze website staat een DIV met de volgende gegevens mbt. de scrollbar:

code:

1
2
3

overflow-x: hidden;
overflow-y: auto;
overflow:-moz-scrollbars-vertical;

Wil dus zeggen dat in IE de scrollbar automatisch verschijnt wanneer de hoogte van de inhoud langer is als de hoogte van de DIV waar die inhoud in staat.

Is er voor Firefox ook een mogelijkheid om dit op "auto" te zetten? Want met:

code:

1	overflow:-moz-scrollbars-vertical;

Staat de scrollbar op "scroll" dus hij wordt niet onzichtbaar wanneer de hoogte van de inhoud kleiner is dan de hoogte van de DIV.

De inhoud is echt niet langer dan de hoogte van de DIV.

maandag 30 januari 2006 14:23

Acties:

BasieP

waarom gebruik je niet:

Cascading Stylesheet:

1	overflow: auto;

dit werkt volgens mij voor beide browsers correct.
probleem is dan dat als de content van je divje te BREED is, hij ook horizontaal gaat scrollen (wat je waarschijnlijk niet wilt.

wat je kunt doen is dit in IE fixen door

Cascading Stylesheet:

1	overflow-x: hidden;

te zetten
mocht FF vreemd gaan doen kan je dan altijd nog de underscore 'hack' gebruiken..

[ Voor 18% gewijzigd door BasieP op 30-01-2006 14:24 ]

This message was sent on 100% recyclable electrons.

maandag 30 januari 2006 14:26

Acties:

Verwijderd

Topicstarter

BasieP schreef op maandag 30 januari 2006 @ 14:23:
waarom gebruik je niet:
Cascading Stylesheet:
1
overflow: auto;
dit werkt volgens mij voor beide browsers correct.
probleem is dan dat als de content van je divje te BREED is, hij ook horizontaal gaat scrollen (wat je waarschijnlijk niet wilt.

wat je kunt doen is dit in IE fixen door
Cascading Stylesheet:
1
overflow-x: hidden;
te zetten
mocht FF vreemd gaan doen kan je dan altijd nog de underscore 'hack' gebruiken..

Waneer ik de volgende code niet gebruik dan krijg ik in firefox geen scrollbar in de DIV:

code:

1	overflow:-moz-scrollbars-vertical;

Underscore hack? even zoeken, misschien dat ik daar iets mee kan.

maandag 30 januari 2006 14:27

Acties:

BasieP

Verwijderd schreef op maandag 30 januari 2006 @ 14:26:
[...]

Waneer ik de volgende code niet gebruik dan krijg ik in firefox geen scrollbar in de DIV:
code:
1
overflow:-moz-scrollbars-vertical;

dan doe je iets fout..
een divje met de propery 'overflow: auto;' zou altijd moeten gaan scrollen als de content groter word dan het divje..
(je moet misschien dan wel een aantal andere scrollbar css properties weghalen, anders zouden ze elkaar tegen kunnen werken)

Underscore hack? even zoeken, misschien dat ik daar iets mee kan.

ik zou niet direct beginnen met zoeken naar hacks.. want als bovenstaande al niet werkt, gaat er iets anders mis.

edit:
zie:
http://basiep.dyndns.org/test.html

[ Voor 30% gewijzigd door BasieP op 30-01-2006 14:30 ]

This message was sent on 100% recyclable electrons.

maandag 30 januari 2006 14:28

Acties:

Verwijderd

Topicstarter

Ik heb echt al vanalles geprobeerd, ook met de hoogte van de div en container maar niks helpt, wanneer dat stuk code er niet staat krijg ik in de div geen scrollbar (in Firefox).

Die hack heb ik niks aan.

een divje met de propery 'overflow: auto;' zou altijd moeten gaan scrollen als de content groter word dan het divje..
(je moet misschien dan wel een aantal andere scrollbar css properties weghalen, anders zouden ze elkaar tegen kunnen werken)

Zo was het eerst, maar dat werkte niet, die div scrollde pas in Firefox toen deze code gebruikte:

code:

1	overflow:-moz-scrollbars-vertical;

[ Voor 51% gewijzigd door Verwijderd op 30-01-2006 14:32 ]

maandag 30 januari 2006 14:35

Acties:

BasieP

Verwijderd schreef op maandag 30 januari 2006 @ 14:28:

Zo was het eerst, maar dat werkte niet, die div scrollde pas in Firefox toen deze code gebruikte:

nogmaals, dan deed je iets fout.

check voorbeeld in vorige post eens. en probeer dat na te maken.
als je er nog niet uitkomt kan je misschien het beste zelf een soort 'test case' maken met daarin het probleem met minimale code nagebootst.

deze kan je hier dan posten

[ Voor 23% gewijzigd door BasieP op 30-01-2006 14:35 ]

This message was sent on 100% recyclable electrons.

maandag 30 januari 2006 14:39

Acties:

Verwijderd

Topicstarter

BasieP schreef op maandag 30 januari 2006 @ 14:35:
[...]

nogmaals, dan deed je iets fout.

check voorbeeld in vorige post eens. en probeer dat na te maken.
als je er nog niet uitkomt kan je misschien het beste zelf een soort 'test case' maken met daarin het probleem met minimale code nagebootst.

deze kan je hier dan posten

Bedankt voor je voorbeeld, het heeft geholpen, probleem is opgelost.
Ik had de overflow in de stylesheet gezet en niet in de DIV, wist niet dat het uitmaakte..hartstikke bedankt.

[ Voor 9% gewijzigd door Verwijderd op 30-01-2006 14:41 ]

maandag 30 januari 2006 14:40

Acties:

Eusebius

Verwijderd schreef op maandag 30 januari 2006 @ 14:26:
Underscore hack? even zoeken, misschien dat ik daar iets mee kan.

Alle tags met een _ ervoor, worden niet door FF meegenomen, maar wel door IE. Zodoende kun je bv maken:

code:

1 2	width: 550px; /* shown in FF / _width: 200px; / IE only */

IE neemt de 2e tag over, maar FF negeert m. Effe reclame maken voor mijn site, daar heb ik het wat uitgebreider beschreven.

[ Voor 5% gewijzigd door Eusebius op 30-01-2006 14:40 ]

==
hoi

maandag 30 januari 2006 15:16

Acties:

Bosmonster

*zucht*

Verwijderd schreef op maandag 30 januari 2006 @ 14:39:
[...]

Bedankt voor je voorbeeld, het heeft geholpen, probleem is opgelost.
Ik had de overflow in de stylesheet gezet en niet in de DIV, wist niet dat het uitmaakte..hartstikke bedankt.

Dat maakt (uiteraard) ook niks uit..

Had je toch iets anders fout gedaan

maandag 30 januari 2006 15:18

Acties:

BasieP

Bosmonster schreef op maandag 30 januari 2006 @ 15:16:
[...]

Dat maakt (uiteraard) ook niks uit..

Had je toch iets anders fout gedaan

idd, of de reden dat het nu wel werkt is dat het een prio heeft boven het andere.. waar dan 'het andere' nog steeds foutief staat

This message was sent on 100% recyclable electrons.

dinsdag 31 januari 2006 11:35

Acties:

Verwijderd

Topicstarter

Ik zit toch nog met een probleem, ik heb er een voorbeeld voor gemaakt:
Afbeeldingslocatie: http://www.laserreparatie.nl/1.jpg

De stylesheet:

code:

html, body {
    padding: 0px;
    margin: 0px;
    font: 11px "trebuchet ms";
    color: #303840;
    background: #515159;
    overflow-x: hidden;
    overflow-y: auto;
}

a:link {
    color: #EF4135;
    text-decoration: none;
}

a:visited {
    color: #EF4135;
    text-decoration: none;
}

a:hover, a:active {
    color: #303840;
    text-decoration: none;
}

img {
    border: 0px;
}

#container {
    position: absolute;
    height: 100%;
    top: 0px;
    left: 50%;
    margin-left: -383px;
    width: 766px;
    padding-top: 26px;
    padding-bottom: 16px;
    -moz-box-sizing: padding-box;
    background: #515159;
}

#top {
    position: absolute;
    top: 0px;
    height: 26px;
    width: 100%;
    background: url("../images/menu_bg.gif") no-repeat;
}

#header {
    position: absolute;
    top: 26px;
    height: 181px;
    width: 100%;
    background: url("../images/header.gif") no-repeat;
}

#middlecontainer {
    position: absolute;
    top: 26px;
    height: 70%;
}

#pattern {
    position: absolute;
    top: 181px;
    left: 0px;
    height: 6px;
    width: 589px;
    background: url("../images/pattern.gif") no-repeat;
}

#right {
    position: absolute;
    top: 181px;
    left: 589px;
    height: 23px;
    width: 177px;
    background: url("../images/submenu.gif") no-repeat;
}

#rightcontent {
    font: bold 12px "trebuchet ms";
    color: #49525C;
    text-align: center;
    padding-top: 3px;
}

#submenu {
    position: absolute;
    top: 204px;
    left: 589px;
    height: 319px;
    width: 177px;
    background: transparent url("../images/submenu_bg.gif") repeat-y;
}

#submenucontent {
    padding-left: 11px;
    padding-right: 11px;
    padding-top: 15px;
}

#title {
    position: absolute;
    top: 187px;
    height: 32px;
    width: 589px;
    background: #FCFCFD;
}

#titlecontent {
    font: bold 12px "trebuchet ms";
    color: #49525C;
    padding-top: 10px;
    padding-left: 29px;
}

#main {
    position: absolute;
    top: 219px;
    left: 0px;
  height: 100%;
    width: 589px;
    background: #FCFCFD;
    overflow-x: hidden;
    overflow-y: auto;
}

#maincontent {
  padding-left: 29px;
    padding-right: 29px;
}

#bottom {
  position: absolute;
    left: 50%;
  margin-left: -383px;
    bottom: 0px;
  height: 16px;
    width: 766px;
    background: #EF4135;
}

De lime balk onderaan van 16 px hoog moet altijd onderaan blijven staan. de rode blauwe en gele balk hebben allemaal vaste hoogtes.

Het enigste wat mee moet veranderen wanneer iemand een andere resolutie heeft is het zwarte vlak en het blauwe ernaast. Maar wanneer ik deze een waarde van 100% als hoogte dan worden ze langer als de pagina zelf. Net als met framesets zou ik moeten kunnen kiezen voor vaste waardes en 1 joker hoogte voor dat zwarte en blauwe vlak...hopelijk ben ik een beetje duidelijk.

Het makkelijkste zou gewoon zijn dat ik voor het bovenste gedeelte (Rood/Blauw/Geel) een vast percentage opgeef, bijvoorbeeld 25%, voor het middelste 70% en voor de onderste lime balk 5%, maar wanneer je dan een grote browser hebt krijg je tussen die 3 stukken open plekken.

Daarom moet het gewoon zo:
219 px voor het bovenste gedeelte,
100% voor het middelste gedeelte,
16px voor het onderste gedeelte.

Maar die 100% overlapt dan alles.....

[ Voor 75% gewijzigd door Verwijderd op 31-01-2006 14:01 ]

dinsdag 31 januari 2006 17:35

Acties:

Verwijderd

Dit soort pagina-vullende layouts zijn helemaal niet zo moeilijk te realiseren. Copy-paste dit stukje maar eens:

HTML:

<html>
    <head>
        <title>Layout</title>
        <style type="text/css">
        body {
            margin:0;
            padding:0;
            overflow:hidden;
        }

        div {
            box-sizing:border-box;
            -moz-box-sizing:border-box;
        }

        #Header-1 {
            background:red;
            height:26px;
            width:100%;
            position:absolute;
            left:0;
            top:0;
            z-index:1;
        }

        #Header-2 {
            background:blue;
            height:181px;
            width:100%;
            position:absolute;
            left:0;
            top:26px;
            z-index:1;
        }

        #Header-3 {
            background:yellow;
            height:6px;
            width:100%;
            position:absolute;
            left:0;
            top:207px;
            z-index:1;
            overflow:hidden;
        }

        #Body-Main {
            background:black;
            height:100%;
            width:100%;
            position:absolute;
            left:0;
            top:0;
            border-top:213px solid #FFF;
            border-bottom:16px solid #FFF;
            border-right:200px solid #FFF;
            z-index:0;
            overflow:auto;
            color:#CCC;
        }

        #Body-Side {
            background:aqua;
            height:100%;
            width:200px;
            position:absolute;
            right:0;
            top:0;
            border-top:213px solid #FFF;
            border-bottom:16px solid #FFF;
            z-index:0;
        }

        #Footer {
            background:green;
            height:16px;
            width:100%;
            position:absolute;
            left:0;
            bottom:0;
            z-index:1;
        }


        </style>
    </head>

    <body>

        <div id="Header-1"></div>
        <div id="Header-2"></div>
        <div id="Header-3"></div>

        <div id="Body-Main">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div id="Body-Side"></div>

        <div id="Footer"></div>
    </body>
</html>

^{(een hoop code maar eenvoudig te doorgronden, denk ik)}

Ik maak hierbij gebruik van een techniek die met borders forceert dat een schalend element (jouw zwarte blok) toch op vaste afstanden van een omringend element ligt. Ik heb daar ook een klein stukje over geschreven. Overigens ben ik er hier vanuit gegaan dat de sidebar een vaste breedte heeft (200px in het voorbeeld).

[ Voor 14% gewijzigd door Verwijderd op 31-01-2006 17:39 ]

dinsdag 31 januari 2006 17:43

Acties:

UltimateB

Pomdiedom

Even over de underscore hack, leer jezelf deze niet aan, het is verstandiger om te werken met conditional comments. Dan is is ook mogelijk de verschillende IE versies te onderscheiden. Daarbij komt dit gewoon door de validator heen.

"True skill is when luck becomes a habit"
SWIS

woensdag 1 februari 2006 11:32

Acties:

Verwijderd

Topicstarter

@ Blues: Bedankt voor je duidelijke uitleg en je goede tutorial!

In IE werkt het nu, alleen bij Firefox steekt de zwarte DIV onderaan uit het scherm, ik zal een voorbeeldje maken:
Afbeeldingslocatie: http://www.laserreparatie.nl/2.gif

Afbeeldingslocatie: http://www.laserreparatie.nl/2.gif

Hopelijk is het duidelijk, in internet explorer blijft de div dus netjes binnen het scherm, maar bij Firefox loopt die DIV achterlangt de footer het scherm uit, dit komt door:

.Content {
BORDER-TOP: #fff 239px solid; BORDER-BOTTOM: #fff 16px solid
}

Gehele stylesheet:

code:

<STYLE type=text/css>BODY {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 11px; BACKGROUND: #515159; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; COLOR: #000; PADDING-TOP: 0px; HEIGHT: 100%; FONT: 11px "trebuchet ms";
}   
H2 {
    BORDER-BOTTOM: #000 1px solid
}
a:link {
    color: #EF4135;
    text-decoration: none;
}

a:visited {
    color: #EF4135;
    text-decoration: none;
}

a:hover, a:active {
    color: #303840;
    text-decoration: none;
}

img {
    border: 0px;
}
#container {
    position: absolute;
    height: 100%;
    top: 0px;
    left: 50%;
    margin-left: -383px;
    width: 766px;
    padding-top: 26px;
    padding-bottom: 16px;
    -moz-box-sizing: padding-box;
    background: #515159;
}
.FlexPanel {
    LEFT: 0px; OVERFLOW: auto; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; moz-box-sizing: border-box; box-sizing: border-box
}
.FP-Inner {
    PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px
}
.FP-Inner-Right {
    font: bold 12px "trebuchet ms";
    color: #49525C;
    text-align: center;
    padding-top: 3px;
}
.Title {
    top: 213px;
    height: 27px;
    width: 589px;
    background: #FCFCFD;
    overflow-x: hidden; 
  overflow-y: hidden;
}
.FP-Inner-Title {
    font: bold 12px "trebuchet ms";
    color: #49525C;
    padding-top: 10px;
    padding-left: 29px;
}
.Menu {
    WIDTH: 589px; background: #FCFCFD;
}
.FP-Inner-Menu {
  padding-left: 29px;
    padding-right: 29px;
}
.Sidebar-2 {
    RIGHT: 0px; LEFT: auto; WIDTH: 177px; background: transparent url("../images/submenu_bg.gif") repeat-y;
}
.FP-Inner-Sidebar-2 {
    padding-left: 11px;
    padding-right: 11px;
    padding-top: 15px;
}
.Top {
    HEIGHT: 26px; background: url("../images/menu_bg.gif") no-repeat; overflow-x: hidden; overflow-y: hidden;
}
.FP-Inner-Top {
    TOP: 0px;
}
.Header {
    HEIGHT: 181px; TOP: auto; background: url("../images/header.gif") no-repeat;
}
.Pattern {
    HEIGHT: 6px; WIDTH: 589px; TOP: 207px; background: url("../images/pattern.gif") no-repeat; overflow-x: hidden; overflow-y: hidden;
}
.Right {
    HEIGHT: 32px; WIDTH: 177px; TOP: 207px; LEFT: 589px; background: url("../images/submenu.gif") no-repeat; overflow-x: hidden; overflow-y: hidden;
}
.Content {
    BORDER-TOP: #fff 239px solid; BORDER-BOTTOM: #fff 16px solid
}
.Footer {
    BOTTOM: 0px; TOP: auto; HEIGHT: 16px; overflow-x: hidden; overflow-y: hidden; background: #EF4135;
}
</STYLE>

Wanneer ik daar 0 van maak steekt hij bijna niet meer onder het scherm uit...

Hoe kan ik ervoor zorgen dat het in Firefox ook perfect werkt? Alvast bedankt!

@ UltimateB: ik heb geen gebruik gemaakt van hacks, heb je advies opgevolgd

[ Voor 63% gewijzigd door Verwijderd op 01-02-2006 11:53 ]

woensdag 1 februari 2006 15:42

Acties:

Verwijderd

Zorg dat FF/Mozilla en consorten ook in border-box model renderen:

Cascading Stylesheet:

div {
   -moz-box-sizing:border-box;
   box-sizing:border-box;
}

woensdag 1 februari 2006 15:50

Acties:

Sappie

De Parasitaire Capaciteit!

Safari ondersteunt afaik geen box-model switching, dus het is de vraag of je wel zit te wachten op het gebruik van het (soms handigere) border-box box-model. Daarentegen heb ik geen last van problemen in firefox.
_{verder mist er in blues' voorbeeld uiteraard een DTD en in Konqueror (niet dat je je daar al teveel van aan moet trekken) werkt het geheel totaal niet zoals gewenst.}

[ Voor 42% gewijzigd door Sappie op 01-02-2006 15:57 ]

Specs | Audioscrobbler

woensdag 1 februari 2006 16:04

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op woensdag 01 februari 2006 @ 15:42:
Zorg dat FF/Mozilla en consorten ook in border-box model renderen:
Cascading Stylesheet:
1
2
3
4
div {
   -moz-box-sizing:border-box;
   box-sizing:border-box;
}

Die moz-box-sizing: border-box; box-sizing: border-box; staat al in .Flexpanel, dus die heeft toch betrekking op .Menu en .FP-Inner-Menu ?
Heb het overal proberen zetten maar het werkt nog steeds niet in FF. Wat doe ik verkeerd.

woensdag 1 februari 2006 16:14

Acties:

Verwijderd

Ik zie het nu, maar je bent de "-" vergeten voor -moz-box-sizing. Als browser-makers 'expirimentele' CSS properties implementeren, doen ze dat meestal met een -browsernaam- prefix. Die "-" mag dus niet vergeten worden.

woensdag 1 februari 2006 16:21

Acties:

Verwijderd

Topicstarter

"-" vergeten.... :-|

Dat was 't!

Bedankt Blues, alweer.

maandag 10 juli 2006 12:54

Acties:

Verwijderd

Ik ben bezig geweest met het bovenstaande voorbeeld, maar na heel wat proberen kwam ik er achter dat wanneer de onderstaande regel boven het document staat, het niet meer werkt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Kent iemand een oplossing voor dit probleem (behalve dan de regel weg halen

?

maandag 10 juli 2006 12:58

Acties:

Rowanov

Kop eens wat anders...

Zowieso geen xhtml gebruiken als IE binnen je doelgroep valt. Gewoon html 4.01 strict doctype gebruiken.

maandag 10 juli 2006 13:50

Acties:

Verwijderd

Het probleem is dat ik de stylesheet maak voor iemand anders en ik zelf geen invloed heb op het door hem gegenereerde document. Is dit te omzeilen?

maandag 10 juli 2006 13:51

Acties:

BtM909

Watch out Guys...

Rowanov schreef op maandag 10 juli 2006 @ 12:58:
Zowieso geen xhtml gebruiken als IE binnen je doelgroep valt. Gewoon html 4.01 strict doctype gebruiken.

Maar even los van dit 'probleem'

Daarnaast

Verwijderd schreef op maandag 10 juli 2006 @ 12:54:
Ik ben bezig geweest met het bovenstaande voorbeeld, maar na heel wat proberen kwam ik er achter dat wanneer de onderstaande regel boven het document staat, het niet meer werkt.

Juist alle browsers (

) in strict mode forceren door een volledige doctype boven je document te zetten, zodat het grootste gedeelte hetzelfde rendered.

En simpelweg zeggen, het werkt niet meer is ook geen optie. Wat werkt er niet meer precies, welk resultaat krijg je nu en hoe heb je het zelf geprobeerd op te lossen. Het klinkt heel kinderachtig, want ik kan ook de doctype even boven het document zetten, maar het forceert jezelf om eens goed na te denken wat er precies aan de hand is.

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.

maandag 10 juli 2006 15:08

Acties:

Verwijderd

Excuses voor mijn vage omschrijving van het probleem. Ik zal proberen het probleem duidelijker uitleggen.

Wanneer ik de doctype regel boven het document plaats, veranderd de layout van de pagina. Ik heb dit getest op het document dat Blues hierboven gepost heeft. De veranderingen:
- de hoogte is niet meer 100%, het zwarte gedeelte wordt zo groot dat de tekst en in past en houdt die hoogte onafhankelijk van de hoogt van de browser.
- de scrollbar verschijnt niet meer langs het zwarte gedeelte, maar langs de gehele pagina. Hierbij blijft de footer onderin staan en loopt het zwarte gedeelte daar onderdoor.

Ik heb nog geprobeerd dit op te lossen door body {height:100%;} toe te voegen, maar dat zorgt er voor dat de hoogte van het zwarte onderdeel 100% plus de 213 pixels daarboven.

Ik hoop dat het zo iets duidelijker is. Voor een mooie visualisatie kun je natuurlijk altijd even de volgende regel er boven plakken

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<edit>
Na nog even een versimpelde versie te hebben gemaakt werd het me duidelijk dat het body {height:100% ;} het probleem gedeeltelijk oplost. Het probleem dat daarna overblijft is dat gebruik wordt gemaakt van een content-box i.p.v. een border-box ondanks:

div {
box-sizing:border-box;
-moz-box-sizing:border-box;
}

Is er een manier om dan toch die border-box te forceren?

</edit>

[ Voor 29% gewijzigd door Verwijderd op 10-07-2006 15:45 ]

dinsdag 11 juli 2006 12:34

Acties:

Verwijderd

Een lastig item merk ik al. Na wat googlen merk ik dat al aardig wat is gezegd over box-model. De oplossing voor mij was de volgende regel helemaal bovenaan zetten:

<?xml version="1.0" encoding="UTF-8"?>

Deze oplossing heb ik hier gevonden: http://www.codingforums.com/archive/index.php?t-25507.html

dinsdag 11 juli 2006 19:00

Acties:

funkwurm

Je kiest er dus voor IE express in quirksmode te laten renderen. Het artikel waar je naar verwijst legt het goed uit, maar vergeet de 3e optie: wat jij wil kan perfect met een tabel.

Ik ben er ook geen fan van, maar de kwestie box-model is het voorbeeld waaruit blijkt dat de huidige CSS gewoon tekort schiet waar je het met tabellen wel kunt.

Een ander voorbeeld is trouwens verticaal centreren. En voordat ik W3C politiek correcte bedreigingen krijg, dit is vooralsnog een vaststaand feit, weinig discussie mogelijk.

Op naar CSS 4 en beyond, me dunkt.

vrijdag 18 augustus 2006 06:38

Acties:

MichielioZ

Ok, het topic is al wat oud, maar ik wilde toch even mijn input doneren

De topicstarter begon ooit met een padding-box en die is getransformeerd later naar een border-box, maar ik wil toch nog even graag laten zien dat het ook met die padding-box kan, en in mijn opzicht (partijdig natuurlijk) zelfs mooier is :

HTML:

<html>
<head>
  <title>Layout Padding</title>
  <style type="text/css">
#hdr_1 {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 30px;
  background: red;
}
#hdr_2 {
  position: absolute; top: 30px; left: 0;
  width: 100%; height:200px;
  background: blue;
}
#hdr_3 {
  position: absolute; top: 230px; left: 0;
  width: 100%; height: 8px; 
  background:yellow;
  font-size: 1px; /*IE-fix*/
}
#mid_L_container {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  padding: 238px 200px 20px 0;
  -moz-box-sizing: padding-box;
  overflow:auto; /*IE-fix*/
}
#mid_L {
  width: 100%; height: 100%;
  background: black; color: #FFF;
  overflow:auto;
}
#mid_R_container {
  position: absolute; top: 0; right: 0;
  width: 200px; height: 100%;
  padding: 238px 0 20px 0;
  -moz-box-sizing:padding-box;
}
#mid_R {
  width: 100%; height: 100%;
  background: green;
}
#ftr {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 20px;
  background: purple;
}
  </style>
</head>
<body style="margin:0;">

<div id="hdr_1"></div>
<div id="hdr_2"></div>
<div id="hdr_3"></div>

<div id="mid_L_container">
  <div id="mid_L">
    <p>Hier een stukje text</p><p>Hier een stukje text</p><p>Hier een stukje text</p><p>Hier een stukje text</p>
    <p>Hier een stukje text</p><p>Hier een stukje text</p><p>Hier een stukje text</p><p>Hier een stukje text</p>
    <p>Hier een stukje text</p><p>Hier een stukje text</p><p>Hier een stukje text</p><p>Hier een stukje text</p>
    <p>Hier een stukje text</p><p>Hier een stukje text</p><p>Hier een stukje text</p><p>Hier een stukje text</p>
  </div>
</div>
<div id="mid_R_container">
  <div id="mid_R"><b>Menu</b><br><a href="">Link</a></div>
</div>

<div id="ftr"></div>

</body>
</html>

Iedereen wil terug naar de natuur, maar niemand wil lopend...