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.
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'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've made a dropdown menu, but now it's behind another div. I don't know how this happened and I've never had it before. Please help how I can fix this and that the dropdown menu isn't behind some text.
/* -------------
Header
------------- */
* {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
body {
margin: 0 auto auto;
width: 100%;
background: #DADADA;
overflow-y: scroll;
}
#header {
background: linear-gradient(#4CAE97, #378171);
width: 100%;
height: 60px;
border-bottom: 1px solid black;
}
#header_text {
background-color: transparent;
font-size: 40px;
color: #e89696;
text-align: center;
text-shadow: -2px 0 #6a7e89, 0 2px #6a7e89, 2px 0 #6a7e89, 0 -2px #6a7e89;
}
/* ------------- */
/* Navigation */
/* ------------- */
#ul-nav {
list-style-type: none;
position: absolute;
left: 50%;
right: 50%;
transform: translate(-50%, 0px); /*Zorgt er voor dat hij precies in het midden is*/
width: 600px;
height: 50px;
}
.nav-item {
margin-left: 10px;
margin-right: 10px;
width: 170px;
text-align: center;
float: left;
padding: 0px;
}
.nav-a {
border: 1px solid black;
border-top: 0px;
border-radius: 0px 0px 10px 10px;
color: black;
background: linear-gradient(#FFADAD, #d38787);
text-decoration: none;
height: 100%;
width: 100%;
padding: 7px;
display: block;
}
.nav-a:hover {
background: linear-gradient(#d78e8e, #c67f7f);
height: 100%;
width: 100%;
margin: 0px;
display: block;
}
#nav-main:hover {
border-radius: 10px 10px 10px 10px;
}
#nav-po:hover {
border-radius: 10px 10px 10px 10px;
}
#nav-contact:hover {
border-radius: 10px 10px 10px 10px;
}
/* ------------- */
/* Dropdown menu */
/* ------------- */
#nav-po-ul:hover ul {
display: block;
}
#nav-po-ul ul {
display: none;
position: absolute;
background: #d78e8e;
}
#nav-po-ul ul li {
display: block;
list-style-type: none;
width: 170px;
}
#nav-po-ul ul li a:visited {
color: black;
}
/* ------------- */
/* Container */
/* ------------- */
#container {
/*Vorm*/
height: 600px;
width: 600px;
margin: 50px auto 0px;
/*Border*/
border: 1px solid #000000;
border-radius: 10px;
/*Background*/
background: #f9f9f9;
/*Padding*/
padding-left: 200px;
padding-right: 50px;
padding-top: 10px;
}
#container_header {
position: absolute;
width: 900px;
}
#container_header_text {
width: 500px;
}
#container_header_hr {
width: 500px;
margin-left: -20px;
}
#container_text {
margin-top: 50px;
width: 450px;
}
/*Zet banaan op goede plek en formaat*/
#banaan {
width: 200px;
margin-left: 280px;
}
/*Laat de banaan draaien*/
#banaan:active {
transform: rotate(-180deg);
}
<!DOCTYPE html>
<title>Informatica → Jonathan</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
<header id="header">
<h1 id="header_text">Jonathan's website</h1>
</header>
<nav>
<ul id="ul-nav">
<li class="nav-item">
<a class="nav-a" id="nav-main" href="index.html">Home</a>
</li>
<li class="nav-item" id="nav-po-ul">
<a class="nav-a" id="nav-po" href="#">Opdrachten</a>
<!-- Dropdown menu -->
<ul>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</li>
<!-- Eind dropdown menu -->
</li>
<!-- End test -->
<li class="nav-item">
<a class="nav-a" id="nav-contact" href="contact.html">Contact</a>
</li>
</ul>
</nav>
<main>
<div id="container">
<header id="container_header">
<h1 id="container_header_text">Welkom op mijn Website!</h1>
<hr id="container_header_hr"/>
</header>
<div id="container_text">
<p class="text">Ga naar één van mijn po's of ga helemaal niks doen</p>
<p class="text">Als je kiest voor de optie niks doen heb ik nog een banaan hier onder voor je, ga daar maar mee spelen.</p>
</div>
<img id="banaan" src="img/banana.png" title=""/>
</div>
</main>
</body>
Modify the css adjust z index and position It will work.
#ul-nav {
list-style-type: none;
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5);left: 50%;
right: 50%;
transform: translate(-50%, 0px); /*Zorgt er voor dat hij precies in het midden is*/
}
This is because you are using absolute positioning for your container.
#container_header {
position: absolute;
width: 900px;
}
If you remove position: absolute you'll see that the drop down behaves as expected.
I want to make a responsive menu with only html and css , no Javascript.
I'm still practising.. maybe anyone can see why my menu doesn't appear when clicking on the label?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Frank.css">
<meta name="author" content="Frank Van Hoek">
<title>Frank</title>
</head>
<body>
<header>
<div class="logo" class="cfx">
<img class="imglogo" class="cfx" src="afbeeldingen/logo.png" alt="Logo">
</div>
<div class="facebook" class="cfx"></div>
<img class="facebook" class="cfx" src="afbeeldingen/facebook.png" alt="facebook">
</header>
<div class="wrapper" class="cfx">
<nav class="normaal" class="cfx">
<ul class="menu" class="cfx">
<li class="actief">Home</li>
<li>Leden</li>
<li>Parken</li>
<li>Evenementen</li>
<li>Over ons</li>
</ul>
</nav>
/************HAMBURGER***************/
<nav class="hamburger">
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle"></label>
<ul>
<li class="actief">Home</li>
<li>Leden</li>
<li>Parken</li>
<li>Evenementen</li>
<li>Over ons</li>
</ul>
</nav>
<div class="content" class="cfx">
<h2>BMX : Streetculture in Antwerp</h1>
<video controls><source src="afbeeldingen/StreetcultureInAntwerp.mp4" type="video/mp4"></video>
<p>Onze A.Way leden in dit filmpje zijn Tarik Begdouri, Zeno Peeters, Koen Vanden Broeck en Dimitri Huybrechts. De andere rijders zijn Niels Mertens, Stef de Backer, Brian O' Brien, Jonas van Oosterbosch en Juno Vereecken. Het werd gefilmd en gemonteerd door onze rijder Ilyas Deckers en de achtergrondmuziek is "Al'Tarba Vs Lord Lhus - 3 Amigos feat Dirty Dike & Jace Abstract".</p>
<h1>Nieuwsfeeds</h1>
<div class="nieuwsfeed">
<p class="bericht">
Dit weekend is het de 'Braaab BMX Contest 2015' in '040 BMX park' in Eindhoven. Dit wil je niet missen! Meer informatie vind je op de facebookpagina.
</p>
<p class="datum">
4 maart 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Iemand die deze rail durft te grinden? - Locatie: Aan de schelde, niet ver van ATV
</p>
<p class="datum">
2 maart 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Reminder!!! Deze zondag 2de meeting ivm Bmx jam stadspark - Locatie: Fietsenfikser - Tijdstip: 13u
</p>
<p class="datum">
26 februari 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Deze vrijdag Pizza Friday om 5u in het Stadspark! Be there!
</p>
<p class="datum">
25 februari 2015
</p>
</div>
</div>
<footer>
<p>© All rights reserved - 2015</p>
</footer>
</div>
</body>
</html>
CSS
html
{
font-family: Arial, sans-serif;
height:100%;
margin: 0;
padding: 0;
}
img , video;
{
max-width: 100%;
height: auto;
}
body
{
height:inherit;
margin: inherit;
padding: inherit;
background-color: #000;
}
.wrapper
{
max-width: 900px;
min-width: 400px;
min-height:100%;
margin: 0 auto;
background-color: #000;
}
header
{
background-image:url(afbeeldingen/skyline.png);
margin: auto;
height: 336px;
width: inherit;
}
.logo
{
padding: 0 1.25em;
float: left;
}
.imglogo
{
width: 170px;
height: 170px;
}
.facebook
{
width: 40px;
height: 40px;
text-align:right;
float:right;
padding-top: 30px;
}
nav
{
width: 100%;
padding: 0px auto 0px auto;
}
ul.menu
{
list-style-type: none;
margin: 5px 10% 5px 10%;
padding: 5px auto 5px auto;
left: 0;
text-align: center;
}
.menu li
{
float:left;
margin: 5px auto 5px auto;
padding: 0px 1.875em 0px 1.875em;
background-color: #000;
text-align: center;
}
.menu li:first-child
{
padding: 0px 1.875em 0px 1.875em;
}
.menu li > a
{
display: block;
padding: 10px 0px 10px 0px;
margin: 0px 0px 0px 0px;
text-decoration: none;
color: #fff;
}
.menu li:hover, li.actief
{
background-color: #f08222;
}
.menu li:hover > a, li.actief >a
{
color: #000;
}
.hamburger
{
display: none;
}
.content
{
color: #fff;
display:block;
margin: 50px 7.7777777777777777777777777777778% 70px 7.7777777777777777777777777777778%;
}
.content video
{
width: 760px;
height: auto;
}
.content h1
{
text-decoration: underline;
margin: 50px auto;
}
.nieuwsfeed
{
margin: 30px auto;
padding: 0.625em;
border: 1px solid #fff;
border-radius: 5px;
}
.datum
{
text-align: right;
font-size: 0.8em;
}
.content a:link
{
color: #f08222;
}
.content a:visited
{
color: #e2ff00;
}
footer p
{
color: #fff;
font-size: 0.9em;
text-align: center;
margin: 200px auto 40px auto;
}
/**************************
* MEDIA QUERY *
*************************/
#media screen and (max-width: 820px)
{
html, body {
height: 100%;
}
body {
margin: 0;
overflow-x: hidden;
font-family: Arial, sans-serif;
}
.normaal
{
display:none;
}
.hamburger
{
display: inline-block;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked ~ .hamburger ul{
left:0;
}
#menu-toggle:checked ~ .content {
left:240px;
}
#menu-toggle:checked + label {
left:250px;
}
label[for="menu-toggle"] {
position: fixed;
left:60px;
top:300px;
width: 30px;
height: 30px;
background-color: #0f0;
z-index: 2;
}
.hamburger ul{
position: fixed;
width: 240px;
height: 100%;
top:300px;
left: -240px;
background-color: #e34dd2;
color: white;
}
.hamburger ul {
margin: 0;
padding: 0;
list-style: none;
}
.hamburger li a {
display: block;
padding:0.5em 1em;
color: white;
border-bottom: 1px #424240 solid;
}
.container {
position: relative;
left:0;
padding: 2em;
}
nav, .container, label[for="menu-toggle"] {
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
}
/*************************
* C L E A R F I X *
*************************/
.cfx::before, .cfx::after {
display: table;
line-height: 0;
content: "";
}
.cfx::after {
clear: both;
}
It would make more sense to use a responsive framework, such as Bootstrap, or Foundation.
Here is a simplistic example for a responsive navigation menu which utilises bootstrap.
Responsive navigation bar Preview
Responsive navigation bar Download
You have this:
.hamburger ul{
position: fixed;
width: 240px;
height: 100%;
top:300px;
left: -240px;
background-color: #e34dd2;
color: white;
}
position: fixed; means that its position values are in relation to the window/viewport. So having left: -240px; will move this element out of the viewport (i.e. make it invisible). Do you really want this? Even if that's intentionally and supposed to work together with this rule
#menu-toggle:checked ~ .hamburger ul{
left:0;
}
...to move it in, they are in the wrong order - the former rule will most likely overwrite the other one, making the element invisible...