I want to class="contactvlak" to get next to class="middentextvak", I've tried a lot of things like changing positions etc. but it doesn't seem to work at all. I'm sorry if this sounds like a really stupid question.
<div class="midden">
<img class="logo" src="images/logo.png">
<div class="middentextvak">
<h1>Welkom bij autorijschool NRV! </h1>
<p>In Veldhoven en omgevingen verzorgen wij uw complete rijopleiding in onze volkswagen.
<br>Een rijopleiding met oog voor detail. U en uw behoefte staan hierbij steeds centraal.
<br>Onze ervaren instructeur geeft u een moderne rijopleiding geheel afgestemd op uw aanvangsniveau. Zo ben u altijd verzekerd van het zo mogelijk behalen van uw rijbewijs tegen een zo laag mogelijke prijs.
<br>
<br>
Klik hier voor de meest recente slagingspercentage.
</p>
</div>
<div class="contactvlak"></div>
</div>
css:
.midden
{
clear:both;
width: 100%;
height: 400px;
}
.middentextvak
{
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 43%;
height: 50%;
background: rgba(255, 255, 255, 0.5);
margin-top: 7%;
}
.contactvlak
{
width: 100px;
height: 100px;
background: white;
}
.middentextvak h1
{
padding-top: 2%;
padding-left: 5%;
font-family:Arial;
color: #0671ca;
font-size: 23px;
}
.middentextvak p
{
padding-left: 5%;
font-family:Arial;
margin-top: -2%;
}
.logo
{
position: absolute;
display: block;
margin-left: 15%;
margin-right: auto;
width:70%;
z-index: 0;
opacity:0.5;
clear: both;
}
Jfiddle: http://jsfiddle.net/H5LmF/9/
Edit: Sorry posted the wrong fiddle!
Add position:relative to .midden, and position:absolute and top:0 to .contactvlak.
jsFiddle example
The classes middentextvak and contactvlak are the children of class midden. Right?
So add display: inline; position: relative properties to the midden class and you will get the two divs side by side.
Related
I'm trying to create a div (text) on top of another div (rotated white plane). When I create a new div the text is being placed behind and on a lower layer as the previous plane. This is the current website (I'm trying to get text under the bottle image):
Click here
My code (CSS & HTML):
/* Navigation Bar */
.topnav a {
float: left;
color: lightgray;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
vertical-align: center;
}
.topnav a.logo {
float: left;
text-align: center;
padding: 0px 0px;
text-decoration: none;
font-size: 17px;
}
.topnav a.index:hover {
background-color: #ddd;
color: black;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #FC8E11;
font-weight: bold;
color: white;
}
.topnav {
background-color: #333;
overflow: hidden;
font-family: arial;
}
/* Body settings */
body {
margin: 0px;
padding: 0px;
background-color: #FFFF;
height: 2000px;
overflow-x: hidden;
}
.content {
position: relative;
}
.plane {
background-color: white;
width: 120%;
-ms-transform: rotate(5deg);
transform: rotate(5deg);
height: 370px;
position: absolute;
bottom: -140px;
left: -10%;
}
.plane2 {
background-color: #FC8E11;
position: absolute;
width: 100%;
height: 870px;
left: 0;
top: 0px;
z-index: -5;
}
.titletext {
text-align: middle;
}
.product_image {
margin-left: auto;
margin-right: auto;
width: 800px;
padding-top: 40px;
}
.container {
margin: 0;
padding: 0;
width: 50%;
margin-left: auto;
margin-right: auto;
padding-top: 220px;
}
.tekst {
width: 100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
}
<!--Navigation Bar-->
<div class="topnav">
<a class="logo" href="index.html"><img src="/images/logo_groot.png" alt="logo" width="48" height="48" align="left"></a>
<a class="index active" href="index.html">Over ons</a>
<a class="index" href="verkooplocaties.html">Verkooplocaties</a>
<a class="index" href="contact.html">Contact</a>
</div>
<div class="content">
<!--Illustration-->
<div class="product_image">
<img src="/images/illustration.png" width="800px" height="800px">
</div>
<!--Planes-->
<div class="plane2"></div>
<div class="plane"></div>
</div>
<div class="container">
<!--Text-->
<div class="tekst">
<p> Heb je tijdens het sporten sleutels of pin- & sportpassen bij je? Hinderen deze spullen je soms bij het sporten? BottleBuidel is een houder voor je drinkfles waar je deze spullen in kan bewaren tijdens het sporten. Door de flexibele stof past de BottleBuidel
om iedere sportfles en kun je daardoor altijd je spullen bij je houden zonder dat je deze hoeft te bewaren in je broekzakken of op de grond. De BottleBuidel is gemaakt van geupcyclede (gewassen!) sportbroeken waardoor het bijdraagt aan een duurzamere
wereld! Meer informatie over het product, verkooplocaties en de prijs is te vinden op de product pagina.</p>
</div>
</div>
you can try giving z-index to the div maybe z-index is the order of something in the z dimension lets say if you want the second div to be in front you can give it the z-index of one
the code looks like this:
z-index:1;
I have two question:
1) How can I let the start button work. My idea is that if you click on start that it jumps to the text i wrote.
2) The hover function in my header doesn't work. It used to work but now it doesn't so I am kind of confused.
Can anyone help me fine the problem i'm missing something.
Thanks
body {
/*geld voor alles */
height: 100%;
margin: 0;
}
.centered {
/* maak tekst in het midden*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header {
/*balk boven aan gemaakt met w3schools en hulp van forums */
background-color: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 150px;
padding: 5px 20px;
margin-top: 30px;
}
.content {
/* geen idee stond op w3schools */
padding: 16px;
}
.sticky {
/* voor de header*/
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
/* voor de header */
padding-top: 102px;
}
.logo {
/* logo linksboven */
Width: 150px;
height: auto;
filter: brightness(0) invert(1);
float: left;
}
h1.startdereis {
/* tekst met start de reis */
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: -80px;
font-family: sans-serif;
}
.straatfoto {
/* de straat met een donker filter */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(straat.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.knop {
/* start knop */
margin-top: 30px;
margin-left: 550px;
}
.knop1 {
/* start knop*/
border: 3px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
background-color: darkorange;
font-family: "Roboto", sans-serif;
margin-left: -300px;
}
.hoofd-nav {
/* voor de header */
float: right;
list-style: none;
margin-top: 30px;
padding-right: 100px;
}
.hoofd-nav li {
/* voor de header */
display: inline-block;
}
.hoofd-nav li a {
/* voor de header */
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
border: 3px solid transparent;
}
.hoofd-nav li a.actief {
/* maakt een vierkantje om de actieve onderwerp */
border: 3px solid white;
}
.hoofd-nav li a:hover {
?
/* maakt een blokje als je er overheen gaat */
border: 3px solid white;
}
.voorstellen
{
max-width: 600px;
font-size: 18px;
color: Black;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
font-family:sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<div class="header" id="myHeader">
<img class="logo" src="leeuw.png">
<ul class="hoofd-nav">
<li> Home </li>
<li> Voorstellen </li>
<li> Hobby's </li>
<li> Toekomstdromen </li>
</ul>
</div>
<script>
window.onscroll = function() {
myFunction()
};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</header>
<body>
<div class="container">
<div class="straatfoto"></div>
<div class="centered">
<h1 class="startdereis">Start De Reis</h1>
<div class="knop">
Start
</div>
</div>
</div>
<div class="voorstellen">
<h2>Wie ben ik?</h2>
<p>Mijn volledige naam is Duco Gerard van de Schepop. Mijn tweede naam komt van mijn hele muzikale opa, die ik helaas nooit gekent heb. Op het moment dat ik werd geboren had ik geen opa's meer en nog maar een oma. Mijn enige oma die nog leefde woonde in Duitsland. We zochten haar meestal om de vakantie op. Voor mij was het meestal best saai want ik sprak toen ik klein was sprak ik nog geen Duits, dus was het moeilijk om met mijn oma te praten en in een bejaardenhuis is nou eenmaal weinig te doen. Op het moment dat ik in de tweede wat Duits had geleerd en ook echt zelf wat kon zeggen tegen mijn oma i.p.v dat mijn ouder het zouden vertalen stierf mijn oma jammer genoeg.
<br><br>
Nu even genoeg over mijn opa's en oma's. Ik woon vijtien jaar in Soest met mijn vader, moeder en sinds dat ik drie werd ook een kleiner zusje. Er is niet echt iets bijzonders dat ik kan vertellen over mijn gezin, we zijn gewoon een doodgewoon gezin.
<br><br>
</div>
</body>
</html>
You can solve this by adding an ID to your text div and changing the link of your start button to #yourid.
Here's a working demo:
body {
/*geld voor alles */
height: 100%;
margin: 0;
}
.centered {
/* maak tekst in het midden*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header {
/*balk boven aan gemaakt met w3schools en hulp van forums */
background-color: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 150px;
padding: 5px 20px;
margin-top: 30px;
}
.content {
/* geen idee stond op w3schools */
padding: 16px;
}
.sticky {
/* voor de header*/
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
/* voor de header */
padding-top: 102px;
}
.logo {
/* logo linksboven */
Width: 150px;
height: auto;
filter: brightness(0) invert(1);
float: left;
}
h1.startdereis {
/* tekst met start de reis */
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: -80px;
font-family: sans-serif;
}
.straatfoto {
/* de straat met een donker filter */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(straat.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.knop {
/* start knop */
margin-top: 30px;
margin-left: 550px;
}
.knop1 {
/* start knop*/
border: 3px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
background-color: darkorange;
font-family: "Roboto", sans-serif;
margin-left: -300px;
}
.hoofd-nav {
/* voor de header */
float: right;
list-style: none;
margin-top: 30px;
padding-right: 100px;
}
.hoofd-nav li {
/* voor de header */
display: inline-block;
}
.hoofd-nav li a {
/* voor de header */
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
border: 3px solid transparent;
}
.hoofd-nav li a.actief {
/* maakt een vierkantje om de actieve onderwerp */
border: 3px solid white;
}
.hoofd-nav li a:hover {
?
/* maakt een blokje als je er overheen gaat */
border: 3px solid white;
}
.voorstellen
{
max-width: 600px;
font-size: 18px;
color: Black;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
font-family:sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<div class="header" id="myHeader">
<img class="logo" src="leeuw.png">
<ul class="hoofd-nav">
<li> Home </li>
<li> Voorstellen </li>
<li> Hobby's </li>
<li> Toekomstdromen </li>
</ul>
</div>
<script>
window.onscroll = function() {
myFunction()
};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</header>
<body>
<div class="container">
<div class="straatfoto"></div>
<div class="centered">
<h1 class="startdereis">Start De Reis</h1>
<div class="knop">
Start
</div>
</div>
</div>
<div class="voorstellen" id="textjump">
<h2>Wie ben ik?</h2>
<p>Mijn volledige naam is Duco Gerard van de Schepop. Mijn tweede naam komt van mijn hele muzikale opa, die ik helaas nooit gekent heb. Op het moment dat ik werd geboren had ik geen opa's meer en nog maar een oma. Mijn enige oma die nog leefde woonde in Duitsland. We zochten haar meestal om de vakantie op. Voor mij was het meestal best saai want ik sprak toen ik klein was sprak ik nog geen Duits, dus was het moeilijk om met mijn oma te praten en in een bejaardenhuis is nou eenmaal weinig te doen. Op het moment dat ik in de tweede wat Duits had geleerd en ook echt zelf wat kon zeggen tegen mijn oma i.p.v dat mijn ouder het zouden vertalen stierf mijn oma jammer genoeg.
<br><br>
Nu even genoeg over mijn opa's en oma's. Ik woon vijtien jaar in Soest met mijn vader, moeder en sinds dat ik drie werd ook een kleiner zusje. Er is niet echt iets bijzonders dat ik kan vertellen over mijn gezin, we zijn gewoon een doodgewoon gezin.
<br><br>
</div>
</body>
</html>
I've been working on a website as a first year project, this is our first website that we need to make but i found out that we were supposed to use the <!DOCTYPE html> instead of <html> (which was told later on) but now that i do that, the background of my container/content div disappears and only shows a bit when i put a letter inside of it.
* {
padding: 0;
margin: 0;
min-height: 1px;
min-width: 1px;
}
html {
height: 100%;
}
#nav {
width: 100%;
background: linear-gradient(#009940, #009900, #009800);
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#nav li {
float: left;
}
#nav li a {
display: block;
transition: background-color 0.5s ease;
color: white;
font-size: 16px;
padding: 14px 18px;
text-align: center;
text-decoration: none;
}
#nav li a:hover {
background-color: #396108;
}
#nav li a img {
position: absolute;
margin-top: -0.4%;
margin-left: -0.7%;
}
#container {
width: 70%;
margin-left: 15%;
vertical-align: top;
}
#container #header {
width: 100%;
height: 3%;
background: linear-gradient(#009940, #008000, #009800);
}
#container #header p {
color: white;
font-size: 1.4em;
padding-top: 0.5%;
}
#content {
width: 100%;
height: 100%;
background-color: #e6e6e6;
}
.textClass {
border: 2px solid black;
margin-top: 7.5%;
margin-left: 5%;
margin-right: 5%;
width: 40%;
height: 20.7%;
background-color: white;
overflow: hidden;
float: left;
}
.textClass img {
padding-left: 1%;
padding-top: 1%;
padding-right: 1%;
width: 25%;
float: left;
transition:height 0s 10000s;
}
.textClass p {
padding-top: 0.5%;
word-wrap: break-word;
vertical-align: top;
}
.gallery {
float: left;
margin-top: 9%;
margin-left: 9%;
}
.gallery:hover img {
transform: scale(1);
transition: transform 1.5s ease;
}
.gallery img:hover {
transform: scale(1.75);
}
footer {
background-color: #009902;
text-align: center;
margin-left: 0;
color: white;
width: 70%;
margin-left: 15%;
margin-top: 70%;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Interreses - Website</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/Logo.ico" />
</head>
<body>
<div id="nav">
<ul>
<li>Home</li>
<li>Interreses</li>
<li>Groepsleden</li>
<li>Opleiding</li>
<li>Fotogalerij</li>
<li style="float: right;"><a style="width: 20px; height: 20px;" href="/index.html"><img src="/images/logo.png"></img></a></li>
</ul>
</div>
<div id="container">
<div id="header">
<p style="text-align: center;"> Interesses </p>
</div>
<div id="content">
<div style="width: 60%; height: 70%; margin-left: 19%; margin-top: 12%;" class="textClass">
<p style="font-size: 1.2em; text-align: center;">Ik ben geinterreseerd in Gamen, Programmeren en Video Editing, ik zal ook uitleggen waarom.<br>
<br>
</p>
<img src="/images/Gamen.jpg"/>
<p style="font-size: 1.2em;">Gamen is leuk om te doen in mijn vrije tijd, ik hoop dan ook wel minimaal 60 uur per twee weken aan gamen besteed, bijvoorbeeld: <br>
Gta V: 50 Uren <br>
Cs:Go: 193 Uren <br>
Age of empires 2: 71 Uren <br>
Skyrim: 41 Uren <br>
Garry's mod: 16 Uren<br>
</p>
<img src="/images/Programmeren.jpg"/>
<p style="font-size: 1.2em;">Programmeren is ook een hobby van mij, ik programmeer meestal in Java maar nu ook in Javascipt, HTML5 en CSS3, dit kon ik overigens wel al, maar ik heb het lang niet meer <br>
Java: 3 jaar <br>
HTML: 1/2-1 jaar <br>
CSS3: 1/2-1 jaar <br>
Javascript: 1-4 maanden<br>
</p>
<img src="/images/Java.png"/>
<p style="font-size: 1.2em;"><br>
Java is mijn favoriete taal waar ik later ook een baan mee wil krijgen <br>
ik programmeer al 3 jaar java, bijvoorbeeld: <br>
Enumeratie, Abstracte classes <br>
Interfaces en objecten <br>
en nog veel meer, meestal programmeer ik plugins voor games bijvoorbeeld Maple Story, Rune Scape en Minecraft </p>
<img style="margin-left: -27%; margin-top: 7%;" src="/images/VidEdit.jpg"/>
<p style="font-size: 1.2em; margin-top: 7%;"><br>
Video Editing deed ik erg vaak, nu niet meer maar het was wel een leuke tijdbesteding van mij <br>
MLG compilatie filmpjes maken en ze daarna weer verwijderen <br>
ik deed het video editing puur om het editen dus ik heb dus overige data want mijn PC is gereset<br>
</p>
</div>
</div>
</div>
</body>
<footer id="footer" style="margin-left: 0; color: white; width: 70%; margin-left: 15%;">Copyright by ******** (C) 2016-2019</footer>
</html>
The background of the content/container should be light gray
As already stated in the other answers you still need the <html> tag. Footer you said was by accident outside the body but I placed it inside the body in the snippet below. One way to get your elements flowing correctly in your HTML structure is to set float: left; to your #content div.
* {
padding: 0;
margin: 0;
min-height: 1px;
min-width: 1px;
}
#nav {
width: 100%;
background: linear-gradient(#009940, #009900, #009800);
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#nav li {
float: left;
}
#nav li a {
display: block;
transition: background-color 0.5s ease;
color: white;
font-size: 16px;
padding: 14px 18px;
text-align: center;
text-decoration: none;
}
#nav li a:hover {
background-color: #396108;
}
#nav li a img {
position: absolute;
margin-top: -0.4%;
margin-left: -0.7%;
}
#container {
width: 70%;
margin-left: 15%;
vertical-align: top;
}
#container #header {
width: 100%;
height: 3%;
background: linear-gradient(#009940, #008000, #009800);
}
#container #header p {
color: white;
font-size: 1.4em;
padding-top: 0.5%;
}
#content {
width: 100%;
height: 100%;
float: left;
background-color: #e6e6e6;
}
.textClass {
border: 2px solid black;
margin-top: 7.5%;
margin-left: 5%;
margin-right: 5%;
width: 40%;
height: 20.7%;
background-color: white;
overflow: hidden;
float: left;
}
.textClass img {
padding-left: 1%;
padding-top: 1%;
padding-right: 1%;
width: 25%;
float: left;
transition: height 0s 10000s;
}
.textClass p {
padding-top: 0.5%;
word-wrap: break-word;
vertical-align: top;
}
.gallery {
float: left;
margin-top: 9%;
margin-left: 9%;
}
.gallery:hover img {
transform: scale(1);
transition: transform 1.5s ease;
}
.gallery img:hover {
transform: scale(1.75);
}
footer {
background-color: #009902;
text-align: center;
margin-left: 0;
color: white;
width: 70%;
margin-left: 15%;
margin-top: 70%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Interreses - Website</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/Logo.ico" />
</head>
<body>
<div id="nav">
<ul>
<li>Home
</li>
<li>Interreses
</li>
<li>Groepsleden
</li>
<li>Opleiding
</li>
<li>Fotogalerij
</li>
<li style="float: right;">
<a style="width: 20px; height: 20px;" href="/index.html">
<img src="/images/logo.png" />
</a>
</li>
</ul>
</div>
<div id="container">
<div id="header">
<p style="text-align: center;">Interesses</p>
</div>
<div id="content">
<div style="width: 60%; height: 70%; margin-left: 19%; margin-top: 12%;" class="textClass">
<p style="font-size: 1.2em; text-align: center;">Ik ben geinterreseerd in Gamen, Programmeren en Video Editing, ik zal ook uitleggen waarom.
<br>
<br>
</p>
<img src="/images/Gamen.jpg" />
<p style="font-size: 1.2em;">Gamen is leuk om te doen in mijn vrije tijd, ik hoop dan ook wel minimaal 60 uur per twee weken aan gamen besteed, bijvoorbeeld:
<br>Gta V: 50 Uren
<br>Cs:Go: 193 Uren
<br>Age of empires 2: 71 Uren
<br>Skyrim: 41 Uren
<br>Garry's mod: 16 Uren
<br>
</p>
<img src="/images/Programmeren.jpg" />
<p style="font-size: 1.2em;">Programmeren is ook een hobby van mij, ik programmeer meestal in Java maar nu ook in Javascipt, HTML5 en CSS3, dit kon ik overigens wel al, maar ik heb het lang niet meer
<br>Java: 3 jaar
<br>HTML: 1/2-1 jaar
<br>CSS3: 1/2-1 jaar
<br>Javascript: 1-4 maanden
<br>
</p>
<img src="/images/Java.png" />
<p style="font-size: 1.2em;">
<br>Java is mijn favoriete taal waar ik later ook een baan mee wil krijgen
<br>ik programmeer al 3 jaar java, bijvoorbeeld:
<br>Enumeratie, Abstracte classes
<br>Interfaces en objecten
<br>en nog veel meer, meestal programmeer ik plugins voor games bijvoorbeeld Maple Story, Rune Scape en Minecraft</p>
<img style="margin-left: -27%; margin-top: 7%;" src="/images/VidEdit.jpg" />
<p style="font-size: 1.2em; margin-top: 7%;">
<br>Video Editing deed ik erg vaak, nu niet meer maar het was wel een leuke tijdbesteding van mij
<br>MLG compilatie filmpjes maken en ze daarna weer verwijderen
<br>ik deed het video editing puur om het editen dus ik heb dus overige data want mijn PC is gereset
<br>
</p>
</div>
</div>
</div>
<footer id="footer" style="margin-left: 0; color: white; width: 70%; margin-left: 15%;">Copyright by ******** (C) 2016-2019</footer>
</body>
</html>
Niet beat me to it in the comments on your post but #content isn't defined anywhere in your html. I'm assuming that the div with the textClass class is what you want the content to be so just add it to that div as you've done above.
Some other minor points:
You still need the opening <html> tag under your !DOCTYPE definition
<footer> should be inside <body> with everything else
I'd recommend setting those repeated <p> styles in your main content to a containing div such as the offending #content id. The styles will still be pulled through as they are now.
ID content is missing, but i've made some simple changes in css. Is this what you are looking for?
* {
padding: 0;
margin: 0;
min-height: 1px;
min-width: 1px;
}
html {
height: 100%;
}
#nav {
width: 100%;
background: linear-gradient(#009940, #009900, #009800);
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#nav li {
float: left;
}
#nav li a {
display: block;
transition: background-color 0.5s ease;
color: white;
font-size: 16px;
padding: 14px 18px;
text-align: center;
text-decoration: none;
}
#nav li a:hover {
background-color: #396108;
}
#nav li a img {
position: absolute;
margin-top: -0.4%;
margin-left: -0.7%;
}
#container {
width: 100%;
vertical-align: top;
background-color: #e6e6e6;
}
#container #header {
width: 70%;
height: 3%;
margin: 0 auto;
background: linear-gradient(#009940, #008000, #009800);
}
#container #header p {
color: white;
font-size: 1.4em;
padding-top: 0.5%;
}
.textClass {
border: 2px solid black;
margin-top: 7.5%;
margin-left: 5%;
margin-right: 5%;
width: 40%;
height: 20.7%;
background-color: white;
overflow: hidden;
float: left;
}
.textClass img {
padding-left: 1%;
padding-top: 1%;
padding-right: 1%;
width: 25%;
float: left;
transition:height 0s 10000s;
}
.textClass p {
padding-top: 0.5%;
word-wrap: break-word;
vertical-align: top;
}
.gallery {
float: left;
margin-top: 9%;
margin-left: 9%;
}
.gallery:hover img {
transform: scale(1);
transition: transform 1.5s ease;
}
.gallery img:hover {
transform: scale(1.75);
}
footer {
background-color: #009902;
text-align: center;
margin-left: 0;
color: white;
width: 70%;
margin-left: 15%;
margin-top: 70%;
}
The !doctype html tells your html page which version of HTML are you using.By default , it is the latest version that is HTML 5.
Now, html /html these tags define the starting and ending of your html page.
These are mandatory tags for your HTML page.
And in addition to these tags you use !doctype html tag.
Hope this helps you .
Add the following line after your <body>
<div id="content">
and then make sure to close the div before </body>
As Niet pointed out, you were lacking an element with the id of 'content'
<!doctype html>
does not replace the <html> tag. You need both, see http://www.w3ctutorial.com/tags/tag_doctype.
<!DOCTYPE html>
<html>
<head>...</head>
...
</html>
Does that help?
I have a 3 <a>'s to get the text you want, but it moves with the text that you want to get, it goes up and down with the text:
It keeps resizing with them and i've been trying to change this for a hour.
This is my css:
* {
padding: 0;
margin: 0;
}
#nav {
//background-color: #666;
position: fixed;
width: 100%;
background: linear-gradient(#009940, #009900, #009800);
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#nav li {
float: left;
}
#nav li a {
display: block;
transition: background-color 0.5s ease;
color: white;
font-size: 16px;
padding: 14px 18px;
text-align: center;
text-decoration: none;
}
#container {
width: 70%;
margin-left: 15%;
vertical-align: top;
height: 140%;
background-color: #e6e6e6;
}
#nav li a:hover {
background-color: #396108;
}
#nav li a img {
position: absolute;
margin-top: -0.4%;
margin-left: -1%;
}
#Text-marge {
margin-left: 30%;
margin-top: 0.2%;
width: 45%;
height: 29.5%;
padding-left: 4px;
background-color: gray;
overflow: hidden;
float: left;
}
#text-marge > p {
margin-left: 5%;
margin-top: 8%;
vertical-align: top;
}
#clicker > p {
display: inline-block;
//position: absolute;
float: left;
vertical-align: top;
}
#clicker {
margin-left: 28%;
margin-top: 12%;
}
#clicker ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#clicker li {
float: left;
}
#clicker li a {
display: block;
font-size: 24px;
padding: 14px 18px;
text-decoration: none;
color: white;
float: left;
}
#text {
}
and this my HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Homepage</title>
<script>
function runButton1() {
document.getElementById("text").innerHTML = "";
}
function runButton2() {
document.getElementById("text").innerHTML = "b";
}
function runButton3() {
document.getElementById("text").innerHTML = "c";
}
</script>
</head>
<body>
<div id="nav">
<ul>
<li>Home</li>
<li>Interreses</li>
<li>Groepsleden</li>
<li>Opleiding</li>
<li>Fotogalerij</li>
<li style="float: right;"><a style="width: 20px; height: 20px;" href="/index.html"><img src="logo.png"></img></a></li>
</ul>
</div>
<div id="container">
<img style="margin-top: 10%; margin-left: 5%; width: 25%;" align="middle" src="geslaagd.png"/>
<h1 style="margin-left: 12%; margin-top: -32%;">Geslaagd!</h1>
<div id="Text-marge">
<p id="text">In 2016 ben ik geslaagd en kon ik mijn droom opleiding volgen <br> en die opleiding heet: "Applicatie Ontwikkelaar" <br> ik hou van programmeren en dus vond ik dat het bij mij past <br> daarom had ik zo hard mogelijk gewerkt om het te halen. <br> Nu zit ik in een leuk project team waar je ook over kan lezen op <br> deze site, Kyran, Luuk, Collin, Dewi, Jeremy en Xander <br> zijn mijn teamleden. <br> Ik ben 17 jaar oud</p>
<div id="clicker">
<ul>
<li><a onclick="runButton1()">*</a></li>
<li><a onclick="runButton2()">*</a></li>
<li><a onclick="runButton3()">*</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
CBroe is correct Lucas. Set the div #clicker to position: absolute;. Make sure it's parent #text-marge is set to position: relative;.
You can position elements that are declared as absolute by using top/bottom etc. find out more here.
Also read this as to why its parent should be relatively positioned.
I'm making a website (in Dutch) and I work on a laptop with a external screen. The external screen has another resolution then my laptop screen so the site comes out distorted when viewed on the other screen. How do I fix this?
<!DOCTYPE HTML>
<html>
<head> <style type="text/css">
body {
background-color: #D8D8D8;
}
nav {
/* Dit is voor de menubalk bovenin. */
position: relative;
background-color: black;
width: 100%;
height: 110px;
top: -16px;
left: -7.8px;
padding: 8px;
}
.menutekst1 {
position: relative;
width: 150px;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
right: 40px;
font-family: verdana;
}
.menutekst2 {
position: relative;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
right: 25px;
font-family: verdana;
}
.menutekst3 {
position: relative;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
right: 50px;
font-family: verdana;
}
.menutekst4 {
position: relative;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
font-family: verdana;
}
#logo {
/* Dit is voor het logo rechts bovenin. */
position: absolute;
top: 30px;
left: 0px;
width: 300px;
}
#facebook {
/* Dit is voor het Facebook logo rechts bovenin. */
position: absolute;
top: 30px;
left: 320px;
width: 70px;
}
#hometekst {
/* Dit is voor de tekst op de home pagina. */
position: relative;
text-align: center;
font-size: 20px;
font-family: Verdana;
}
#home1 {
position: relative;
display: inline;
width: 250px;
height: 161px;
float: left;
left: 0px;
/* left: 40px; */
}
#home2 {
position: relative;
display: inline;
width: 320px;
height: 161px;
float: right;
left: px;
right: 250px; */
}
#home3 {
position: relative;
display: inline;
width: 250px;
height: 161px;
float: right;
/* right: 50px; */
}
</style>
</head>
<body>
<nav>
<ul>
<img id="logo" src="Foto/logoalgemeen.png" />
<img id="facebook" src="Foto/facebookalgemeen.png" />
<div class="menutekst4"><li>Contact </li></div>
<div class="menutekst2"><li>Wat doen wij </li></div>
<div class="menutekst3"><li>Producten</li></div>
<div class="menutekst1"><li>Home</li></div>
</ul>
</nav>
<p id="hometekst">
<strong>Welkom bij VE-Screen</strong><br>
Ve-stoffering is een betrouwbare partner, denkt met u mee<br>
en weet wat kwaliteit is of het nu gaat om uw woning, schip<br>
of kantoor.<br>
Onze kracht is de ervaring en goede samenwerking met u<br>
als klant, de interieurbouwers en andere aannemers zodat<br>
alles perfect op elkaar afgestemd en opgeleverd wordt.<br>
Desgewenst incl. stoffering van banken, het leveren van<br>
matrassen en bedtextiel en natuurlijk het plaatsen van ons<br>
eigen Ve-screen zonwering.
</p>
<img id="home3" src="Foto/home3.png" />
<img id="home2" src="Foto/home2.png" />
<img id="home1" src="Foto/home1.png" />
</body>
</html>
I think it's because you're using the width as a percentage, then positioning your buttons absolutely. This means that the 100% value will adapt to the screen size but not the buttons' positions as they will always be absolutely positioned using the same values for each screen.
One solution could be to use one precise width value, another solution would be not to absolutely position the buttons and instead use the floatproperty for the buttons. Hope this helps.