[CSS] Top-down menu, center ipv left

[Verwijderd]

Ik zou graag voor mijn website een soortgelijk menu ontwikkelen als te zien op: http://www.hi-media.nl Op zich lukt me dit wel, maar in tegenstelling tot bovengenoemd menu zou ik graag het onderste menu willen centreren. Dus in plaats van deze structuur:



Zou ik graag het submenu als volgt positioneren:



Maar het moet dan wel binnen het kader van het submenu blijven (ul ul):



Door 'ul ul' een left:0 mee te geven blijft ie dus links uitgelijnd. Maar als ik 'm geen left meegeef, mar wel een position: relative; centreert hij zich niet, maar begint de 'ul ul li' onder de 'ul ul'.

Heeft iemand een idee?

edit:
klaar met typen

[ Voor 59% gewijzigd door Verwijderd op 23-05-2008 18:39 ]

[disjfa]

Veel plezier met je doelstelling Maar wat is precies het probleem? Heb je al wat gemaakt. Hoe heb je het gedaan. Waar loop je vast?


--edit--
Oh, je hebt wat meer gepost Je hebt wel een goped punt. Ik zou het zo snel niet weten op een mooie vrijdagavond.

[ Voor 32% gewijzigd door disjfa op 23-05-2008 18:37 ]

[Borizz]

Je kan in de ul ul (die in de html code ul li ul is hoop ik...) text-align op center zetten en dan op de LI elementen display: inline. Dus zoiets:

Cascading Stylesheet:

ul li ul {
  text-align: center;
}

ul li ul li {
  display: inline;
}

Maar dit is natuurlijk ook afhankelijk van je huidige html en css code.

[_Thanatos_]

Cascading Stylesheet:

margin: 0 auto;

Dat is de manier om een block-level element horizontaal te centreren. Die zet je dus op de UL die in het midden moet komen

[Borizz]

_Thanatos_ schreef op zaterdag 24 mei 2008 @ 13:53:

Cascading Stylesheet:

margin: 0 auto;

Dat is de manier om een block-level element horizontaal te centreren. Die zet je dus op de UL die in het midden moet komen

Dat werkt alleen als je een bepaalde breedte aan het block level element meegeeft, ik kan me heel goed voorstellen dat de breedte variabel is (afhankelijk van het aantal menu items in de UL). Een block level element is standaard 100% breed, centreren van dit element heeft dan weinig zin.

[Verwijderd]

Borizz schreef op zaterdag 24 mei 2008 @ 17:04:
[...]

Dat werkt alleen als je een bepaalde breedte aan het block level element meegeeft, ik kan me heel goed voorstellen dat de breedte variabel is (afhankelijk van het aantal menu items in de UL). Een block level element is standaard 100% breed, centreren van dit element heeft dan weinig zin.

Het aantal items in het submenu (ul ul) is inderdaad variabel. In hoeverre pakt width:auto dit op? Of wordt dan dan eveneens gezien als width:100%?

[Borizz]

Auto is de standaardwaarde voor width, dus ja dat betekend een breedte van 100% (incl. margins en paddings, excl scrollbars) voor een blocklevel element. Dit had je zelf ook eenvoudig kunnen testen of terug kunnen vinden in de CSS specificatie over de width property.

[Verwijderd]

Is er een mogelijkheid om dat block level element de waarde te geven die het ook werkelijk is?

[Borizz]

Niet met CSS, maar je zou de breedte aan kunnen passen met JavaScript. Maar een CSS only oplossing heb ik eerder al gegeven, waarom gebruik je die niet?

[Verwijderd]

Borizz schreef op maandag 26 mei 2008 @ 00:11:
Niet met CSS, maar je zou de breedte aan kunnen passen met JavaScript. Maar een CSS only oplossing heb ik eerder al gegeven, waarom gebruik je die niet?

Als ik jouw oplossing goed interpreteer centreer ik daarmee de ul ul t.o.v. de pagina, en niet t.o.v. ul li. Corrrect?

offtopic:
Borizz; mijn doelstelling is: don't fix it, if it ain't broken

[ Voor 10% gewijzigd door Verwijderd op 26-05-2008 16:39 ]

[Borizz]

Dan moet je er toch nog eens een CSS tutorial of iets dergelijks bijpakken. Ik centreer namelijk niet de ul ul, maar de tekst binnen de ul ul. Met de display property geef ik vervolgens aan dat de li elementen binnen ul ul inline elementen zijn, zodat ze op dezelfde regel getoond worden (in tegenstelling tot block level elementen).

[Verwijderd]

Borizz schreef op maandag 26 mei 2008 @ 18:56:
Dan moet je er toch nog eens een CSS tutorial of iets dergelijks bijpakken. Ik centreer namelijk niet de ul ul, maar de tekst binnen de ul ul. Met de display property geef ik vervolgens aan dat de li elementen binnen ul ul inline elementen zijn, zodat ze op dezelfde regel getoond worden (in tegenstelling tot block level elementen).

Je hebt gelijk. Het probleem waar ik tegenaan loop is echter dat ik de ul li ul niet gecentreerd krijg ten opzichte van de ul li. Want zo lang ik dat niet in orde heb, kan ik de ul li ul li wel gaan centreren ten opzichte van de ul li ul, maar zal dit uiteindelijk niet de juiste positie opleveren.

We zitten wel op de goede weg, dus ik hoopte dat je nog een ideetje had?

[Borizz]

De enige oplossing die ik hiervoor zie is via javascript de positie van je submenu aanpassen en centreren t.o.v. je parent menu. Je positioneert een html element namelijk altijd via de left, top, right en bottom properties, er is geen mogelijkheid om aan te geven waar het midden van een element zich moet bevinden. Vanuit het middelpunt en de grootte van je submenu, zal je de overige waardes moeten berekenen via javascript.

[Verwijderd]

Ik zou zeggen, check eens de bron van tweakers.net. Deze gebruiken exact hetzelfde als wat jij wilt.