Hoi jipyboy,
=====
De html
=====
5blabla5 heeft gelijk: goed naar de <div></div>'s paren kijken, en goed inspringen maakt meestal veel duidelijk.
Jouw code van reactie nr.#3 is:
HTML:
<body>
<div id="logo"></div>
<div id="aanmelden" class="border-radius"><input type="text" class="e-mail" value="Vul hier uw E-mail adres in." />
<input type="submit" class="verzenden" value="verzenden" /><div>
<div id="textbox" class="border-radius"></div>
</body>
Als ik de html-code iets anders laat inspringen dan 5blabla5 in reactie nr.#4, staat er:
HTML:
<body>
<div id="logo"></div>
<div id="aanmelden" class="border-radius">
<input type="text" class="e-mail" value="Vul hier uw E-mail adres in." />
<input type="submit" class="verzenden" value="verzenden" />
<div>
<div id="textbox" class="border-radius"></div>
</body>
Als je nu niet meteen ziet waar het (tik)foutje zit, helpt de html-validator, die als
commentaar geeft dat er twee keer:
end tag for "div" omitted,
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
In de informatie-opmerkingen van de html-validator staat er bij waar de <div>'s zijn begonnen die niet zijn afgesloten: in regel 82 en regel 85.
Dat klopt als je gaat natellen!
- De <div id="logo"> wordt afgesloten met een </div>.
- De <div id="aanmelden"> wordt nergens afgesloten met een </div>.
- De losse <div> wordt ook niet afgesloten.
- En de <div id="textbox"> wordt wel volgens de regels afgesloten met z'n </div>
Kortom, het losse <div>'je moet een </div> zijn, dan zijn beide fouten tegelijk opgelost.
Nu geeft de html-validator alleen nog twee waarschuwingen: "No Character Encoding Found!" - Dat betekent: er hoort bij een html-pagina opgegeven te worden welke "charset" (set van characters = lettertekens) gebruikt moet worden om de code te ontcijferen. Dit moet helemaal in het begin gebeurden: met een (php) header die de server er op plakt, en/of met een <meta> element waarin het staat.
Het kan opgelost worden door in de <head> toe te voegen, meteen in het begin (zodat het gebruikt kan worden voor alles wat volgt):
HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
... rest van de head-elementen ...
</head>
=====
De css
=====
Nu de fouten die de css-validator aangeeft:
deze 12 fouten. Die hebben allemaal met de border-radius te maken:
- dat is css3, terwijl de validator standaard op css2.1 test,
- daarnaast is browser-specifieke css opgenomen: -moz-border-radius, -webkit-border-radius en behavior:url(border-radius.htc).
Conclusie: hier is niets ernstigs aan de hand. In het ergste geval maakt een browser geen ronde hoekjes. Verder kan er niets in de war geschopt worden.
=====
Overig
=====
Als Doctype gebruik je Xhtml
Transitional. Dat was er in 1999 (!) voor bedoeld om toen "backwards compatible" te zijn voor oude coderingen in toen bestaande websites: zodat niet opeens websites in elkaar gingen storten. Voor nieuwe websites verdient het sindsdien verreweg de voorkeur om Xhtml
Strict te gebruiken. Dat is een veel betere standaard (met verbod van achterhaalde codes als <center> e.d.), en geeft de meeste garanties voor goede cross-browser weergave.
Verder moet eigenlijk in het begin van de code aangegeven worden in welke voertaal de tekst is (o.a. handig voor Google, en noodzakelijk voor voorlees-browsers), zowel in de html- als in de xml-notatie.
Samen worden dan de eerste regels:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>... enz.
Verder valt op dat de kop links en rechts 7px smaller is dan het onderstuk:
Dat komt omdat de <div id="aanmelden"> en de <div id="textbox"> dezelfde breedte (700px) hebben als de <div id="logo">, maar een padding hebben gekregen van 7px.
En er geldt:
een padding wordt altijd toegevoegd aan de grootte van een element.
Om ze gelijk op te laten lopen moet het dus worden:
Code:
#aanmelden {
width: 686px; /* 700px min 7px padding links min 7px padding rechts */
... enz.
}
#textbox {
width: 686px; /* 700px min 7px padding links min 7px padding rechts */
... enz.
}
Al met al is m'n handtekening ook hier van toepassing.
Met vriendelijke groet,
CSShunter
