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.
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
I use auto height on my website so that the height will change with how much content is in the div. But I need 3 divs in the same row to have the same height even when being resized (responsive).
Currently, div 1 or 2 get a different height with resizing the browser.
Is there a way to code this so that all three will stay to have the same height no matter how much you resize for responsiveness?
CSS:
#integel {
background-color:rgba(255,255,255,1);
height:auto;
width:30%;
min-height: 30em;
display:inline-block;
line-height:2.3vw;
overflow:hidden;
float:left;
margin-top:0%;
margin-bottom:5%;
margin-left:2.5%;
margin-right:0%;
color:black;
border:solid rgba(63, 146, 195, 1) 0.3vmax;
}
#integel1 {
background-color:rgba(255,255,255,1);
height:auto;
width:30%;
min-height: 30vmax;
display:table-row;
line-height:2.3vw;
overflow:hidden;
float:left;
margin-top:0%;
margin-bottom:5%;
margin-left:2.5%;
margin-right:0%;
color:black;
border:solid rgba(63, 146, 195, 1) 0.3vmax;
}
#integel3 {
background-color:rgba(255,255,255,1);
height:auto;
min-height: 30vmax;
width:30%;
display:inline-block;
line-height:2.3vw;
overflow:hidden;
float:left;
margin-top:0%;
margin-bottom:5%;
margin-left:2.5%;
margin-right:0%;
color:black;
border:solid rgba(63, 146, 195, 1) 0.3vmax;
}
As you can see at www.gester.nl (at the services part)
Hi
I take elements of site linked by you. If they should be like now (3 in first line, fourth alone with full size) you have snippet here below. If you want to have 4 in one line just change flex of #services div to 25% and delete flex for #services div:last-child.
#services {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: center;
}
#services div {
border: 1px solid tomato;
flex: 0 0 30%;
}
#services div:last-child {
margin-top: 10px;
border: 1px solid royalblue;
flex: 0 0 100%;
}
<div id="services">
<div id="integel">
<p class="prijsinfo">Bent u opzoek naar een unieke website? Ik creëer speciaal voor u een unieke stijl. Een <b>HTML website</b> laten bouwen, uiteraard responsive ook op mobiel en tablet. U kunt zelf niks veranderen aan de inhoud, daarvoor ben ik hier voor u(*Gratis). <br>
<br>
Een <b>HTML website</b> is geschikt als er bijna nooit iets aangepast hoeft te worden. Als uw website veel gewijzigd moet worden en als u zelf teksten en foto's wilt wijzigen, dan is een <b>CMS website</b> perfect voor u!<br>
<br>
Bekijk voorbeeldwebsites in mijn <a id="link" class="link1" href="javascript:;">portfolio</a> of ga naar <a class="link2" id="link" href="javascript:;">contact</a>.
</p>
<p class="prijs">
*Prijs HTML website vanaf 69,99 euro,-
</p></div>
<div id="integel3">
<p class="prijsinfo"> Of wilt u liever een voorbeeld website van WordPress. Hierbij ontwerpen wij niet de vormgeving, u kiest eenvoudig uit meer dan duizend vormgeving thema's. Dit is ook responsive voor mobiel en tablet. Op deze manier hoeven wij de vormgeving niet te creëren en duurt het maximaal 2 dagen*.</p>
<img id="themas" src="images/wordpress.jpg">
<br>
<br>
<br>
<p class="prijs">*Prijs voorbeeld(WordPress)website vanaf 44,99 euro,-</p>
</div>
<div id="integel1">
<p class="prijsinfo">Een <b>CMS website</b> staat voor Content Management System: u kunt zelf makkelijk vanaf thuis de inhoud van uw website veranderen. Dit word ook gemaakt met een unieke vormgeving en helemaal responsive voor mobiel en tablet. Het is door het systeem makkelijk om pagina's aan te maken, maar ook tekst, foto's en filmpjes. Het is daarom handig om voor dit pakket te kiezen als u zelf veel inhoud wilt aanpassen.<br>
<br>
Wees niet gevreesd over de complexiteit, het werkt ongeveer alsof u in een tekstverwerker werkt. Het is heel eenvoudig en als u vragen heeft kunt u altijd <a id="link" class="link2" href="javascript:;">contact</a> met ons opnemen.
<br>
<br>
</p>
<p class="prijs">*Prijs CMS website vanaf 179,99 euro,-</p>
</div>
<div id="integel2">
<p class="onderinfo">
Ik heb 2 jaar ervaring en ik heb veel geleerd. Daarom ben ik er nu klaar voor om voor u wat mooi's te maken. Ik vind dat alle websites teveel op elkaar lijken, doordat mensen een standaard style voor hun website gebruiken. Hierdoor wil ik op deze manier proberen om daar doorheen te breken met mijn creativiteit. Uw website hoort uniek te zijn, daarbij horen uw ideeën en wensen. Ik ben zeer gepassioneerd over het maken van websites en ik leer steeds meer en meer. Ik ben enthousiast, klantgericht en betrouwbaar met veel motivatie. De volgende stap voor mij om te leren is hoe ik een webshop website kan maken.<br>
<br>
Wij werken met Wordpress: Wordpress <b>Content Management System</b>.
Wordpress is het beste CMS op dit moment. Het heeft veel uitbreidingsmogelijkheden(plugins) en het is veilig.<br>
<br>
U kunt een website website uitbreiden door:<br>
<br>
Meertalig te maken.<br>
Responsive te maken voor mobiele telefoons en tablets en nog veel meer.<br>
<br>
Voor meer vragen en wensen kunt u <a id="link" class="link2" href="javascript:;">contact</a> met ons opnemen.
<br>
<br>
Om de websites te bekijken die ik gemaakt heb ga naar <a id="link" class="link1" href="javascript:;">portfolio</a>.
<br>
<br>
*Prijs is exclusief btw.<br>
*HTML website - Alle tekst en foto's bewerken zijn 2x per jaar gratis, daarna geldt bij ons het uurtarief.
<br>
*WordPress thema website uitwerken duurt 2 dagen bij weinig pagina's en inhoud.
</p>
<p class="prijs">Uurtarief: 19,99 euro,-</p>
</div>
</div>
More about CSS3 Flexbox you can find e.g. on W3Schools page.
Hope that was helpful.
Cheers
Use FLexbox!
Something like this:
.wrapper {
display: flex;
flex-direction:row;
flex-wrap: wrap;
justify-content: space-between;
}
.col {
width: 30%;
padding: 1%;
}
A js Fiddle
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>
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>