html, body {cursor:url(files/cursor.cur),progress;height:100%;}
html{background-color:blue;background-image:url(files/bg.jpg);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>
If I halve my page, the text goes out of the white marked body part. Is there a way to solve this without setting my page at 120%? I'm looking for something that will automatically align the body to the text. (There might be some contrary properties in the CSS script.)
Thanks for trying!
Update:
I've tried removing the height:100%; property, but this is the result: (Run in full page.)
html, body {cursor:url(files/cursor.cur),progress;}
html{background-color:blue;background-image:url(files/bg.jpg);background-attachment:fixed;background-position:center;background-size:cover;height:100%;}
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>
I want the white body to reach to at least the bottom of the page but farther if the text exceeds the page. Sorry for not being clear.
Update:
Using the min-height property didn't work. The page remained as in snippet 2.
It's caused by height: 100% on the body, remove it and the text is contained.
Your body is set to height: 100%;. Change it to height: auto;. Otherwise the body stays the same height as the window even when it scrolls out of the way. If you want it to be at least the full height of the window you can set min-height: 100%;.
Add height: auto; to body tag CSS instead of height: 100%;.
I think that the issue is the collapsing margin between the bottom paragraph and the body.
You can work around it by adding either some padding or a border at the bottom of the body.
In my example, I added padding-bottom: 1px and this allows the body's background to fully enclose the height of the paragraph along with the paragraph's top and bottom margin.
You did not see this effect at the top of the page because you set the top margin of the ul that makes up the menu to zero.
You still need to set min-height: 100% on the body to extend the background color to the bottom of the page for cases where the height of the content does not fill up the page. For safe measure, I added box-sizing: border-box; to compensate for the 1px padding.
In summary, you need the 1px padding to fix the collapsing margin problem for the case of the content being long enough to cause the page to scroll. For the shorter pages, use min-height: 100% to force the body to extend to the bottom of the page (in this case, the collapsing margin issue may not show itself).
html,
body {
cursor: url(files/cursor.cur), progress;
}
html {
background-color: blue;
background-image: url(files/bg.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
height: 100%;
}
body {
width: 80%;
background-color: rgba(255, 255, 255, 0.75);
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 1px; /* stops margins from collapsing */
min-height: 100%;
box-sizing: border-box;
}
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;
}
<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>
Related
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>
Given: a clean page with one <article> containing some <p> paragraphs and a full width <img>.
I want the css multi-columns to flow not as in A, but as in B sothat the paragraphs flow from top-to-bottom and then from left-to-right. The <img> should stop this flowing and fill up the full article width. After that several more paragraphs again in the same fashion as B until the end of the same <article>.
At the moment, all works, except that the columns flow as in A, not as in B. What smart rule(s) have I overlooked in CSS?
I don't want to touch the clean HTML here. No extra elements, classes, or ids.
Adding only CSS for selecting and styling the current existing elements: article, p, img
Only one <article>.....</article> element, so no article splitting before-and-after img!
article p{
width: 500px;
margin: 0;
text-align: justify;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 24px;
-moz-column-gap: 24px;
column-gap: 24px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
font-style: normal;
font-size: 14px;
line-height: 20px;
letter-spacing:-0.7px;
word-spacing: -0.7px;
color: #000;
}
article p:nth-of-type(n+2) {
text-indent: 2em;
margin-top: 20px;
}
img{
width:500px;
height:auto;
margin-top: 20px;
}
<article>
<p>Ventilatie is noodzakelijk voor een gezond binnenklimaat in ruimten waar mensen verblijven en gebeurt door koolzuurgas, vocht en verontreiniging af te voeren en verse lucht aan te voeren. De luchtverontreiniging kan van verschillende aard zijn (bijvoorbeeld sigarettenrook, bacteriën en schimmelsporen, chemische stoffen, stof, geurstoffen).</p>
<p>De noodzakelijke hoeveelheid te verversen lucht (debiet) hangt af van de productie van vocht, koolstofdioxide (CO²) en verontreiniging en de aard van de verontreiniging, en van het aantal mensen die in die ruimten verblijven. Spuiventilatie of luchten is niet hetzelfde als de hier genoemde ventilatie, maar heeft ten doel in korte tijd sterk verontreinigde binnenlucht af te voeren of te spuien. Dit kan worden bereikt door ramen en/of deuren tegen elkaar open te zetten.</p>
<img src="https://static.pexels.com/photos/23049/pexels-photo.jpg" alt=""/>
<p>Bij de meeste woningen gebeurt de ventilatie ongecontroleerd: doordat de wind in kieren en spleten waait, ververst de lucht. Dit zorgt in vele gevallen voor overbodige ventilatie, een onaangenaam binnenklimaat en dus ook voor warmteverliezen.</p>
<p>Men kan dit verminderen door tijdens het bouwen en onderhoud aandacht te besteden aan luchtdichtheid. Meestal wordt daarvoor een dampscherm geplaatst tegen de isolatie. Men dient rekening te houden met de vochthuishouding: als de warme vochtige binnenlucht kan doordringen tot in de isolatie zal deze lucht afkoelen naarmate de buitenmuur benaderd wordt, waardoor er condensatie kan optreden die de isolatiewaarde weer doet verminderen en is een dampdichte laag nodig om het damptransport te verminderen. Om dit makkelijker te onthouden zijn de dampremmende folies meestal rood (warm; binnenkant) en de damp-open folies blauw.</p>
<p>Ventilatie is noodzakelijk voor een gezond binnenklimaat in ruimten waar mensen verblijven en gebeurt door koolzuurgas, vocht en verontreiniging af te voeren en verse lucht aan te voeren. De luchtverontreiniging kan van verschillende aard zijn (bijvoorbeeld sigarettenrook, bacteriën en schimmelsporen, chemische stoffen, stof, geurstoffen).</p>
</article>
Just give the columns property to your container, not to your paragraphs...
That's for the text flow... Now, if you want inside the article to give your image 100% of the width container... well, you can't without changing html
article {
text-align: justify;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 24px;
-moz-column-gap: 24px;
column-gap: 24px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
article p{
width: 500px;
margin: 0;
font-style: normal;
font-size: 14px;
line-height: 20px;
letter-spacing:-0.7px;
word-spacing: -0.7px;
color: #000;
}
article p:nth-of-type(n+2) {
text-indent: 2em;
margin-top: 20px;
}
img{
width:500px;
height:auto;
margin-top: 20px;
}
<article>
<p>Ventilatie is noodzakelijk voor een gezond binnenklimaat in ruimten waar mensen verblijven en gebeurt door koolzuurgas, vocht en verontreiniging af te voeren en verse lucht aan te voeren. De luchtverontreiniging kan van verschillende aard zijn (bijvoorbeeld sigarettenrook, bacteriën en schimmelsporen, chemische stoffen, stof, geurstoffen).</p>
<p>De noodzakelijke hoeveelheid te verversen lucht (debiet) hangt af van de productie van vocht, koolstofdioxide (CO²) en verontreiniging en de aard van de verontreiniging, en van het aantal mensen die in die ruimten verblijven. Spuiventilatie of luchten is niet hetzelfde als de hier genoemde ventilatie, maar heeft ten doel in korte tijd sterk verontreinigde binnenlucht af te voeren of te spuien. Dit kan worden bereikt door ramen en/of deuren tegen elkaar open te zetten.</p>
<img src="https://static.pexels.com/photos/23049/pexels-photo.jpg" alt=""/>
<p>Bij de meeste woningen gebeurt de ventilatie ongecontroleerd: doordat de wind in kieren en spleten waait, ververst de lucht. Dit zorgt in vele gevallen voor overbodige ventilatie, een onaangenaam binnenklimaat en dus ook voor warmteverliezen.</p>
<p>Men kan dit verminderen door tijdens het bouwen en onderhoud aandacht te besteden aan luchtdichtheid. Meestal wordt daarvoor een dampscherm geplaatst tegen de isolatie. Men dient rekening te houden met de vochthuishouding: als de warme vochtige binnenlucht kan doordringen tot in de isolatie zal deze lucht afkoelen naarmate de buitenmuur benaderd wordt, waardoor er condensatie kan optreden die de isolatiewaarde weer doet verminderen en is een dampdichte laag nodig om het damptransport te verminderen. Om dit makkelijker te onthouden zijn de dampremmende folies meestal rood (warm; binnenkant) en de damp-open folies blauw.</p>
<p>Ventilatie is noodzakelijk voor een gezond binnenklimaat in ruimten waar mensen verblijven en gebeurt door koolzuurgas, vocht en verontreiniging af te voeren en verse lucht aan te voeren. De luchtverontreiniging kan van verschillende aard zijn (bijvoorbeeld sigarettenrook, bacteriën en schimmelsporen, chemische stoffen, stof, geurstoffen).</p>
</article>
I'm building a website for my fathers company. I made a menubar which sticks to the top, but to make that work, I had to add a margin-top of 120px. That was no problem, so I did that.
But if I click a link in that menubar, the tag I said it has to go to, goes to the top of the page. But you can't see it, because the menubar is before the text. For example, if I click the link "Neuraal Netwerk", I want to see the h2 "Ervaring is de beste leermeester" and not a part of the <p> tag....
How can I solve this?
Here is my JSFiddle: https://jsfiddle.net/7afvgbag/2/
Here is my HTML code:
<html>
<head>
<title>NeurOp</title>
<link rel="stylesheet" type="text/css" href="../Stijlen/Index.css">
<link rel="stylesheet" type="text/css" href="../Stijlen/Algemeen.css">
</head>
<body>
<div class="navbar">
<h1>NeurOp - Specialist in neurale oplossingen</h1>
<ul>
<li>Home</li> |
<li>Neuraal Netwerk</li> |
<li>Toepassingen</li> |
<li>Over ons</li>
</ul>
</div>
<div class="content">
<div class="home">
<h2 id="home">Neurale netwerktechnologie bereikbaar voor ieder bedrijf!</h2>
<p>Dat is ons doel en dat bereiken we door neurale netwerk technologie toe te passen op bestaande sets data. Bedrijven kunnen zo direct profiteren van de voordelen die deze krachtige technologie biedt. En omdat veel bedrijven hun data verzamelen in Excel, bieden wij de mogelijkheid onze technologie in Excel te gebruiken.</p>
<div class="lijnDun"></div>
<h2>Wat doet een neuraal netwerk</h2>
<p>Een neuraal netwerk is een zelf lerend computermodel. Het leert aan de hand van praktijkvoorbeelden, waar reguliere computermodellen worden gemaakt met behulp van business rules. Wil je een auto leren om zelf te rijden aan de hand van business rules, dan zal een oneindige set rules het gevolg zijn. Je kunt ook een zelf lerende computer laten 'meerijden' met een goede chauffeur.</p>
</div>
<div class="lijnDun"></div>
<div class="neuraalNetwerk" id="neuraalNetwerk">
<h2>Ervaring is de beste leermeester</h2>
<p class="ervaringLeermeester"><img src="../Media/pcHersenen.png" class="pcHersenen"><p>
<p class="ervaringLeermeesterTekst">In het zenuwstelsel van een mens geven zenuwcellen via verbindingen signalen aan elkaar door. De sterkte van die signalen is gebaseerd op onze ervaring. Dus wanneer we bezig zijn met leren / oefenen, zijn we de verbindingen in ons brein aan het trainen. Door iets vaker te doen worden we er beter in. Iemand met heel veel ervaring, is een expert.<br><br>Een neuraal netwerk werkt precies zo. Het is een computermodel dat is samengesteld uit neuronen en verbindingen daartussen. Aan de hand van voorbeelden met een bekende uitkomst worden de verbindingen sterker of zwakker gemaakt net zolang tot het netwerk de juiste antwoorden geeft. Daarna geeft het netwerk ook de juiste antwoorden in een nieuwe situatie. Predictive Analytics, Artificial Intelligence, Machine Learning en Deep Learning zijn slechts andere benamingen voor deze vorm van technologie. </p>
<h4>"Een neuraal netwerk neemt het juiste besluit, iedere keer opnieuw."</h4>
</div>
<div class="lijnDik"></div>
<div class="toepassingen">
<h2>Toepassingen</h2>
<h3>Incasso: Dagvaarden om het proces of om te incasseren?</h3>
<p>Alle inspanningen ten spijt, zijn er altijd debiteuren die hun factuur niet (kunnen) betalen. En naar genoeg lopen juist de kosten van de niet succesvolle incasso dossiers het hoogst op. <br><br>
Hoe eerder in het incasso proces bekend is of de vordering betaald zal worden of niet (kan of wil de debiteur niet betalen), hoe efficiënter het proces hierop ingeregeld kan worden. <br><br>
Met name wanneer de kostbare keuze om al dan niet te dagvaarden gemaakt moet worden is de toegevoegde waarde van een goed advies van doorslaggevend belang. <br><br>
Afgesloten dossiers vormen de voorbeelden waarmee het neurale netwerk getraind wordt. Voor lopende dossiers zijn we vervolgens in staat om ruim 25% van de kosten besparen.</p>
<div class="lijnDun"></div>
<h3>Commercie: Jagen op kansloze missies, of focus op reële kansen?</h3>
<p>Waar in de markt moet ik zijn om zinvol te acquireren? Op welke aanbesteding kan ik beter niet inschrijven omdat we die niet gaan winnen? Aan welke prospect besteed ik op vrijdagmiddag mijn laatste tijd deze week? Het antwoord op dit soort vragen is de sleutel naar een efficiëntere verkoopafdeling. <br><br>
En dat is concreet mogelijk met neurale netwerktechnologie! Zo zijn we bij voorbeeld in staat om de openstaande offertes van een bedrijf te onderverdelen in drie groepen:
<ul class="commercie">
<li>Offertes waarvan 60% zal leiden tot een opdracht.</li>
<li>Offertes waarvan 20% zal leiden tot een opdracht.</li>
<li>Offertes waarvan 1% zal leiden tot een opdracht.</li>
</ul>
</p>
<div class="lijnDun"></div>
<h3>Logistiek: Blijft de klant thuis voor de bezorger, of niet?</h3>
<p>Hoe laat de pakketbezorger een pakketje aan zal bieden is lastig te voorspellen. Dit is niet alleen afhankelijk van de chauffeur, maar bij voorbeeld ook van de weersomstandigheden en het aantal pakketten dat die dag uitgereden moet worden. We hebben 'proof of concept' mogen leveren op het afgeven van een tijdvakindicatie voor de bezorging van een pakket. Met neurale netwerktechnologie zijn we in staat het aantal verkeerde voorspellingen met 2/3 terug te dringen.<br><br>
Wanneer de voorspelde bezorgtijd betrouwbaar blijkt, zal de consument er meer waarde aan hechten. En er voor thuis blijven, waardoor de klanttevredenheid omhoog gaat evenals de 'hitrate' in de bezorging.</p>
<div class="lijnDun"></div>
<h3>Huurinning: De huurder uitzetten of het samen oplossen?</h3>
<p>'Vroege signalering', de branche heeft het er al jaren over en neurale netwerktechnologie maakt het mogelijk. Iedere maand opnieuw worden woningcorporaties geconfronteerd met huurders die niet (op tijd) betalen. Een klein deel hiervan belandt uiteindelijk in een uitzettingsprocedure. Wanneer bij de eerste uitblijvende betaling al duidelijk is hoe groot de kans is dat de huurder behoort bij die kleine probleemgroep, kan de opvolging hierop inspelen. Dat verhoogt de kans om samen met de huurder andere oplossingen te vinden. De toegevoegde waarde is sociaal misschien nog wel groter dan financieel.</p>
</div>
<div class="lijnDik"></div>
<div class="overOns" id="overOns">
<h2>Over ons</h2>
<p class="pfTekst">Een succesvol neuraal netwerk realiseren is complex. Om van scratch af aan een neuraal netwerk te bouwen, is gedegen kennis van de neurale netwerk technologie en algoritmes noodzakelijk.
Analytisch vermogen en het goed begrijpen van de klantsituatie zijn essentieel om de juiste toepassingen binnen een organisatie te herkennen en de data bruikbaar in te zetten.<br><br>
Dat is ons specialisme. Daarbij wij zijn zo overtuigd van de effectiviteit van onze toepassingen, dat we werken volgens het 'no cure no pay' principe. <br><br>
<em>"Resultaten uit het verleden zijn de basis voor de toekomst."</em></p>
<p class="pasfotoP"><img src="../Media/pfk.jpg" class="pasfoto"></p>
<p class="pasfotoP"><img src="../Media/pfj.png" class="pasfoto pfJeroen"></p>
<p class="afbeeldingTekst"><em>Koen Meeusen en Jeroen Blokdijk</em></p>
</div>
</div>
<div class="footer">
<p class="links">Neur<em>Op</em> BV<br>
koen.meeusen#neurop.nl<br>
+31 651 808 628</p>
<p class="rechts">KvK nummer: 64592154<br>
BTW nummer: 855734425B01<br>
IBAN: NL80 INGB 0007 1271 10<br>
Algemene Voorwaarden</p>
</div>
<!-- Algemene voorwaarden in PDF bestand downloaden in footer -->
</body>
</html>
And here is my CSS code:
/************/
/* MENUBALK */
/************/
.navbar {
background-color: #60C8FF;
width: 100%;
height: 120px;
border-bottom: 3px solid #36B9FF;
position: fixed;
top: -5px;
}
.navbar h1 {
padding: 5px;
border-bottom: none;
text-align: center;
}
.navbar li {
display: inline;
width: 100%;
}
.navbar ul {
text-align: center;
width: 100%;
position: fixed;
top: 50px;
}
/**********/
/* FOTO'S */
/**********/
.afbeeldingTekst {
margin-top: 0px;
}
/********************/
/* LIJN ONDER KOPJE */
/********************/
.lijnDik {
border-top: solid 4px #36B9FF;
}
.lijnDun {
border-top: solid 2px #36B9FF;
}
/***********/
/* CONTENT */
/***********/
.content {
width: 70%;
margin: auto;
}
.home {
margin-top: 120px;
}
.machineLearning {
border-bottom: 2px solid #36B9FF;
width: 100%;
}
.pcHersenen {
width: auto;
height: auto;
max-width: 90px;
margin-top: -16px;
}
.ervaringLeermeester {
float: left;
}
.commercie {
margin-top: -15px;
margin-left: -20px;
list-style-type: square;
}
.overOns {
width: 100%;
}
.pasfoto {
width: auto;
height: 150px;
border-radius: 30px;
}
.pasfotoP {
display: inline-block;
}
.pfJeroen {
margin-left: 30px;
}
/**********/
/* FOOTER */
/**********/
.footer {
background-color: #303030;
color: #FFF;
height: auto;
display: inline-block;
width: 100%
}
.footer p {
display: inline-block;
}
.footer .links a {
color: #FFF;
text-decoration: none;
pointer-events: none;
cursor: text;
}
.footer .rechts a {
color: #FFF;
}
.footer .rechts {
float: right;
margin-right: 10px;
}
.footer .links {
float: left;
margin-left: 10px;
}
I tried a lot of things to fix this, but I don't think you will be able to pull it off with only CSS. Adding the #id to the href of the anchor tag tells the browser to put the element with that id on the y-position: 0. I tried adding ::before on the .content, padding-top, ... But every time it adds up to that first element... You can't add 120px padding on every div you want to link to because it will look ridiculous.
I suggest you try to fix this with JS or read these related posts.
HTML position:fixed page header and in-page anchors
offsetting an html anchor to adjust for fixed header
Also, try not to put classes or anything of your markup in Dutch... You should use English in case you need to ask questions up here.
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>