Dit is 'n volledig overzicht, of dat is althans de bedoeling. Sommige dingen zijn al eerder genoemd. Gaat-ie.
In de html:
Code: Selecteer alles
<a href="earth_HHF3.jpg" title="earth" class="godver">
wordt
aria-haspopup="true" zorgt dat het ook werkt op een touchscreen met Internet Explorer 10. WAI-ARIA zijn toegankelijkheidsregels voor screenreaders e.d. aria-haspopup is er daar één van: het element heeft een pop-up. Dat is hier dus het geval. Slimme oplossing van Microsoft, ze gebruiken een gestandaardiseerd al bestaand iets om :hover op een touchscreen te imiteren. Wat mij betreft beter dan de oplossing van Apple.
href="#" zorgt ervoor dat de link niet meer werkt. Als het 'n 'echte' link is, opent de afbeelding in een nieuw venster/tab als je erop klikt.
De title is weggehaald, omdat het nogal storend is en volgens mij overbodig. Als de afbeelding informatief is en niet alleen sier, kun je wel 'n alt="hier komt je omschrijving" toevoegen. Dat is ook van belang voor zoekmachines en screenreaders. Als de afbeelding eigenlijk geen informatie of zo biedt, maar alleen voor de sier is, kun je alt = "" toevoegen. Dan is voor screenreaders en zoekmachines duidelijk dat het alleen voor de sier is.
Terzijde: ik moet wel grinniken om dat 'godver', zeer herkenbaar. Maar bedenk even dat iedereen je code kan lezen. Ik heb zelf 'n aantal keren als id en zo 'klote-ie' gebruikt op m'n site, en dat laat ik lekker staan.
Als je wilt dat bij hoveren over deze afbeelding de cursor niet in 'n handje verandert (dat hoort eigenlijk alleen boven 'n link te gebeuren), moet je in de css
veranderen in
Code: Selecteer alles
a.godver:hover {background: url(earth_HHF3.jpg); cursor: default;}
Volgende:
Code: Selecteer alles
<a href="earth_M.jpg" title="Movimag -moving images-" class="muisoverlogo">
wordt
Code: Selecteer alles
<a aria-haspopup="true" href="#" class="muisoverlogo">
en
wordt
Code: Selecteer alles
a.muisoverlogo:hover {background: url(earth_M.jpg); cursor: default;}
met exact dezelfde uitleg als hierboven bij .godver
In de html:
wordt
De onclick="" is JavaScript. Het zorgt ervoor dat #main_container op iOS (iPad e.d.) reageert op een klik (feitelijk 'n aanraking, maar ik noem het vanaf nu gewoon kliks, anders krijg ik RSI). JavaScript in de html is eigenlijk om allerlei redenen hartstikke verouderd en verkeerd, maar dit JavaScript doet verder helemaal niets, wat te zien is aan ="". Dat is namelijk wat het moet doen: zalig in bed blijven liggen luieren en vooral niet actief worden.
Als je het menu opent in iOS, kan het niet meer worden gesloten, omdat het alleen kan worden gesloten als iets anders op 'n klik reageert. Nu reageert de hele pagina, behalve de footer, op 'n klik en sluit het menu dus als je buiten het menu klikt. In Android werkt dit standaard zo. Voor IE 10 op 'n touchscreen komt zo 'n andere oplossing.
Het doctype kan probleemloos worden veranderd naar
Dat is voor html5 (en later). Omdat jij al strict hebt gewerkt, is er geen enkele reden dit niet gelijk te gaan gebruiken. Bovendien móét je het gebruiken voor <video>, omdat dit anders niet goed werkt in sommige browsers.
De charset kun je zo laten, maar in html5 kun je ook volstaan met het veel simpeler
In je css staat:
Dit kun je probleemloos weghalen. Dit is een opdracht om áltijd de (lelijke) verticale scrollbalk te laten zien, ook als dat niet nodig is. Als de pagina verticaal niet past, verschijnt automatisch een scrollbalk.
In de css heb ik bij #footer_container weggehaald:
position: fixed;
bottom: 0;
De footer staat hierdoor altijd onderaan het venster, maar op lagere schermen betekent dit dat de footer soms over de onderste video komt te staan. En (vooral oudere) mobiele browsers krijgen hier 'n ongelooflijke hoestbui van en zetten die footer van de verslikking op de wildste plaatsen neer.
Nu staat de footer gewoon onderaan de pagina.
Als je nou in de css vervolgens toevoegt:
Code: Selecteer alles
@media screen and (min-height: 800px) {
#footer_container {position: fixed; bottom: 0;}
}
(Let op de dubbele { en }, een stel voor de @media-regel, een stel voor de selector zelf.)
De @media-regel zorgt ervoor, dat deze css alleen werkt bij schermen met een minimale hoogte van 800px. Daar levert die fixed footer geen problemen op.
Standaard is de footer dus niet fixed. Pas als een browser expliciet meldt dat het venster hoger dan 800 px is, wordt de footer fixed. Hiermee sluit je de simpeler smartfones uit ,want die kennen die hele @media-regel niet. En ook de mobiele browsers die de hik krijgen van fixed, want dat zijn oudere browsers en die kennen die @media-regel ook niet en negeren hem dus. Niet 100% waterdicht, maar volgens mij wel waterdicht genoeg.
IE 8 kent @media queries (zo heten hoogtematen e.d. officieel) ook niet, dus daarin scrolt de footer altijd mee. Je kunt dat weer repareren met JavaScript (goede zielen hebben gratis gemaakt wat Microsoft kennelijk niet kan), maar soms bijt dat JavaScript weer andere dingen in dit helaas nog niet uitgeroeide technische hoogstandje van Microsoft. Als je dat beslist fixed wilt hebben in IE8, moet je het maar even melden.
Uitklapmenu werkend krijgen in IE 10 op Windows 8 in een touchscreen. Zoals al eerder vermeld moet je daarvoor aria-haspopup toevoegen, overal waar iets wordt geopend met :hover.
wordt
Code: Selecteer alles
<li><a aria-haspopup="true" class="top_parent" href="#">MOVIMAG</a>
(Dit moet je vier keer doen, want er zijn vier uitklapmenu's.)
Met de muis werkt het trouwens precies zoals in alle browsers.
Dat wat het voor dit deel.