Recent kwam ik een interessant probleem tegen tijdens het doorlezen van een issue queue van drupal. Een template daar heeft een soortgelijke opbouw als hieronder in de testcase is weergegeven (testcase is sterk versimpeld).
Het probleem: zodra je flink gaat inzoomen (bijvoorbeeld in firefox), overflowed de text van de main content op de donkere achtergrond, wat de leesbaarheid niet ten goede komt.
De donkere achtergrondkleur op de body is noodzakelijk om in het geval van weinig content het idee te creeeren dat de footer doorloopt. Andere mogelijkheden om dit effect te creeeren zijn afgeschoten door de drupal community om verschillende redenen. Probeer in ieder geval in eerste instantie ervan uit te gaan dat dit niet veranderd kan worden.
Een simpele oplossing is, en dat is ook datgene wat ik daar gepost heb, door #main ook een witte background te geven.
Mijn vraag is eerder wat de precieze achtergrond van dit probleem is, en of er nog andere (elegantere?) oplossingen zijn, bijvoorbeeld om te zorgen dat de text wel netjes binnen zijn box blijft.
Ik dacht zelf dat het enigzins iets te maken kon hebben met het volgende:
http://www.brunildo.org/test/OverflowSide.html
Maar verder kom ik niet....
Testcase:
Het probleem: zodra je flink gaat inzoomen (bijvoorbeeld in firefox), overflowed de text van de main content op de donkere achtergrond, wat de leesbaarheid niet ten goede komt.
De donkere achtergrondkleur op de body is noodzakelijk om in het geval van weinig content het idee te creeeren dat de footer doorloopt. Andere mogelijkheden om dit effect te creeeren zijn afgeschoten door de drupal community om verschillende redenen. Probeer in ieder geval in eerste instantie ervan uit te gaan dat dit niet veranderd kan worden.
Een simpele oplossing is, en dat is ook datgene wat ik daar gepost heb, door #main ook een witte background te geven.
Mijn vraag is eerder wat de precieze achtergrond van dit probleem is, en of er nog andere (elegantere?) oplossingen zijn, bijvoorbeeld om te zorgen dat de text wel netjes binnen zijn box blijft.
Ik dacht zelf dat het enigzins iets te maken kon hebben met het volgende:
http://www.brunildo.org/test/OverflowSide.html
Maar verder kom ik niet....
Testcase:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="nl"> <head> <title>Simpel</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8;charset=utf-8"> <style type="text/css"> html, body { margin: 0; padding: 0; } body { background: #292929; } p { margin: 0; padding: 0 0 1em 0; } #header, #main, #footer { width: 700px; margin: 0 auto; } #header-wrapper { background: #48a9e4; color: #ffffff; } #main-wrapper { background: #ffffff; color: #3b3b3b; } #footer-wrapper { background: #292929; color: #ffffff; } </style> </head> <body> <div id="header-wrapper"> <div id="header">header</div> </div> <div id="main-wrapper"> <div id="main"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quis odio et turpis mattis lobortis. Duis elit purus, mattis non, vulputate et, tincidunt nec, erat. Nulla facilisi. Integer pellentesque magna vel odio. Donec ultrices felis ut diam. Phasellus viverra elit non enim. Pellentesque et mauris. Aliquam erat volutpat. Morbi lorem pede, auctor eu, interdum sed, condimentum a, sapien. Morbi rhoncus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <p>Fusce pretium. Pellentesque sodales, tortor sed lobortis ullamcorper, quam est euismod lacus, ut pulvinar erat tellus vitae justo. Aenean vulputate. Vivamus iaculis vulputate velit. Suspendisse potenti. Aliquam varius risus eget urna. Curabitur urna. Curabitur eget augue. Curabitur eleifend enim eget nulla. Morbi pretium felis eget diam. Etiam non leo id erat semper ultricies. Aliquam quis nunc. Etiam sed dui sit amet lorem luctus interdum. In dapibus blandit odio. Curabitur id mi. Phasellus pede diam, mattis quis, pulvinar eget, lobortis in, mauris. Donec rutrum accumsan risus. Phasellus sed enim eu urna pretium ultrices. Aliquam sed lorem ut ligula pulvinar luctus. Nunc placerat.</p> <p>Nunc varius lacinia enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla molestie sollicitudin eros. Etiam ante diam, vulputate suscipit, scelerisque et, aliquet non, pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris lorem. Donec dolor pede, euismod id, viverra at, mattis eu, nisl. Phasellus sit amet elit. Donec suscipit. Mauris semper semper justo. Proin mi. Donec nec neque. Nulla eu velit. Suspendisse posuere. Donec tincidunt bibendum risus. Duis nisl. Mauris porttitor aliquam velit.</p> </div> </div> <div id="footer-wrapper"> <div id="footer">footer</div> </div> </body> </html> |
/u/7685/ruinmytune-60x60.png?f=community)
:strip_icc():strip_exif()/u/35587/icon-got.jpg?f=community){kind=icon}
