[CSS] Menubalk altijd in het midden

[Verwijderd]

Ik ben bezig met een website en zit met een klein probleempje. Ik heb een menubalk gemaakt middels CSS. Het is een horizontale menubalk die eigenlijk niet mag resizen als het browser venster kleiner wordt gemaakt. Dit gaat ook gelden voor de hele website, maar ik kan hier niet uitkomen. Als je kijkt op een website als: http://www.colorschemer.com/ en dan het browser venster verkleint kun je zien wat ik graag wil bereiken. Het is dus de bedoeling dat er niks wordt geresized, maar dat alles in het midden blijft ongeacht de resolutie of de grootte van het browser scherm.

[Arethusa]

Kun je ons relevantie html en css tonen met wat je al geprobeerd hebt en waar het op mis gaat?

[Matias]

Ik neem aan dat je de menubalk een width hebt gegeven

[Verwijderd]

Ik ben mezelf CSS aan het leren, dus waar het op mis gaat, zou ik niet weten. Dit is de CSS die het menu regelt:

code:

#navigation
{
    font-family: verdana, serif;
    font-variant: small-caps;
    font-size: 100%;
    margin: 100px 247px 0px 207px; /*margin: 100px 19.55% 0% 19.55%;*/  
    list-style: none;
}
#navigation li
{   
    text-align: center;
    width: 25%;
    float: left;
    display: inline;
}
a
{
    text-decoration: none;
}
#navigation a
{
    background: #E2A55C url(../images/nav_bg.gif);
    padding: 5px 0px 3px 0px;
    height: 22px;
    display: block;
    text-decoration: none;
}
#navigation a:link
{
    color: white;
}

#navigation a:visited
{
    color: white;
}
#navigation a:hover
{
    text-decoration: underline overline;
}

De html code is gewoon een [ul]. als het browser venster gewoon gemaximaliseerd is ziet het er op mijn resolutie goed uit. Andere resoluties en een kleiner browser venster zorgen ervoor dat het menu zichzelf verplaatst en niet meer mooi uitgelijnd is met de achtergrond. Ik denk zelf dat het te maken heeft met fixed positie opgeven, maar ik kom er echt niet uit.

Ik heb even wat screenshots gemaakt om te tonen wat ik bedoel:

Volledig scherm op mijn native resolutie:


Scherm kleiner gemaakt op mijn native resolutie (doet hetzelfde als resolutie verkleinen):

[ Voor 13% gewijzigd door Verwijderd op 19-01-2007 12:39 ]

[cverkooyen]

Je moet een width in px toevoegen.

[Verwijderd]

cverkooyen schreef op vrijdag 19 januari 2007 @ 12:39:
Je moet een width in px toevoegen.

Waar moet ik dit dan neerzetten ?

[Verwijderd]

Dat zijn wel erg kleine plaatjes. Je gebruikt overigens een nogal aparte manier om het menu in het midden te krijgen.

De CSS van http://www.colorschemer.com/ vrij logisch
Ze hebben een container en zetten deze in het midden met margin: 0 auto; vervolgens kan je in de container het menu op de juiste plek zetten

Heb je niet iets waar we de pagina gewoon kunnen bekijken??

[ Voor 9% gewijzigd door Verwijderd op 19-01-2007 12:54 ]

[Verwijderd]

Verwijderd schreef op vrijdag 19 januari 2007 @ 12:52:
Dat zijn wel erg kleine plaatjes. Je gebruikt overigens een nogal aparte manier om het menu in het midden te krijgen.

De CSS van http://www.colorschemer.com/ vrij logisch
Ze hebben een container en zetten deze in het midden met margin: 0 auto; vervolgens kan je in de container het menu op de juiste plek zetten

Heb je niet iets waar we de pagina gewoon kunnen bekijken??

Omdat ik het nog aan het leren ben is het voor mij nog niet zo logische allemaal. Wat is er niet goed aan de manier waarop ik het menu in het midden zet?
Die plaatjes zijn inderdaad erg klein, maar geven wel aan dat wanneer ik het scherm verklein, de rechter en linkerkant van het menu niet meer netjes uitgelijnt is met de achtergrond afbeelding.

[Verwijderd]

Verwijderd schreef op vrijdag 19 januari 2007 @ 13:01:
[...]
Omdat ik het nog aan het leren ben is het voor mij nog niet zo logische allemaal. Wat is er niet goed aan de manier waarop ik het menu in het midden zet?
Die plaatjes zijn inderdaad erg klein, maar geven wel aan dat wanneer ik het scherm verklein, de rechter en linkerkant van het menu niet meer netjes uitgelijnt is met de achtergrond afbeelding.

Het volgende gaat niet goed:
"margin: 100px 247px 0px 207px;"
Dit betekent dat het menu 247px van rechterkant staat en 207px van de linkerkant
Als je de pagina verkleint dan blijft de browser deze afstanden behouden en wordt het menu fijn gedrukt. Als je echt het menu in het midden wilt hebben zou je hem de "margin: 0 auto" moeten geven. Maar dit is niet de goede opbouw van je site (IMO)


Eigenlijk is het vrij makkelijk

Als je naar deze simpele site kijkt:
http://www.dierenwereld.org/

en de css:
http://www.dierenwereld.org/style.css

Dan zie je dat het menu in de container staat. De container kan je vervolgens verplaatsen naar het midden. Op deze site staat hij links. Door de "margin-left: 105px" te vervangen door "margin: 0 auto" wordt de site naar het midden verplaatst. (Werkt alleen in IE6 (IE7 weet ik niet) met doctype strict)

[ Voor 19% gewijzigd door Verwijderd op 19-01-2007 13:22 ]

[Verwijderd]

