Michiels album top 25
Over de auteur....
|
Naam: Michiel Hautus Woonplaats: Arnhem, Nederland Geboortejaar: 1970 Beroep: Ik ben jarenlang DTP-er/vormgever geweest, maar na een korte omscholing tot CNC-operator in de metaalsector, ben ik nu werkzaam als CNC-frezer. Ik zit dus nu in de metal! ;) Hobby's & interesses: Muziek maken, tafeltennis, mijn kat, films kijken, wandelen, zwemmen, natuur, oldtimers (ik ben in het bezit van een mooie Mazda MX-5 uit 1992), Formule 1, een lekker speciaal biertje drinken, tijdschriften lezen, prutsen aan deze website, concerten bezoeken, tuinieren, schaken. Favoriete tv-series & films: autoprogramma's als Top Gear, Wheeler Dealers, Car S.O.S., Chasing Classic Cars, Fantom Works; tv-series als Dempsey and Makepeace, Outlander, Married with Children, Black Mirror, The Office, Trailer Park Boys, Breaking Bad, Bottom, Better Caul Saul, Two and a half Man (met Charlie Sheen), The Queens Gambit; films als Mad Max 2, Alien(s), Bridge of Spies, Duel, Gran Torino, Shawshank Redemption, The Devils Advocate, Taxi 3, Vet Hard, Ronin, Dawn of the Dead, The Quick and the Dead, Panic Room, Amsterdamned, Christine, Misery, In Time, Octopussy, Walk of Shame, Shaun of the Dead, Breakdown, The Fugutive, The Shining etc. Favoriete boeken: o.a. Karin Slaughter, Stephen King, J.G. Ballard - "De Torenflat", Inspecteur Carnardo (strip) etc. Favoriete bieren: o.a. Affligem Blond, Affligem Brune, Benediktiner Weissbier, La Trappe Dubbel, St. Bernardus Abt, St. Bernardus Pater, Brand Pilsener, Brand Dubbelbock, Hertog Jan Karakter, Guinness Export Stout, Rochefort 8, Hangsnor, Warsteiner Pilsnener, Brugse Zot Brune, Grolsch Winterbok etc. |
---------- |
Speelt gitaar sinds: 1986 Heeft gitaar gespeeld in o.a.: "Weird ", instrumentale band die een kruising maakt tussen speedmetal en rockabilly. Bespeelt ook: Basgitaar en af en toe een beetje drums. Heeft gitaarles gehad?: Ja, ongeveer 2,5 jaar, maar daarna veel geleerd door muziek uit te zoeken en door met anderen te spelen. En waar speel ik op? Een B.C. Rich gitaar (het "hak"-model dat Slipknot ook gebruikt), een versleten Hohner Flying-V, een Jappada bas, een Jantar bas en 2 accoustische gitaren waarvan eentje ook compleet versleten. Favoriete gitaristen: Jim Heath, Peter van Elderen, Eddie Clarke, Michael Schenker, Dave Murray, Adrian Smith, Angus Young, Chris Haskett, Jimi Hendrix, Dave Mustaine, Joe Duplantier, Pete Townshend, Eddie van Halen Bands en artiesten die ik regelmatig beluister: AC/DC, Motörhead, Peter Pan Speedrock, Annihilator, Metal Church, Gojira, Van Halen, Ozzy Osbourne, Iron Maiden, Herman Brood, Samson, Accept, Judas Priest, Thin Lizzy, UFO, MSG, Suicidal Tendencies, Pat Travers |
Ik vind klassieke auto´s erg leuk. Ik huur vaker een oldtimer om een paar uur mee rond te toeren om nou eens te ervaren hoe dat is. Meer hierover lees je op mijn oldtimerpagina.
Deze website: heb ik in elkaar geknutseld met eerst FrontPage maar dat werd al gauw Dreamweaver 2, MX (6) en later CS3 en is na veel pijn en moeite goed in alle bekende browsers en bij elke schermresolutie vanaf 1024x768 px. De website bestaat sinds 26 mei 2000 en is lange tijd opgebouwd met alleen HTML en inline-tags.
Vanaf herfst 2008 heb ik de website meer grafisch vormgegeven, gebruik makend van tabellen en frames, waarbij de website ook beter in stand bleef in andere browsers dan IE en bij andere resoluties dan 1024x768. Vanaf zomer 2009 is vrijwel alles opgebouwd met CSS, de frames zijn hier ook mee nagebootst.
Vanaf herfst 2008 heb ik de website meer grafisch vormgegeven, gebruik makend van tabellen en frames, waarbij de website ook beter in stand bleef in andere browsers dan IE en bij andere resoluties dan 1024x768. Vanaf zomer 2009 is vrijwel alles opgebouwd met CSS, de frames zijn hier ook mee nagebootst.
Opbouw van deze website: frames nagebootst met CSS
De versie mijn eigen website van sept '08 t/m juni '09 bestond uit frames (en tabellen) met een smal menu links en een brede inhoud ('content') rechts welke onafhankelijk van elkaar te scrollen waren. Het geheel werd horizontaal gecentreerd in de browser. De nadelen van frames (o.a. dat men per zoekmachine op een los frame uit kan komen, zonder menu links) had ik met foefjes op een gegeven moment wel aardig opgelost, maar omdat ik me steeds meer verdiepte in CSS, wou ik kijken of de frames-website geheel na te maken was met CSS.
Dat is na veel geexperimenteer inderdaad gelukt maar er zaten best nog 'haken en ogen' aan. Zo verdween in eerste instantie de website aan de bovenkant van het scherm wanneer je met een link naar een ankerpunt onderaan een pagina ging. Verder moest ik een foefje toepassen om te verkomen dat het menu steeds weer met het begin bovenaan in beeld stond wanneer op links werd geklikt die qua positie lager op hetzelfde menu zaten.
Hieronder heb ik de basis van de constructie uitgeschreven:
De versie mijn eigen website van sept '08 t/m juni '09 bestond uit frames (en tabellen) met een smal menu links en een brede inhoud ('content') rechts welke onafhankelijk van elkaar te scrollen waren. Het geheel werd horizontaal gecentreerd in de browser. De nadelen van frames (o.a. dat men per zoekmachine op een los frame uit kan komen, zonder menu links) had ik met foefjes op een gegeven moment wel aardig opgelost, maar omdat ik me steeds meer verdiepte in CSS, wou ik kijken of de frames-website geheel na te maken was met CSS.
Dat is na veel geexperimenteer inderdaad gelukt maar er zaten best nog 'haken en ogen' aan. Zo verdween in eerste instantie de website aan de bovenkant van het scherm wanneer je met een link naar een ankerpunt onderaan een pagina ging. Verder moest ik een foefje toepassen om te verkomen dat het menu steeds weer met het begin bovenaan in beeld stond wanneer op links werd geklikt die qua positie lager op hetzelfde menu zaten.
Hieronder heb ik de basis van de constructie uitgeschreven:
in CSS:
body, html {
overflow: hidden;
margin: 0px;
}
#container {
position:fixed;
top:0px;
width:10px;
height:100%;
z-index:1;
left: 50%;
}
#menu {
position:absolute;
top: 0px;
width:195px;
height:100%;
z-index:5;
left: -511px;
overflow-y: auto;
overflow-x: hidden;
}
#inhoud {
position:absolute;
top:0px;
width:798px;
height:100%;
z-index:3;
left: -322px;
overflow-y: auto;
overflow-x: hidden;
}
overflow: hidden;
margin: 0px;
}
#container {
position:fixed;
top:0px;
width:10px;
height:100%;
z-index:1;
left: 50%;
}
#menu {
position:absolute;
top: 0px;
width:195px;
height:100%;
z-index:5;
left: -511px;
overflow-y: auto;
overflow-x: hidden;
}
#inhoud {
position:absolute;
top:0px;
width:798px;
height:100%;
z-index:3;
left: -322px;
overflow-y: auto;
overflow-x: hidden;
}
in HTML:
div#menu en div#inhoud staan binnen div#container
Bovenstaande constructie werkt overigens pas goed vanaf een schermresolutie met een breedte van minimaal 1024 pixels. Bij een lagere resolutie verdwijnt door de negatieve absolute waarden het menu links van het beeld. Gelukkig heeft vrijwel niemand nog een resolutie van minder dan 1024x768px. Behalve bij gebruik van een mobiele telefoon of smartphone dan, maar een website als de mijne is met alle friemelige tablature gegevens per definitie `mobielonvriendelijk´.
Overigens heb ik dit later gedeeltelijk kunnen oplossen met onderstaande JavaScript code. Bij een vensterbreedte kleiner dan 980 pixels veranderen namelijk een aantal CSS instellingen zodat het menu links in beeld blijft en er een horizontale scrollbalk voor de inhoud verschijnt. Werkt wel in Firefox, Chrome, Opera en Safari maar niet in Internet Explorer:
@media screen and
(max-width: 980px) {
body, html {
overflow-x: scroll;
overflow-y:hidden;
height:100%;
width:100%; }
#container {
position:static;
left: 0px; }
#menu {
position:fixed;
left: 0px; }
#inhoud {
position:absolute;
left: 195px; }
}
(max-width: 980px) {
body, html {
overflow-x: scroll;
overflow-y:hidden;
height:100%;
width:100%; }
#container {
position:static;
left: 0px; }
#menu {
position:fixed;
left: 0px; }
#inhoud {
position:absolute;
left: 195px; }
}
Deze code werkt niet als hij op een CSS stijlblad staat, dus zet hem in het HEAD gedeelte tussen style type="text/css" haken.
Overigens zijn er ook nog een 2e en 3e methode om deze constructie met CSS te maken, d.w.z. een container die altijd gecentreerd is waarin een menu en een inhoud altijd de volledige hoogte bedekken en onfhankelijk van elkaar scrollbaar zijn:
2e methode:
De 2e werkt niet meer met absolute negatieve waarden, maar margin:auto en position:relative.
voorbeeld
in CSS:
in HTML:
div#menu en div#inhoud staan binnen div#container
De 2e methode heeft bij de meeste browsers als tekortkoming, dat bij gebruik van links naar een ankerpunt onderaan een pagina, de website boven van het scherm afschuift! Dit is alleen te voorkomen door onder elke pagina extra witruimte aan te brengen.
Bij gebruik van browser Opera zal dit echter nog voorkomen, de enige oplossing is om met de volgende hack (die alleen Opera leest) de website niet meer te centreren, maar links vast te zetten:
3e methode:
Dan de 3e methode, gebruik maken van position:fixed voor het gedeelte aan div's voor het menu.
De inhoud werkt net als methode 2 met margin:auto en position:relative , maar scrollt nu met het geheel van de pagina mee terwijl de body gewoon zijn standaardwaarde "auto" voor overflow behoudt.
voorbeeld
in CSS:
in HTML:
div#nav bevat div#nav_houder, welke op z'n beurt weer div#menu bevat, deze 3 div's worden dus direct na elkaar geopend en later in omgekeerde volgorde gesloten - div#inhoud staat hier geheel buiten
De 3e methode heeft geen van de nadelen van de 1e of 2e methode: bij een te lage schermbreedteresolutie is de hele website nog altijd bereikbaar met een horizontale scrollbalk die dan ontstaat, en het probleem met de links en laag gelegen ankerpunten komt ook niet meer voor.
Overigens kan printen met elk van de drie methodes een probleem zijn. Dit kan echter makkelijk verholpen worden door een extra CSS bestand op te nemen met i.p.v. media="screen", media="print" in de koppeling te zetten. Let er wel op dat de koppeling naar de scherm-css altijd na de print-css moet komen, in geval sommige (oude) browsers anders toch de verkeerde css voor het scherm gebruiken.
In de css voor het printen kun je met visibility:hidden; makkelijk alle onnodige layout onderdelen uitschakelen. Voor de inhoud die wel printbaar moet zijn gebruik je dan: overflow:visible en height:auto.
2e methode:
De 2e werkt niet meer met absolute negatieve waarden, maar margin:auto en position:relative.
voorbeeld
in CSS:
body,html {
height:100%;
width:99%;
overflow-y: hidden;
overflow-x: auto;
margin:0; }
#container {
height: 100%;
width: 990px;
margin-left: auto;
margin-right: auto;
position: relative;
top:0px;
overflow-y: hidden;
overflow-x: hidden;
z-index:10; }
#menu {
position:absolute;
top: 0px;
width: 190px;
height: 100%;
z-index: 20;
left: 0px;
overflow-y: auto;
overflow-x: hidden; }
#inhoud {
position:absolute;
top: 0px;
width: 800px;
height: 100%;
z-index: 20;
left: 200px;
overflow-y: auto;
overflow-x: hidden; }
height:100%;
width:99%;
overflow-y: hidden;
overflow-x: auto;
margin:0; }
#container {
height: 100%;
width: 990px;
margin-left: auto;
margin-right: auto;
position: relative;
top:0px;
overflow-y: hidden;
overflow-x: hidden;
z-index:10; }
#menu {
position:absolute;
top: 0px;
width: 190px;
height: 100%;
z-index: 20;
left: 0px;
overflow-y: auto;
overflow-x: hidden; }
#inhoud {
position:absolute;
top: 0px;
width: 800px;
height: 100%;
z-index: 20;
left: 200px;
overflow-y: auto;
overflow-x: hidden; }
in HTML:
div#menu en div#inhoud staan binnen div#container
De 2e methode heeft bij de meeste browsers als tekortkoming, dat bij gebruik van links naar een ankerpunt onderaan een pagina, de website boven van het scherm afschuift! Dit is alleen te voorkomen door onder elke pagina extra witruimte aan te brengen.
Bij gebruik van browser Opera zal dit echter nog voorkomen, de enige oplossing is om met de volgende hack (die alleen Opera leest) de website niet meer te centreren, maar links vast te zetten:
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
#container {
position: absolute;
left:0px; }
}
{
#container {
position: absolute;
left:0px; }
}
3e methode:
Dan de 3e methode, gebruik maken van position:fixed voor het gedeelte aan div's voor het menu.
De inhoud werkt net als methode 2 met margin:auto en position:relative , maar scrollt nu met het geheel van de pagina mee terwijl de body gewoon zijn standaardwaarde "auto" voor overflow behoudt.
voorbeeld
in CSS:
body, html {
height:100%;
width:100%;
margin:0; }
#nav {
position: fixed;
z-index: 10;
height: 100%;
width: 100%;
left: 0px;
top: 0px; }
#nav_houder {
height: 100%;
width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
position: relative; }
#menu {
overflow-x: hidden;
overflow-y: auto;
position: absolute;
height: 97%;
width: 200px;
left: 0px;
top: 0px; }
#inhoud {
width: 770px;
margin-right: auto;
margin-left: auto;
position: relative;
z-index: 5;
top: 0px;
padding-left: 230px; }
height:100%;
width:100%;
margin:0; }
#nav {
position: fixed;
z-index: 10;
height: 100%;
width: 100%;
left: 0px;
top: 0px; }
#nav_houder {
height: 100%;
width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
position: relative; }
#menu {
overflow-x: hidden;
overflow-y: auto;
position: absolute;
height: 97%;
width: 200px;
left: 0px;
top: 0px; }
#inhoud {
width: 770px;
margin-right: auto;
margin-left: auto;
position: relative;
z-index: 5;
top: 0px;
padding-left: 230px; }
in HTML:
div#nav bevat div#nav_houder, welke op z'n beurt weer div#menu bevat, deze 3 div's worden dus direct na elkaar geopend en later in omgekeerde volgorde gesloten - div#inhoud staat hier geheel buiten
De 3e methode heeft geen van de nadelen van de 1e of 2e methode: bij een te lage schermbreedteresolutie is de hele website nog altijd bereikbaar met een horizontale scrollbalk die dan ontstaat, en het probleem met de links en laag gelegen ankerpunten komt ook niet meer voor.
Overigens kan printen met elk van de drie methodes een probleem zijn. Dit kan echter makkelijk verholpen worden door een extra CSS bestand op te nemen met i.p.v. media="screen", media="print" in de koppeling te zetten. Let er wel op dat de koppeling naar de scherm-css altijd na de print-css moet komen, in geval sommige (oude) browsers anders toch de verkeerde css voor het scherm gebruiken.
In de css voor het printen kun je met visibility:hidden; makkelijk alle onnodige layout onderdelen uitschakelen. Voor de inhoud die wel printbaar moet zijn gebruik je dan: overflow:visible en height:auto.