I've the below HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="container2">
<div class="container1">
<div class="col1">
<div class="para">
Sinds 2007 is For the Road een gerespecteerd muziekbedrijf met het accent op boekingen, advies en management. Een uitgebreid netwerk van podia, pers en partners in de muziekindustrie vormen de basis waarmee bands en singer-songwriters bij For the Road zich kunnen ontwikkelen tot een succesvolle act. Met de ervaring opgedaan met bands als T-99, Sinas, Cuban Heels, Rob van de Wouw, Carlo de Wijs, New Cool Collective, Zuco103, C-mon & Kypski en vele anderen, helpt For the Road bands met alle facetten in de aanloop naar succes. Denk hierbij aan boekingen, strategisch management, creative management, pr, advies en het maken van verbindingen met relevante partners. De kracht van For the Road is het helpen van ambitieuze talentvolle bands en singer-songwriters in de opbouwfase naar (groter) succes.
</div>
</div>
<div class="col2">
Sinds 2007 is For the Road een gerespecteerd muziekbedrijf met het accent op boekingen, advies en management. Een uitgebreid netwerk van podia, pers en partners in de muziekindustrie vormen de basis waarmee bands en singer-songwriters bij For the Road zich kunnen ontwikkelen tot een succesvolle act. Met de ervaring opgedaan met bands als T-99, Sinas, Cuban Heels, Rob van de Wouw, Carlo de Wijs, New Cool Collective, Zuco103, C-mon & Kypski en vele anderen, helpt For the Road bands met alle facetten in de aanloop naar succes. Denk hierbij aan boekingen, strategisch management, creative management, pr, advies en het maken van verbindingen met relevante partners. De kracht van For the Road is het helpen van ambitieuze talentvolle bands en singer-songwriters in de opbouwfase naar (groter) succes.
</div>
</div>
</div>
</body>
</html>
and the below CSS.
.container2 {
clear: left;
float: left;
width: 100%;
overflow: hidden;
}
.container1 {
float: left;
width: 100%;
right: 50%;
}
.col1 {
float: left;
width: 46%;
left: 52%;
overflow: hidden;
}
.col2 {
float: left;
width: 46%;
left: 56%;
overflow: hidden;
padding-left: 5em;
}
Here i'm trying to make a 2 column div layout. Here when i run this, in a full screen mode. This works fine. Below is the output.
http://liveweave.com/gqio3u
But when i view it in a small screen the content appears to be like one div below another.
Here I know that using position: relative would solve the problem. But our app where i need to upload the content onto, doesn't accept position, it will throw an error.
Please let me know how can i fix this. I need 2 column layout even when i resize.
Thanks
I've created a JSFiddle
.col1 {
float: left;
width: 45%;
overflow: hidden;
padding-right:2%;
}
.col2 {
float: left;
width: 45%;
overflow: hidden; padding-left:2%;
}
Please have a look, this will do the trick for you.
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
My navigation bar uses position: sticky, but because the body doesn't go further than the video. The other elements are floating, but they somehow won't go in the body.
When I use a wrapper, all the code is in the body, but the navigation bar isn't sticky any more. I tried overflow auto and all but it doesn't work. Here is my code:
body {
background-image: url(bf1.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
font-family: roboto, sans-serif;
}
header img {
margin: auto;
width: 30vw;
height: 10vh;
display: block;
}
header {
margin: 0;
clear: both;
}
nav {
width: 100%;
height: 8vh;
background-color: black;
margin: 0;
position: sticky;
top: 0;
clear: both;
}
nav ul {
margin: 0;
list-style: none;
text-align: center;
}
nav li {
display: inline-block;
margin: 2vh 2vw 0px 2vw;
}
nav a {
color: white;
font-size: 1.25em;
text-decoration: none;
}
nav a:hover {
color: #FF5D09;
}
#huidig {
color: #FF5D09;
}
#trailer {
width: 100%;
margin: 1% 0%;
clear: both;
}
#trailer iframe {
width: 50vw;
height: 60vh;
margin: 0 auto;
display: block;
border: solid black 4px;
}
article {
color: white;
height: auto;
width: 70vw;
float: left;
font-size: 110%;
text-align: center;
}
<header> <img src="header.png" /> </header>
<nav>
<ul>
<li><a id="huidig" href="home.html">Home</a></li>
<li>They Shall Not Pass</li>
<li>In the Name of the Tsar</li>
<li>Community</li>
</ul>
</nav>
<div id="trailer">
<iframe src="https://www.youtube.com/embed/zOKZtgsUCtc?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<article>
<div id="Intro">
<h2> Introductie</h2>
<p>Battlefield 1 is een first person shooter ontwikkeld door EA DICE. Ondanks de 1 is het de 15e game in de series. In tegenstelling tot de voorganger speelt Battlefield 1 zich af in de 1e wereldoorlog. Wat Battlefield 1 (eigenlijk de hele Serie) nou
bijzonder maakt, in vergelijking met de competitie, is het feit dat het voertuigen bevat die spelers zelf kunnen besturen. Verder bevat het spel veel grotere maps dan de concurrenten.
</p>
</div>
<img src="pic1home.jpg" />
<div id="Singleplayer">
<h2>Singleplayer</h2>
<p>Voor Battlefield 1 heeft de developer gekozen voor een andere soort storyline dan ze altijd hebben gedaan. In de vorige titels waren het altijd opeenvolgende missies die je moest doen. Het perspectief was altijd vanuit één persoon en het was een tradionele
singleplayer, zoals de andere shooters. Bij Battlefield 1 hebben ze nu war stories. In plaats van een reeks missies, speel je nu als het ware meerdere kleine singleplayers. Je kunt het zien als hoofstukken, elk hoofstuk heeft een paar missies die
het verhaal van de hoofdpersonage vertellen. Je speelt daardoor ook niet als één persoon, maar als meerdere tijdens de eerste wereldoorlog.
</p>
<table>
<tr>
<th>War Story</th>
<th>Hoofdpersonage</th>
<th>Thema</th>
</tr>
<tr>
<td>Through Mud and Blood</td>
<td>Daniel Edwards</td>
<td>Mark V tank</td>
</tr>
<tr>
<td>Friends in high places</td>
<td>Clyde Blackburn</td>
<td>Luchtgevechten </td>
</tr>
<tr>
<td>Avanti Savoia</td>
<td>Luca Vincenzo</td>
<td>zoektocht</td>
</tr>
<tr>
<td>The Runner</td>
<td>Frederick Bishop</td>
<td>vriendschap <br/>opoffering </td>
</tr>
<tr>
<td>Nothing is Written</td>
<td>Zara Ghufran</td>
<td>Pantsertrein <br/> vrijheid</td>
</tr>
</table>
</div>
<div id="multiplayer">
<h2>Multiplayer</h2>
<p>De multiplayer van Battlefield 1 is voor veel mensen de reden om het spel te kopen. Het bevat voertuigen zoals tanks, vliegtuigen en boten en gedetailleerde omgevingen. Elk voertuig heeft 3 variaties die je kunt kopen. Elke variate geeft het voertuig
andere wapens, zodat het meer anti-tank focussed is of juist goed for infanterie. Een nieuw gameplay element in Battlefield 1 is de behemoth. Als een team dreigth te verliezen met een groot verschil krijgt het toegang tot een speciaal voertuig om
een comeback te maken. Het voertuig verschilt per map en kan een armored train zijn, maar ook een enorme zeppelin.</p>
</div>
</article>
<div id="sidenav">
<ul>
<li>Introductie</li>
<li>singleplayer</li>
</ul>
</div>
oh i made the most stupidest question. sorry for wasting your time guys. i appreciate your will to help. the problem was that the body collapsed, i made a test footer with clear:both and it fixed the problem. sorry again for posting something this stupid.
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.
My left sidebar disappeared after adding an image to the header!
Here is how it looks now:
Normally the left sidebar is the same as the one on the right with the fruit things. Does somebody know why this happened?
The image that I added is in the "headerimage" class. The HTML and CSS code are shown below.
Code HTML:
<body>
<!-- HEADER -->
<div class="header">
<img src="Logo Greenery.png" class="image"
<div class="headerimage"><img src="vegatbles.png" style=" width:200px; height:150px; /></div>
</div>
<!--LEFT-BAR-->
<div class="left-side"></div>
<!--NAV-BAR-->
<div class="navbar-nav" style="text-align: center;">
<!-- Navigatiebar met de links erin -->
<button type="button">Producten</button>
<button type="button">Registreren</button>
<button type="button">Over ons</button>
<button type="button">Contact</button>
</div>
<!--RIGHT-BAR-->
<div class="right-side"></div>
<!--CONTENT-->
<div class="Content">
<h1 style="text-align:center;">Hoofdstuk 1</h1>
<h3>Een digitale tekst, elektronische tekst of e-tekst bestaat in principe uit een code voor ieder teken (in tegenstelling tot een grafische weergave zoals bij een letter op papier, en in tegenstelling tot een klank), eventueel aangevuld met opmaakcodes. (De meest basale codes die geen zichtbare tekens representeren zijn die voor de spatie en de nieuwe regel.) Dit maakt efficiënte elektronische opslag mogelijk, bijvoorbeeld als een txt-, html-, doc- of pdf-bestand, of in een van de speciale formats voor e-boeken.
Voordelen van een digitale tekst ten opzichte van een tekst op papier zijn (een en ander voor zover deze mogelijkheden niet zijn ingeperkt, zoals bij Digital Rights Management, en verder afhankelijk van het bestandstype en de software) de doorzoek-, bewerk-, kopieer- en verzendbaarheid (onder andere e-mail en sms), de geringe massa en het geringe volume van een gegevensdrager, de instelbaarheid van de lettergrootte met automatische aanpassing van de hoeveelheid tekst op een regel aan de scherm- of vensterbreedte zodat zo veel mogelijk tekst op een regel staat zonder dat horizontaal scrollen nodig is, en de mogelijkheid tot keuze van een lettertype.
Een nadeel is dat een apparaat en software nodig zijn om een tekst te kunnen lezen (de codes worden daartoe terugvertaald naar de grafische weergave op een beeldscherm) of te annoteren/bewerken/schrijven.
Een tussenvorm waarbij de voordelen gedeeltelijk van toepassing zijn is het als afbeelding opslaan van ingescande tekstpagina's. Dit wordt toegepast als de tekst oorspronkelijk op papier stond en het te veel werk is om de tekst te digitaliseren (eventueel met OCR), of als men de oorspronkelijke opmaak exact wil behouden. In het laatste geval wordt ook wel een combinatie. toegepast van digitalisatie ten behoeve van doorzoekbaarheid, maar weergave als afbeelding.
Omzetting van digitale tekst naar tekst op papier gebeurt met een printer.</h3>
</div>
<!--FOOTER-BAR-->
<div class="footer-side">
</div>
Code CSS:
body {
margin-left:240px;
background-color:antiquewhite;
}
.header{
width: 1300px;
height: 154px;
background-color: green;
border-radius: 25px;
}
.headerimage{
margin-right: 30px;
float: right;
}
.navbar-nav {
background-color: tan;
text-align: center;
vertical-align: center;
height: 60px;
width: 1300px;
margin-left: 0px;
border-radius: 25px;
}
.left-side {
float: left;
width: 100px;
height: 1000px;
margin-top: 60px;
margin-right: 50px;
background-image: url('fruittest.png');
background-size: auto;
border-radius: 25px;
}
.right-side {
float: right;
width: 100px;
height: 1000px;
margin-top: 0px;
margin-left: 40px;
background-image: url('fruittest.png');
background-size: auto;
border-radius: 25px;
}
.footer-side{
height: 100px;
width: 1300px;
background-color:green;
text-align: center;
margin-top:1000px;
}
.content{
margin-top: -1000px;
margin-bottom: 200px;
}
You have error in this line:
<img src="Logo Greenery.png" class="image"
replace to
<img src="Logo Greenery.png" class="image">
Solved:
css:
.imagee{
margin-right: 750px;
}
HTML:
<!-- HEADER -->
<div class="header">
<img src="Logo Greenery.png"/>
<img src="vegatbles.png" style=" width:200px; height:150px; class="headerimage" />
</div>