statisch menu bovenaan pagina

maandag 26 april 2010 09:40

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Hoi,
Ik zal nog een keer proberen hier een vraag te stellen. *dreigen hoeft niet* Voor de duidelijkheid, ik ben beginner in css en ik heb een uur gegoogled.
Wat ik wil is een menu dat bovenaan de pagina blijft staan, dat lukt met css, waarbij menu de id is van een table met 1 row:
#menu { position: fixed; }

Nu wil ik de rest van de pagina als een verticaal scrollbare div hebben, maar dat lukt me alleen maar goed als ik de hoogte in pixels opgeef:

#content { overflow-x: hidden; overflow-y: scroll; height: 600px; }

Dit levert 'bijna precies' wat ik wil, het menu blijft bovenaan, er kan gescrolld worden en er loopt niets door elkaar heen, alleen is die 600px natuurlijk niet handig.
Hoe krijg ik dit goed voor elkaar.

[ Voor 6% gewijzigd door MueR op 27-04-2010 23:50 ]

maandag 26 april 2010 09:53

Acties:

0 Henk 'm!

Room42

Steek dan wat meer tijd in je vraagstelling. Je geeft bar weinig info en wat je nou precies hebt. Laat anders een live-voorbeeld zien.

"Technological advancements don't feel fun anymore because of the motivations behind so many of them." Bron

maandag 26 april 2010 09:56

Acties:

0 Henk 'm!

Verwijderd

Ik heb geen ervaring met ontwerpen van webpagina's maar het lijkt me dat je nu een harde waarde opgeeft (die 600 pixels)
Kan je niet een relatieve waarde opgeven ipv een absolute waarde? Dan zal voor iedere resolutie eenzelfde resultaat te zien zijn.

maandag 26 april 2010 10:17

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Javascript

Wat jij opgeeft zijn 2 methodes om hetzelfde te bereiken. Je hoeft die twee niet te combineren.

Zet OF het menu bovenaan fixed en laat de rest van de pagina normaal. OF zorg voor een scrollbare div.

Persoonlijk vind ik het nogal slecht om de content-scrollbalk op een andere plek neer te zetten (de tweede methode). Dit is redelijk not-done anno 2010.

maandag 26 april 2010 10:47

Acties:

0 Henk 'm!

gvdh

