position fixed in lage resolutie

[Frenske123]

Hoi,

Als je een layout hebt met b.v een vaste kop (position: fixed; )

zie hier gewoon ff als voorbeeld:

http://www.wickham43.net/headerfixed.php

en b.v een popup die midden op het scherm blijft staan.

Is hier een oplossing voor in een lage resolutie, doordat de divjes blijven staan komt de bezoeker niet aan info die rechtsboven in de kop van pagina staat.

 

[csshunter]

Hoi Frenske,
Als je in hun Example 2 de #header {min-width: 420px} weglaat en de hoogte van de header een beetje aanpast, schuift de titel in het midden zo nodig onder de twee floats links & rechts.

• Waar die hele DOM-boom van tussenliggende div's (#bodydiv, #sizer, #expander, #wrapper) voor nodig is, zie ik niet zo gauw; volgens mij kunnen die zonder schade vervallen.
• O, ik zie het al: dat is voor de IE6-hack bedoeld; maar IE6 doet niet meer mee, dus kan inderdaad vervallen.

Met vriendelijke groet,
CSShunter

 

[Frenske123]

Hoi CssHunter,

Dus het is niet zozeer de vaste positie maar de (vaste) breedte in px begrijp ik nu .

Daar zal dan met het maken van een website meer rekening mee moeten worden gehouden merk ik

Eens kijken of ik hier meer voorbeeld layouts van kan vinden

Groet en bedankt voor antwoordt,

Frenske

 

[csshunter]

Hoi Frenske,
Nou, het is niet puur een vaste breedte waardoor het mis kan gaan bij smalle schermen. Als je bv. een vaste paginabreedte van pak-m-beet 1024px hanteert, hoeft dat op zich niet fout te gaan. Dan komt er een horizontale scrollbar om alles ook bij lage resoluties te kunnen zien.

• Zie ook de twee voorbeelden hierboven: het content-deel is wel altijd helemaal te vinden.
• Iets anders is, of dat wel gebruiksvriendelijk is: dan moet je flink L/R heen en weel scrollen om de tekstregels te lenen. Maar alles blijft wel bereikbaar.

Het is een vaste breedte gekoppeld aan een vaste positie. Elementen met een {position: absolute} of {position: fixed} worden losgetrokken van de "normal flow" van de andere html-elementen, en dus ook van de paginabreedte. Zo kunnen ze ontsnappen aan de scrollbar van de paginabreedte in de voorbeelden.

• En vandaar kunnen ze gered worden door de container waar het fixed element in zit, géén (te grote) min-width te geven. Die container (met {position: relative} zit wel in de normal flow, en moet zich dus aanpassen aan de beschikbare schermbreedte. Als het fixed element dan geen eigen breedte opgegeven heeft gekregen, moet die binnen de container blijven > en dus ook binnen de schermbreedte.
• Heb je binnen het fixed element een ding zitten met wel een eigen breedte (bv. een header-image), dan zet je dat met {max-width:100%} (en geen opgegeven breedte en hoogte) om in een schaalbaar img, en heb je daar ook geen last van.

Met vriendelijke groet,
CSShunter