Fixed header en linker sidebar - Softwareontwikkeling

woensdag 3 december 2008 18:16

Acties:

0 Henk 'm!

Topicstarter

De meeste devvers zullen aan de titel al ongeveer begrijpen wat ik wil. Het lijkt hierop:

http://limpid.nl/lab/css/fixed/header-and-left-sidebar

alleen begrijp ik niet waarom de scrollbalk ook over de header heen gaat tenzij je IE in quirksmode gebruikt. Ik vind dat erg lelijk en ook niet gebruiksvriendelijk want het scrollen doet dan iets anders dan je verwacht. Hoe kan ik bereiken dat de scrollbalken alleen de hoogte van de content aannemen?

De google searches die ik heb gedaan leveren allemaal iets soortgelijks aan bovenstaande op. Verder is mijn pagina niet in quirksmode en hou ik dat ook liever zo.

[ Voor 15% gewijzigd door funkwurm op 03-12-2008 18:17 ]

woensdag 3 december 2008 18:24

Acties:

0 Henk 'm!

Verwijderd

Je kant toch het volgende in je style zetten bij je content div: overflow-y: scroll.
In de body tag zet je het volgende neer: <body scroll="no">
Nu scrollt alleen je contentdiv.

woensdag 3 december 2008 18:40

Acties:

0 Henk 'm!

funkwurm

Topicstarter

Verwijderd schreef op woensdag 03 december 2008 @ 18:24:
Je kant toch het volgende in je style zetten bij je content div: overflow-y: scroll.
In de body tag zet je het volgende neer: <body scroll="no">
Nu scrollt alleen je contentdiv.

De body heeft hier al een overflow:hidden; die hetzelfde doet als de scroll="no". Door het gebruik van de padding komt die scrollbar over de header heen, dus zoek ik daar een alternatief voor.

Ik heb ook al zitten prutsen met een div binnen die content-div, maar dan loop je eigenlijk weer bij hetzelfde probleem vast namelijk dat je een hoogte moet instellen die je niet weet. En CSS kent nou eenmaal niet zoiets als (100%-100px). Zelf vind ik het nog steeds niet logisch dat 100% soms 100% van de body is en soms van het parent-element...

woensdag 3 december 2008 19:11

Acties:

0 Henk 'm!

Kiphaas7

funkwurm schreef op woensdag 03 december 2008 @ 18:40:
[...]

De body heeft hier al een overflow:hidden; die hetzelfde doet als de scroll="no". Door het gebruik van de padding komt die scrollbar over de header heen, dus zoek ik daar een alternatief voor.

Ik heb ook al zitten prutsen met een div binnen die content-div, maar dan loop je eigenlijk weer bij hetzelfde probleem vast namelijk dat je een hoogte moet instellen die je niet weet. En CSS kent nou eenmaal niet zoiets als (100%-100px). Zelf vind ik het nog steeds niet logisch dat 100% soms 100% van de body is en soms van het parent-element...

negative padding/margins werken ook niet icm de 100% height?

[ Voor 6% gewijzigd door Kiphaas7 op 03-12-2008 19:11 ]

woensdag 3 december 2008 19:53

Acties:

0 Henk 'm!

funkwurm

Topicstarter

Kiphaas7 schreef op woensdag 03 december 2008 @ 19:11:
[...]

negative padding/margins werken ook niet icm de 100% height?

Hoe zou ik dat moeten doen, waar zet je die margin op? Negatieve paddings zijn sowieso fout, wordt genegeerd.

woensdag 3 december 2008 19:57

Acties:

0 Henk 'm!

brtk

bij mij hier op WinXP Pro SP3 met IE7 gaat de scrollbalk niet over de header heen in je voorbeeld url...

edit : moet beter lezen, ging over quirksmode, sorry

[ Voor 22% gewijzigd door brtk op 03-12-2008 19:58 ]

woensdag 3 december 2008 20:05

Acties:

0 Henk 'm!

funkwurm

Topicstarter

Over de height:100% en dan negatieve margins. Het probleem is dat de effectieve hoogte van een div wordt opgebouwd uit:

margin-top+padding-top+height+padding-bottom+margin-bottom.

dus height:100% en een margin die zorgt dat de div de header/sidebar niet overlapt is altijd groter dan 100%.