Hoewel ik het persoonlijk niet zo netjes vind als een site frames wil nabootsen, heb ik wel een werkend voorbeeld kunnen maken:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            html, body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                overflow: hidden; /* voor IE 7 */
            }
            #header h1 {
                margin: 0;
            }
            #header {
                position: fixed;
                width: 100%;
                height: 40px;
                padding: 5px;
                border-bottom: 1px solid black;
            }
            #content {
                position: fixed;
                overflow-y: scroll;
                left: 0;
                right: 0;
                top: 50px; /* height + 2 * padding van #header */
                bottom: 0;
                padding: 5px;
            {
        </style>
    </head>
    <body>
        <div id="header">
            <h1>Header</h1>
        </div>
        <div id="content">
            <h2>Content</h2>
            <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
            <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
            <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
            <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
            <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
            <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
            <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
            <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
        </div>
    </body>
</html>

Dit werkt in Firefox, Chrome, Opera, Internet Explorer 7 en 8.
Vziw ondersteunt IE6 geen position:fixed en zul je daarvoor voor een andere oplossing moeten zoeken.

maandag 26 april 2010 11:26

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bedankt voor de reacties.
@vgdh Jouw oplossing is wel precies wat ik wil. Waarom is het niet 'netjes'?
Ie6 is dan nog wel een beetje een probleem want die heeft toch nog een aanzienlijk percentage gebruikers als ik het goed heb.
@Bosmonster die scrollbare div kreeg ik dus niet voor elkaar, ik kreeg de scollbalk altijd naast de hele pagina ipv alleen de div, behalve als ik de hoogte van die div in absolute pixels opgeef.
@khildin met een percentage werkt het net niet.

Edit, een fix voor ie6 is nog niet zo makkelijk zie ik, jammer vghd, het ziet er anders prima uit.
Ik gebruik ook jquery (voornamelijk voor de ajax) dus een oplossing met jquery zou ook welkom zijn. Ondertussen zoek ik verder...

Edit2: Ik heb hier http://olaf-bosch.de/wp-content/obosch/templates/fix/ iets gevonden als fix voor ie6, ik ga daar eens mee spelen.

Nog een vraag, aangezien de meeste monitoren tegenwoordig breedbeeld zijn is het dan verstandig om een menu aan de rechter of linkerkant te maken ipv boven of onder? En je kan je afvragen hoe het dan uitziet op een mobieltje ofzo, maar daar heb je sowieso wel altijd problemen denk ik?

[ Voor 41% gewijzigd door Verwijderd op 26-04-2010 12:09 ]

dinsdag 27 april 2010 12:39

Acties:

0 Henk 'm!

gvdh

Verwijderd schreef op maandag 26 april 2010 @ 11:26:
Bedankt voor de reacties.
@vgdh Jouw oplossing is wel precies wat ik wil. Waarom is het niet 'netjes'?

Of het netjes is verschilt van site tot site, en is vrij subjectief. Persoonlijk heb ik liever dat de header en de navigatie gewoon meescrollen. Als je een site hebt met veel content, waarbij veel genavigeerd wordt tussen pagina's, is het te overwegen om de tekst in kleinere stukken op te delen. Verder kan het ook handig zijn bij een langere tekst een "back to top"-link onderaan te zetten.

Nog een vraag, aangezien de meeste monitoren tegenwoordig breedbeeld zijn is het dan verstandig om een menu aan de rechter of linkerkant te maken ipv boven of onder?

Als ik op internet surf op een scherm met een hoge resolutie (meer dan +/- 1400px breed) dan is mijn browser niet gemaximaliseerd. Dit leest namelijk niet zo aangenaam op sites die de volledige breedte gebruiken (bv. Wikipedia).
Of je de menu bovenaan of links zet, hangt af van het design van je site en wat het gemakkelijkst werkt (zijn er veel of weinig items, wel of geen sub-items, ...). Rechts en onderaan lijken me een onlogische plaats voor een menu.

En je kan je afvragen hoe het dan uitziet op een mobieltje ofzo, maar daar heb je sowieso wel altijd problemen denk ik?

Dat zal je moeten uitproberen en verder uitzoeken. Met mobiele browsers heb ik niet zo veel ervaring. Ik weet wel dat er op de site van Opera een simulator is van hun mobiele browser.

dinsdag 27 april 2010 13:49

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Javascript

Verwijderd schreef op maandag 26 april 2010 @ 11:26:

@Bosmonster die scrollbare div kreeg ik dus niet voor elkaar, ik kreeg de scollbalk altijd naast de hele pagina ipv alleen de div, behalve als ik de hoogte van die div in absolute pixels opgeef.

En dat is precies wat ik bedoelde.

Als je die scrollbare div hebt, heb je die fixed header niet meer nodig, want dan scroll je in de div ipv in de pagina. Je hebt dus maar 1 van de twee oplossingen nodig.

Dat neemt niet weg dat het simuleren van frames anno 2010 eigenlijk not-done is. Er is een reden dat die dingen uit de gratie zijn. Laat mensen gewoon de pagina scrollen.

dinsdag 27 april 2010 23:11

Acties:

0 Henk 'm!

Rvanlaak

Bosmonster schreef op dinsdag 27 april 2010 @ 13:49:
[...]

Dat neemt niet weg dat het simuleren van frames anno 2010 eigenlijk not-done is. Er is een reden dat die dingen uit de gratie zijn. Laat mensen gewoon de pagina scrollen.

Ben ik het helemaal mee eens. Mensen weten ondertussen echt wel het menu van een site te vinden. Dit gaat je waarschijnlijk nog veel z-index problemen geven als je 'n uitklap menu wil maken.

Onderwerpen