MICHIEL
op SOLOGITAAR
op SOLOGITAAR
WEIRD:
Michiel Hautus - gitaar
Jeroen vd Werf - bas
Rik Disteli - drums
Michiel Hautus - gitaar
Jeroen vd Werf - bas
Rik Disteli - drums
Over de auteur
Over de auteur....
in CSS:
in HTML:
div#menu en div#inhoud staan binnen div#container
correctie CSS voor IE 6:
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:
Deze code werkt niet als hij op een CSS stijlblad staat, dus zet hem in het HEAD gedeelte tussen style type="text/css" haken.
Een andere tekortkoming is dat, in Internet Explorer versie 6, bij gebruik van links naar een ankerpunt onderaan een pagina, de website boven van het scherm afschuift! Dit is alleen te voorkomen door onder de desbetreffende pagina extra witruimte aan te brengen.
|
Naam: Michiel Hautus Woonplaats: Arnhem, Nederland Geboortejaar: 1970 Beroep: DTP-er van tijdschriften Hobby's & interesses: Muziek maken, motorrijden (in bezit van mooie Honda CB650 4-cilinder uit 1979), spelen met mijn kat, tv / films kijken (thrillers, comedies), wandelen, natuur, bier proeven, (boeken) lezen, prutsen aan deze website, concerten bezoeken, aktiviteiten ondernemen met aktiviteitenclub, klassieke auto's. Favoriete tv-series & films: o.a. Top Gear, Wheeler Dealers, Married with Children, Trailer Park Boys, Breaking Bad, Bottom, Flodder, Mad Max 2, 28 Days Later, Aliens, Duel, Gran Torino, Oorlogswinter, Vet Hard, Shawshank Redemption, Misery etc. Favoriete boeken: o.a. Karin Slaughter, Stephen King, J.G. Ballard - "De Torenflat", Inspecteur Carnardo (strip) etc. Favoriete bieren: o.a. Brand Pilsener, Leffe Bruin, Gulpener Pilsener, Murphy's Irish Red, Westmalle Dubbel, Duvel, Amstel Bockbier, Guinness Export Stout etc. |
---------- |
Speelt gitaar sinds: 1986 Speelt zelf gitaar in: " 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? Ik speel vooral op een B.C. Rich gitaar, het "hak"-model dat Slipknot ook gebruikt. Verder heb ik nog een versleten Hohner Flying-V, een Jappada bas, een Jantar bas en 2 accoustische gitaren waarvan eentje ook compleet versleten. |
|
---------- | Ik ben gek op klassieke auto´s. In juni 2011 heb ik een dagje in een prachtige Citroën DS uit 1971 gereden. |
Favoriete gitaristen:
Andere favoriete muzikanten:
Favoriete bands:
Favoriete bezochte concerten:
|
|
|
|
|
|
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.
Ander werk van mij is de website van Centrum Sphinx, een praktijk voor integrale kinesiologie. Deze wordt gerund door een vriendin van mij. De 10 jaar oude met frames opgebouwde website in achterhaalde "jaren '90"-vormgeving heb ik eind 2009 aangepakt met CSS, uitklapvensters en een modernere stijl. De website is qua technische opzet vergelijkbaar met die van mij.
Verder heb ik mei/juni 2010 een oude, lelijke website van Activiteitenclub Gelderland opnieuw opgezet. Strakker, mooier en overzichtelijker. Ik ben zelf lid van deze club.
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.
Ander werk van mij is de website van Centrum Sphinx, een praktijk voor integrale kinesiologie. Deze wordt gerund door een vriendin van mij. De 10 jaar oude met frames opgebouwde website in achterhaalde "jaren '90"-vormgeving heb ik eind 2009 aangepakt met CSS, uitklapvensters en een modernere stijl. De website is qua technische opzet vergelijkbaar met die van mij.
Verder heb ik mei/juni 2010 een oude, lelijke website van Activiteitenclub Gelderland opnieuw opgezet. Strakker, mooier en overzichtelijker. Ik ben zelf lid van deze club.
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
correctie CSS voor IE 6:
body, html{
height:96%;
max-height:100%;
}
#container {
position:absolute;
}
height:96%;
max-height:100%;
}
#container {
position:absolute;
}
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.
Een andere tekortkoming is dat, in Internet Explorer versie 6, bij gebruik van links naar een ankerpunt onderaan een pagina, de website boven van het scherm afschuift! Dit is alleen te voorkomen door onder de desbetreffende pagina extra witruimte aan te brengen.
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.
Let op dat deze functie niet werkt in IE6.
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.
Het enigste nadeel is dat position:fixed niet werkt in IE6 waardoor het menu gewoon meescrollt met de inhoud. Maar omdat het aantal IE6 gebruikers met de dag slinkt zal dit over een paar jaar geen punt meer zijn. Afgezien daarvan zijn er bij deze methode meerdere correcties voor IE6 nodig, om het nog ergens op te laten lijken.
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.
Let op dat deze functie niet werkt in IE6.
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.
Het enigste nadeel is dat position:fixed niet werkt in IE6 waardoor het menu gewoon meescrollt met de inhoud. Maar omdat het aantal IE6 gebruikers met de dag slinkt zal dit over een paar jaar geen punt meer zijn. Afgezien daarvan zijn er bij deze methode meerdere correcties voor IE6 nodig, om het nog ergens op te laten lijken.
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.