Uitlijnen van navigatie

donderdag 7 juni 2012 01:52

Acties:

0 Henk 'm!

Topicstarter

Heb de eer om dit schitterende ontwerp naar HTML/CSS code te vertalen. Normaal is dat een fluitje van een cent, maar deze menubalk bezorgt me wat kopzorgen.

De inhoud van de site is 990px breed en horizontaal gecentreerd. Dit menu is rechts uitgelijnd maar de menu items mogen niet 'buiten' het gebied van de inhoud komen, die 990px dus. De items moeten echter wel zover mogelijk rechts staan (wat mij betreft gaat het item 'Partners' helemaal tegen de rand aan). Afijn, de afbeelding is duidelijk genoeg.

De unordered list zou eigenlijk een right padding van %browser-width% - 990px mee moeten krijgen, als ik me niet vergis. Maar goed, dergelijke variabelen kun je niet gebruiken, tenzij je voor een JS oplossing gaat. Heb allerlei gedachten de revue laten passeren, veel dingen uitgeprobeerd die niet het gewenste resultaat geven, kom er gewoon even niet uit.

Er moet toch wel iets te bedenken zijn waarbij je gebruik maakt van louter HTML en CSS, met fatsoenlijke semantiek zonder allerlei 'overbodige' extra elementen? Ik kan er even niet opkomen, zou het dus zeer op prijs stellen als iemand me in de juiste richting kan helpen.

Dit is het ontwerp:

Afbeeldingslocatie: https://dl.dropbox.com/u/5493141/menu_small.jpg

(klikbaar)

donderdag 7 juni 2012 01:54

Acties:

0 Henk 'm!

alex3305

Een float right in een main div? Of absoluut gepositioneerd met de right property op 0px?

donderdag 7 juni 2012 01:56

Acties:

0 Henk 'm!

mcdronkz

Topicstarter

alex3305 schreef op donderdag 07 juni 2012 @ 01:54:
Een float right in een main div? Of absoluut gepositioneerd met de right property op 0px?

Hoe ga ik er dan voor zorgen dat die menu items niet buiten die gecentreerde 990px komen?

donderdag 7 juni 2012 02:15

Acties:

0 Henk 'm!

Z-Dragon

Het lijkt me dat je het best af bent met het splitsen van de menubalk in het gedeelte dat binnen de "inhoud" valt en de rest die erbuiten valt. De enige kunst is dan ervoor te zorgen dat die netjes aansluiten, maar als je de HTML en CSS simpel houdt, moet dat goed te doen zijn. Voor andere oplossingen moet je bijvoorbeeld aannames doen over m.b.t. de ruimte die de menu-items in zullen nemen en/of is de kans groter dat verschillende browsers er elk wat anders van bakken.

[ Voor 4% gewijzigd door Z-Dragon op 07-06-2012 02:24 ]

^ Wat hij zegt.

donderdag 7 juni 2012 08:53

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Ik zou het denk ik (simpel) oplossen door 'vals te spelen' met een background-image* die het menu rechts buiten de 990px nabootst.

Even snel: http://jsfiddle.net/okke/7cqDE/

* De image 1500 x $hoogte_menu maken; eerste helft transparant, tweede helft kleur van menu. Die centreren. Done.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

donderdag 7 juni 2012 14:56

Acties:

0 Henk 'm!

alex3305

mcdronkz schreef op donderdag 07 juni 2012 @ 01:56:
[...]

Hoe ga ik er dan voor zorgen dat die menu items niet buiten die gecentreerde 990px komen?

Een float right binnen een div van 990px? Zoiets als een container dus.

donderdag 7 juni 2012 17:15

Acties:

0 Henk 'm!

Z-Dragon

Of probeer dit eens; werkt hier in alle browsers goed:

code:

<html>
    <head>
        <link rel=stylesheet href="style.css" type="text/css" media=screen>
        <title>Demo</title>
    </head>
    <body>
        <div id="container">
            <div id="header"></div>
            <div id="menu">
                <div class="right"></div>
                <div class="left">
                    Item 1 - Item 2 - Item 3
                </div>
            </div>

        </div>
    </body>