De site naar het midden verplaatsen begrijp ik, maar dan blijft het menu nog steeds niet uitgelijnt met de achtergrond ongeacht de resolutie of venstergrootte. Valt toch redelijk tegen dat CSS vind ik.

[Verwijderd]

Verwijderd schreef op vrijdag 19 januari 2007 @ 13:22:
De site naar het midden verplaatsen begrijp ik, maar dan blijft het menu nog steeds niet uitgelijnt met de achtergrond ongeacht de resolutie of venstergrootte. Valt toch redelijk tegen dat CSS vind ik.

Heb je de site niet online staan? Dat zou veel schelen.

[Verwijderd]

Verwijderd schreef op vrijdag 19 januari 2007 @ 13:23:
[...]


Heb je de site niet online staan? Dat zou veel schelen.

http://62.131.38.101/website/

[Verwijderd]

je menu staat in het midden van het wit omdat je margin: 0 auto;
De div heeft geen vaste waarde, dat doe je namelijk met marges. Als je div nou ook een vaste waarde geeft, net zo groot als het menu, dan zal het menu in het midden blijven.

Bij colorschemer.com gebruiken ze ook een vaste waarde van de site (waarchijnlijk net iets minder dan 800 px breed).

edit:
Even ter verduidelijking, want ik snap zelf niet eens wat ik getypt heb
zo heb ik het gedaan: http://qubicz.rebyc.nl/jekaa2/
De div is gecentreerd, en is 740px breed.
Het menu zit weer in die div en heeft een breedte van 100%.

Wat ik me nu bedenk, je kan dus ook je lijst en breedte geven van 100%.
Aangezien deze IN de div zit neemt hij de juiste breede aan.

Snappie?

[ Voor 36% gewijzigd door Verwijderd op 19-01-2007 14:02 ]

[Verwijderd]

Verwijderd schreef op vrijdag 19 januari 2007 @ 13:53:
je menu staat in het midden van het wit omdat je margin: 0 auto;
De div heeft geen vaste waarde, dat doe je namelijk met marges. Als je div nou ook een vaste waarde geeft, net zo groot als het menu, dan zal het menu in het midden blijven.

Bij colorschemer.com gebruiken ze ook een vaste waarde van de site (waarchijnlijk net iets minder dan 800 px breed).

edit:
Even ter verduidelijking, want ik snap zelf niet eens wat ik getypt heb
zo heb ik het gedaan: http://qubicz.rebyc.nl/jekaa2/
De div is gecentreerd, en is 740px breed.
Het menu zit weer in die div en heeft een breedte van 100%.

Wat ik me nu bedenk, je kan dus ook je lijst en breedte geven van 100%.
Aangezien deze IN de div zit neemt hij de juiste breede aan.

Snappie?

Na jouw hulp ben ik tot zo ver gekomen: http://62.131.38.101/website/ Ik snap echt niet wat ik fout doe. Die border is van de div.

dit is de css:

code:

body
{
    font-family: arial, sans-serif;
    font-size: 100%;
    color: #444444;
    margin: 0;
    padding: 0;
}

#container
{       
    border-style: solid;
    background: url(../images/header_bg.gif) repeat-x;
    position: relative;
    margin: 0px auto;
    width: 770px;
}

/* ---- NAVIGATION ---- */
#navigation
{
    font-family: verdana, serif;
    font-variant: small-caps;
    font-size: 100%;
    margin-top: 100px;
    width: 100%;
}
#navigation li
{   
    width: 25%;
    text-align: center;
    float: left;
    background: #E2A55C url(../images/nav_bg.gif) repeat-x;
    list-style: none;
}
a
{
    text-decoration: none;
}

#navigation a
{
    padding: 5px 0px 3px 0px;
    height: 22px;
    display: block;
    text-decoration: none;
}
#navigation a:link
{
    color: white;
}

#navigation a:visited
{
    color: white;
}
#navigation a:hover
{
    text-decoration: underline overline;
}

[ Voor 30% gewijzigd door Verwijderd op 19-01-2007 15:18 ]

[Verwijderd]

ik snap het wel ..

je gebruikt een lijst (ul) maar je geeft de lijst geen eigen waardes:

Cascading Stylesheet:

ul{
 margin: 0;
}

dat zal wel werken, want ul heeft een standaard margin. Ik weet niet op hoeveel die ligt, maar dat zijn iets van 20 pixels dus dat kan wel kloppen!

[Verwijderd]

Verwijderd schreef op vrijdag 19 januari 2007 @ 15:20:
ik snap het wel ..

je gebruikt een lijst (ul) maar je geeft de lijst geen eigen waardes:

Cascading Stylesheet:

ul{
 margin: 0;
}

dat zal wel werken, want ul heeft een standaard margin. Ik weet niet op hoeveel die ligt, maar dat zijn iets van 20 pixels dus dat kan wel kloppen!

Bedankt!, nu werkt het wel, tenminste als ik

code:

#navigation ul 
{
    margin: 0;
}

doe. Als ik de ul los doe, dan is de balk niet breed genoeg.

[Verwijderd]

ja, maar dat bedoelde ik ook heh
als je

Cascading Stylesheet:

ul{
margin: 0;
}

doet, past hij het op alle lijsten toe, dat is natuurlijk ook weer niet de bedoeling.
Succes er mee verder

[Verwijderd]

Verwijderd schreef op vrijdag 19 januari 2007 @ 15:45:
ja, maar dat bedoelde ik ook heh
als je

Cascading Stylesheet:

ul{
margin: 0;
}

doet, past hij het op alle lijsten toe, dat is natuurlijk ook weer niet de bedoeling.
Succes er mee verder

Gaat wel lukken, bedankt voor je hulp (en die van de rest die hier heeft gepost) !