Ik weet niet zeker of dit in één keer gaat werken, want er zitten nogal wat dingen verkeerd. Mooi effect trouwens, dat oplichten, heel origineel.
De soort fouten die er in je pagina zit, kan betekenen dat je heel veel opnieuw moet gaan doen. Daarom eerst even iets algemeen: je kunt 'n site het beste maken in Firefox, Google Chrome, Safari of Opera. Als hij daar goed in werkt, werkt hij meestal ook wel (min of meer) goed in IE. Omgekeerd vaak niet dus, zoals je ziet.
Firefox vind ik verreweg het handigst omdat die 'n ongelooflijke hoeveelheid uitbreidingen voor het maken van sites heeft.
Verder moet je heel vaak controleren in verschillende browsers en vooral je pagina heel erg vaak (echt heel erg vaak) door de validator halen op
http://validator.w3.org/
Die validator had gelijk 'n enorme gil geslaakt vanwege 'n fout, en dan had je 'm gelijk kunnen verbeteren. Mogelijk kan die fout nu betekenen dat er straks niets meer past.
Voor css bestaat er trouwens ook 'n validator
http://jigsaw.w3.org/css-validator/
* Algemene tip: gebruik in css alleen kleine letters. Er is geen standaard voor, sommige browsers kunnen verschil maken tussen hoofd- en kleine letters en andere niet. (Background zie ik staan in je code hier).
* En nog een: je schrijft de map Image met 'n hoofdletter. Beter is alleen kleine letters te gebruiken. Op Windows is er geen verschil, op de meeste servers wel, en dit is 'n eeuwige bron van fouten.
* Je hebt je style voor het doctype. Dat mag niet. De style moet binnen de <head> staan, dus na <head> en voor </head>. Omdat er iets voor het doctype staat, schiet Internet Explorer 7 in de zogenaamde quirks mode, waardoor het in die browser werkt. Ook IE 8 doet dat, dus ook in die browser werkt het.
Alleen: het werkt, maar het hoort niet te werken. Het werkt dus omdat die 'quirks mode' allerlei dingen fout doet, tegen de standaard in. Dat stamt nog uit de tijd van de browser-oorlog, waarin verschillende makers expres dingen verkeerd deden, zodat het niet bij de concurrent werkte.
* <style> moet zijn: <style type="text/cs">
* Voor ik het vergeet: 'n doorzichtige png werkt niet in IE 6. Dus daar moet je iets anders voor doen, of even op internet zoeken naar 'pngfix'. Dat is JavaScript om het werkend te krijgen in IE 6. Nu zie je alleen 'n groot wit vlak in IE 6 en 't hoveren zie je ook niet.
* Als je style binnen de <head> staat, gaat het doctype werken. Dat wordt nu genegeerd. Dat betekent o.a. dat allerlei maten totaal anders worden berekend. Het kan dus zijn dat je de hele lay-out opnieuw moet uitmeten. Toch is dit de enige manier, want zonder doctype krijg je gegarandeerd enorme verschillen tussen de verschillende browsers. Vandaar die validator: die ziet gelijk dat er iets voor het doctype staat en weigert gewoon verder nog iets te doen, dus je merkt die fout gelijk op, en niet pas na heel veel werk.
* Je hebt 'n strict doctype. Dat betekent dat 'n hele reeks tags zoals <center> niet gebruikt mogen worden. Je hebt twee keuzen:
1) Je gaat die dingen verwijderen. Maar dat is behoorlijk wat werk, want eigenlijk moet je ook die tabel dan weghalen en het op 'n andere manier gaan maken. Voordeel is dat dit minder werk is om te onderhouden en klaar is voor de toekomst. Het is ook veel beter toegankelijk voor bijvoorbeeld blinden, maar ook voor zoekmachines, want 'n zoekmachine is te vergelijken met 'n blinde.
2) Je gebruikt 'n ander doctype waarbij je wel <center> en zo mag gebruiken. De keuze is aan jou. Als je voor 1 kiest, kun je hier natuurlijk hulp krijgen.
Het andere doctype is
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
* Je knop is 'n <img>. Wat er bij hover moet komen is 'n background-image. Als het goed wordt uitgevoerd, blijft de <img> gewoon staan bij hoveren en zie je dus de background-image niet. De naam zegt het al: 'n background-image is 'n achtergrond en komt dus achter de inhoud (hier de <img) te staan. Oftewel: alle browsers doen het goed, behalve IE 7/8.
* Je moet de <img> veranderen in een background-image, en dan die backgroud-image vervangen bij hoveren:
HTML:
<a class="info" href="informatie.php" title="Meer informatie"></a>
Omdat er nu geen <img> meer staat is de title heel belangrijk. Anders zien blinden en zoekmachines helemaal geen tekst meer, want die hebben niets aan 'n background-image.
Bijbehorende css:
Code:
a.info {display: block; width: 202px; height: 71px; background: url(image/info.png);}
De border="0" kan vervallen.
Om 'n achtergrondplaatje te kunnen gebruiken, moet de <a> als blok-element worden weergegeven. Vandaar de display: block;. Dan kun je er breedte en hoogte aan geven. Dat moet, want 'n background-image vult alleen maar waar hij in staat.
Tweede stukje van de css:
Code:
a.info:hover {background: url(image/infohover.png);)
repeat, scroll, enz. kunnen allemaal vervallen.
Als je geluk hebt verandert er niets of heel weinig met 'n doctype, maar dat moet je maar even uitproberen.
Er kan trouwens veel meer verbeterd worden, zoals alle css naar 1 apart bestand, maar als je dat wilt moet je 't maar even laten weten.
