DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Oplossing is overigens om die divs te laten floaten. Dan gaat het wel goed.quote:Op vrijdag 24 december 2010 15:10 schreef KomtTijd... het volgende:
[..]
Ohja. Margin-collapse, wie dat ooit verzonnen heeft, mogen ze van mij afschieten
Overflow defineren werkt ook dacht ik.quote:Op vrijdag 24 december 2010 15:13 schreef Light het volgende:
[..]
Oplossing is overigens om die divs te laten floaten. Dan gaat het wel goed.
Dan moet er dus iets in die divs (header, content en footer) zitten. Of heb je die warp-divs zelf toegevoegd?quote:
[..]
Dat dacht ik ook. Maar, als ik mijn verschillende div's een kleurtje geef krijg ik dit.
[ afbeelding ]
Zwart = BODY, wit = container, geel = header, blauw = content, rood = footer, paars = wrap.
Zou kunnen, ik ben meer een fan van floatquote:Op vrijdag 24 december 2010 15:14 schreef KomtTijd... het volgende:
[..]
Overflow defineren werkt ook dacht ik.
Wrap is een grote div waar header, content en footer inzitten. Maar padding is 0px. Anders zou je ook nog een rand om die drie heen zien. Maar die regels ertussen blijven welquote:
[..]
Dan moet er dus iets in die divs (header, content en footer) zitten. Of heb je die warp-divs zelf toegevoegd?
. Die wil ik weg.
Maak eens een testcase met de code zo kaal als je 'm hier beschrijft:quote:
[..]
Wrap is een grote div waar header, content en footer inzitten. Maar padding is 0px. Anders zou je ook nog een rand om die drie heen zien. Maar die regels ertussen blijven wel
Eventjes alle divs een kleurtje geven en van de margins en paddings afblijven. Gaat het dan wel goed?quote:
Hoe kan je de space tussen div's bepalen? Volgens mij is het sowieso niet mogelijk om ze helemaal weg te halen.
Tussen header, content en footer zit nu een lege regel (ook nog eens verschillend in grootte omdat bv. de footer een kleiner lettertype gebruikt. Ik wil dat al die lege regels allemaal bv. 20px zijn.
Ik kan het makkelijk door de header, content en footer padding te geven, maar dat is toch minder mooi vind ik.
[ code verwijderd ]
Hm, dan wel. Even spelen.quote:
[..]
Maak eens een testcase met de code zo kaal als je 'm hier beschrijft:
[..]
Eventjes alle divs een kleurtje geven en van de margins en paddings afblijven. Gaat het dan wel goed?
Scroll terug naar <margin-collapse>quote:
[..]
Ok, het komt door de <H1> en <P> enzo
Nou ok. Hoe fix ik dat?quote:
[..]
Scroll terug naar <margin-collapse>
quote:
[..]
Overflow defineren werkt ook dacht ik.
| 1 2 3 4 | H1 {margin:0px;padding:0px;} H2 {margin:0px;padding:0px;} H3 {margin:0px;padding:0px;} P {margin:0px;padding:0px;} |
Hiermee zijn ze iig weg.
.
Alle div's op padding:1px ipv 0px werkt. Alleen dan nog hebben ze nog de top en bottom padding van de content, en niet een fixed grootte. Het was mooier als de eerste en laatste paragraaf in een div geen top danwel bottom padding hadden.
Beterquote:
Laten we daar nou de psuedo-classes voor hebben? p:first-child en p:last-child
. Even kijken of dat werkt.
| 1 2 | H1:first-child, H2:first-child, H3:first-child, P:first-child {padding-top:0px;} H1:last-child, H2:last-child, H3:last-child, P:last-child {padding-bottom:0px;} |
Dit moest het zijn.
| 1 2 | H1:first-child, H2:first-child, H3:first-child, P:first-child {margin-top:0px;} H1:last-child, H2:last-child, H3:last-child, P:last-child {margin-bottom:0px;} |
.[ Bericht 39% gewijzigd door Tegan op 24-12-2010 16:47:19 ]
. Nu is mijn content compleet apart van de weergave 
Ok, nog een ding.
Ik wil dat dat wit doorgaat tot onderaan de pagina ipv dat het stopt als er geen content meer is. Dit gaat automatisch goed als het scherm te klein is, maar anders dus niet.
Ik wil dat dat wit doorgaat tot onderaan de pagina ipv dat het stopt als er geen content meer is. Dit gaat automatisch goed als het scherm te klein is, maar anders dus niet.
Body en wrapper min-heigth: 100%
Footer eventueel absoluut positioneren in de wrapper, faux columns er tegenaan en voilla.
Footer eventueel absoluut positioneren in de wrapper, faux columns er tegenaan en voilla.
Kan je iets specifieker zijn?quote:
Body en wrapper min-heigth: 100%
Footer eventueel absoluut positioneren in de wrapper, faux columns er tegenaan en voilla.
Faux columns is het gebruik van een achtergrond-afbeelding om kolommen te simuleren die tot onderaan het scherm doorlopen.
Bleuh.
Alleen jammer dat last-child nog te weinig ondersteund wordt. IE8 snapt het ook niet.quote:
[ code verwijderd ]
Werkt niet.
Dit moest het zijn.
[ code verwijderd ]
Inderdaad. Ik gebruik zelf nog steeds vaak classes .first en .last. Erg jammer, goede support voor al die pseudo-classes maakt het werk zo veel makkelijker. Tuurlijk zijn er Javascript hacks die moderne CSS ook werkend maakt in IE6/7/8 - maar mijn ervaring is dat de performance van dat soort scripts nogal eens te wensen over laat.
Bleuh.
