I would like to align two divs but it's not working.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>ELOUANN'S SITE</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/index.css"/>
<link rel="icon" type="image/png" href="../img/webdev.png"/>
</head>
<body>
<div id="headDiv">
<div id="headDivTitle">
<img src="../img/webdev.png" width="10%"/><a class="trait">|</a><a>ELOUANN'S SITE</a>
</div>
<div id="headDivFile">
<a id="indexFile" href="./index.html">Accueil</a>
<a class="next">></a>
<a class="anyfile">...</a>
</div>
</div>
<div id="contentDiv">
<div id="rightDiv" class="content">
<div id="rightDivDescription">
<div id="border">
<a>Bienvenue ! Ici tu vas pouvoir apprendre quelques éléments de base du HTML et du CSS, ainsi que l'accès à un memento qui te permettra d'avoir une liste de chaque éléments de chaque langage accompagné d'une description, afin de pouvoir les utiliser à des fins personnelles !</a>
</div>
</div>
</div>
<div id="buttonsDiv" class="content">
<div id="buttonsDivHtml">
<img src="../img/languages/030-html-5.png" width="10%"/>Apprendre le HTML
</div>
<div id="buttonsDivCss">
<img src="../img/languages/031-css.png" width="10%"/>Apprendre le CSS
</div>
</div>
</div>
</body>
</html>
This is my html file. I would like align "buttonsDiv" and "rightDiv".
This is my css file :
/* STYLE DU TITRE ET DE L'IMAGE */
body{
background-color: #efecca;
font-family: Bahnschrift Light;
}
body div#headDiv{
background-color: #002f2f;
padding-top: 2%;
padding-left: 5%;
padding-bottom: 2%;
box-shadow: 0px 0px 100px black;
}
body div#headDiv div#headDivTitle a{
vertical-align: middle;
font-size: 250%;
color: #e6e2af;
}
body div#headDiv div#headDivTitle img{
vertical-align: middle;
}
body div#headDiv div#headDivTitle a.trait{
font-size: 420%;
margin-left: 1.5%;
margin-right: 3%;
color: #6f6c52;
}
/* STYLE DU TEXTE DES FICHIERS */
body div#headDiv div#headDivFile {
margin-left: 7%;
margin-top: 3%;
}
body div#headDiv div#headDivFile a{
font-size: 150%;
color: #e6e2af;
}
body div#headDiv div#headDivFile a.next{
font-size: 170%;
margin: 5%;
color: #6f6c52;
}
/* STYLE DE LA BOITE DE DROITE ET DE LA DESCRIPTION */
body div#contentDiv div#rightDiv{
background-color: #002f2f;
margin-top: 2%;
margin-bottom: 2%;
box-shadow: 0px 0px 10px black;
margin-right: 80%;
font-size: 175%;
}
body div#contentDiv div#rightDiv div#rightDivDescription{
padding: 10%;
color: #e6e2af;
}
body div#contentDiv div#rightDiv div#rightDivDescription div#border{
box-shadow: -10px 0px 0px #046380;
}
/* STYLE DES BOUTONS */
body div#contentDiv div#buttonsDiv div img{
vertical-align: middle;
}
body div#contentDiv div#buttonsDiv div a{
vertical-align: middle;
}
and when i use this, it gives me that :
https://cdn.discordapp.com/attachments/760957022686019625/760957040775397406/unknown.png
Please help me soon. Thanks you all. Bye
I would suggest you to make a few changes:
don't use margin-right in #rightDiv. Instead you can use width: 20%; if you want that much width is acquired by the div. Also use float: left;. May be you will get your intended result.
Related
here's the result I'd like to obtain once I'm reducing the window :
the problem in this result is that they aren't centered, once I center them that's what I get, I guess I'm doing something wrong : the issue. This code is the one that cause the issue when they're centered.
Here's my code :
section {
margin-top: 25px;
padding: 24px;
box-sizing: border-box;
}
h2 {
margin-bottom: 30px;
text-align: center;
font-weight: bold;
font-size: 22px;
}
.flex-container {
display: flex;
flex-direction: column;
align-content: flex-start;
height: 100%;
padding: 15x;
}
.flex-container > div{
position: relative;
left: 21%;
border-radius: 5px;
padding: 8px;
}
.articleactu img {
float: left;
border-radius: 15px;
max-width: 210px;
}
p {
word-wrap: break-word;
max-width: 900px;
padding-left: 200px;
}
#titre {
line-height: px;
font-weight: bold;
}
#date {
font-size: 14px;
font-weight: bold;
color: #662189;
}
hr.solid {
position: relative;
left: 21%;
width: 50%;
opacity: 12%;
}
div p ,#titre ,#date {
margin-left: 35px;
}
<!-- ACTUALITÉ - ARTICLES -->
<section>
<h2> L'ACTUALITÉ </h2>
<article class="articleactu">
<div class="flex-container">
<div>
<img src="images/gtaarticle.jpeg" alt="Article GTA " class="center">
<p id="titre">GTA : THE TRILOGY DEFINITIVE EDITION, les fans sont déçus !</p>
<p> Les joueurs attendaient une refonte complète de la trilogie afin de rappeler de lointains souvenirs mais malheureusement les fans sont déçus...</p>
<p id="date"> Publié le 27 novembre 2021 </p>
</div>
<hr class="solid">
<div>
<img src="images/bf2042-2.jpg" alt="Article GTA " class="center">
<p id="titre">BATTLEFIELD 2042 : De très mauvaise notes pour le nouvel opus.</p>
<p> Le lancement du jeu est malheureusement un raté... Un jeu rempli de bugs, on repense évidemment à Cyberpunk 2077...</p>
<p id="date"> Publié le 26 novembre 2021 </p>
</div>
<hr class="solid">
</article>
</section>
I hope that anyone can help me with this. Thanks in advance !
The main reason is
.flex-container > div{
left: 21%;
}
Then, that div has full width(100%) but the left position has 21%. So the content will look on the left side.
Try like this.
section {
margin-top: 25px;
padding: 24px;
box-sizing: border-box;
}
h2 {
margin-bottom: 30px;
text-align: center;
font-weight: bold;
font-size: 22px;
}
.flex-container {
display: flex;
flex-direction: column;
align-content: flex-start;
height: 100%;
padding: 10%;
}
.flex-container > div {
display: flex;
}
.flex-container > div > div {
float: left;
}
.description {
margin-left: 20px;
}
.articleactu img {
border-radius: 15px;
max-width: 210px;
}
p {
word-wrap: break-word;
}
#titre {
line-height: px;
font-weight: bold;
}
#date {
font-size: 14px;
font-weight: bold;
color: #662189;
}
hr.solid {
position: relative;
width: 50%;
opacity: 12%;
}
your HTML
<section>
<h2> L'ACTUALITÉ </h2>
<article class="articleactu">
<div class="flex-container">
<div style="display: flex">
<div>
<img src="images/gtaarticle.jpeg" alt="Article GTA " class="center">
</div>
<div class="description">
<p id="titre">GTA : THE TRILOGY DEFINITIVE EDITION, les fans sont déçus !</p>
<p> Les joueurs attendaient une refonte complète de la trilogie afin de rappeler de lointains souvenirs mais malheureusement les fans sont déçus...</p>
<p id="date"> Publié le 27 novembre 2021 </p>
</div>
</div>
<hr class="solid">
<div>
<div>
<img src="images/bf2042-2.jpg" alt="Article GTA " class="center">
</div>
<div class="description">
<p id="titre">BATTLEFIELD 2042 : De très mauvaise notes pour le nouvel opus.</p>
<p> Le lancement du jeu est malheureusement un raté... Un jeu rempli de bugs, on repense évidemment à Cyberpunk 2077...</p>
<p id="date"> Publié le 26 novembre 2021 </p>
</div>
</div>
<hr class="solid">
</div>
</article>
</section>
I'm kinda begginer in html.
I have this code in html
.header{
height: 200px;
background-image: url(https://cdn.wallpapersafari.com/30/3/T07WKU.png);
background-repeat: no-repeat;
background-size:
}
.header h1{
text-align: center;
padding-top: 75px;
font-family: 'Akaya Telivigala', cursive;
color: #FFF
}
.header h1:hover{
color:lime;
}
.sth{
height: 400px;
background-image: url(https://mcdn.wallpapersafari.com/medium/43/0/KIieEY.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#space{
height: 20px;
background-color: #FDF0D5
}
.sth h2{
margin: 0;
color: white;
text-align: center;
padding-top: 100px;
font-family: 'Akaya Telivigala', cursive;
font-size: 35px;
color: pink;
}
#aa{
padding: 30;
}
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap" rel="stylesheet">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h1> Vous êtes les bienvenues dans notre site web </h1>
</div>
<div id="space"> </div>
<div class="sth">
<h2> Vous pouvez vous enregistrer pour de benificiez de nos services </h2>
<h2 id="aa"> <button><p> Sign up </p></button> </h2>
</div>
</body>
</html>
when i try to change button width with the id aa, it dont stay in the center like the other h2 and go the left, what to do to prevent it from changing position and giving it bigger width
thanks
or even if there is another way to put it in the center please help me
.header{
height: 200px;
background-image: url(https://cdn.wallpapersafari.com/30/3/T07WKU.png);
background-repeat: no-repeat;
background-size:
}
.header h1{
text-align: center;
padding-top: 75px;
font-family: 'Akaya Telivigala', cursive;
color: #FFF
}
.header h1:hover{
color:lime;
}
.sth{
height: 400px;
background-image: url(https://mcdn.wallpapersafari.com/medium/43/0/KIieEY.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#space{
height: 20px;
background-color: #FDF0D5
}
.sth h2{
margin: 0;
color: white;
text-align: center;
padding-top: 100px;
font-family: 'Akaya Telivigala', cursive;
font-size: 35px;
color: pink;
}
#aa{
padding: 30;
}
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap" rel="stylesheet">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h1> Vous êtes les bienvenues dans notre site web </h1>
</div>
<div id="space"> </div>
<div class="sth">
<h2> Vous pouvez vous enregistrer pour de benificiez de nos services </h2>
<h2 id="aa"> <button style="height:200px;width:200px"><p> Sign up </p></button> </h2>
</div>
</body>
</html>
There's two things in css height and width. I just changed height and width of button. You can try also. style="height:200px;width:200px"
I need to make a simple CSS website. But I have a problem with my fixed footer. It falls over my buttons. I have tried making it an inline-block element. Then it stays right under the buttons. But when I resize the page it goes over my brandstory class. Is there any way to fix this problem? I'm new to CSS.
.main-navigation li{
display: inline-block;
margin: 0.1% 1%;
padding: 0%;
}
a{
color: white;
text-decoration: none;
}
.current{
text-decoration: underline;
}
.brandstory{
position: absolute;
margin-right: 25%;
height: 500px;
}
img{
width: 25%;
margin-left: 75%;
display: block;
}
.item-of-the-month{
color: black;
}
.text-block{
margin-left: 75%;
border: 1px solid black;
margin-top: 0%;
padding-top: 1%;
padding-bottom: 1%;
background: white;
text-align: center;
}
.buttons{
margin-left: 75%;
}
.button{
background-color: #000;
border: 1px solid red;
margin-top: -1.2%;
padding: 1%;
color: white;
font-family: Georgia,Times,Times New Roman,serif;
text-align: center;
text-decoration: none;
display: block;
}
.ForwardFashion{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ForwardFashion</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="header">
<h1>ForwardFashion</h1>
</div>
<div class="main-navigation">
<li><h3>Home</h3></li>
<li><h3>Interviews</h3></li>
<li><h3>Webshop</h3></li>
</div>
<div class="brandstory">
<p>ForwardFashion is sinds 2018 de place to be, als het gaat om upcoming fashionhypes. ForwardFashion biedt naast fashionnieuws ook de allerhipste fashionitems aan. Daarnaast interviewen designers en influencers met een forward-kijk op fashion. ForwardFashion is niet voor niets Forward. Waar andere fashionsites in het verleden blijven hangen, kijken wij verder. Wij schuwen niet voor mode met technologie. Dat zou jij ook niet moeten doen! Dus waar wacht je op, kijk rond in onze webshop, ga lekker zitten voor een interview en blijf op de hoogte in ForwardFashionland.</p>
</div>
<div class="container">
<img src="images/glassboots.jpg">
<div class="text-block">
<h4>Item of the Month</h4>
</div>
</div>
<div class="buttons">
Instagram
Youtube
Pinterest
Twitter
</div>
<footer class="ForwardFashion">
<p>© ForwardFashion</p>
</footer>
</body>
</html>
One thing you need to consider when you are making your footer fixed is, you have to leave some space in <body> element so that the fixed footer gets some space to avoid it overlapping the content part. Try this code
body {
padding-bottom: 100px;
}
The text inside my divs goes over to the next image, from my image horizontal scroll. I want each text inside each image but I am trying everything and nothing works!
The overlapping text is caused by the white-space: nowrap; on the .list-inline selector. So lets add white-space: normal; to the .DocumentList p selector to fix this.
Here is the full updated CSS:
.factorSection{
display:none;
}
#section2-05{
padding-right:0;
padding-left: 10px;
padding-bottom:0;
}
#section2-05 h2{
color: #424242;
font-weight:900;
font-size: 1.7em;
line-height: 1.2em;
margin-bottom: 0;
}
#section2-05 .col-lg-12 p{
font-size: 1.2em;
line-height: 1.4em;
margin-bottom:1em;
}
.section2-05_phone{
display:block;
overflow-x: scroll;
width: auto;
white-space: nowrap;
}
.documentList{
overflow-x:scroll;
overflow-y:hidden;
height:200px;
width:100%;
padding: 0 15px;
}
.factorImgText{
position:absolute;
z-index: 1;
padding: 0 5px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
margin: 0;
text-align: center;
width:90%;
}
.factorImg1, .factorImg2, .factorImg3, .factorImg4{
position: relative;
display: inline-block;
margin: 8px 8px;
box-shadow: 2px 2px 4px #bbb;
border-top-right-radius: 4px;
width: 320px;
height: 100%;
vertical-align: bottom;
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
height:370px;
}
.factorImg1{
background-image: url('https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6');
margin-right:3px;
}
.factorImg2{
background-image: url('https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6');
margin-right:3px;
}
.factorImg3{
background-image: url("https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6");
margin-right:3px;
}
.factorImg4{
background-image: url("https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6");
margin-right:3px;
}
.list-inline {
white-space:nowrap;
}
.DocumentList h6, .DocumentList p{
color:#fff;
font-weight:900;
}
.DocumentList h6{
font-size: 1em;
text-align: center;
width: 100%; /* Changed from 90% --> 100% to help center. */
margin: 0; /* Added to help center. */
}
.DocumentList p{
font-size: .75em;
line-height: 1.4em;
margin-bottom: 0;
white-space: normal; /* Add to fix the overlapping text. */
}
<div class="row row-fluid section2-05_phone">
<div class="DocumentList col-lg-12">
<ul class="list-inline">
<li class="factorImg1">
<div class="factorImgText">
<h6>2 DÍAS ANTES… ¡ZURPRAIS!</h6>
<p>Con tu pack de experiencias, tu edad y tu perfil (familias, parejas, amig#s…), organizaremos tu plan… Y como es Zurprais, 2 días antes sabrás lo que es.</p>
</div>
<div class="overlay1"></div>
</li>
<li class="factorImg2">
<div class="factorImgText">
<h6>PLANES CON UN PLUS</h6>
<p>Un atardecer en velero… ¿con cava y ostras? Un brunch… ¿entre viñedos? Todas tus experiencias tendrán un toque extra que las hará aún más especiales.</p>
</div>
<div class="overlay2"></div>
</li>
<li class="factorImg3">
<div class="factorImgText">
<h6>EMOCIÓN DESDE LA RESERVA</h6>
<p>Al reservar, empieza el juego. Recibirás algunas pistas sobre las actividades que te podrían tocar. Para que vayas calentando motores.</p>
</div>
<div class="overlay3"></div>
</li>
<li class="factorImg4">
<div class="factorImgText">
<h6>CAMBIO GRATUITO</h6>
<p>¡Segurísimo que tu plan te va a encantar! Pero para que estés tranquil#: si no te gusta lo que te hemos organizado, te preparamos uno diferente para otro día.</p>
</div>
<div class="overlay4"></div>
</li>
</ul>
</div>
</div>
I am making a manual with html/css/js and to go through the manual I made two buttons.
This is what it looks like:
The strange this is, the first previewed menu-item 'introductie' has the same css code as the fourth previewed menu-item 'hart meten'. But why is there a gap between the paragraph and the buttons in the previewed 'introductie' ?
my code:
HTML
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<title>Hartmeting</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div id="logo" onclick="window.location.href='http://localhost/Zorg_Heartbeat%20Manual/'">
<img src="img/logo.png" alt="logo" />
<h1 >Hartmeting voor fitte mensen</h1>
</div>
</header>
<!-- Stappenplan Menu -->
<nav id="menu">
<ul>
<li> Introductie </li>
<li> Het Probleem </li>
<li> Stappenplan </li>
<li> Hartmeting </li>
</ul>
</nav>
<!-- HET STAPPENPLAN -->
<div id="content">
<!-- Intro Slide -->
<article id="menu_a">
<h2>Introductie</h2><br>
<figure>
<img src="img/intro1.jpeg" alt="Intro Afbeelding"/>
</figure>
<p>Joggers zijn actieve mensen die graag tussen werk en/of studie nog even de kilometers willen pakken. Hierin houden ze graag bij of ze fitter worden of niet, zo zul je vaak zien dat joggers hun rusthartslag meten om een indicatie van positieve 'progress' te kunnen inzien. Het bijhouden van de gezondheid hoort eigenlijk niet alleen bij joggers, maar bij elk fit persoon die graag de resultaten wilt vastpakken. Zonder dat je een smartwatch nodig hebt, kun je met elk apparaat die beschikking heeft tot het internet, je hartslag meten!</p>
</article>
<!-- Slide 1 -->
<article id="menu_b">
<h2>Het Probleem</h2><br>
<figure>
<img src="img/hetprobleem1.jpg" alt="Eerste Afbeelding"/>
</figure>
<p>Maar waarom een WebApp die je hartslag meet? Simpel, smartwatches zijn nou eenmaal veels te duur, je gebruikt ze niet altijd en daarnaast zijn ze de meeste ook nog eens privacy gevoelig.</p>
</article>
<!-- Slide 2 -->
<article id="menu_c">
<h2>Hoe kan mijn hartslag meten?</h2><br>
<figure>
<img src="img/polsmeten.png" alt="Tweede Afbeelding"/>
</figure>
<ol id="stappen">
<li>Ga gerust zitten.</li>
<li>Houd je wijsvinger en middelvinger tegen elkaar.</li>
<li>Leg beide vingers links of rechts van de adamsappel (zoek naar een kloppende beweging).</li>
<li>Klik met je linker muisknop op de box elke keer dat je een klopping voelt.</li>
<li>Doe dit achtereenvolgend tot dat je 10 keer hebt geklikt (dus 10 kloppingen).</li>
<li>De pop-up laat je gemiddelde hartslag per minuut zien.</li>
</ol>
</article>
<!-- Slide 3 -->
<article id="menu_d">
<h2>Hart Meten</h2><br>
<figure>
<!-- Hartmeet tool -->
<div id="klik_Hart" class="heart">
</div>
<br>
<br>
<br>
<!-- Einde hartmeet tool-->
</figure>
<ol id="stappen">
<li>Een normaal rustend hart van een volwassenen meet tussen de 60 - 100 hartslagen per minuut.</li>
<li>Boven de 100 is slecht.</li>
<li>Richting de 40 is goed.</li>
</ol>
</article>
<!-- ABOUT -->
<!-- <div id="about">
<p>TEST TEST TEST TEST TEST TEST TEST TEST TEST </p>
</div> -->
<!-- vorige/volgende buttons -->
<table id="volgorde">
<th><button class="button" id="previous">Previous</button></th>
<th><button class="button" id="next">Next</button></th>
<th>
<!-- Checkbox Auto Slider -->
<div class="auto_menu">
<input type="checkbox" id="checkbox">
<label for="checkbox">Auto Handleiding</label>
</div>
<!-- -->
</th>
</table>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<p> Wij zijn ....</p>
</div>
</div>
</div>
<div id="buffer"></div>
<footer>
<a id="footer_" href="#" onclick="openNav()">☰ Over ons </a>
</footer>
</div>
<script src="js/jquery-3.1.1.js" type='text/javascript'></script>
<script src="js/scripts1.js" type='text/javascript'></script>
</body>
</html>
CSS
#titel{ color: #B0C4DE; text-align: center;}
/*Verstop alle artikelen binnen content*/
article {
display:none;
}
body{
background-color: #333333;
color: grey;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 12pt;
width: 100%%
}
#wrapper{
background-color: #ADD8E6;
width: 90%;
margin-left: auto;
margin-right: auto;
/*background-image: url("../img/bg.jpg");*/
background-size: cover;
background-position: left top;
border: 2px groove #001f3f;
overflow: auto;
}
#content{
margin-left: auto;
margin-right: auto;
float: left;
width: 70%;
}
#content img{
height: 250px;
width: 450px;
}
#menu{
font-weight: thin;
color: #424242;
float: left;
width: 15%;
text-align: center;
margin-left: 5%;
margin-top: 6.7%;
font-size: 10pt;
}
ul{list-style-type: none;}
h1{ text-shadow: 1px 1px 3px #00008B;}
a{
display: block;
text-decoration: none;
color: #0074D9;
background-color: #001f3f;
border: 1px solid #B0C4DE;
padding: 5px;
}
a:hover{
background-color: #FFD900;
color: #001f3f;
}
footer{
overflow: hidden;
clear: both;
}
#volgorde{
font-weight: thin;
color: grey;
width: 10%;
text-align: center;
clear: both;
margin-left: 3%;
margin-bottom: 2%;
}
.button {
background-color: #001f3f;
color: #FFDC00;
border: none;
color: white;
padding: 5px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
display: block;
}
.button:hover{
background-color: #FFD900;
color: #001f3f;
}
.heart{
color:#FBF9FF;
background-image: url("../img/hart4.png");
background-size: 150px 150px;
height: 150px;
width: 150px;
}
.heart:hoover{
color: #FFA07A;
background-color: grey;
}
#uitleg p {
color: #FA8072;
}
#logo img {
float: left;
width: 60px;
height: 60px;
margin-left: 2%;
}
#logo h1 {
position: relative;
top: 15px;
left: 10px;
}
#klik_ {
text-align: center;
}
article p {
height: 200px;
width: 450px;
font-size: 10pt;
color: grey;
font-weight: bold;
overflow: scroll;
margin-left: 4%;
margin-bottom: 5%;
text-align: justify;
text-justify: inter-word;
}
#buffer{
clear: both;
height: 10%;
}
#stappen{
font-weight: bold;
font-size: 10pt;
}
.auto_menu {
position: relative;
margin: 5px auto;
width: 160px;
font-size: 14px;
}
/*OVER ONS OVERLAY*/
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
EDIT: Web Inspector Shows:
Screenshot showing findings
So I think it might be:
margin-bottom: 5%;
when I deleted this, nothing happened..
You defined the height of your p. That means that your element will always stay at the height of 200px, no matter the content inside the element.
In order to change that to a dynamic height change it to:
display: inline-block;
height: auto;
The code is pretty straight forward, you display what is within the block. The height is automatically adjusted depending on the inline of that block.