Hello I'm new to html and css and tried to display a images and some text. The idea was to get the text next to the image and that works. However the text starts at the bottom of the image not the top. Can some set it so that it starts at the top ?
this is the code i use in css:
.images{
float: left;
margin: 5px;
}
this is my html code:
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/main.css" />
<link rel="stylesheet" href="../css/contact.css" />
</head>
<header>
<div id="logo">
<h1>Baby kleding online</h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Kleding</li>
<li><a class="inuse" href="../html/contact.html"id="contactnav">Contact</a> </li>
<li>Vragen</li>
</ul>
</div>
</header>
<body id = "contact">
<div id="page">
<div class="content">
<h2>Contact</h2>
<images>
<img src="../images/logo.PNG">
Het bedrijf 'Baby kleding online' wordt in 1953 opgericht door een dynamisch Belgisch ondernemersechtpaar. De eerste winkel wordt geopend op de Groenplaats in Antwerpen. Hier vind je de eerste kleding voor Pasgeboorene, baby's, peuters en kleuters.
In het begin gebeurt de productie op de verdieping in een confectieatelier waar ook alle nieuwe modellen ontwikkeld worden.
Wat later worden er nog winkels geopend. Het echtpaar omringt zich al heel snel met medewerkers.
Het kleine confectieatelier groeit uit tot een groot plateau waarop verschillende modeontwerpsters werken.
Langzaam aan komen er nieuwe winkels over heel België.
Het merk gaat vervolgens over de grens: er worden filialen in Luxemburg en Athene geopend. Het bedrijf blijft internationaal uitbreiden.
Vandaag heeft het Belgische merk al een hele weg afgelegd met bijna 300 winkels in de wereld. Baby kleding online wil het leven mooier en nog makkelijker maken voor de mama’s en hun jonge kinderen, met een assortiment gaande van knuffels, relaxen, flessenwarmers tot luiertafels, meubilair en zwangerschaps- en kinderkleding.
</images>
<br>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.nl/maps?f=q&source=s_q&hl=nl&geocode=&q=KGD+Groenplaats,+Antwerpen,+Belgi%C3%AB&aq=&sll=51.219125,4.40313&sspn=0.002967,0.008165&ie=UTF8&hq=KGD&hnear=Groenplaats,+2000+Antwerpen,+Belgi%C3%AB&ll=51.218201,4.400925&spn=0.006295,0.006295&t=h&output=embed"></iframe><br /><small>Grotere kaart weergeven</small>
<br>
</div>
</div>
</body>
</html>
Thanks in advance !
There's alot of errors in your code, first your <body> tag should be right after </head>, get rid of the <images> tag (its not a HTML tag).
I updated your code and it should work how you want it to. (I dont really know where you want image to appear though).
Check this out
You should write in your css :
images img{float:left;margin:5px}
that should fix it for you.
the .images{float:left} refers to the images element and not to the items inside it + you have a mistake as you should write images{float:left} ( without the . )
the code you wrote is actually creating a hole new class called images, and you're not using it anywhere.
<div>
<p style="float: left;"><img src="../images/logo.PNG"></p>
<p>Het bedrijf 'Baby kleding online' wordt in 1953 opgericht door een dynamisch Belgisch ondernemersechtpaar. De eerste winkel wordt geopend op de Groenplaats in Antwerpen. Hier vind je de eerste kleding voor Pasgeboorene, baby's, peuters en kleuters.
In het begin gebeurt de productie op de verdieping in een confectieatelier waar ook alle nieuwe modellen ontwikkeld worden.
Wat later worden er nog winkels geopend. Het echtpaar omringt zich al heel snel met medewerkers.
Het kleine confectieatelier groeit uit tot een groot plateau waarop verschillende modeontwerpsters werken.
Langzaam aan komen er nieuwe winkels over heel België.
Het merk gaat vervolgens over de grens: er worden filialen in Luxemburg en Athene geopend. Het bedrijf blijft internationaal uitbreiden.
Vandaag heeft het Belgische merk al een hele weg afgelegd met bijna 300 winkels in de wereld. Baby kleding online wil het leven mooier en nog makkelijker maken voor de mama's en hun jonge kinderen, met een assortiment gaande van knuffels, relaxen, flessenwarmers tot luiertafels, meubilair en zwangerschaps- en kinderkleding.</p>
</div>
Like this!
Related
I'm pretty new to website development and currently still running a course..
We have this assignment and there is just one thing where I can't wrap my mind around (pun intended).
In the "problem" image, the image is in a correct position, but the text alignment is off..
The text should be as shown in the "solution" image
#article {
width: 650px;
min-height: 280px;
margin: 20px;
}
#article p {
font-size: .8em;
line-height: 1.6em;
}
#win {
position: relative;
left: 160px;
top: 40px;
float: right;
}
<body>
<div id="article">
<a href="mailto:brent.claes97#hotmail.com?subject=GRATIS HUISKAMER CONCERT&body=Ik wil graag kans maken op het winnen van het GRATIS huiskamerconcert.">
<img id="win" src="img/gratis.png" alt="test"/>
</a>
<h1>de spikes & de spikids</h1>
<p>
Dit is de officiële Spikes-site (dus: de enige echte)! Hier vindt u alle
informatie en nog véél méér onzin over de knotsgekke bands de Spikes en de
Spikids. Volg ons op
Facebook. De
foto's die wij van jou schieten op onze optredens – vind je voortaan op
facebook. Op onze eigenste
<a
href="https://www.youtube.com/channel/UCTUYz6ynn0M-vHxUXJM15NA"
target="_blank"
>YouTube</a
>
SPIKES TV kom je alvast in de stemming. Véél kijkplezier!
</p>
<h1>De Spikes anno 2015</h1>
<p>
De Spikes hebben zichzelf microscopisch onder de loep genomen. Er is gewikt,
gewogen en het orakel heeft beslist! Het jarenlange succesvolle
Spikes-concept heeft z’n houdbaarheidsdatum bereikt. Het tijdperk van de
“spottende parodieën en persiflages” is voorgoed voorbij. Het muzikaal
voornemen is om “het muzikaal OORgasme” tot méérvoudige hoogtes te brengen
in 2015 – en tegelijkertijd toch “dé allerleukste coverband uit België” te
blijven.
</p>
</div>
I've been struggling with this for a while now, a solution would help me out a LOT! :)
Thanks in advance for everyone who answers this!
PROBLEM_IMAGE
SOLUTION_IMAGE
Try applying a max-width to your paragraph or image. In your css you can add:
article p {
max-width:70%;
}
or
win {
max-width:30%;
}
and play around with the percentages
Add a couple of <div>s into your <article>, then use display:flex;:
*{
box-sizing:border-box;
}
article{
display:flex;
}
<article id='article'>
<div>
<h1>de spikes & de spikids</h1>
<p>
Dit is de officiële Spikes-site (dus: de enige echte)!
Hier vindt u alle informatie en nog véél méér onzin
over de knotsgekke bands de Spikes en de Spikids.
Volg ons op
<a href='https://www.facebook.com/despikes' target='_blank'>Facebook.</a>
De foto's die wij van jou schieten op onze optredens
– vind je voortaan op facebook. Op onze eigenste
<a href='https://www.youtube.com/channel/UCTUYz6ynn0M-vHxUXJM15NA' target='_blank'>YouTube</a>
SPIKES TV kom je alvast in de stemming. Véél
kijkplezier!
</p>
<h1>De Spikes anno 2015</h1>
<p>
De Spikes hebben zichzelf microscopisch onder de loep
genomen. Er is gewikt, gewogen en het orakel heeft
beslist! Het jarenlange succesvolle Spikes-concept
heeft z’n houdbaarheidsdatum bereikt. Het tijdperk
van de “spottende parodieën en persiflages” is
voorgoed voorbij. Het muzikaal voornemen is om “het
muzikaal OORgasme” tot méérvoudige hoogtes te brengen
in 2015 – en tegelijkertijd toch “dé allerleukste
coverband uit België” te blijven.
</p>
</div>
<div>
<a href='mailto:brent.claes97#hotmail.com?subject=GRATIS HUISKAMER CONCERT&body=Ik wil graag kans maken op het winnen van het GRATIS huiskamerconcert.'><img id='win' src='img/gratis.png' alt='test' /></a>
</div>
</article>
Note that your image was a relative path so you just see the alt, which is test in this case.
Just add to your CSS code
img {
float: right;
}
For more info and examples
The problem is that only the margin is transforming not the background color of the header, footer...
I am wishing to change the colour of the header & footer as well, but am having issues doing so.
I've looked up a lot on google, but I haven't found a solution for my problem.
screenshot: Screenshot
html code: HTML Code
css code: CSS Code
* {
background-color: #009cab;
color: #000;
}
body {
margin: auto;
max-width: 880px;
background-color: #fff;
color: #000;
padding: 25px;
border: 5px solid #000;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
background-image: url(../afb/boven.png);
background-repeat: no-repeat;
background-position: bottom right;
}
h1 {
font-size: 60px;
background-color: #000;
color: #fff;
text-transform: uppercase;
text-align: center;
}
p {
text-align: justify;
}
img {
border-color: #fff;
}
figure {
padding-top: 20px;
background-color: #009cab;
color: #fff;
width: 450px;
text-align: center;
margin: auto;
border: 5px solid #ccc;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Thomas Morus</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/CSS_Deel_2_Oefening_3_basis.css">
<link rel="stylesheet" href="css/CSS_Deel_2_Oefening_3_printer.css" media="print">
<link rel="stylesheet" href="css/CSS_Deel_2_Oefening_3_grootscherm.css" media="screen and (min-width:700px)">
</head>
<body>
<header>
<h1>Thomas Morus</h1>
<nav>
<h2 class="cursief">Navigatie</h2>
<ul>
<li>Leven</li>
<li>Werken</li>
<li>Zalig</li>
<li>Scholen</li>
</ul>
</nav>
</header>
<article>
<h2>De mens Thomas More</h2>
<p>Thomas More was een Engels renaissance-humanist, jurist, filosoof en staatsman. Hij werd beroemd door zijn boek Utopia (1516), waarin hij het politieke systeem van een ideale niet-bestaande eilandstaat beschrijft. De beschrijving van Utopia vertoont overeenkomsten met een socialistische heilstaat. More gebruikte dit boek om zich af te zetten tegen het economische en politieke beleid van Engeland. Hij werd in 1935 door paus Pius XI heilig verklaard en wordt gevierd op 22 juni.</p>
<figure><img src="afb/thomasmore.jpg" alt="Schilderij Thomas More">
<figcaption><span class="cursief vet">Afbeelding 1:</span> Thomas More</figcaption>
</figure>
<section>
<h3 id="leven"> Leven</h3>
<p>More werd geboren op 7 februari 1478 in een Londens burgergezin. Zijn vader was rechter, zijn moeder stierf waarschijnlijk toen More jong was. Als tiener werd hij page van John Morton, de Lord Chancellor en aartsbisschop van Canterbury. More genoot daar een goede opvoeding en kwam in contact met een bredere cultuur. Na zijn verblijf bij John Morton ging More naar Oxford, waar hij van 1492 tot 1494 artes (schone letteren) studeerde. Na twee jaar werd hij door zijn vader teruggeroepen naar Londen om er advocaat te worden.</p>
<p>Tussen 1494 en 1501 studeerde More dan ook rechten en trad hij toe tot de kringen van Engelse humanisten zoals John Holt, John Colet en William Grocyn. Hij ontwikkelde zich tot een veelzijdig humanist en bestudeerde de bijbel in zijn oorspronkelijke taal. Daarvoor onderzocht hij werken van de kerkvaders Hiëronymus en Augustinus. Daarnaast werd More ook onderwezen over de brieven van Paulus en studeerde hij Grieks bij William Grocyn. In 1499 ontmoette hij dan Erasmus, volgens More was dat een scharnierpunt in zijn leven.</p>
<p>In 1504 werd More lid van het Engelse Lagerhuis. Erasmus verbleef vaak bij More thuis en schreef daar in 1509 de aan More opgedragen Lof der zotheid. Ook voerden More en Erasmus onderling een uitgebreide correspondentie. In 1510 werd More rechter en kort daarna undersheriff van Londen. In 1511 hertrouwde hij met Alice Middleton.</p>
<p>Als gezant van koning Hendrik VIII van Engeland verbleef hij in 1515 in Brugge en bezocht ook Brussel, Mechelen en Antwerpen. In 1518 werd hij lid van de Privy Council en secretaris van de koning. In 1521 werd hij in de adelstand verheven (sir Thomas More) en benoemd tot onderschatbewaarder. Hij leidde verschillende diplomatieke missies. In 1529 volgde hij Thomas Wolsey op als lord chancellor en bekleedde deze post tot 1532. More werd zo een vooraanstaand politicus, niet alleen in Engeland, maar ook in de rest van Europa. Daarnaast was hij een beroemd humanist en geleerde, en stond hij bekend als een wijs en fijnzinnig mens.</p>
</section>
<section>
<h3 id="werken">Werken</h3>
<p>Naast jurist en staatsman was Thomas More ook wetenschapper en schrijver. Hij schreef zowel in het Engels als in het Latijn. Naast zijn beroemde werk Utopia, schreef hij ook gedichten, religieuze polemieken, brieven en een geschiedkundig werk.</p>
</section>
<section>
<h3 id="zalig">Zalig- en heiligverklaring</h3>
<p>In 1886 werd More zalig verklaard door paus Leo XIII. Zijn heiligverklaring vond plaats op 19 mei 1935 (samen met die van John Fisher), 400 jaar na zijn executie. Zijn feestdag werd vastgelegd op 9 juli. Na het Tweede Vaticaans Concilie werd deze datum verplaatst naar 22 juni, maar in de buitengewone vorm van de Romeinse ritus geldt nog steeds 9 juli als feestdag. 22 juni is eveneens de feestdag van Sint-John Fisher, de enige bisschop die tijdens de Engelse reformatie loyaal aan de paus bleef. Sint-Thomas More is de beschermheilige van staatslieden en politici.[3] In 1980 voegde de Anglicaanse Kerk More en Fisher toe aan de lijst van heiligen en helden van de christelijke Kerk met feestdag op 6 juli (zijn sterfdag).</p>
</section>
<section>
<h3 id="scholen">Scholen die naar hem genoemd zijn</h3>
<p> In het Verenigd Koninkrijk, de Verenigde Staten, Canada en Zuid-Afrika dragen heel wat basisscholen en colleges de naam van Thomas More.</p>
<p>Sinds 11 juli 2012 vormen in Vlaanderen de voormalige <span class="vet">Katholieke Hogeschool Kempen, Lessius Antwerpen en Lessius Mechelen</span>, waaronder het De Nayer-instituut in Sint-Katelijne-Waver, de geïntegreerde hogeschool Thomas More. De hoofdzetel bevindt zich in Mechelen.</p>
<figure>
<img src="afb/campusgeel.jpg" alt="Thomas More Geel">
<figcaption><span class="cursief vet">Afbeelding 2:</span> Campus Geel</figcaption>
</figure>
<p>Per 1 januari 2014 is de Pabo Thomas More te Rotterdam, los van de Hogeschool Leiden, verdergegaan als zelfstandige hogeschool onder de naam Thomas More Hogeschool. De wetswijziging die nodig was voor deze ‘defusie’ werd op 17 oktober 2013 aangenomen in de Tweede Kamer en op 3 december 2013 goedgekeurd door de Eerste Kamer.</p>
<p>Het huidige Markland College in Oudenbosch, gemeente Halderberge, heette van 1960 tot 2004 Thomas More College.</p>
<p>In 1958 opende in Den Haag het Thomas More College zijn deuren. Na een aantal fusies ontstond het Terra College, dat van naam veranderde na de moord op docent Van Wieren door een leerling, en uiteindelijk is opgegaan in de Scholengroep Den Haag Zuid West onder de naam van De Haagse VMBO Economie.</p>
</section>
</article>
<footer>
<p>Deze tekst werd schaamteloos overgenomen van Wikipedia voor educatieve doeleinden</p>
<p>Naar de bovenkant van de pagina.</p>
</footer>
</body></html>
After setting the background color of body here:
* {
background-color: #009cab;
color: #000;
}
You are immediately overwriting it here:
body {
...
background-color: #fff;
...
}
Remove that body{background-color} line to fix the issue.
Assuming that you only want the box your content is in to be colored, you need to put it in a wrapper <div>.
You cannot put border-radius and background-color on a <body> tag like that and expect it to work. To see what I mean check out this pen.
If you want to change the white to green then use this CSS:
body {
background-color: #009cab;
}
Otherwise please explain what color you want to change to what color. Or show a screenshot of how it is supposed to look.
The page I am working on shows four tabs. I have two questions:
Question 1: When viewing page with Explorer, the selected tab (via CSS focus) shows a black background. However, when viewing the page with Edge, this does not seem to work. What do I need to change?
Question 2: Initially (with Explorer) the pre-selected tab (which is the first tab) does not show this black background. This black background only appears after clicking on one of the tabs but not after reloading the page. What changes do I need to have the pre-selected tab show the black background already immediately after page reload?
Please find the related code below
<style>
#tab1, #tab2, #tab3, #tab4 {
float: left;
padding: 5px 10px 5px 10px;
background: #B00098;
color: #FFFFFF;
margin: 0px 5px 0px 5px;
}
#tab1:hover, #tab2:hover, #tab3:hover, #tab4:hover {
background: #E800C9;
}
#tab1:focus, #tab2:focus, #tab3:focus, #tab4:focus {
background: #333333;
}
#tab1Content, #tab2Content, #tab3Content, #tab4Content {
width: 100%;
height: 500px;
padding: 20px;
border: 1px solid #B00098;
}
#tab1Content {
display: block;
}
#tab2Content, #tab3Content, #tab4Content {
display: none;
}
#tab2Content, #tab3Content, #tab4Content {
display: none;
}
.tops {
vertical-align: top;
}
.text {
text-align: justify;
padding-right: 10px;
width: 80%
}
img {
padding-right: 5px;
margin-top: -20px;
}
</style>
<script>
function selectTab(tabIndex) {
//Hide All Tabs
document.getElementById('tab1Content').style.display="none";
document.getElementById('tab2Content').style.display="none";
document.getElementById('tab3Content').style.display="none";
document.getElementById('tab4Content').style.display="none";
//Show the Selected Tab
document.getElementById('tab' + tabIndex + 'Content').style.display="block";
}
</script>
<div id="tab1" onClick="JavaScript:selectTab(1);">Boek 1</div>
<div id="tab2" onClick="JavaScript:selectTab(2);">Boek 2</div>
<div id="tab3" onClick="JavaScript:selectTab(3);">Boek 3</div>
<div id="tab4" onClick="JavaScript:selectTab(4);">Boek 4</div>
<br/>
<div id="tab1Content">
<table><tr><td class="text">
<b>Identiteit – Paul Verhaeghe</b><br>
Maatschappelijke veranderingen hebben gezorgd voor een veranderd ik-gevoel. Paul Verhaeghe onderzoekt de effecten van dertig jaar neoliberalisme, vrijemarktwerking, privatisering en de relatie tussen de maakbare samenleving en onze identiteit. Wie wij zijn wordt zoals altijd bepaald door de context waarin wij leven. Die context bepaalt op dit moment: Wie geen succes heeft zal ziek zijn.<br><br>
De dwang tot succes en geluk blijkt een keerzijde te hebben: het leidt tot verlies aan zelfbesef, tot desoriëntatie en vertwijfeling. De mens is eenzamer dan ooit. De liefde is moeilijk te bereiken en betekenisvol leven is diepgaand problematisch geworden. Vanuit zijn klinische ervaring als psychotherapeut laat Verhaeghe zien hoezeer de veranderde maatschappij doorwerkt in de hedendaagse individuele psychische problemen. Mensen komen met andere psychische klachten bij de psychiater dan voorheen.<br><br>
<b>Over de auteur</b><br>
Paul Verhaeghe (geb. 5 november 1955) is van opleiding klinisch psycholoog, van vorming psychoanalyticus. Zijn eerste doctoraat (1985) handelde over hysterie, zijn tweede (1992) over psychodiagnostiek. Hij werkt als gewoon hoogleraar aan de universiteit van Gent. Sedert 2000 gaat zijn belangstelling vooral naar de invloed van maatschappelijke veranderingen op psychologische en psychiatrische moeilijkheden.
</td>
<td class="tops">
<img src="http://www.alumnei.nl/images/boekenactie_2017/boek_1.jpg" style="float: left; width: 120%; ">
</td></table>
</div>
<div id="tab2Content">
<table><tr><td class="text">
<b>Get your guts, je instinct als kompas – Hilde Bolt</b><br>
Iemand met Guts is een persoon met lef, met ballen. Maar heeft lef te maken met de darmen ('gut' = 'darm'), met onze buik? Een heleboel. Ons buikgebied bevat veel meer wijsheid dan we denken. Guts heeft een dubbele betekenis: de signalen uit het buikgebied zijn het instrument, het kompas van waaruit je kunt leven. En Guts is de kracht die je nodig hebt om hiernaar te handelen. Het leven kan mooi, maar ook vol risico's en soms wreed zijn. We kunnen niet altijd kiezen wat onze weg kruist. Toch is het vaak mogelijk om lichter, speelser, creatiever en eenvoudiger met het leven om te gaan.<br><br>
Get your Guts is een wake-up call, een herinnering aan je eigen oorsprong. De wijsheid van je lichaam, je buikgebied geeft je de mogelijkheid om oeroude instinctieve en verborgen kennis weer tot leven te brengen. Get your Guts is een boek voor mensen die zelf guts willen ontwikkelen, maar ook een boek dat iedere therapeut, coach of hulpverlener gelezen moet hebben.
<br><br>
<b>Over de auteur</b><br>
Hilde Bolt werkt als zelfstandig gevestigd coach, counselor, trainer en psychotherapeut. Ze heeft zich bijgeschoold in oosterse en westerse vormen van lichaamsgericht werken. Tijdens de trainingen creëert ze een veilige, creativiteit bevorderende sfeer waarin veel ‘op maat’ geëxperimenteerd kan worden zodat een ieder op een eigen manier het optimale rendement uit de training kan halen.
</td>
<td class="tops">
<img src="http://www.alumnei.nl/images/boekenactie_2017/boek_2.jpg" style="float: left; width: 120%; ">
</td></table>
</div>
<div id="tab3Content">
<table><tr><td class="text">
<b>Zin kun je maken - Ilse Vooren en Merlijn Koch</b><br>
Vanaf nu is zingeving begrijpelijk en hanteerbaar. Zin kun je maken benadert zingeving als een vermogen, waarbinnen vaardigheden en competenties te ontwikkelen zijn. We hebben meer ruimte dan ooit om stil te staan bij de betekenis van onszelf en ons bestaan. Zingeving speelt in onze diepste lagen en vragen en werkt door in het alledaagse leven. Wanneer en hoe ervaar je zin? Dit boek maakt helder hoe zingevingsprocessen werken en wat de functie van zingeving is.<br><br>
Zingeving hanteerbaar maken is belangrijk om richting te geven aan leven en werk. Voor coaches, leidinggevenden en andere professionals is praktische kennis van zingeving tegenwoordig essentieel. Het gesprek kunnen voeren op het niveau van betekenis is onderdeel van het nieuwe organiseren, leidinggeven en de zelfsturing van professionals.
Dit boek geeft concrete handvatten om processen van zingeving te begeleiden, individueel en in organisaties. Je ontdekt hoe je kunt bijdragen aan ervaringen van zin in alle verschijningsvormen, zoals motivatie, betrokkenheid, voldoening, (eigen)waarde en betekenis.<br><br>
<b>Over de auteurs</b><br>
Ilse Vooren en Merlijn Koch zijn beiden humanisticus. Ilse is oprichter van Food for Flow en gespecialiseerd in zingeving, energie en performance. Merlijn is coach en trainer bij de landelijke coachorganisatie Resilians, met expertise in het vergroten van vitaliteit en veerkracht.
</td>
<td class="tops">
<img src="http://www.alumnei.nl/images/boekenactie_2017/boek_3.jpg" style="float: left; width: 120%; ">
</td></table>
</div>
<div id="tab4Content">
<table><tr><td class="text">
<b>Mentaliserend Coachen – Peter Bleumer en René Meijer</b><br>
Mentaliseren is het vermogen tot zelfreflectie en inleving, beide noodzakelijk om goed te functioneren op het werk en privé. Sommige mensen kunnen niet goed mentaliseren, en veel mensen die dit vermogen wel hebben, verliezen het als ze stress ervaren of emotioneel zijn.<br><br>
Voor effectieve coaching en training is zelfreflectie van de deelnemers essentieel. Wat nu te doen als juist in dat gebrek aan mentaliserend vermogen het probleem schuilt? Dit praktische boek laat zien hoe mensen kunnen leren beter te mentaliseren. Het bevat concrete handvatten voor coaches, trainers en leidinggevenden voor het bevorderen hiervan.
<br><br>
<b>Over de auteurs</b><br>
Ilse Vooren en Merlijn Koch zijn beiden humanisticus. Ilse is oprichter van Food for Flow en gespecialiseerd in zingeving, energie en performance. Merlijn is coach en trainer bij de landelijke coachorganisatie Resilians, met expertise in het vergroten van vitaliteit en veerkracht.
</td>
<td class="tops">
<img src="http://www.alumnei.nl/images/boekenactie_2017/boek_4.jpg" style="float: left; width: 120%; ">
</td></table>
</div>
To answer the second question first, using the :focus selector requires the item to be clicked, but you can set it to be focused when the window loads with javascript:
window.onload = function() {
document.getElementById("tab1").focus();
};
As for the edge/explorer issue, I am not able to recreate it because both browsers are failing to change the background color to #333, as you are trying to do.
To resolve both, I would suggest using classes instead of :focus in your CSS and JS.
CSS:
#tab1.selected, #tab2.selected, #tab3.selected, #tab4.selected {
background: #333333;
}
JS:
document.getElementById('tab1').className = "";
document.getElementById('tab2').className = "";
document.getElementById('tab3').className = "";
document.getElementById('tab4').className = "";
document.getElementById('tab' + tabIndex).className = "selected"
HTML:
<div class="selected" id="tab1" onClick="JavaScript:selectTab(1);">Boek 1</div>
<div id="tab2" onClick="JavaScript:selectTab(2);">Boek 2</div>
<div id="tab3" onClick="JavaScript:selectTab(3);">Boek 3</div>
<div id="tab4" onClick="JavaScript:selectTab(4);">Boek 4</div>
Thanks to mtr.web, I managed to solve this issue. I have integrated his/her suggestions in the code.
Please find below the complete working code!
<style>
#tab1, #tab2, #tab3, #tab4 {
float: left;
padding: 5px 10px 5px 10px;
background: #B00098;
color: #FFFFFF;
margin: 0px 5px 0px 5px;
}
#tab1:hover, #tab2:hover, #tab3:hover, #tab4:hover {
background: #E800C9;
}
#tab1.selected, #tab2.selected, #tab3.selected, #tab4.selected {
background: #333333;
}
#tab1Content, #tab2Content, #tab3Content, #tab4Content {
width: 100%;
height: 500px;
padding: 20px;
border: 1px solid #B00098;
}
#tab1Content {
display: block;
}
#tab2Content, #tab3Content, #tab4Content {
display: none;
}
#tab2Content, #tab3Content, #tab4Content {
display: none;
}
.tops {
vertical-align: top;
}
.text {
text-align: justify;
padding-right: 10px;
width: 80%
}
img {
padding-right: 5px;
margin-top: -20px;
}
</style>
<script>
function selectTab(tabIndex) {
document.getElementById('tab1').className = "";
document.getElementById('tab2').className = "";
document.getElementById('tab3').className = "";
document.getElementById('tab4').className = "";
document.getElementById('tab' + tabIndex).className = "selected"
//Hide All Tabs
document.getElementById('tab1Content').style.display="none";
document.getElementById('tab2Content').style.display="none";
document.getElementById('tab3Content').style.display="none";
document.getElementById('tab4Content').style.display="none";
//Show the Selected Tab
document.getElementById('tab' + tabIndex + 'Content').style.display="block";
}
</script>
<div class="selected" id="tab1" onClick="JavaScript:selectTab(1);">Boek 1</div>
<div id="tab2" onClick="JavaScript:selectTab(2);">Boek 2</div>
<div id="tab3" onClick="JavaScript:selectTab(3);">Boek 3</div>
<div id="tab4" onClick="JavaScript:selectTab(4);">Boek 4</div>
<br/>
<div id="tab1Content">
<table><tr><td class="text">
<b>Identiteit – Paul Verhaeghe</b><br>
Maatschappelijke veranderingen hebben gezorgd voor een veranderd ik-gevoel. Paul Verhaeghe onderzoekt de effecten van dertig jaar neoliberalisme, vrijemarktwerking, privatisering en de relatie tussen de maakbare samenleving en onze identiteit. Wie wij zijn wordt zoals altijd bepaald door de context waarin wij leven. Die context bepaalt op dit moment: Wie geen succes heeft zal ziek zijn.<br><br>
De dwang tot succes en geluk blijkt een keerzijde te hebben: het leidt tot verlies aan zelfbesef, tot desoriëntatie en vertwijfeling. De mens is eenzamer dan ooit. De liefde is moeilijk te bereiken en betekenisvol leven is diepgaand problematisch geworden. Vanuit zijn klinische ervaring als psychotherapeut laat Verhaeghe zien hoezeer de veranderde maatschappij doorwerkt in de hedendaagse individuele psychische problemen. Mensen komen met andere psychische klachten bij de psychiater dan voorheen.<br><br>
<b>Over de auteur</b><br>
Paul Verhaeghe (geb. 5 november 1955) is van opleiding klinisch psycholoog, van vorming psychoanalyticus. Zijn eerste doctoraat (1985) handelde over hysterie, zijn tweede (1992) over psychodiagnostiek. Hij werkt als gewoon hoogleraar aan de universiteit van Gent. Sedert 2000 gaat zijn belangstelling vooral naar de invloed van maatschappelijke veranderingen op psychologische en psychiatrische moeilijkheden.
</td>
<td class="tops">
<img src="http://www.alumnei.nl/images/boekenactie_2017/boek_1.jpg" style="float: left; width: 120%; ">
</td></table>
</div>
<div id="tab2Content">
<table><tr><td class="text">
<b>Get your guts, je instinct als kompas – Hilde Bolt</b><br>
Iemand met Guts is een persoon met lef, met ballen. Maar heeft lef te maken met de darmen ('gut' = 'darm'), met onze buik? Een heleboel. Ons buikgebied bevat veel meer wijsheid dan we denken. Guts heeft een dubbele betekenis: de signalen uit het buikgebied zijn het instrument, het kompas van waaruit je kunt leven. En Guts is de kracht die je nodig hebt om hiernaar te handelen. Het leven kan mooi, maar ook vol risico's en soms wreed zijn. We kunnen niet altijd kiezen wat onze weg kruist. Toch is het vaak mogelijk om lichter, speelser, creatiever en eenvoudiger met het leven om te gaan.<br><br>
Get your Guts is een wake-up call, een herinnering aan je eigen oorsprong. De wijsheid van je lichaam, je buikgebied geeft je de mogelijkheid om oeroude instinctieve en verborgen kennis weer tot leven te brengen. Get your Guts is een boek voor mensen die zelf guts willen ontwikkelen, maar ook een boek dat iedere therapeut, coach of hulpverlener gelezen moet hebben.
<br><br>
<b>Over de auteur</b><br>
Hilde Bolt werkt als zelfstandig gevestigd coach, counselor, trainer en psychotherapeut. Ze heeft zich bijgeschoold in oosterse en westerse vormen van lichaamsgericht werken. Tijdens de trainingen creëert ze een veilige, creativiteit bevorderende sfeer waarin veel ‘op maat’ geëxperimenteerd kan worden zodat een ieder op een eigen manier het optimale rendement uit de training kan halen.
</td>
<td class="tops">
<img src="http://www.alumnei.nl/images/boekenactie_2017/boek_2.jpg" style="float: left; width: 120%; ">
</td></table>
</div>
<div id="tab3Content">
<table><tr><td class="text">
<b>Zin kun je maken - Ilse Vooren en Merlijn Koch</b><br>
Vanaf nu is zingeving begrijpelijk en hanteerbaar. Zin kun je maken benadert zingeving als een vermogen, waarbinnen vaardigheden en competenties te ontwikkelen zijn. We hebben meer ruimte dan ooit om stil te staan bij de betekenis van onszelf en ons bestaan. Zingeving speelt in onze diepste lagen en vragen en werkt door in het alledaagse leven. Wanneer en hoe ervaar je zin? Dit boek maakt helder hoe zingevingsprocessen werken en wat de functie van zingeving is.<br><br>
Zingeving hanteerbaar maken is belangrijk om richting te geven aan leven en werk. Voor coaches, leidinggevenden en andere professionals is praktische kennis van zingeving tegenwoordig essentieel. Het gesprek kunnen voeren op het niveau van betekenis is onderdeel van het nieuwe organiseren, leidinggeven en de zelfsturing van professionals.
Dit boek geeft concrete handvatten om processen van zingeving te begeleiden, individueel en in organisaties. Je ontdekt hoe je kunt bijdragen aan ervaringen van zin in alle verschijningsvormen, zoals motivatie, betrokkenheid, voldoening, (eigen)waarde en betekenis.<br><br>
<b>Over de auteurs</b><br>
Ilse Vooren en Merlijn Koch zijn beiden humanisticus. Ilse is oprichter van Food for Flow en gespecialiseerd in zingeving, energie en performance. Merlijn is coach en trainer bij de landelijke coachorganisatie Resilians, met expertise in het vergroten van vitaliteit en veerkracht.
</td>
<td class="tops">
<img src="http://www.alumnei.nl/images/boekenactie_2017/boek_3.jpg" style="float: left; width: 120%; ">
</td></table>
</div>
<div id="tab4Content">
<table><tr><td class="text">
<b>Mentaliserend Coachen – Peter Bleumer en René Meijer</b><br>
Mentaliseren is het vermogen tot zelfreflectie en inleving, beide noodzakelijk om goed te functioneren op het werk en privé. Sommige mensen kunnen niet goed mentaliseren, en veel mensen die dit vermogen wel hebben, verliezen het als ze stress ervaren of emotioneel zijn.<br><br>
Voor effectieve coaching en training is zelfreflectie van de deelnemers essentieel. Wat nu te doen als juist in dat gebrek aan mentaliserend vermogen het probleem schuilt? Dit praktische boek laat zien hoe mensen kunnen leren beter te mentaliseren. Het bevat concrete handvatten voor coaches, trainers en leidinggevenden voor het bevorderen hiervan.
<br><br>
<b>Over de auteurs</b><br>
Ilse Vooren en Merlijn Koch zijn beiden humanisticus. Ilse is oprichter van Food for Flow en gespecialiseerd in zingeving, energie en performance. Merlijn is coach en trainer bij de landelijke coachorganisatie Resilians, met expertise in het vergroten van vitaliteit en veerkracht.
</td>
<td class="tops">
<img src="http://www.alumnei.nl/images/boekenactie_2017/boek_4.jpg" style="float: left; width: 120%; ">
</td></table>
</div>
html, body {cursor:url(files/cursor.cur),progress;min-height:100%;}
html{background-color:#6666FF;;background-attachment:fixed;background-position:center;background-size:cover;}
body{width:80%;background-color:rgba(255,255,255,0.75);margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;}
p{margin-right:10px;margin-left:10px;text-align: center;}
iframe{overflow:hidden;height:80%;width:100%;}
img{display:block;margin-left:auto;margin-right:auto;}
table{border-collapse:collapse;font-family:calibri;border-style:outset;border-color:#FFFF00;border-width:5px;}
td{font-size:16px;border-width:1px;border-style:solid;border-color:#FFFF00;background-color:#FFFFFF}
th{font-size:18px;font-weight:bold;background-color:#FFEE00;border-color:#FFFF00;border-style:solid;border-width:1px;}
a.active{background-color:#0088FF !important;}
a.active:hover{background-color:#00AAFF !important;}
.font1{font-family:calibri;font-size:16px;}
.font2{font-family:calibri;font-size:18px;text-decoration:underline;}
#menu1 a{display:block;background-color:#0066FF;text-decoration:none;font-family:calibri;font-size:20px;color:#FFFFFF;padding:10px 10px;}
#menu1 a:hover{background-color:#00AAFF;}
#menu1 li{display:inline-block;}
#menu1 ul{list-style:none;text-align:center;margin:0 auto;padding:0px;}
#menu2 a{display:block;background-color:#0066FF;text-decoration:none;font-family:calibri;font-size:16px;color:#FFFFFF;padding:10px 10px;}
#menu2 a:hover{background-color:#00AAFF;}
#menu2 li{display:inline-block;}
#menu2 ul{list-style:none;text-align:center;margin:0 auto;padding:0px;}
<!DOCTYPE html>
<html>
<head>
<title>De Geoclub</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<br>
<div id="menu1"><ul><li>Welkom</li><li>Agenda</li><li>Foto's</li><li>Contact</li></ul></div>
<p><span class="font2">De Geoclub</span><br><br><span class="font1">Welkom op de website van de Geoclub. De Geoclub wordt gehouden in Reggesteyn Noetsele en is voor de leerlingen en oudleerlingen van Reggesteyn. Onze leider is Mr. Nauta, een docent aardrijkskunde op Reggesteyn Noetsele. Bij de Geoclub hebben we het over stenen, fossielen en mineralen. We houden soms bijeenkomsten en excursies. Om de twee jaar houden we een grote, meerdaagse excursie. Hieronder kun je lezen over de bijeenkomsten en excursies. Verder kun je op onze website de agenda van de Geoclub bekijken en de foto's die we hebben genomen bekijken. Je kunt onder het tabblad 'contact' de adresgegevens van Mr. Nauta vinden. Veel plezier!</span></p>
<p><span class="font2">De Bijeenkomsten</span><br><br><span class="font1">Ongeveer eens per maand houden we een bijeenkomst in lokaal 209 in het gebouw van Reggesteyn Noetsele, meestal om 14.45. Soms bereidt Mr. Nauta iets voor en soms bereidt een leerling iets voor. We eten en drinken halverwege ook iets. Als je wilt weten wanneer de bijeenkomsten zijn, kun je kijken op de agenda. Voor de exacte tijden en mogelijke wijzigingen stuurt Mr. Nauta je een mailtje. Zorg er dus voor dat hij je emailadres heeft. Mr. Nauta's emailadres kun je vinden onder 'contact'. Je bent altijd welkom bij een bijeenkomst, het is niet verplicht. Verder zijn de bijeenkomsten gratis.</span></p>
<p><span class="font2">De Excursies</span><br><br><span class="font1">Met de Geoclub houden we ongeveer drie keer per jaar een excursie. Eens in de twee jaar houden we een grote, meerdaagse excursie. Meestal bereiden we in de bijeenkomst voor een excursie de excursie voor, en in de bijeenkomst na de excursie laten we onze vondsten zien. Tijdens de excursies gaan we een aantal groeves langs om te zoeken naar stenen, fossielen en mineralen. Mr. Nauta en enkele ouders rijden. We vertrekken meestal rond 9 uur en we zijn rond 5 uur weer terug. Bij de grote excursies gaan we drie tot vier dagen weg. We gaan dan bijvoorbeeld naar Duitsland of Frankrijk. We kamperen daar of we huren een huisje. We zoeken naar stenen, fossielen en mineralen in de buurt van waar we overnachten. In de periode voor de grote excursie krijg je meer duidelijke informatie over de excursie.<br><br>Bij de gewone excursies is het handig om de volgende dingen mee te nemen: eten en drinken, een (moker) hamer, een puntige steenbeitel en een platte steenbeitel, iets om je vondsten in te bewaren en wat closetpapier om breekbare vondsten in te bewaren.<br><br>De gewone excursies kosten ongeveer 10 euro (voor benzine). De grote excursies kosten rond de honderd euro (voor benzine, eten en overnachting).</span></p>
</body>
</html>
(Please run the snippet in full page mode for the best results.)
I'm trying to get the white-backgrounded body to the bottom of the page but it should go further if the text, due page resizement, exceeds the body. I've tried the CSS property height-min:100%; on the body, the html and both but it didn't work. Does anyone know how to get the body right?
min-height cannot be inherited, you need to set at least height:100% to html in order to use min-height on body
html {height:100%;}
html, body {cursor:url(files/cursor.cur),progress;min-height:100%;}
html{background-color:#6666FF;;background-attachment:fixed;background-position:center;background-size:cover;}
body{width:80%;background-color:rgba(255,255,255,0.75);margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;}
p{margin-right:10px;margin-left:10px;text-align: center;}
iframe{overflow:hidden;height:80%;width:100%;}
img{display:block;margin-left:auto;margin-right:auto;}
table{border-collapse:collapse;font-family:calibri;border-style:outset;border-color:#FFFF00;border-width:5px;}
td{font-size:16px;border-width:1px;border-style:solid;border-color:#FFFF00;background-color:#FFFFFF}
th{font-size:18px;font-weight:bold;background-color:#FFEE00;border-color:#FFFF00;border-style:solid;border-width:1px;}
a.active{background-color:#0088FF !important;}
a.active:hover{background-color:#00AAFF !important;}
.font1{font-family:calibri;font-size:16px;}
.font2{font-family:calibri;font-size:18px;text-decoration:underline;}
#menu1 a{display:block;background-color:#0066FF;text-decoration:none;font-family:calibri;font-size:20px;color:#FFFFFF;padding:10px 10px;}
#menu1 a:hover{background-color:#00AAFF;}
#menu1 li{display:inline-block;}
#menu1 ul{list-style:none;text-align:center;margin:0 auto;padding:0px;}
#menu2 a{display:block;background-color:#0066FF;text-decoration:none;font-family:calibri;font-size:16px;color:#FFFFFF;padding:10px 10px;}
#menu2 a:hover{background-color:#00AAFF;}
#menu2 li{display:inline-block;}
#menu2 ul{list-style:none;text-align:center;margin:0 auto;padding:0px;}
<!DOCTYPE html>
<html>
<head>
<title>De Geoclub</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<br>
<div id="menu1"><ul><li>Welkom</li><li>Agenda</li><li>Foto's</li><li>Contact</li></ul></div>
<p><span class="font2">De Geoclub</span><br><br><span class="font1">Welkom op de website van de Geoclub. De Geoclub wordt gehouden in Reggesteyn Noetsele en is voor de leerlingen en oudleerlingen van Reggesteyn. Onze leider is Mr. Nauta, een docent aardrijkskunde op Reggesteyn Noetsele. Bij de Geoclub hebben we het over stenen, fossielen en mineralen. We houden soms bijeenkomsten en excursies. Om de twee jaar houden we een grote, meerdaagse excursie. Hieronder kun je lezen over de bijeenkomsten en excursies. Verder kun je op onze website de agenda van de Geoclub bekijken en de foto's die we hebben genomen bekijken. Je kunt onder het tabblad 'contact' de adresgegevens van Mr. Nauta vinden. Veel plezier!</span></p>
<p><span class="font2">De Bijeenkomsten</span><br><br><span class="font1">Ongeveer eens per maand houden we een bijeenkomst in lokaal 209 in het gebouw van Reggesteyn Noetsele, meestal om 14.45. Soms bereidt Mr. Nauta iets voor en soms bereidt een leerling iets voor. We eten en drinken halverwege ook iets. Als je wilt weten wanneer de bijeenkomsten zijn, kun je kijken op de agenda. Voor de exacte tijden en mogelijke wijzigingen stuurt Mr. Nauta je een mailtje. Zorg er dus voor dat hij je emailadres heeft. Mr. Nauta's emailadres kun je vinden onder 'contact'. Je bent altijd welkom bij een bijeenkomst, het is niet verplicht. Verder zijn de bijeenkomsten gratis.</span></p>
<p><span class="font2">De Excursies</span><br><br><span class="font1">Met de Geoclub houden we ongeveer drie keer per jaar een excursie. Eens in de twee jaar houden we een grote, meerdaagse excursie. Meestal bereiden we in de bijeenkomst voor een excursie de excursie voor, en in de bijeenkomst na de excursie laten we onze vondsten zien. Tijdens de excursies gaan we een aantal groeves langs om te zoeken naar stenen, fossielen en mineralen. Mr. Nauta en enkele ouders rijden. We vertrekken meestal rond 9 uur en we zijn rond 5 uur weer terug. Bij de grote excursies gaan we drie tot vier dagen weg. We gaan dan bijvoorbeeld naar Duitsland of Frankrijk. We kamperen daar of we huren een huisje. We zoeken naar stenen, fossielen en mineralen in de buurt van waar we overnachten. In de periode voor de grote excursie krijg je meer duidelijke informatie over de excursie.<br><br>Bij de gewone excursies is het handig om de volgende dingen mee te nemen: eten en drinken, een (moker) hamer, een puntige steenbeitel en een platte steenbeitel, iets om je vondsten in te bewaren en wat closetpapier om breekbare vondsten in te bewaren.<br><br>De gewone excursies kosten ongeveer 10 euro (voor benzine). De grote excursies kosten rond de honderd euro (voor benzine, eten en overnachting).</span></p>
</body>
</html>
This is my site http://tholexos.nl/
But in IE 8 or lower it looks like garbage. Why is this?? My navigation goes immiediatly to mobile version and the actual menu is getting in the footer...
I know IE has some bugs but I don`t know what bugs are causing this problem for my site. I am asking you guys if you want to help my find the problem.
Thnx for the help!
<!doctype html>
<!--[if IE]><![endif]-->
<!--[if IE 7]><html xml:lang="nl-NL" lang="nl-NL" class="ie ie7"><![endif]-->
<!--[if IE 8]><html xml:lang="nl-NL" class="ie8"><![endif]-->
<!--[if (lt IE 8)|(gt IE 8)|!(IE)]><!--><html xml:lang="nl-NL" lang="nl-NL"><!--<![endif]-->
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.png"/>
<meta name="description" content="Onze visie als bedrijf bestaat uit het faciliteren van kinderen samen met hun ouders om zich zo goed mogelijk voor te bereiden op de verplichte rekentoets. Door het hoofdrekenen op een ouderwetse manier">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<p id="payoff"><span>l</span></p>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1">
<!--[if (gt IE 8)|!(IE)]><!--><link rel="stylesheet" href="abc.css" type="text/css"/><!--<![endif]-->
<!--[if (IE 7)|(IE 8)]><link rel="stylesheet" href="abc.css" type="text/css" media="screen,print" /><![endif]-->
<title>Tholexos - Home</title>
</head>
<body id="government">
<base target="_blank">
<div id="centerbox">
<div id="header">
<a href="index.html" target="_self" title="Naar de homepage van Rijksoverheid.nl">
<img src="logo.png" alt="Tholexos.nl"/>
</a>
<div class="skiplinks">
<p>
<span class="assistive">Ga direct naar</span>
<a title="Navigeer naar de inhoud" href="#content">
Inhoud</a>
<span class="assistive">of</span>
<a id="skip-to-menu" class="active" title="Navigeer naar het hoofdmenu" href="#navigation">
Menu</a>
</p>
</div><div id="search">
</div></div>
<!--[if lt IE 7]><p><strong>Rijksoverheid.nl omarmt moderne standaarden en technieken.</strong><br/>Uw webbrowser (Microsoft IE6) ondersteunt deze standaarden niet. Stap daarom over op een recente browser.</p><![endif]--><div id="main">
<div class="header">
<p id="breadcrumb">
</p><span class="assistive">Onderwerp: </span>
<!--<a id="topic-home" href="#"><span>Taal en rekenen</span></a><p class="assistive">Dit onderwerp bevat 1 rubrieken.</p>-->
<ul class="tabs">
<li class="selected">
Visie
</li>
</ul>
</div><!--<div class="decorative">
<img src="#" alt=""
title="Foto: Hollandse Hoogte."
/>
</div>-->
<div class="background2"></div>
<div id="contentr" class="article">
<div class="textindex">
Onze visie als bedrijf bestaat uit het faciliteren van kinderen samen met hun ouders om zich zo goed mogelijk voor te bereiden op de verplichte rekentoets. Door het hoofdrekenen op een ouderwetse manier en op een verantwoordelijke en getoetste leermethode, te kunnen oefenen op een modern apparaat, dat eenvoudig voor handen is en laagdrempelig in gebruik.
<br>
<br>
<h2>Ouderwets oefenen in een nieuw jasje! - reken op je toekomst!</h2>
</div><div class="img1"><img src="logo_met.png" alt="Reken op je toekomst!"/></div>
<!--<h1>Extra maatregelen rekenonderwijs voortgezet onderwijs en middelbaar beroepsonderwijs</h1>
<div class="lead">
<p>Het rekenonderwijs is nog niet op orde. Leerlingen mogen daar niet de dupe van worden. Daarom voert de Rijksoverheid een aantal extra maatregelen in het voortgezet onderwijs en het middelbaar beroepsonderwijs in.</p>
</div>
<h2>Voorbeelden extra maatregelen</h2>
<p>De extra maatregelen staan in de kamerbrief Stand van zaken invoering referentieniveaus taal en rekenen in vo en mbo. Voorbeelden van maatregelen zijn:</p>
<ul>
<li>Een overgangsperiode waarin leerlingen geen cijfer krijgen, maar een vaardigheidsscore (voldoende of onvoldoende). De overgangsperiode duurt 4 jaar. </li>
<li>Aangepaste toetsen voor leerlingen die zwak zijn in rekenen.</li>
<li>Entree-basisdiploma in de entreeopleiding en een vakdiploma in mbo-2.</li>
<li>Nieuwe regels voor de doorstroom van leerlingen.</li>
<li>Docenten mogen de rekentoetsen na afloop inzien.</li>
</ul>
<p>Het doel is zorgen dat zoveel mogelijk leerlingen het referentieniveau voor rekenen halen.</p>
<div class="content-image-left">
<img src="#" alt="Infographic over Rekenen op orde in 2020. Kijk voor een uitgebreide uitleg in het onderwerp: http://www.rijksoverheid.nl/onderwerpen/taal-en-rekenen"
title="Ministerie van OCW"
/>
</div>
<h2>Overgangsperiode met vaardigheidsscores in plaats van cijfers</h2>
<p>Tijdens een overgangsperiode van 4 jaar werken scholen en instellingen met vaardigheidsscores in plaats van cijfers. Leerlingen moeten minimaal een bepaalde vaardigheidsscore behalen om een �voldoende� voor het onderdeel rekenen te halen.</p>
<p>In het 1e jaar van de overgangsperiode krijgt een leerling een voldoende als hij een vaardigheidsscore haalt die gelijkstaat aan het cijfer 4,5. Daarna gaat de vaardigheidsscore elk jaar omhoog (opklimmende slaagcesuur). In het 4e jaar moet de vaardigheidsscore minimaal gelijk zijn aan het cijfer 5,5. Als blijkt dat er toch nog teveel leerlingen zakken voor de rekentoets, wordt de vaardigheidsscore weer aangepast, zodat er in het eerste jaar maximaal 5% van de studenten zakt.</p>
<p>De overgangsperiode gaat in tijdens het schooljaar waarin de rekentoets gaat meetellen voor het diploma. Dit verschilt per schoolsoort. </p>
<h2>Aangepaste toesten voor leerlingen die zwak zijn in rekenen</h2>
<p>Leerlingen die moeite hebben met rekenen, krijgen speciale rekentoetsen:</p>
<ul>
<li>de 2A toets voor leerlingen in het vmbo-bb, de entreeopleiding en mbo-2 die zwak zijn in rekenen;</li>
<li>ER-toetsen voor leerlingen met ERWD (ernstige reken-wiskundeproblemen en dyscalculie).</li>
</ul>
<p>Deze aangepaste toetsen zorgen ervoor dat leerlingen die alle andere vakken hebben gehaald, meer kans hebben om ook het onderdeel rekenen te halen. Zo kunnen ze hun diploma en startkwalificatie halen.</p>
<p>Scholen bieden leerlingen in het vmbo-bb en het mbo-2 altijd eerst de reguliere rekentoets aan. Als deze toets voor een leerling niet haalbaar is, kan de school de leerling een aangepaste toets laten maken. Dit gebeurt altijd in overleg met de leerling. </p>
<h2>Entree-basisdiploma in het mbo</h2>
<p>De entreeopleiding in het mbo krijgt een entree-basisdiploma. Dit diploma is voor leerlingen die alle beroepsspecifieke onderdelen van de entreeopleiding hebben gehaald, maar (nog) niet kunnen voldoen aan de eisen voor rekenen (of taal). Leerlingen die willen doorstromen van de entreeopleiding naar mbo-2, moeten aan dezelfde eisen voor taal en rekenen voldoen als leerlingen in het vmbo-bb. Als zij aan deze eisen voldoen, krijgen zij een entree-doorstroomdiploma.</p>
<h2>Nieuwe regels voor doorstroom van leerlingen</h2>
<p>Om te kunnen doorstromen naar een vervolgopleiding moeten leerlingen aan bepaalde eisen voldoen. Hier horen straks ook de eisen voor taal en rekenen bij. </p>
<ul>
<li><h3> Doorstromen naar mbo-3 </h3> Dit kan alleen met referentieniveau 2F. De aangepaste 2A toets is hiervoor dus niet voldoende.</li>
<li><h3> Doorstromen van voortgezet onderwijs naar mbo </h3> Leerlingen die in het voortgezet onderwijs een ER-toets hebben gemaakt, kunnen alle opleidingen in het mbo volgen. Ook in het mbo mogen ze een ER-toets maken. Een ER-toets is bedoeld voor kinderen met ERWD (ernstige reken-wiskundeproblemen en dyscalculie).</li>
<li><h3>Doorstromen naar het hoger onderwijs </h3> Iedereen met het juiste diploma kan naar het hoger onderwijs kan. Dus ook leerlingen die een diploma hebben gehaald met de ER-toets.</li>
<li><h3>Doorstromen naar de pabo </h3> Voor leerlingen die naar de pabo willen doorstromen geldt een uitzondering. Zij moeten de reguliere 3F toets taal en rekenen gehaald hebben. Anders hebben zij niet de vaardigheden die nodig zijn om goed rekenonderwijs te geven aan hun leerlingen.</li>
</ul>
<div class="block docs-pubs">
<h2>
Documenten en publicaties</h2>
<ul class="common">
<li>
<a href="/onderwerpen/taal-en-rekenen/documenten-en-publicaties/kamerstukken/2014/12/17/kamerbrief-invoering-referentieniveaus-taal-en-rekenen-in-vo-en-mbo.html" class="publication">
<h3>Kamerbrief invoering referentieniveaus taal en rekenen in vo en mbo</h3>
<p>Minister Bussemaker en staatssecretaris Dekker (OCW) informeren de Tweede Kamer over de stand van zaken van de invoering van de ...</p>
<p class="meta">
Kamerstuk | 17-12-2014</p></a>
</li>
<li>
<a href="/onderwerpen/taal-en-rekenen/documenten-en-publicaties/publicaties/2014/12/17/2020-rekenen-op-orde.html" class="publication">
<h3>2020: rekenen op orde</h3>
<p>Infographic over Rekenen op orde in 2020. Het rekenonderwijs wordt de komende jaren verbeterd. De rekentoets groeit stap voor stap ...</p>
<p class="meta">
Publicatie | 17-12-2014</p></a>
</li>
<li>
<a href="/onderwerpen/taal-en-rekenen/documenten-en-publicaties/publicaties/2014/12/17/doorstroming-naar-vervolgonderwijs.html" class="publication">
<h3>Doorstroming naar vervolgonderwijs</h3>
<p>Doorstroom: wat heb je nodig voor welk diploma en welke vervolgopleiding?</p>
<p class="meta">
Publicatie | 17-12-2014</p></a>
</li>
</ul>
</div>-->
</div><!--<div id="aside">
<div class="block">
<h2>Verder in dit onderwerp</h2>
<ul class="common">
<li>
Referentieniveaus taal en rekenen
</li>
<li>
Toetsen en examens voor taal en rekenen
</li>
<li>
Taal en rekenen op de pabo
</li>
</ul>
</div>
<div class="block">
<h2>Zie ook</h2>
<ul class="common">
<li>
<a
class="news"
title="Nieuwsbericht | 17-12-2014"
href="/onderwerpen/taal-en-rekenen/nieuws/2014/12/17/rekenen-stap-voor-stap-beter.html">
Rekenen stap voor stap beter</a>
</li>
</ul>
</div>
<div class="block banner">
<a href="/contact">
<img src="//roimg.nl/bestanden/afbeeldingen/banners/postbus-51/banner-inforijksoverh-ond.jpg" alt="Vragen? Bel Informatie Rijksoverheid: 1400" />
</a>
</div>
<div class="block">
<h2>Verantwoordelijk ministerie</h2>
<ul class="common">
<li>
<a href="/ministeries/ocw" >
Ministerie van Onderwijs, Cultuur en Wetenschap</a>
</li>
</ul>
</div></div>--><div id="follow-up">
<div class="block">
<div class="notifications"><!--
<h2>Taal en rekenen: blijf op de hoogte</h2>
<ul class="common">
<li>
<a class="email" href="http://abonneren.rijksoverheid.nl/e-mailattenderingen/aanmelden/onderwerpen/taal-en-rekenen/nieuws">
Nieuwsberichten via e-mail</a>
</li>
<li>
<a class="email" href="http://abonneren.rijksoverheid.nl/e-mailattenderingen/aanmelden/onderwerpen/taal-en-rekenen/documenten-en-publicaties">
Documenten en publicaties via e-mail</a>
</li>
<li>
<a class="rss-feed" href="http://feeds.rijksoverheid.nl/onderwerpen/taal-en-rekenen/nieuws.rss">
Nieuwsberichten via rss</a>
</li>
<li>
<a class="rss-feed" href="http://feeds.rijksoverheid.nl/onderwerpen/taal-en-rekenen/documenten-en-publicaties.rss">
Documenten en publicaties via rss</a>
</li>
</ul> -->
</div>
<div class="sharing">
<h2>Deel deze pagina op:</h2>
<ul class="common">
<li><a href="http://twitter.com/share?;text=Tholexos+is+een+startup+die+zich+bezig+houdt+met+het+volgen,+trainen,+en+coachen+van+kinderen+voor+een+succesvolle+overstap+naar+het+voortgezetonderwijs+#tholexos+http://www.tholexos.nl/" target="_blank" class="twitter" title="Deel deze pagina op Twitter">
<img src="twitter_logo.png" class="logo_grootte"/>Twitter</a></li>
<li><a href="https://www.facebook.com/sharer/sharer.php?u=http://www.tholexos.nl/" target="_blank" class="facebook" title="Deel deze pagina op Facebook">
<img src="facebook_logo.png" class="logo_grootte"/>Facebook</a></li>
<li><a href="https://www.linkedin.com/shareArticle?mini=true&url=Tholexos%20is%20een%20startup%20die%20zich%20bezig%20houdt%20met%20het%20volgen,%20trainen,%20en%20coachen%20van%20kinderen%20voor%20een%20succesvolle%20overstap%20naar%20het%20voortgezetonderwijs%20%23Thlexos%20http://www.tholexos.nl/&title=&summary=&source=" target="_blank" class="linkedin" title="Deel deze pagina op LinkedIn">
<img src="linkedin_logo.png" class="logo_grootte"/>LinkedIn</a></li>
<li><a href="https://plus.google.com/share?url=http://www.tholexos.nl/" target="_blank" class="google-plus" title="Deel deze pagina op Google+">
<img src="google_logo.png" class="logo_grootte"/> Google+</a></li>
<li><a href="http://www.tumblr.com/share/link?url=http://www.tholexos.nl/" target="_blank" class="tumblr" title="Deel deze pagina op Tumblr">
<img src="tumblr_logo.png" class="logo_grootte"/>Tumblr</a></li>
</ul>
</div>
</div>
</div>
<div id="sitemap">
<h2>
Informatie over rekenen:
</h2>
<div>
<ul class="common column">
<li>
Referentieniveaus taal en rekenen
</li>
<li>
Rekenhulp voor ouders en anderen
</li>
<li>
Nationaal expertisecentrum leerplanontwikkeling
</li>
</ul>
</div>
</div></div><div id="logofooter"></div>
<div id="navigation" class="block">
<!-- ------------ hier is bovenste nav ------------- -->
<h2>Hoofdnavigatie</h2>
<ul>
<li class="selected2"><a href="index.html" target="_self" >Home</a></li>
<li class="selected1"><a href="over_tholexos.html" target="_self" >Over Tholexos</a></li>
<li class="selected1"><a href="blog.html" target="_self" >Blog</a></li>
<li class="selected1"><a href="contact.html" target="_self" >Contact</a></li>
</ul>
</div>
<div id="footer" class="three-column">
<div class="background">
<div class="column">
<div class="footer_lijn"></div>
<h2>Over deze site</h2>
<ul>
<div class="text"><li class="center-li"><a href="over_tholexos.html" target="_self" >Over Tholexos.nl</a></li>
<li class="center-li"><a href="disclaimer.html" target="_self" >Disclaimer</a></li>
<li class="center-li">Rekenopjetoekomst.nl is een handelsnaam van Tholexos<li>
<li class="center-li"><a>© 2015 Tholexos - Reken op je toekomst</a></li>
</ul>
</div>
</div></div>
</div></div>
<script src="core-14.7.1.min.js"></script>
</body>
</html>
For the css script you get here --> http://tholexos.nl/abc.css
I see you're using media queries in your abc.css stylesheet; IE8 doesn't support media queries - so if you have designed your site 'mobile first' I guess IE8 is defaulting to that look.
There are a few solutions if you search for 'IE8 media queries' such as mentioned on this thread:
IE8 support for CSS Media Query
If you want to support IE8 you should do the following 3 things. There may be others:
1) Set the DOCTYPE to HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) Make sure all of your CSS is CSS2 compatible
3) Put your BASE tag inside of your HEAD