Onderwerp: xhtml

Ik ben momenteel bezig onze website volledig xhtml1.0 strict te maken. Ben al redelijk op weg met de basis maar nu zit ik met een raar iets wat ik zo 123 niet wegkrijg.

http://www.erikkosters.nl/

Gaat om die pagina. Zoals je ziet is bijna alles goed echter het menu moet helemaal naar onder nog, dit krijg ik zo niet voor mekaar. Ook is de onderste footer niet lekker, iemand hier die mij even kan helpen dit oplossen?

Alvast bedankt.

Update: Reeds opgelost

Ben weer paar minuutjes bezig geweest echter krijg ik het niet voor mekaar in IE, de code is volledige xhtml valid en Firefox geeft hem goed weer. Internet Explorer heeft er echter meer moeite mee (versie 6.x hier).

Zie: http://www.erikkosters.nl/.

Iemand die mij kan verlossen van deze fout in IE?

Misschien dat een screenshot waarin je aangeeft wat wel zo handig is.

Bij deze, zoals je ziet bij 1 is dat niet meer centreerd zoals in Firefox wel het geval is. Verder bij nr 2 zie je dat de margin niet meer goed is. Deze is in de stylesheet wel aangegeven.

Centreren is shit in CSS en IE en Firefox hebben een verschillende kijk op marges. Je kan proberen CSS hacks te gebruiken (IE6 snapt moeilijkere CSS met childs oid niet).

Geen IE 6 gebruiken? *Microsoft hater hier*
Is dit wel te vertrouwen? Aangezien er toch nog wel vrijveel updates voor zijn?

Heb het al gefixed met onderstaande IE hack:

.menulist li a {
width:185px;
\width:185px;
w\idth:185px;
margin:0px;
padding:0.25em 0.25em 0.25em 0.25em;
display:block;
background:#EEEEEE;
}

IE heeft dus blijkbaar niet genoeg aan 1x de breedte. Probleem nr2 is dus verholpen, nr1 is er echter nog.

margin: 0 auto 0 auto;
kan ook helpen bij horizontaal centreren.

Zou je ook kunnen aangeven in welke divider? Heb zelf aantal geprobeerd maar die maakte geen verschil.

Overigens wordt de content niet goed uitgelijnd in IE.

Ik heb het zo opgelost:
body { text-align:center }
#page_wrapper { text-align:left;margin-left:auto;margin-right:auto }

Ik heb uit een ebook van sitepoint, samen met tal van anderen tips.

Als je toch gelijk met XHTML-strict bezig gaat maken kijk dan ook even hier naar: http://webrichtlijnen.overheid.nl/

Ben overgestapt naar Transitional strict is iets té strict naar mijn mening. Ik ga even kijken naar naar jou oplossing Sebastiaan Stok .

Oke menu is opgelost, nu echter nog het bovenste navigatie menu dat niet in het midden uitgelijnd wordt + de onderste margin is niet goed.. In de code zie ik niets verkeerds.

Je had het best strict kunnen laten hoor, want je probleem wordt veroorzaakt in je css.

Het probleem met je bovenste navigatie kan je oplossen door in .navbar a de float: left weg te halen. Immers wordt daardoor alles links geplaatst. Verder kan je overal die display: table ook weghalen, want ik zie daar niet echt het nut van. Zolang de <a> elementen in je menu display: inline hebben, zullen ze netjes achter elkaar verschijnen.

Verder heb je in je css wel aardig wat dubbele dingen staan. Bijvoorbeeld:

Code:

.navbar a {
	color:********;
	text-align:center;
	text-decoration:none;
	display:table;
	border:none;
	padding:3px;
	margin:3px;
	float:left;
}
.navbar a:hover {
	color:#5C5C5C;
	text-align:center;
	text-decoration:none;
	display:table;
	border:none;
	padding:3px;
	margin:3px;
	background-color:#CCCCCC;
	float:left;
}

Alle opties die in de :hover hetzelfde zijn, kan je weglaten. Dat is omdat je met ".navbar a" al voor alle <a> elementen zet, inclusief de hover, active enz.

Het navbar divje kan je ook weghalen trouwens, die heeft geen toegevoegde waarde.

Verder zou ik in plaats van

Code:

	margin-left:auto;
	margin-right:auto;

schrijven:

Code:

margin: 0 auto;

Is wat korter.

Succes!

- Dennie

Bedankt voor de tips Dennis, heb hier zeker wat aangehad. Zit echter nog met 2 problemen.

1. In IE is deze tekst underlined, wat ik dus niet wil hebben. In FF geen last van.
2. Reeds verholpen .

Hallo Erik,

Uiteraard leuk dat je probeert je website xhtml-compliant te maken, maar ik zou je 2 tips willen geven:

1. Indien je dan toch de moeite neemt om via xhtml/css je pagina vorm te geven, scheidt dan _volledig_ opmaak en content. Ik zie hier en daar nog een <b></b> opduiken en een <p align=center>. Dat zou toch niet meer mogen.

2. Semantiek: gebruik de elementen waarvoor ze bedoeld zijn:

voorbeeldje:

Code:

				<b>Navigatie</b>

				<div class="hr"><hr /></div>
				<ul class="menulist">
					<li><a href="#">Nieuws</a></li>
					<li><a href="#">Informatie</a></li>
					<li><a href="#">Apparatuur</a></li>
					<li><a href="#">Datacenter</a></li>
					<li><a href="#">Netwerk</a></li>

					<li><a href="#">Contact</a></li>	
				</ul>

- Eerst en vooral dien je een woord/tekst in bold te zetten via CSS en niet via een inline HTML element.
- Die header "Navigatie" zou je gewoon een <h3> element kunnen maken met dan een border-bottom en dan zou je heel die div-soup met nog een <hr> ertussen niet moeten gebruiken.

Heb naar je geluisterd, komt inderdaad mooier uit, zit echter enkel nog met het probleem dat in IE de tekst in het linker menu underlined is, in FF is dat niet het geval.