[CSS] Dynamisch menu centreren

[TheNephilim]

Onderwerp van dit topic betreft een menu. Dit menu is aanpasbaar, je kunt er meerdere subpagina's aan toevoegen of juist verwijderen. Dat kan de klant overigens zelf doen, in een Wordpress backend. Maar goed, discussie over hoe je een menu als deze het beste kan centreren. Hieronder een afbeelding van een, enigszins kaalgeplukte, pagina. Heb bepaalde elementen herkenbaar gelaten om zo het geheel te overzien. Het gaat om het menu'tje onder 'Particulieren', boven het de tekst.



Mijn oplossing tot zover!

HTML:

<section class="page-header">
    
    <h1>Particulier</h1>
    
    <p>Stukje tekst...</p>
    
    <nav class="navigation sub-navigation">
        <ul>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
        </ul>
    </nav>
</section>

Cascading Stylesheet:

.page-header {
    position: relative;
    width: 100%;
    padding: 120px 0 40px;
    text-align: center;
    background-color: #999;
}

.navigation {
    display: inline-block;
    position: relative;
}

.navigation ul {
    display: inline-block;
    margin: 0 0 -65px;
    padding: 0;
    height: 40px;
    line-height: 40px;
    background-color: #ccc;
}

.navigation li {
    float: left;
    list-style: none;
}

.navigation a {
    display: block;
    padding: 0 12px;
}

Volgens velen moet dit op vele andere manieren kunnen.

jsFiddle: http://jsfiddle.net/XjqeT/

[Bosmonster]

Als de breedte vast staat kun je margin: 0 auto gebruiken. In jouw geval is een inline-block met text-align:center prima toch?

Wat is nu je vraag precies?

(overigens is de role navigation standaard op een nav-element, dat hoef je niet extra te specificeren)

[ Voor 24% gewijzigd door Bosmonster op 04-07-2013 12:57 ]

[TheNephilim]

OkkE in "De Devschuur Coffee Corner - Iteratie 3" vroeg me een topic te openen. Ik denk om meerdere manieren om dit op te lossen aan de kaak te stellen

[murphsy]

Iets totaal anders... Maar is er geen vol-wit logo voor de bovag? Dit is, euh.. (hoe zeg ik dit netjes), zonde van het verder mooie design!

[OkkE]

Ik kreeg de indruk dat je een probleem had met het oplossen van je probleem, vooral toen ik iets las over ‘dan maar JS gebruiken’. Vervolgens gingen een aantal mensen oplossingen posten zonder (volgens mij) te weten wat je precies wilde bouwen. Leek mij logischer om dan een nieuw topic te openen, waar voor jouw specifieke wensen de verschillende methodes konden worden besproken.

Uiteindelijk is denk ik de oplossing die je gekozen hebt in grote lijnen de beste, dus in dat opzicht is dit topic misschien een beetje nutteloos (mijn fout); hoewel het voor de search nog steeds erg handig kan zijn.

Wat Bosmonster al zegt, er zijn eigenlijk twee simpele oplossingen voor horizontaal centreren; dat is margin: 0 auto en de inline-block i.c.m. een parent die text-align: center heeft. De oplossing die bijv. Ellos aandraagt lijkt me voor deze situatie niet zo geschikt.

Zelf zou ik het denk nog iets tweaken, namelijk de ul alleen een min-height geven en je li ook een display:inline-block ipv float.

[TheNephilim]

murphsy schreef op donderdag 04 juli 2013 @ 13:49:
Iets totaal anders... Maar is er geen vol-wit logo voor de bovag? Dit is, euh.. (hoe zeg ik dit netjes), zonde van het verder mooie design!

Haha, ik zal het aan de ontwerper doorgeven. Een witte zou inderdaad beter staan!

OkkE schreef op donderdag 04 juli 2013 @ 13:51:
Ik kreeg de indruk dat je een probleem had met het oplossen van je probleem, vooral toen ik iets las over ‘dan maar JS gebruiken’. Vervolgens gingen een aantal mensen oplossingen posten zonder (volgens mij) te weten wat je precies wilde bouwen. Leek mij logischer om dan een nieuw topic te openen, waar voor jouw specifieke wensen de verschillende methodes konden worden besproken.