</html>

code:

body {
    padding: 0px;
    margin: 0px;
}

#container {
    width: 100%;
    text-align: center;
    background: #8080ff;
    overflow: hidden;
}

#header {
    width: 990px;
    height: 200px;
    background-color: #4040ff;
    margin: 0 auto;
}

#menu {
    margin-right: -495px;
    float: right;
    overflow: auto;
    height: 30px;
    width: 100%;
    margin-top: -130px;
    display: inline-block;
}

#menu .left {
    width: auto;
    height: 30px;
    background: white;
    float: right;
}

#menu .right {
    width: 50%;
    height: 30px;
    background: white;
    float: right;
}

^ Wat hij zegt.

donderdag 7 juni 2012 17:39

Acties:

0 Henk 'm!

Barryvdh

Daar heb je dus jsFiddle voor he

donderdag 7 juni 2012 17:42

Acties:

0 Henk 'm!

Z-Dragon

Het vreemde is dat het juist daarin niet goed wordt weergegeven.

^ Wat hij zegt.

donderdag 7 juni 2012 21:47

Acties:

0 Henk 'm!

Barryvdh

Bij mij wel? http://jsfiddle.net/bkkTE/show/

donderdag 7 juni 2012 21:52

Acties:

0 Henk 'm!

Z-Dragon

Hmm, in de "ontwerpmodus" lukte dat bij mij niet. Maar goed, dan bij dezen ook live te zien.

^ Wat hij zegt.

vrijdag 8 juni 2012 20:23

Acties:

0 Henk 'm!

Z-Dragon

TS vindt het allemaal wel best?

^ Wat hij zegt.

zondag 10 juni 2012 14:22

Acties:

0 Henk 'm!

mcdronkz

Topicstarter

Z-Dragon schreef op vrijdag 08 juni 2012 @ 20:23:
TS vindt het allemaal wel best?

Maak je maar geen zorgen, ben er een weekendje op uit geweest.

Ben jullie erg dankbaar voor alle aangedragen oplossingen! Zal morgen eens e.e.a. implementeren, laat jullie het uiteraard weten als het gelukt is.

vrijdag 6 juli 2012 03:16

Acties:

0 Henk 'm!

Z-Dragon

^ Wat hij zegt.

vrijdag 6 juli 2012 11:19

Acties:

0 Henk 'm!

TheNephilim

Wtfuzzle

Hier heb ik ook vreselijk mee lopen worstelen! Uiteindelijk een oplossing gevonden in (ongeveer) de onderstaande structuur. De footer zal vast helemaal naar beneden moeten, dus ook als er minder content is, helemaal onderaan. Hiervoor zijn wat truukjes, in mijn voorbeeld niet meegenomen.

Hopelijk heb je er wat aan! ^^

HTML:

<div id="header-wrapper">
    <div id="header">
        // header
    </div>
</div>

<div id="navigation-wrapper">
    <div id="navigation">
        // navigation
    </div>
</div>

<div id="content-wrapper">
    <div id="content">
        // content
    </div>
</div>

<div id="footer-wrapper">
    <div id="footer">
        // footer
    </div>
</div>

Cascading Stylesheet:

#header-wrapper {
    width: 100%;
}

    #header {
        width: 990px;
        margin: 0 auto;
    }
    
#navigation-wrapper {
    width: 100%;
    background: blue; /* Hier de background voor hele breedte */
}

    #navigation {
        float: right;
    }
    
#content-wrapper {
    width: 100%;
}

    #content {
        width: 990px;
        margin: 0 auto;
    }
    
#footer-wrapper {
    width: 100%;
    background: black; /* Hier de background voor hele breedte */
}

    #foote {
        width: 990px;
        margin: 0 auto;
    }

Edit: Zo te zien heeft de TS zelf al lange tijd niet gereageerd...

Maar misschien hebben andere mensen met hetzelfde probleem er wat aan.

[ Voor 6% gewijzigd door TheNephilim op 06-07-2012 11:22 ]

Onderwerpen