[XHTML] Navigatiebalk krijgt geen kleur...

[licensed]

Jeetje wat is het soms lastig om je probleem samen te vatten in 1 zin voor de titel van je post ...

Ik zit met het volgende: ik maak een website met een navigatiebalk bovenin en één aan de linker kant. Nou wil ik dit netjes in XHTML doen en maak dus gebruik van DIV's. Nou krijg ik het niet voor elkaar om de balk links helemaal één kleur te geven. Wanneer de navigatie of de content veel langer is dan de ander gaat het fout. De achtergrond van de content wordt blauw, of die van de navigatie wit.
Kijk maar eens op:

* http://www.eajg.nl/new/index.htm

Dit lijkt aardig, maar zodra er meer navigatieitems in de balk komen:

* http://www.eajg.nl/new/index_1.htm

Het gebruik van een tabel lijkt te werken:

* http://www.eajg.nl/new/index_2.htm

Maar bekijk dat maar eens in Firefox (als je dat niet al deed)

Heeft iemand ervaring met dit probleem? Ik snap niet dat dit zo lastig is, dit gebrui je toch gigantisch vaak

*edit:
Hier nog even twee linkjes naar de stylesheets:
* http://www.eajg.nl/new/main.css
* http://www.eajg.nl/new/main_2.css

[ Voor 8% gewijzigd door licensed op 12-10-2004 12:17 ]

[SuperRembo]

De makkelijkste oplossing is om een achtergrondplaatje te gebruiken.

[Genoil]

Jij wilt denk ik Faux columns.

p.s.

Nou wil ik dit netjes in XHTML doen en maak dus gebruik van DIV's

het gebruik van DIVs heeft weinig tot niets te maken met het expliciet gebruik van XHTML.

[licensed]

Genoil schreef op 12 oktober 2004 @ 12:48:het gebruik van DIVs heeft weinig tot niets te maken met het expliciet gebruik van XHTML.

Dat weet ik...

[licensed]

Genoil schreef op 12 oktober 2004 @ 12:48:
Jij wilt denk ik Faux columns.

't is een extreem ranzige oplossing, maar volgens mij kan het inderdaad niet anders. Bedankt in ieder geval!

[Woudloper]

Zo ranzig is het niet. Als ik jou was zou ik dan maar eens deze reactie van Clay eens lezen over de 'Faux Columns'. Even een kleine quote uit dat topic:

Het is een schitterende aanpak die hoogstens onbekend is, en onbekend maakt blijkbaar onbemind.

[licensed]

Woudloper schreef op 12 oktober 2004 @ 13:36:
Zo ranzig is het niet. Als ik jou was zou ik dan maar eens deze reactie van Clay eens lezen over de 'Faux Columns'. Even een kleine quote uit dat topic:

[...]

Tsja, smaken verschillen...

[licensed]

Het is inmiddels gelukt, maar nu kom ik een ander probleem tegen. In Firefox wordt de boel niet gecentreerd en verschijnen er rond de hoofdnavigatie geen witte balkjes van 4px (http://www.eajg.nl/new/index.htm).

Ik heb op tweakers een topic gelezen over het centreren van divs, maar dit werkt niet Waar komt dat door? Als ik voorbeelden bekijk werkt het wel...

[Amras]

Om je pagina te centreren kun je dit

Cascading Stylesheet:

div#align {
    background: #ffffff url('./images/background.gif') repeat-y bottom;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 750px;
}

wijzigen in

Cascading Stylesheet:

div#align {
    background: #ffffff url('./images/background.gif') repeat-y bottom;
    position: absolute;
    margin: 0 0 0 -375px;
    padding: 0;
    text-align: left;
    left: 50%;
    width: 750px;
}

Dan zou ie het in Firefox ook moeten doen.

[CrashOne]

Negatieve margins zijn niet fijn om je content te centreren, als de browser kleiner wordt dan de breedte van de div dan valt er nl een stuk buiten het scherm waar je niet meer bij kan.

code:

div#align {
    background: #ffffff url('./images/background.gif') repeat-y bottom;
    margin: 0 auto;
    padding: 0 auto;
    text-align: left;
    width: 750px;
}

Is netter om te gebruiken.

[T-MOB]

CrashOne schreef op 13 oktober 2004 @ 12:03:
Negatieve margins zijn niet fijn om je content te centreren, als de browser kleiner wordt dan de breedte van de div dan valt er nl een stuk buiten het scherm waar je niet meer bij kan.

Is netter om te gebruiken.

Eens dat het netter is om het te gebruiken, maar margin: 0 auto; werkt niet in IE < 6.
Dan zul je moeten gaan goochelen met text-align:

code:

body { text-align: center; }
#align { text-align: left; }

Maar evengoed kun je dan het probleem dat ontstaat met de negatieve margins afvangen met een min-width:

code:

body { 
min-width: 750px;
_width: 750px; /*I LoVe IE ;) */
}

[licensed]

Dank jongens, het probleem is opgelost! Hebben jullie ook een idee waarom er in Firefox boven en onder de hoofdnavigatie (Home, Nieuws, etc.) geen balkje van 4px wit zichtbaar is (in IE wel..)?

[licensed]

Heeft er niemand suggesties?
Zo ziet het er trouwens ook wel aardig uit