Haha, nee het was meer frustratie dat sommige dingen, zoals deze, zoveel aandacht vragen.

Uiteindelijk is denk ik de oplossing die je gekozen hebt in grote lijnen de beste, dus in dat opzicht is dit topic misschien een beetje nutteloos (mijn fout); hoewel het voor de search nog steeds erg handig kan zijn.

Nou ik heb dus maar gewoon een topic geopend. Niet erg toch, mooi voer voor de zoekmachines en daarnaast best wat mooie oplossingen en andere suggesties. Stiekem wat code laten reviewen is ook nooit weg

Wat Bosmonster al zegt, er zijn eigenlijk twee simpele oplossingen voor horizontaal centreren; dat is margin: 0 auto en de inline-block i.c.m. een parent die text-align: center heeft. De oplossing die bijv. Ellos aandraagt lijkt me voor deze situatie niet zo geschikt.

Zelf zou ik het denk nog iets tweaken, namelijk de ul alleen een min-height geven en je li ook een display:inline-block ipv float.

Thanks, ga ik even doorvoeren. Misschien gebruik ik te vaak float

Edit: Dan staat hij verticaal niet meer op de juiste positie http://jsfiddle.net/XjqeT/2/

[alienfruit]

Hebben jullie niet iets aan http://css-tricks.com/centering-in-the-unknown/ ?

[Ellos]

OkkE schreef op donderdag 04 juli 2013 @ 13:51:
Ik kreeg de indruk dat je een probleem had met het oplossen van je probleem, vooral toen ik iets las over ‘dan maar JS gebruiken’. Vervolgens gingen een aantal mensen oplossingen posten zonder (volgens mij) te weten wat je precies wilde bouwen. Leek mij logischer om dan een nieuw topic te openen, waar voor jouw specifieke wensen de verschillende methodes konden worden besproken.

Uiteindelijk is denk ik de oplossing die je gekozen hebt in grote lijnen de beste, dus in dat opzicht is dit topic misschien een beetje nutteloos (mijn fout); hoewel het voor de search nog steeds erg handig kan zijn.

Wat Bosmonster al zegt, er zijn eigenlijk twee simpele oplossingen voor horizontaal centreren; dat is margin: 0 auto en de inline-block i.c.m. een parent die text-align: center heeft. De oplossing die bijv. Ellos aandraagt lijkt me voor deze situatie niet zo geschikt.

Zelf zou ik het denk nog iets tweaken, namelijk de ul alleen een min-height geven en je li ook een display:inline-block ipv float.

Dat is hij zeker niet voor deze situatie inderdaad, dan had ik al lang al een margin: 0 auto of text-align:center gedaan.
Die oplossing van mij is leuk omdat hij een paar specifieke usecases, die niet op te lossen zijn met margin: 0 auto en text-align:center o.a. toch mogelijk maakt met css. Zonder daarvoor dus naar JS te grijpen, wat naar mijn idee niet voor dit soort dingen gebruikt hoort te worden.

[ Voor 3% gewijzigd door Ellos op 04-07-2013 14:27 ]

[TheNephilim]

alienfruit schreef op donderdag 04 juli 2013 @ 14:24:
Hebben jullie niet iets aan http://css-tricks.com/centering-in-the-unknown/ ?

Daar word ook display: inline-block; in combinatie met text-align: center; gebruikt. Dus voor het centreren op de x-as hetzelfde

[OkkE]

TheNephilim schreef op donderdag 04 juli 2013 @ 14:20:
Haha, nee het was meer frustratie dat sommige dingen, zoals deze, zoveel aandacht vragen.

Mwah, ik vind dit probleem nog wel eenvoudig op te lossen.

Nou ik heb dus maar gewoon een topic geopend. Niet erg toch, mooi voer voor de zoekmachines en daarnaast best wat mooie oplossingen en andere suggesties. Stiekem wat code laten reviewen is ook nooit weg

