Hoi Bas,
De 3 errors: alle 3 (1x "border" en 2x "align") zijn verboden eigenschappen in html Strict (vanaf 1999). Reden: dit zijn opmaak-eigenschappen, die niet in de html thuishoren, maar in het stylesheet. Bv. in de html:
HTML:
<img class="noBorder" src="images/..." width="..." height="..." alt="...">
<p class="right">Tekst rechts uitgelijnd in de regel.</p>
met dan in de css:
Code:
.noBorder {
border: 0;
}
.right {
text-align: right;
}
Nog wat tips:
De naam
Eigenlijk is niet "Idem Dito" de merknaam, maar "Duo Idem Dito": dat is ook de site-naam die in het geheugen van de bezoeker gebrand moet worden. Er zijn ook heel andere Idem Dito's op het web, zonder het "Duo" met dezelfde naam: zie
Google, en via het zoekwoord "
Duo Idem Dito" zit je meteen op de eerste hit.
Vandaar zou ik ook het "Duo" zeker in de <yitle>, de header, de description en de koppen opnemen.
Tekst- en background-kleur
Nu is de zijkant van het scherm lichtgekleurd en de achtergrond van de te lezen tekst donkerder. Dat trekt de aandacht naar de zijkant i.p.v. naar het midden. Ik zou het precies andersom doen. Daarbij komt dat het contrast tussen de tekst en de tekst-achtergrond veel te laag is, zeker voor mensen met wat minder goede ogen en kleurenblinden. Alleen hele grote koppen kunnen met deze kleurcombinatie, gewone tekst niet (linker-afbeelding). Met een paar tinten lichter heb je er geen last van (rechter-afbeelding).
Hover-contrast
Hiervoor geldt hetzelfde: ook dat zou ik een beetje opkrikken.
Letterformaat
Kan iets groter voor prettige leesbaarheid. Niet in px opgeven maar in em: dan is ook in Internet Explorer mogelijk om de tekst groter te maken (via menu: Beeld > tekengrootte), zonder dat meteen op de hele pagina ingezoomd hoeft te worden (waardoor de bezoeker een nare links-rechts scrollbar moet gaan gebruiken).
Alinea-afstand
Deze zijn er nu ingezet met
<br>'s of met lege
<p> </p>'s. Die zijn niet nodig, als je de alinea-afstand met css definieert: dan gaat het allemaal vanzelf. Bv.:
Code:
p {
margin: 1em 0;
padding: 0;
}
Boven en onder een alinea komt zo een afstand van 1em (ong. een regel afstand, die groter wordt als de letters groter zijn). Vanwege de "collapsing margins" (samenvallende marges) is de afstand tussen twee <p>'s niet 2em (de onderste margin van de bovenste, en de bovenste margin van de onderste), maar slechts 1em. Dat gaat dus altijd vanzelf goed.
Weg met de javascript-rollovers!
Dreamweaver weet er altijd een hele zooi javascript in te gooien om rollovers te maken bij knoppen. Ook dat is eigenlijk zwaar verouderd, en kan veel mooier met css-hovers geregeld worden. Dat scheelt ook enorm in de hoeveelheid en overzichtelijkheid van de html.
Er staat nu:
HTML:
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){
d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];
}
}
}
function MM_findObj(n, d) { //v4.01
var p,i,x;
if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n);
return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){
document.MM_sr[j++]=x;
if(!x.oSrc) x.oSrc=x.src;
x.src=a[i+2];
}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('afbeeldingen/site/home_over.gif','afbeeldingen/site/biografie_over.gif','afbeeldingen/site/fotos_over.gif','afbeeldingen/site/agenda_over.gif','afbeeldingen/site/media_over.gif','afbeeldingen/site/contact_over.gif','afbeeldingen/site/gastenboek_over.gif')">
<div id="container">
<div id="header">
<img src="afbeeldingen/site/header_top.gif" width="770" height="179"
alt="Idem Dito"><br><a
href="index.php" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Home','','afbeeldingen/site/home_over.gif',1)"><img
src="afbeeldingen/site/home.gif" alt="Home" name="Home" width="107"
height="43" border="0"></a><a
href="biografie.php" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Biografie','','afbeeldingen/site/biografie_over.gif',1)"><img
src="afbeeldingen/site/biografie.gif" alt="Biografie" name="Biografie" width="119"
height="43" border="0"></a><a
href="fotos.php" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Foto','','afbeeldingen/site/fotos_over.gif',1)"><img
src="afbeeldingen/site/fotos.gif" alt="Foto's" name="Foto" width="79"
height="43" border="0"></a><a
href="agenda.php" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Agenda','','afbeeldingen/site/agenda_over.gif',1)"><img
src="afbeeldingen/site/agenda.gif" alt="Agenda" name="Agenda" width="97"
height="43" border="0"></a><a
href="media.php" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Media','','afbeeldingen/site/media_over.gif',1)"><img
src="afbeeldingen/site/media.gif" alt="Media" name="Media" width="106"
height="43" border="0"></a><a
href="contact.php" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Contact','','afbeeldingen/site/contact_over.gif',1)"><img
src="afbeeldingen/site/contact.gif" alt="Contact" name="Contact" width="108"
height="43" border="0"></a><a
href="gastenboek" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Gastenboek','','afbeeldingen/site/gastenboek_over.gif',1)"><img
src="afbeeldingen/site/gastenboek.gif" alt="Gastenboek" name="Gastenboek" width="154"
height="43" border="0"></a><br>
<img src="afbeeldingen/site/header_bottom.gif" width="770" height="20"
alt="Idem Dito">
</div>
Brrr, wat een html-vervuiling!
Deze hele bubs kan vervangen worden door:
HTML:
<body class="home"><!-- voor elke pagina de id-naam van hieronder gebruiken -->
<div id="header">
<h1>Duo Idem Dito</h1>
<ul>
<li id="home"><a href="index.php" title="Home"><span>Home</span></a></li>
<li id="biografie"><a href="biografie.php" title="Biografie"><span>Biografie</span></a></li>
<li id="fotos"><a href="fotos.php" title="Foto's"><span>Foto's</span></a></li>
<li id="agenda"><a href="agenda.php" title="Agenda"><span>Agenda</span></a></li>
<li id="media"><a href="media.php" title="Media"><span>Media</span></a></li>
<li id="contact"><a href="contact.php" title="Contact"><span>Contact</span></a></li>
<li id="gastenboek"><a href="gastenboek.php" title="Gastenboek"><span>Gastenboek</span></a></li>
</ul>
</div>
Dat is toch heel wat minder en duidelijker?
Hiertegenover staat dat wat extra css nodig is, maar al met al is het hele stylesheet van deze pagina nog steeds maar 4,2kB (was: 3kB). En het stylesheet wordt door de bezoekers-pc maar 1 keer gedownload, en is dan voor alle pagina's beschikbaar, die nu voor de vervolgpagina's een minder zware html-download hoeven te hebben.
Van 16 images naar één!
Voordeel van de css-hovers is ook, dat de hover-afbeeldingen als achtergrond-afbeeldingen ingeladen worden, en met de background-positie op de goede plaats geschoven kunnen worden. Daarmee kunnen alle menu-images en hun hover-varianten uit de html verdwijnen (de "normale toestand" is gewoon de achtergrond van het hele rijtje tegelijk). De menu-links zijn nu "doorzichtige <a>'s" geworden. Bij een hover krijgt de link van de hover wel een achtergrond: de hover-achtergrond, die nu vóór de algemene achtergrond komt te staan.
Dit schept ook de mogelijkheid om een "css-sprite" te maken: één afbeelding, waarin ook alle hover-toestanden van alle items zijn opgenomen:
Hierdoor hoeft er ook niet gepreload te worden: zodra de header binnen is, is al het andere ook binnen! Dus geen header + 7 menu-onderdelen + 7 hover-varianten + 1 header-onderstuk, maar één stuks image.
Verder is gebruik gemaakt van de "
woeste css-truc" van het php-site-tutorial om de actuele pagina automatisch in het menu te laten oplichten.
Resultaat
Het resultaat van het bovenstaande is dit voorbeeld:
Hierin zit de css nog in de <head> van de pagina (dit was de knutselpagina).
Met gescheiden stylesheet:
(In beide tests zijn de bestanden voor de lightbox niet aangeknoopt, want voor de home-pagina niet nodig)
Met vriendelijke groet,
CSShunter
_________
PS: Door de menu-images als achtergrond-afbeeldingen te gebruiken, vervalt nu ook het opschuifprobleem: er is geen
img {vertical-align: top;} meer nodig.
tja, die code is een stukje korter 
) de huidige site helemaal vergelijken met die van jou en compleet aanpassen hierop!
