Menubalk breedtevullend CSS

[PiesDescalzos]

Hallo iedereen,

Ik heb nog even een (misschien onnozele) vraag: ik heb een menubalk gemaakt dmv een divje. Ik zou graag willen dat deze menubalk breedtevullend wordt, dus zoiets als dit:
http://www.rug.nl/corporate/index , deze loopt helemaal door van links naar rechts. Mijn menubalk zit links wel tegen de kant, maar rechts niet.. hoe kan ik dit verhelpen?

CSS:
#balk {left:-50px;
top:120px;
position:absolute;
font-family:trebuchet ms;
width:100%;}

#balk li {float: left;}
#balk li a {display: block;
background: black;
width: 250px;
text-align: center;
color: white;
padding: 4px 0;
border-left:1px solid #999999;}
#balk li a:hover {background: white;
color: black;

HTML:
<ul id="balk">
<li><a href="me.html">Home</a></li>
<li><a href="you.html">Gallerie</a></li>
<li><a href="site.html">Bestellen</a></li>
<li><a href="links.html">Aanbieding</a></li>
<li><a href="ee">Over mij</a></li>
</ul>

bvd

 

[PiesDescalzos]

Of weet iemand anders hoe je het gecentreerd krijgt, zoals op deze site :
http://www.sieradenplaza.nl/#

Ik begrijp er helemaal niks van, ik ben de hele dag hier al mee bezig en heb echt al veel verschillende code's geprobeerd !

 

[Goeroeboeroe]

Centreren of het hele venster vullen zijn twee verschillende dingen. Eerst het hele venster vullen.

Je hebt de ul 'n absolute positie gegeven en verplaatst hem vervolgens 50 px naar links. 'n ul is 'n blok-element en wordt daarom normaal genomen even breed als het venster van de browser. Dat gebeurt ook hier. Alleen plaats je hem vervolgens 50 px naar links. Dus krijg je rechts 'n gat van 50 px.
Ik vermoed dat je hem (haar?) naar links verplaatst om die lelijke bullets weg te krijgen. Dat kun je ook zo doen:

#balk {margin: 0; padding: 0; list-style-type: 0;}

De margin en padding zijn omdat verschillende browsers verschillende standaard-instellingen hebben bij 'n ul.
Als je nu de left: 50px; weghaalt bij #balk, vult hij het hele scherm. Als je rechts en links nog 'n kleine ruimte over hebt (ik kan je code niet helemaal zien), moet je bij body toevoegen:

body {margin: 0; padding: 0;}

(Ook body heeft verschillende standaard-instellingen in verschillende browsers.)
Het absoluut positioneren van de ul zou ik alleen doen als het echt nodig is. Die afstand van de bovenkant van 120 px kan misschien ook op 'n andere manier worden bereikt?

Voor het horizontaal centreren van het menu zijn er twee manieren, afhankelijk van of de ul absoluut is gepositioneerd of niet. Voor beide moet de ul 'n breedte hebben. Logisch, anders kun je 'm niet centreren, want dan vult hij het hele scherm. Ik maak de ul even 800 px breed in deze code, maar dat kun je veranderen.
Absoluut gepositioneerd: zet de ul halverwege het scherm. En plaats hem daarna weer de helft van de breedte van de ul terug naar links. Nu staat hij altijd in het midden, ongeacht de breedte van het venster.

#balk {width: 800px; position: absolute; left: 50%; margin-left: -400px;}

Als #balk niet absoluut is gepositioneerd, maak je de marge links en rechts gewoon even breed met het sleutelwoord auto:

#balk {width: 800px; margin: 0 auto;}

(Omdat voor onder en rechts niets is ingevuld, krijgen die automatisch dezelfde waarden, dus hier staat eigenlijk 0 auto 0 auto in de volgorde boven - rechts - onder - links).

Overigens is het meestal veel makkelijker en dus beter om de pagina in 'n grote div te zetten en die div te centreren. De inhoud van de div gaat dan netjes mee.

 

[PiesDescalzos]

Bedankt voor de informatie.
Ja ik weet dat het 2 verschillende dingen zijn, maar ik wil het liefst een schermvullende menubalk, maar aangezien dat niet lukte (en nog steeds niet), koos ik als alternatief een gecentreerd beeld.

Maar op de site van de rug (www.rug.nl) heb je 1 doorlopende menubalk.. de menu-items verkleuren als je er overheen gaat, en de rest van de balk, aan de rechterkant is gewoon rood, zonder dat daar menu-items in staan, en zonder dat die verkleurt. Dit zou ik ook heel graag op mijn site willen.
Ik heb al een divje gemaakt, zodat het laatste gedeelte van de menu-balk niet verkleurt, en nu ziet het er zo uit:

