I have a little problem with my website. I want a responsive site, by using Bootstrap. In my mobile version the two columns need to be on top of each other, what is correct now. But, on my desktop version, the columns need to bo next to eachother. I thought col-md-6 was the right way to do this, but something went wrong... Can anyone explain to me what I'm doing wrong.?
body {
padding: 0;
margin: 0;
background: #f2f6e9;
padding-left: 20px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {
margin-top: 20px;
font-family: 'Roboto', sans-serif;
}
.content {
margin-top: 30px;
}
.tekstgeel{
color: #d7a32d;
}
.tekstgroen{
color: #4a7b45;
}
.bold {
font-weight: bold;
}
.lijngeel{
height:4px;
width: 50px;
background-color: #d7a32d;
float: left;
margin-top: 10px;
}
img {
width: 100%;
}
.titel {
font-size: 15px;
text-transform: uppercase;
line-height: 18px;
}
p {
font-size: 12px;
}
#profielfoto {
width: 75%;
margin-top: 15px;
margin-bottom: 40px;
}
.titel {
font-size: 15px;
text-transform: uppercase;
line-height: 18px;
}
.ondertitel {
font-size: 13px;
text-transform: uppercase;
line-height: 16px;
margin-top: 15px;
margin-bottom: 15px;
}
#media only screen and (min-device-width: 768px) {
.titel {
font-size: 20px;
line-height: 23px;
}
.col-md-6 {
border:1px solid black;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lotte Pothé</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="content">
<div class="row">
<div class="col-10 col-md-12">
<div class="col-12 col-md-6">
<h1 class="titel">Lotte Pothé<br>
Jouw grafisch ontwerper<br>
voor <span class="tekstgroen">digitaal en drukwerk</span></h1>
<span class="lijngeel"></span><br>
<h1 class="titel"><span class="tekstgeel">zakelijk en particulier</span></h1>
<p>Wil jij je onderscheiden met jouw bedrijf.?<br> Ik ben namelijk gek van enthousiaste personen en plannen, dus ik luister graag naar jouw verhaal en wensen.! Ik sta open voor allerhande projecten, zowel groot als klein, dus bij twijfel contacteer mij gerust. Ben je geïnteresseerd in een samenwerking of heb je eerst nog enkele vragen.?
</p>
<p><span class="tekstgroen bold">Laat van je horen.!</span></p>
</div>
<div class="col-12 col-md-6">
<img src="images/lotte.jpg" id="profielfoto" alt="Profielfoto Lotte Pothé">
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>
I've putted a border around the .col-md-6 to show the width of them.
Plz, add div row class between two div columns.
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-sm-12 col-md-6">
</div>
</div>
</div>
</div>
Related
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"
Wassup guys, I'm trying to do a small website for a school project, and I've encountered a problem with background on a multiple div
So here is my HTML
`
<div class="bloc-1-text">
<h3>
</h3>
<p>
</p>
<div class="bloc-1-img"></div>
</div>
</div>
</div>`
And here my CSS
> .promesses{
font-family: 'Dosis', sans-serif;
font-weight: 500;
}
.bloc-1{
border: 1px solid black;
width: 100%;
height: 400px;
}
.bloc-1 .bloc-1-img{
float: left;
width: 50%;
height: 100%
background-image: url(image1.jpg);
position: relative;
}
.bloc-1-text{
float: right;
width: 50%;
height: 100%;
background: #dbdbdb;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.bloc-1-text h3{
text-align: center;
}
This is not the entire code, but just the code where is the problematic. If you have anything to specify, just tell me. I'll add it here
Ok so since yesterday, I've tried to go forward a bit. Here is the code:
HTML
`<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="utf-8">
<title>Parti Nationaliste Québécois</title>
<link rel="stylesheet" type="text/css" href="css/promesse.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/x-icon" href="img/Logo.png">
</head>
<body>
<header>
<img src="img/Logo.jpg">
<div class="menu-toggle"></div>
<nav>
<ul>
<li>Accueil</li>
<li>Intention</li>
<li>Chefs</li>
<li>Histoire</li>
<li>Don</li>
</ul>
</nav>
<div class="clearfix"></div>
</header>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu-toggle').click(function(){
$('.menu-toggle').toggleClass('active')
$('nav').toggleClass('active')
})
});
</script>
<div class="promesses">
<div class="bloc-1">
<div class="bloc-1-text">
<h3>
Emploi Assuré
</h3>
<p>
Nous avons pour toi un emploi assuré. Que ce soit dans l'armée ou dans une de nos grandes entreprises dans chacunes de nos région, tu n'auras pas de quoi te plaindre que le plaisir
</p>
<div class="bloc-1-img"></div>
</div>
</div>
</div>
`
And here is my CSS
#import url('https://fonts.googleapis.com/css2?family=Dosis:wght#200;300;400;500;600;700;800&display=swap');
.promesses{
font-family: 'Dosis', sans-serif;
font-weight: 500;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.bloc-1{
border: 1px solid black;
width: 100%;
height: 400px;
}
.bloc-1-img{
width: 50%;
height: 100vh;
background-image: url("img/image1.jpg");
}
.bloc-1-text{
float: right;
width: 50%;
height: 100%;
background: #dbdbdb;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.bloc-1-text h3{
text-align: center;
}
delete bloc-1 which is next to block-1-img
and set bloc-1-text to 100vh not 100%
i`ve checked on my pc and it worked
Answer
.bloc-1 .bloc-1-img{
float: left;
width: 50%;
height: 100%;<<<<<<<----
background-image: url("image1.jpg");
position: relative;
}
lost ";"
CSS Selector
https://www.w3schools.com/cssref/css_selectors.asp
I'm trying to center my button on the page, but can't seem to get it right.
I've tried to auto de left and right margins but didn't work. And I don't want to center it by gut feeling in percentages. Can somebody help me out, would appreciate it. It's for my intership :D
here u have the html. I used basic html and pure grids and bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>karakters page</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss#1.0.0/build/pure-min.css">
<link rel="stylesheet" href="stylekarakters.css">
</head>
<body>
<div class="fixed-bg">
<div class="pure-g">
<div class="pure-u-1-2">
<a href="#null" class="homeknop" onclick="window.location.href='index.html';">
<span class="glyphicon glyphicon-home"></span>
</a>
</div>
<div class="pure-u-1">
<img class="pure-img logo" src="img/Karakters-logo_ZW2.png"></img>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1">
<div class="imgcontainer">
<img class="pure-img" src="img/pic-karakters.jpg" />
</div>
</div>
<div class="pure-u-1">
<h1 class="reveal1">
<strong>Ontwerp- en communicatiebureau.<br>Groot geworden in de boeken, <br>met grafiek in de genen</strong>
</h1>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1">
<div class="textcontainer">
<h2><strong>Nu bieden we het hele pallet aan communicatieondersteuning.</strong></h2>
</div>
</div>
<div class="pure-u-1-5">
<img class="pure-img icon" src="img/icon-strategy.png" />
<h4>strategische begeleiding <br>(ook pers en digitaal)</h4>
</div>
<div class="pure-u-1-5">
<img class="pure-img icon" src="img/icon-web.png" />
<h4>webontwikkeling</h4>
</div>
<div class="pure-u-1-5">
<img class="pure-img icon" src="img/icon-campagne.png" />
<h4>creëren van campagnes</h4>
</div>
<div class="pure-u-1-5">
<img class="pure-img icon" src="img/icon-expo.png" />
<h4>maken van tentoonstellingen als grafische vormgeving</h4>
</div>
<div class="pure-u-1-5">
<img class="pure-img icon" src="img/icon-boeken.png" />
<h4>ontwerpen en zetten <br>van boeken, etc.</h4>
</div>
<div class="pure-u-1-5"></div>
</div>
<div class="pure-g">
<div class="pure-u-1"><h2><strong>We zijn er voor u, allemaal!</strong></h2></div>
<div class="pure-u-1-4">
<img class="pure-img icon" src="img/icon_nonprofit-3.png" />
<h4>non-profit</h4>
</div>
<div class="pure-u-1-4">
<img class="pure-img icon" src="img/icon_government-3.png" />
<h4>overheid</h4>
</div>
<div class="pure-u-1-4">
<img class="pure-img icon" src="img/icon_uitgeverij-4.png" />
<h4>uitgeverijen</h4>
</div>
<div class="pure-u-1-4">
<img class="pure-img icon" src="img/icon_profit-3.png" />
<h4>profit</h4>
</div>
<div class="pure-u-1-3"></div>
<div class="pure-u-1-3"></div>
<div class="pure-u-1">
<h2>Kortom: alles op maat van de opdrachtgever.<br>Maar altijd vanuit hetzelfde kader:
<br><strong> duurzaam, kwalitatief</strong> en <strong>authentiek</strong>
</h2>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1">
<h4 class="projecten">projecten</h4>
</div>
<div class="pure-u-1">
<button onclick="window.location.href='catpageK.html';" class="buttonK"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script src="scriptkarakterspage.js"></script>
</body>
</html>
And here is the css, also basic:
body{
background-color: rgba(111, 179, 160, 0.1);
margin-top: 5em;
margin-left: auto;
margin-right: auto;
width: 90%;
}
.imgcontainer .pure-img {
max-width: 40%;
margin-left:auto;
margin-right: auto;
margin-top: 3em;
}
.icon{
max-width: 66%;
margin-left: auto;
margin-right: auto;
}
/* h3
}
{
margin-left: -250px;
margin-right: 250px;
margin-top: 100px;
line-height: 1.3em;
} */
h1,h2{
padding:1em;
text-align: center;
}
h4{
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
.pure-u-1 .textcontainer p {
margin-left: auto;
margin-right: auto;
width: 40%;
font-size: 1.5em;
text-align: center;
}
.textcontainer{
margin-top: 5em;
}
.pure-img.logo {
max-width: 100px;
margin-left: auto;
margin-right: auto;
margin-top: -55px;
}
.projecten {
margin-left: auto;
margin-right: auto;
margin-top: 2em;
color:#6fb3a0;
}
div .pure-u-1 .buttonK
{
border: solid #6fb3a0 2px;
background-color: #6fb3a0;
color: #ffffff;
width: 50px;
height: 50px;
border-radius: 100%;
text-align: center;
}
div.pure-u-1 button.buttonK{
margin-left: 50%;
margin-bottom: 2em;
margin-top: 1.5em;
}
a {
margin-left: 100px;
color:#6fb3a0;
}
example
You can do this:
Give left:50% to your button, and then have half of is size and put in negative in the margin-left
div.pure-u-1 button.buttonK {
left: 50%;
margin-bottom: 2em;
margin-top: 1.5em;
position: relative;
margin-left: -25px;
}
DEMO HERE
There's a really easy way with CSS3 when you push something from the left by 50%:
.class {
margin-left: 50%;
transform: translateX(-50%);
}
Works vertically as well with transform: translateY(-50%);.
The 2 can be combined as transform: translateX(-50%) translateY(-50%);.
You may need to add vendor-specific prefixes when using this. Searching for "CSS auto prefix" should yield online services to do it quickly for you.
Try this. Add display:block; to the button. That will make the margin:auto; work.
.buttonK {
margin: auto;
display: block;
}
<div class="pure-u-1">
<button onclick="window.location.href='catpageK.html';" class="buttonK">Button</button>
</div>
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;
}
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.