(div) TopMenu van div's centreren

[Verwijderd]

Ik ben voor het eerst aan het proberen een website te bouwen met behulp van DIV's en CSS.

Momenteel ben ik tot op dit punt:
http://bjorncouwenberg.nl/carnaval2009/test

Css:
http://bjorncouwenberg.nl/carnaval2009/test/CssSheet.css

Maar nu loop ik tegen het probleem dat mijn knoppen niet mooi gecentreerd staan in de div genaamd menu.
Heb diverse oplossingen van google geprobeerd. Maar de knoppen blijven links staan.. Wat doe ik fout?

[MAX3400]

code:

div{text-align:center;}

toevallig?

[Verwijderd]

Heb ik geprobeerd.. maar lijkt niet te werken... (staat overigens ook in de versie die nu online staat)

[ Voor 36% gewijzigd door Verwijderd op 28-01-2009 01:40 ]

[MAX3400]

Als ik zo je CSS doorlees, definieer je elke knop met float: left; en die zet je x aantal keer naast elkaar. Dan blijft het per saldo left, toch?

[Verwijderd]

Het gebruiken van float: left krijg ik ergens anders als oplossing om de knoppen langs elkaar te krijgen.. Als ik die weglaat komen de knoppen immers allemaal onder elkaar te staan

[MAX3400]

Ja,dat snap ik maar is het dan niet handiger om de totale breedte (780px) te delen door het aantal knoppen (6) en dan je knop-div te definieren op 780/6=130px ipv 120px?

[Verwijderd]

Ja oke .. dat klopt die oplossing hield ik al achter de hand.. Maar ik bleef me afvragen of het niet mogelijk is om een soort van Center attribute te gebruiken... Ook voor ander gebruik dan alleen dit menu

[MueR]

Overigens moet je die width:inherit van je content div halen. Paddings werken in IE anders dan in FF. Een div is block-level en automatisch 100% breedte, tenzij jij het anders zegt. Paddings, margins en whatnot zoekt de een echte browser zelf wel goed uit

[Boelie-Boelie]

MueR schreef op woensdag 28 januari 2009 @ 08:26:
Paddings werken in IE anders dan in FF.

Dat is complete onzin. Werk precies hetzelfde.

Je kunt de ul de breedte van de opgetelde breedtes van de knopjes geven en vervolgens de ul binnen de div centreren met margin: 0 auto.

[ Voor 26% gewijzigd door Boelie-Boelie op 28-01-2009 10:32 . Reden: toegevoegd: ul-stukje ]

[MueR]

De rendering is anders heur Maar aan wie van de 2 dat nou ligt?

[t-x-m]

Cascading Stylesheet:

#knop {
background: #FF0000;
color: #FFFFFF;
margin: 1px;
width: 120px;
hight: 30px;
cursor: pointer; 
display:inline;
}

#knop a  {

}

Werkt op zn minst een beetje, dan kun je daar mee verder. Je kunt (volgens mij?) block elements niet centreren!?

[ Voor 25% gewijzigd door t-x-m op 28-01-2009 10:49 ]

[Pkunk]

Probeer je menu eens een lijstje te maken en de list-items inline te displayen. Like So:

HTML:

<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Cascading Stylesheet:

.menu
{
text-align:center;
}

.menu li
{
display:inline;
}

Volgens mij moet dat wel werken.

[ Voor 9% gewijzigd door Pkunk op 28-01-2009 10:53 ]

[t-x-m]

^^ agree, nog veel beter. In dat kader, check deze site: http://css.maxdesign.com.au/index.htm, must-read voor css-menu's!

[Da Weef]

Het probleem is dat je floating divs wilt centreren en dat kan niet zonder gepruts met javascript. Als je in plaats van in divs je knoppen in list-elements stopt zoals hierboven reeds wordt gesuggereerd is er wel een workaround:

http://www.cssplay.co.uk/menus/centered.html

[Bosmonster]

MueR schreef op woensdag 28 januari 2009 @ 10:38:
De rendering is anders heur Maar aan wie van de 2 dat nou ligt?

Nou uitgaande van het feit dat je een fatsoenlijke doctype gebruikt, is het boxmodel hetzelfde in IE6+ en alle andere fatsoenlijke browsers

[Verwijderd]

Timlog schreef op woensdag 28 januari 2009 @ 10:52:
Probeer je menu eens een lijstje te maken en de list-items inline te displayen. Like So:

HTML:

<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Cascading Stylesheet:

.menu
{
text-align:center;
}

.menu li
{
display:inline;
}

Volgens mij moet dat wel werken.

Dit werkt inderdaad.. alles staat dan in het midden... Maar door de inline propertie worden mijn knoppen geen vaste breedte meer, maar afhankelijk van wat er instaat.. en dat wil ik niet...

[mcDavid]

Verwijderd schreef op woensdag 28 januari 2009 @ 12:12:
[...]


Dit werkt inderdaad.. alles staat dan in het midden... Maar door de inline propertie worden mijn knoppen geen vaste breedte meer, maar afhankelijk van wat er instaat.. en dat wil ik niet...

Als je ook een breedte defineert is dat volgens mij opgelost.
Zo niet dan maak je ze inline-block.

[Verwijderd]

Even een update.. heb even na wat test's hier de site opnieuw online gezet met een nieuwe css..

Html:
http://www.bjorncouwenberg.nl/carnaval2009/test/

Css:
http://www.bjorncouwenberg.nl/carnaval2009/test/CssSheet.css

Zoals je ziet staat het menu nu wel in het midden (alleen in IE en niet in FireFox), maar nog steeds niet naast elkaar...
Iemand?

[ Voor 4% gewijzigd door Verwijderd op 28-01-2009 16:12 ]

[Verwijderd]

Gooi er maar een slotje op .. heb alternatieve oplossing gebruikt...

[Boelie-Boelie]

Verwijderd schreef op woensdag 28 januari 2009 @ 19:57:
Gooi er maar een slotje op .. heb alternatieve oplossing gebruikt...

Op een topicslotje kunt je lang wachten, maar de ontknoping van je raadsel lijkt me hier wel gepast. Wat is die alternatieve oplossing?

[Verwijderd]

MAX3400 schreef op woensdag 28 januari 2009 @ 01:46:
Ja,dat snap ik maar is het dan niet handiger om de totale breedte (780px) te delen door het aantal knoppen (6) en dan je knop-div te definieren op 780/6=130px ipv 120px?

deze dus

[Da Weef]

Volgens de methode die ik gelinkt had kan het dus ook, en hoef je geen calculaties te doen als je de boel wilt aanpassen:

Cascading Stylesheet:

.menu {
position: relative;
left:50%;
float:left;
padding:0;
margin:0;
list-style-type:none;
background-image: url(mainback.png);
}

.menu li {
position: relative;
right:50%;
float: left;
background: #FF0000;
color: #FFFFFF;
margin: 1px;
width: 120px;
height: 27px;
cursor: pointer; 
display: block;
border: 1px solid #000000
}

.menu li a  {
width:120px;
height:100%;
padding-top:2px;
display: block;
}

Maargoed, als je huidige oplossing voldoet is dat natuurlijk ook prima...