Niks mis met nieuw topic, vind het persoonlijk niet passen binnen de Devschuur.

Thanks, ga ik even doorvoeren. Misschien gebruik ik te vaak float

Edit: Dan staat hij verticaal niet meer op de juiste positie http://jsfiddle.net/XjqeT/2/

Ik had het eerlijk gezegd niet zelf uitgeprobeerd. Maar kijk voor de grap eens (outline: 1px solid black;) eens waar je .navigation{} staat in beide jsFiddle's. Ik zou het liefst niet vertrouwen op zo‘n scheve positionering zoals in je float-optie.

Ellos schreef op donderdag 04 juli 2013 @ 14:24:
Die oplossing van mij is leuk omdat hij een paar specifieke usecases, die niet op te lossen zijn met margin: 0 auto en text-align:center o.a. toch mogelijk maakt met css. Zonder daarvoor dus naar JS te grijpen, wat naar mijn idee niet voor dit soort dingen gebruikt hoort te worden.

Agree, het is op zich een interessante techniek.

[Bosmonster]

Ow ja er is nog een techniek die ik nog wel eens gebruik:

Cascading Stylesheet:

div {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -{element width};
   margin-top: -{element height};
}

Is ook wel weer een heel specifiek iets (je moet o.a. de breedte/hoogte weten), maar voor sommige use cases pas ik het wel toe, zoals wanneer je een absolute positioned (of fixed positioned) element wilt centreren.

[ Voor 12% gewijzigd door Bosmonster op 04-07-2013 14:39 ]

[incaz]

Ik had 'm zo gemaakt voordat ik onnadenkend mijn antwoord wegklikte:
http://jsfiddle.net/XjqeT/1/

Bosmonster: moet dat niet -0.5 * {element width} zijn?

[Bosmonster]

Ja je hebt gelijk, iets te snel getyperd!

[mbarie]

Is dit niet een hele elegante optie? Werkt misschien wel alleen in de wat recentere browsers:

http://css-tricks.com/cen...age-widthheight-elements/

[Zoefff]

mbarie schreef op donderdag 04 juli 2013 @ 18:25:
Is dit niet een hele elegante optie? Werkt misschien wel alleen in de wat recentere browsers:

http://css-tricks.com/cen...age-widthheight-elements/

Als je elegante voorbeelden geeft, centreer het geheel dan met een flexbox:

Cascading Stylesheet:

div {
    display: flex;
    justify-content: center;
}

Volgens mij is dát de meest elegante optie, zie ook de jsfiddle. Helaas is de implementatie van flexboxes nog niet zo lang beschikbaar waardoor het alleen in de meest moderne browsers werkt. Geen praktische oplossing voor het probleem dus, maar wel een kijkje in de rooskleurige toekomst

[Bosmonster]

mbarie schreef op donderdag 04 juli 2013 @ 18:25:
Is dit niet een hele elegante optie? Werkt misschien wel alleen in de wat recentere browsers:

http://css-tricks.com/cen...age-widthheight-elements/

Ah ja, das eigenlijk hetzelfde als wat ik postte, maar dan middels een transform. Scheelt dat je dan de afmetingen van je container niet hoeft te weten.

Moet je browser wel transforms ondersteunen idd natuurlijk, en vooralsnog zitten we nog vast aan IE8 in de meeste gevallen..

[phex]

Waarom zo moeilijk?

http://jsfiddle.net/LxtKw/

[Bosmonster]

Waarom lees je het topic niet?

[phex]

Omdat ik alleen de TS heb gelezen, en vervolgens JS en css transforms voorbij zie komen. Mis ik iets belangrijks? Bij deze mijn excuses dan ^^

[Bosmonster]

De centered inline-block was al direct de meest logische oplossing. Daarna ging het vooral om algemene centreer technieken

De transforms zijn interessant, doordat die een oude methodiek, die als nadeel heeft dat je de breedte moet weten van het object, kunt gebruik zonder de breedte te weten.