menu altijd zichtbaar
Ik ben bezeg met het maken van een nieuwe website maar is het mogelijk dat je menu altijd zichtbaar is als je scrollt?
Dan zal je dat in je css aan moeten geven.
Position: none;
Geen bepaalde positie, gewoon meegaan met de flow van de pagina en eventueel aanpassingen met margin en floats.
Position: relative;
top: 0; left: 0; right: 0; en bottom: 0; wijzen precies naar de plaats waar het element in normale conditie (zie hierboven) staat. Door deze waardes te veranderen kun je de position aanpassen ten opzichte van de plek waar deze stond.
Position: absolute;
top: 0; left: 0; right: 0; en bottom: 0; verwijzen allen naar de uiteinde van het browser scherm. Door deze waardes aan te passen kun je de position ten opzichte van het scherm wijzigen.
Position: fixed;
Dit is een aparte, het is een position: absolute; die mee blijft gaan als je scrollt.
Waarom een slechte oplossing? Position: fixed; is hiervoor bedacht en heeft geen ander doel dan dit. Position: fixed; is verweg en misschien wel de enige optie en moet je zeker gebruiken als je dit wilt. Nee, dat werkt ook niet. Geloof me maar, position fixed is de enige (CSS) manier om dit voor elkaar te krijgen. Even voor de fijnproevers onder ons:
En verder:
Position: fixed; werkt zo en is hiervoor gemaakt. Waarom zou je een hele workaround met HTML, CSS en PHP gaan bedenken als het ook met 1 regeltje CSS kan? Vind het zeer vreemd en het lijkt me zeer onnodig. Ik vind het maar vreemd. Frames zijn ouderwets en moet je niet meer gebruiken, waarom dan alsnog namaken met nieuwe elementen? niet de standaard frames van html, maar dat zelf emuleren.
En ik vind dit ook zeker niet mooier. Scrollbars wegwerken heeft nog minder browser support dan position fixed.
Tevens is dit niet frames namaken... Maar is het gewoon het aanpassen van de overflow.
En CSS desk is niks anders dan een textarea waarin je code typt en een iframe met die code erin ernaast. Dus er zit geen verschil tussen hoe CSS desk iets laat zien en hoe jou site eruit ziet. Dus "doet css desk alleen niet" gaat niet op. En wat als je nu alleen die header mee wilt laten scrollen en de sidebar niet? Of andersom?
@frank, internet explorer doet moeilijk met fixed. volgens mij kun je hier beter position: relative meegeven.
@Jeroen, relative zal niks helpen. Frank heeft het wel bij het juiste eind en dat IE er moeilijk mee doet is volgens mij alleen in oude versies (IE7 ofzo) en daarnaast, als IE moeilijk doet. Jammer dan, een andere oplossing is er niet.
position: absolute dan?
Bij een position absolute blijft iets altijd op dezelde plaats staan. Maar niet in het window, dit wil zeggen dat als je scrolt het niet mee scrolt. Position fixed is echt de enige oplossing hiervoor.
toch vind ik het een slechte oplossing. je kunt toch ook divs gebruiken, en dan een overflow? vind ik veel netter
Position: none;
Geen bepaalde positie, gewoon meegaan met de flow van de pagina en eventueel aanpassingen met margin en floats.
Position: relative;
top: 0; left: 0; right: 0; en bottom: 0; wijzen precies naar de plaats waar het element in normale conditie (zie hierboven) staat. Door deze waardes te veranderen kun je de position aanpassen ten opzichte van de plek waar deze stond.
Position: absolute;
top: 0; left: 0; right: 0; en bottom: 0; verwijzen allen naar de uiteinde van het browser scherm. Door deze waardes aan te passen kun je de position ten opzichte van het scherm wijzigen.
Position: fixed;
Dit is een aparte, het is een position: absolute; die mee blijft gaan als je scrollt.
Waarom een slechte oplossing? Position: fixed; is hiervoor bedacht en heeft geen ander doel dan dit. Position: fixed; is verweg en misschien wel de enige optie en moet je zeker gebruiken als je dit wilt.
Wouter heeft hier gelijk, als je geen javascript wil aanraken zul je position: fixed; moeten gebruiken. Daarentegen zijn er ook erg leuke javascript tools die hier een oplossing voor hebben bedacht. Op die manier werken ze ook op de oude browsers ( mits javascript ondersteund/aan staat). Komt wel bij dat ik gewoon zou beginnen met position: fixed;, en er daarna eens een leuk javascript effect overheen gooien. En zo niet, dan moeten de gebruikers maar naar boven scrollen :)
toch vindt ik het persoonlijk veel netter om gewoon frames te emuleren, dan dit te doen. dat werkt tenminste overal, dit dus niet. en dat vind ik zelf heel belangrijk
Iframes moet je echt niet meer gebruiken, waarom zou je dat nu nog doen? Waarom is position: fixed nu niet net @jeroen?
Maar frames? Jij wil frames gebruiken? Dat vind ik dus erg slordig, dat is ook iets wat wordt afgeraden. Het zal wel voorkeur zijn, maar wat vindt je hier slecht aan dan? We leven in 2012 he? Dit werkt in alle nieuwe browsers, waaronder IE7. Alleen de oude IE6 meuk zal hier problemen mee krijgen en als je dan een leuke javascript oplossing bedenkt, heb je ook die gedekt. Daarnaast is er ook niet zo veel mis mee om naar boven te moeten scrollen als de pagina te lang wordt.. :)
hoho, niet frames, maar frames emuleren met html, css en php. vind ik zelf makkelijker, overzichtelijker, en een makkelijk aanpasbare manier, je kunt alles wat je wilt, en dat relatief makkelijk. verder werkt het op elke browser die divjes met een width, height en float ondersteunt. en een php versie waarmee je kunt includen. oftewel overal
Toon dan eens hoe je een menu zou maken die altijd op je scherm blijft staan met die frames. Doe dit wel zonder JavaScript a.u.b.
En verder:
Position: fixed; werkt zo en is hiervoor gemaakt. Waarom zou je een hele workaround met HTML, CSS en PHP gaan bedenken als het ook met 1 regeltje CSS kan? Vind het zeer vreemd en het lijkt me zeer onnodig.
Dan vind ik de scroll bar niet meer mooi. Dus geef mij toch maar position fixed :-).
kun je normaal gesproken verbergen. doet css desk alleen niet
En ik vind dit ook zeker niet mooier. Scrollbars wegwerken heeft nog minder browser support dan position fixed.
Tevens is dit niet frames namaken... Maar is het gewoon het aanpassen van de overflow.
En CSS desk is niks anders dan een textarea waarin je code typt en een iframe met die code erin ernaast. Dus er zit geen verschil tussen hoe CSS desk iets laat zien en hoe jou site eruit ziet. Dus "doet css desk alleen niet" gaat niet op.
bedankt voor de reactie's het is gelukt