(html):
<ul id="balk"><div class=menubalk>
<li><a href="me.htm">Home</a></li>
<li><a href="gallerie.htm">Gallerie</a></li>
<li><a href="site.htm">Bestellen</a></li>
<li><a href="links.htm">Aanbieding</a></li>
<li><a href="over-mij.htm">Over mij</a></li></div>
<div class=stukje><li><a href=""></a></li></div>
</ul>

En CSS:


#balk {list-style: none;
padding: 0; margin:0;
font-family:trebuchet ms;
width:100%;
margin-left:-10px;}
#balk li {float: left;}
#balk li a {display: block;
background: black;
width: 150px;
text-align: center;
color: white;
padding: 4px 0;
border-left:1px solid #999999;}
#menubalk li a:hover {background: white;
color: black;}

Maar ik heb gewoon geen flauw idee hoe je zo'n doorlopende menu-balk krijgt, want ik kan wel een bepaalde width in pixels opgeven, maar elk beeld heeft weer een andere resolutie en dan is hij dus bij het ene beeld niet breedtevullend. En als ik gewoon 100% opgeef, dan ontstaan er dus gaten links, en vooral rechts. Links heb ik opgelost met margin-left: -10px

Alvast bedankt voor de hulp!

 

[Goeroeboeroe]

Dit zou moeten werken:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
		body {padding: 0; margin: 0;}
		#balk {list-style: none; padding: 0; margin:0; font-family: "trebuchet ms"; background: black; height: 33px;}
		#balk li {float: left;}
		#balk li a {display: block; background: black; width: 150px; height: 25px; text-align: center; color: white; padding: 4px 0;  border-left: 1px solid #999999;}
		#balk li a:hover {background: white; color: black; border-left: 1px solid transparent}
	</style>
</head>
<body>
	<ul id="balk">
		<li><a href="me.htm">Home</a></li>
		<li><a href="gallerie.htm">Gallerie</a></li>
		<li><a href="site.htm">Bestellen</a></li>
		<li><a href="links.htm">Aanbieding</a></li>
		<li><a href="over-mij.htm">Over mij</a></li>
		<li><a href="#">?????</a></li>
	</ul>
</body>
</html>

* 'n div mag niet in 'n ul of li staan, dus die heb ik eruit gesloopt.
* De zwarte achtergrond heb ik van de <a>'s getransplanteerd naar #balk. Als de hele #balk 'n zwarte achtergrond moet krijgen, hoort die daar, anders krijgt alleen het deel met de <a>'s 'n zwarte achtergrond.
* De margin-left: -10px bij #balk weggehaald. Die kier links wordt veroorzaakt door marge/padding bij de body. Die verschilt per browser. Dus toegevoegd margin en padding: 0 bij body.
* De breedte van 100% bij #balk is niet nodig. Dat doet 'n blok-element standaard al. Alleen zag je het niet, omdat er geen zwarte achtergrond in zat. Bovendien had #balk geen hoogte, dus ook om die reden zag je rechts van de <a>'s niets.
* De <a>'s heb ik ook 'n hoogte gegeven (25 px kun je natuurlijk veranderen). Daardoor werkt het hoveren nu over het héle blok van de <a>, en niet alleen boven de tekst. Mensen verwachten dat.
* #balk ook 'n hoogte gegeven, zodat je over de volle breedte de zwarte achtergrond ziet. Die hoogte is 25 px (hoogte van de <a>) + 2 x 4 px padding. Totaal dus 33 px. Nu is #balk even hoog als de <a>'s.
* Verkleuren bij hoveren verplaatst naar #balk li a, omdat ik die div eruit had gesloopt.
* Bij hoveren border-left doorzichtig gemaakt. Dat is net iets mooier, want bij de meest linkse <a> zag je de border links nog staan. Niet weggehaald, maar doorzichtig gemaakt, omdat anders alles 1 px naar links schuift bij hoveren door 't verdwijnen van die border links. Dit werkt niet bij IE 6, die maakt transparent zwart. Maar dat lijkt me geen probleem.

 

[PiesDescalzos]

Bedankt voor de goede uitleg! Het is min of meer gelukt.
Mijn docent koos echter liever voor een gecentreerde layout, een aangezien hij mijn site gaat becijferen, heb ik me daar maar aan gehouden.

Ik heb dus nu een gecentreerde kolom, een div, waar mijn hele site in staat. Hoe kan ik er voor zorgen dat de kolommen links en rechts dezelfde kleur krijgen, maar dat de middelste kolom wit blijft?

 

[Goeroeboeroe]

Altijd 'n beetje listig om te antwoorden zonder de code te kennen, maar in principe zou je aan <html> of <body> 'n achtergrondkleur kunnen geven. Die zie je dan overal waar de middelste kolom niet staat.
De middelste kolom, die div waar de hele pagina in staat, geef je dan als achtergrondkleur wit.
Lijkt met ook wel handig trouwens als die docent 't gaat beoordelen om daar rekening mee te houden