What I'm trying to do is to center the text (and image that will be side by side or on top of the text) but the command justify-content:center doesn't work for me. It centers horizontally but not vertically. Could you tell me what went wrong? I'm actually a beginner and that's my first website.
Here's the code:
body {
font-family: Gotham A,Gotham B,Helvetica,Arial,sans-serif;
}
h1 {
font-size: 3em;
text-transform:uppercase;
}
h4 {
font-size: 1.5em;
color:#9e9e9e;
}
section {
width: 100%;
display: inline-block;
margin: 0;
max-width: 960;
height:100vh;
vertical-align: middle;
}
#welcome-screen {
width: 100%;
display: table;
margin: 0;
max-width: none;
height:100vh;
background-color:#ebebeb;
padding:0 7%;
}
.heading {
display:table-cell;
vertical-align: middle;
}
.heading-span {
display: block;
color: #8e8e8e;
font-size: 18px;
margin-top: 0px;
text-transform:none;
}
.scrolldown-button {
position: absolute;
display: table;
text-align: center;
bottom: 30px;
left: 0;
right: 0;
margin: 0 auto 0 auto;
width: 48px;
height: 48px;
font-size:20px;
}
a {
color:#000000;
transition: ease-in-out 0.15s
}
a:hover{
color:#fbd505;
}
#content {
width: 100%;
height:100vh;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
p {
display:column;
vertical-align: middle;
max-width: 960px;
}
.content-heading-span {
display: block;
font-size: 32px;
margin-top: 0px;
text-transform:uppercase;
margin-left:-20px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">
</head>
<body>
<section id="welcome-screen">
<div class="heading">
<h1><span class="heading-span">Hi! My name is</span>
<strong>John Doe</strong>
</h1>
</div>
<div class="scrolldown-button">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</div>
</section>
<section>
<div id="content">
<div class="wrapper">
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
</div>
</div>
</body>
</html>
.wrapper, which is your flex container, doesn't have a height setting. Add height: 100%; to it and the vertical centering works. However, the parent of .wrapper (i.e. .content) has height: 100vh - if its content grows beyond that, it will be a mess (i.e. overlapping), so you might want to change its height setting to min-height instead of height
body {
font-family: Gotham A,Gotham B,Helvetica,Arial,sans-serif;
}
h1 {
font-size: 3em;
text-transform:uppercase;
}
h4 {
font-size: 1.5em;
color:#9e9e9e;
}
section {
width: 100%;
display: inline-block;
margin: 0;
max-width: 960;
height:100vh;
vertical-align: middle;
}
#welcome-screen {
width: 100%;
display: table;
margin: 0;
max-width: none;
height:100vh;
background-color:#ebebeb;
padding:0 7%;
}
.heading {
display:table-cell;
vertical-align: middle;
}
.heading-span {
display: block;
color: #8e8e8e;
font-size: 18px;
margin-top: 0px;
text-transform:none;
}
.scrolldown-button {
position: absolute;
display: table;
text-align: center;
bottom: 30px;
left: 0;
right: 0;
margin: 0 auto 0 auto;
width: 48px;
height: 48px;
font-size:20px;
}
a {
color:#000000;
transition: ease-in-out 0.15s
}
a:hover{
color:#fbd505;
}
#content {
width: 100%;
min-height:100vh;
}
.wrapper {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
p {
display:column;
vertical-align: middle;
max-width: 960px;
}
.content-heading-span {
display: block;
font-size: 32px;
margin-top: 0px;
text-transform:uppercase;
margin-left:-20px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">
</head>
<body>
<section id="welcome-screen">
<div class="heading">
<h1><span class="heading-span">Hi! My name is</span>
<strong>John Doe</strong>
</h1>
</div>
<div class="scrolldown-button">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</div>
</section>
<section>
<div id="content">
<div class="wrapper">
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
</div>
</div>
</body>
</html>
It's because .wrapper is only as tall as the content inside of it, without a declared height that exceeds the content height. So there is no room for it to vertically center without a height that exceeds the content height. Adding height: 100vh; to .wrapper will force that.
what's up with the downvotes?
body {
font-family: Gotham A,Gotham B,Helvetica,Arial,sans-serif;
}
h1 {
font-size: 3em;
text-transform:uppercase;
}
h4 {
font-size: 1.5em;
color:#9e9e9e;
}
section {
width: 100%;
display: inline-block;
margin: 0;
max-width: 960;
height:100vh;
vertical-align: middle;
}
#welcome-screen {
width: 100%;
display: table;
margin: 0;
max-width: none;
height:100vh;
background-color:#ebebeb;
padding:0 7%;
}
.heading {
display:table-cell;
vertical-align: middle;
}
.heading-span {
display: block;
color: #8e8e8e;
font-size: 18px;
margin-top: 0px;
text-transform:none;
}
.scrolldown-button {
position: absolute;
display: table;
text-align: center;
bottom: 30px;
left: 0;
right: 0;
margin: 0 auto 0 auto;
width: 48px;
height: 48px;
font-size:20px;
}
a {
color:#000000;
transition: ease-in-out 0.15s
}
a:hover{
color:#fbd505;
}
#content {
width: 100%;
height:100vh;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
p {
display:column;
vertical-align: middle;
max-width: 960px;
}
.content-heading-span {
display: block;
font-size: 32px;
margin-top: 0px;
text-transform:uppercase;
margin-left:-20px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">
</head>
<body>
<section id="welcome-screen">
<div class="heading">
<h1><span class="heading-span">Hi! My name is</span>
<strong>John Doe</strong>
</h1>
</div>
<div class="scrolldown-button">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</div>
</section>
<section>
<div id="content">
<div class="wrapper">
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
</div>
</div>
</body>
</html>
Related
I was following along with a tutorial to try and figure out how to insert a responsive hamburger icon for my navbar using css html and a tad bit of js. However I've gotten halfway through the video to the portion where I should be able to see the hamburger icon and for some reason it isn't showing up on screen. I'm able to see it outlined when I inspect my document on firefox, so honestly I'm at a loss for why it isn't appearing on screen. I'm going to post my code below, sorry if I do it improperly this is my first time posting on here, so I'm unsure of the norms.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex no tutorial</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,500;9..144,600&family=Oswald:wght#300;400&family=Roboto+Slab:wght#500;600&family=Work+Sans:wght#300;400&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<nav class="navbar">
<div class="nav-content">
<p class="logo"><h3 class="logo">K13-News</h3></p>
<!--Hamburger nav-->
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="nav-links">
<li>Home </li>
<li>Trending</li>
<li>Today</li>
<li>Politics</li>
</ul>
</div>
</nav>
<div class="columns">
<div class="col col-50">
<p><h3>Trump found innocent on allegations of murder!</h3> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Nisl suscipit adipiscing bibendum est ultricies integer quis. Viverra justo nec ultrices dui sapien eget. Nisi vitae suscipit tellus mauris a diam maecenas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Donec ac odio tempor orci. Purus in massa tempor nec feugiat. Facilisi etiam dignissim diam quis. Dapibus ultrices in iaculis nunc sed augue lacus. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Libero id faucibus nisl tincidunt eget nullam non nisi. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. In cursus turpis massa tincidunt dui ut. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pellentesque adipiscing commodo elit at imperdiet dui accumsan. Diam maecenas sed enim ut sem viverra. Purus sit amet volutpat consequat.
</p>
</div>
<div class="col col-50">
<p>In nibh mauris cursus mattis molestie a iaculis. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Adipiscing elit ut aliquam purus sit. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Sed felis eget velit aliquet. Adipiscing elit ut aliquam purus sit. Nec feugiat in fermentum posuere urna nec tincidunt. Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. Donec adipiscing tristique risus nec feugiat in. Pharetra diam sit amet nisl suscipit adipiscing. Malesuada fames ac turpis egestas maecenas pharetra convallis. Dui vivamus arcu felis bibendum ut tristique et egestas quis. Sagittis eu volutpat odio facilisis mauris sit amet massa. Mattis vulputate enim nulla aliquet porttitor lacus. Lacus vel facilisis volutpat est velit egestas dui id. Pharetra et ultrices neque ornare aenean euismod elementum. Orci eu lobortis elementum nibh tellus molestie nunc. Diam vulputate ut pharetra sit amet aliquam.</p>
</div>
</div>
<!--End of wrapper div-->
</div>
</body>
/* this is so that padding doesn't effect the size of elements*/
*, *::before, ::after {box-sizing:border-box }
#import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,500;9..144,600&family=Oswald:wght#300;400&family=Roboto+Slab:wght#500;600&family=Work+Sans:wght#300;400&display=swap');
body{
font-family: 'Work Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
/*obv the background color of whole page*/
background-color: #201D1D;
color: white;
}
.wrapper{
margin:auto;
margin:20px
}
/* logo section*/
h3.logo{
font-family: 'Fraunces', serif;
font-weight: 600;
color: #011213;
}
li, a{
text-decoration: none;
list-style-type: none;
font-family: 'Work Sans', sans-serif;
/*color of the nav font*/
color: #201D1D;
}
.nav-links li{
display: inline-block;
padding: 0px 10px;
}
.nav-links li a{
transition: all 0.3s ease 0s;
}
/*hover color for nav font*/
.nav-links li a:hover{
color:white;
text-decoration: underline #201D1D 2px ;
text-underline-offset: 5px;
}
/*flex container that controls the nav bar*/
.nav-content{
display:flex;
justify-content: center;
align-items: center;
background-color: #09ADC3;
border-radius: 25px ;
height: 8vh;
margin-bottom: 20px;
}
.columns{
display: flex;
flex-wrap:wrap;
align-items: center;
}
h3{
font-family: 'Roboto Slab', serif;
}
.col{
padding:10px;
}
.col-50{
width:50%
}
#media screen and (max-width:1000px) {
.col-50{
width:100%
}
}
/*style for the hamburger menu which isn't working for some reason*/
.toggle-button{
position:absolute;
top:2rem;
right:1rem;
display:flex;
flex-direction: column;
justify-content:space-between;
width: 31px;
height:21px;
}
.toggle-button .bar{
height:3px;
width:100%;
color:white;
border-radius:10px;
}
Very close!!
Just missing the border property for the .bar class:
.toggle-button .bar {
// height: 3px;
width: 100%;
border-bottom: 2px solid white;
border-radius: 10px;
}
You had set color: white which only applies to the text inside elements. By setting the border (in my answer border-bottom) you're able to see have the white lines.
From there it will just be a case of positioning and the click behaviour...
/* this is so that padding doesn't effect the size of elements*/
*,
*::before,
::after {
box-sizing: border-box
}
#import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,500;9..144,600&family=Oswald:wght#300;400&family=Roboto+Slab:wght#500;600&family=Work+Sans:wght#300;400&display=swap');
body {
font-family: 'Work Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
/*obv the background color of whole page*/
background-color: #201D1D;
color: white;
}
.wrapper {
margin: auto;
margin: 20px
}
/* logo section*/
h3.logo {
font-family: 'Fraunces', serif;
font-weight: 600;
color: #011213;
}
li,
a {
text-decoration: none;
list-style-type: none;
font-family: 'Work Sans', sans-serif;
/*color of the nav font*/
color: #201D1D;
}
.nav-links li {
display: inline-block;
padding: 0px 10px;
}
.nav-links li a {
transition: all 0.3s ease 0s;
}
/*hover color for nav font*/
.nav-links li a:hover {
color: white;
text-decoration: underline #201D1D 2px;
text-underline-offset: 5px;
}
/*flex container that controls the nav bar*/
.nav-content {
display: flex;
justify-content: center;
align-items: center;
background-color: #09ADC3;
border-radius: 25px;
height: 8vh;
margin-bottom: 20px;
}
.columns {
display: flex;
flex-wrap: wrap;
align-items: center;
}
h3 {
font-family: 'Roboto Slab', serif;
}
.col {
padding: 10px;
}
.col-50 {
width: 50%
}
#media screen and (max-width:1000px) {
.col-50 {
width: 100%
}
}
/*style for the hamburger menu which isn't working for some reason*/
.toggle-button {
position: absolute;
top: 2rem;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar {
// height: 3px;
width: 100%;
border-bottom: 2px solid white;
border-radius: 10px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex no tutorial</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,500;9..144,600&family=Oswald:wght#300;400&family=Roboto+Slab:wght#500;600&family=Work+Sans:wght#300;400&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<nav class="navbar">
<div class="nav-content">
<p class="logo">
<h3 class="logo">K13-News</h3>
</p>
<!--Hamburger nav-->
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="nav-links">
<li>Home </li>
<li>Trending</li>
<li>Today</li>
<li>Politics</li>
</ul>
</div>
</nav>
<div class="columns">
<div class="col col-50">
<p>
<h3>Trump found innocent on allegations of murder!</h3> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit.
Nisl suscipit adipiscing bibendum est ultricies integer quis. Viverra justo nec ultrices dui sapien eget. Nisi vitae suscipit tellus mauris a diam maecenas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Donec ac odio
tempor orci. Purus in massa tempor nec feugiat. Facilisi etiam dignissim diam quis. Dapibus ultrices in iaculis nunc sed augue lacus. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Libero id faucibus nisl tincidunt eget nullam
non nisi. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. In cursus turpis massa tincidunt dui ut. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Pretium fusce id velit ut tortor pretium viverra suspendisse.
Pellentesque adipiscing commodo elit at imperdiet dui accumsan. Diam maecenas sed enim ut sem viverra. Purus sit amet volutpat consequat.
</p>
</div>
<div class="col col-50">
<p>In nibh mauris cursus mattis molestie a iaculis. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Adipiscing elit ut aliquam purus sit. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Vestibulum rhoncus
est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Sed felis eget velit aliquet. Adipiscing elit ut aliquam purus sit. Nec feugiat in fermentum posuere urna
nec tincidunt. Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. Donec adipiscing tristique risus nec feugiat in. Pharetra diam sit amet nisl suscipit adipiscing. Malesuada fames ac turpis egestas maecenas pharetra
convallis. Dui vivamus arcu felis bibendum ut tristique et egestas quis. Sagittis eu volutpat odio facilisis mauris sit amet massa. Mattis vulputate enim nulla aliquet porttitor lacus. Lacus vel facilisis volutpat est velit egestas dui id. Pharetra
et ultrices neque ornare aenean euismod elementum. Orci eu lobortis elementum nibh tellus molestie nunc. Diam vulputate ut pharetra sit amet aliquam.</p>
</div>
</div>
<!--End of wrapper div-->
</div>
</body>
Another solution to this problem would simply be to apply a background-color property to the .bar element. The reason my original code didn't work, as Harrison pointed out is because I used color:white, when I should have used background-color:white.
I am currently in the process of making a website for a minecraft server. It is going quite well although it is still in it's infancy. However I have a very stubborn margin on the left which no matter what I try I cannot get rid of. I am not great at web development so maybe there is something that I haven't seen in the html or css.
[Edit] Forgot to add this when initially writing this, I have actually looked at questions asking similar things on here but none of the solutions worked.
Here you can see the margin on the left
And Here is the html and css:
#charset "utf-8";
body {
margin:0;
overflow:hidden;
position: absolute;
}
html {
overflow-y: scroll; overflow-x:hidden;
height: 100%;
padding:0;
}
body {
color: #fff;
margin: 0;
padding: 0;
-webkit-perspective: 1px;
perspective: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
header {
box-sizing: border-box;
min-height: 40vw;
padding: 30vw 0 10vw;
position: relative;
-webkit-transform-style: inherit;
transform-style: inherit;
width: 100vw;
}
header,
header:before { background: 50% 50% / cover; }
header::before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-color: midnight-blue;
background-image: url(https://imgur.com/ehxgn4Q.png);
background-size: 100%;
margin-left:0px;
-webkit-transform-origin: center center 0;
-webkit-transform: translateZ(-1px) scale(2);
transform-origin: center center 0;
transform: translateZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
header * {
font-family:Jura;
font-weight: bold;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
header p { background-color: hsla(0, 0%, 100%,0.1); }
main {
background-color:white;
line-height: 1.7;
max-width: 32em;
padding: 5% calc(50% - 16em) 35%;
position: relative;
z-index: 2;
font-family:Jura;
color:#4b4c4d;
}
.footer-basic {
padding:40px 0;
background-color:#b7e2fc;
color:#4b4c4d;
}
.footer-basic ul {
padding:0;
list-style:none;
text-align:center;
font-size:18px;
line-height:1.6;
margin-bottom:0;
}
.footer-basic li {
padding:0 10px;
}
.footer-basic ul a {
color:inherit;
text-decoration:none;
opacity:0.8;
}
.footer-basic ul a:hover {
opacity:1;
}
.footer-basic .social {
text-align:center;
padding-bottom:25px;
}
.footer-basic .social > a {
font-size:24px;
width:40px;
height:40px;
line-height:40px;
display:inline-block;
text-align:center;
margin:0 8px;
color:inherit;
opacity:0.75;
}
.footer-basic .social > a:hover {
opacity:0.9;
}
.footer-basic .copyright {
margin-top:15px;
text-align:center;
font-size:13px;
color:#aaa;
margin-bottom:0;
}
.list-inline-item {
float:left;
margin-left:268px;
font-family:Jura;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/main.css" rel="stylesheet">
<script src="main.js"></script>
<title>WinterCrest</title>
</head>
<body>
<header>
<h1>Server IP Address: play.wintercrestmc.com</h1>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta, augue ut vulputate aliquet, est massa malesuada libero, nec aliquet nibh nisl sit amet urna. In tincidunt maximus quam, ac feugiat ante porta id. Maecenas lobortis feugiat lorem vel auctor. Integer a nulla in orci ultrices semper. Suspendisse dapibus quam vel fringilla elementum. Etiam nibh lectus, maximus non sapien non, faucibus porttitor est. Proin eget fringilla sem. Nullam urna augue, vulputate sit amet dui eget, scelerisque facilisis mauris. Nam lorem est, elementum sed ullamcorper volutpat, suscipit et dui.</p>
<p>Nulla ac justo lacus. Vestibulum urna nulla, iaculis in sapien sed, pretium semper tortor. Maecenas tristique, erat nec fermentum varius, massa arcu faucibus libero, ut convallis lacus odio a enim. Aenean semper, turpis auctor placerat pellentesque, ligula justo vehicula ex, accumsan pellentesque nisi diam eget neque. Mauris id risus velit. Phasellus malesuada est turpis, ac congue odio malesuada ornare. Vivamus in diam mi. Mauris pharetra vestibulum lacus, nec iaculis mi vehicula eget. Integer finibus id libero ut cursus.</p>
<p>Etiam nec gravida tortor. Duis placerat egestas urna. Nulla ullamcorper nisl non nulla consectetur, ut sodales elit iaculis. Sed gravida porttitor felis non commodo. Nunc venenatis lorem diam, nec ornare purus fringilla vitae. Curabitur sed leo orci. Nam eros enim, interdum elementum tristique vel, aliquam a nisl. In ac interdum neque, in lacinia mi. Donec porta a lacus sit amet auctor.</p>
<p>Nunc tincidunt erat vulputate velit malesuada, quis dapibus est tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper maximus urna a suscipit. In at vulputate sapien, sit amet sollicitudin lorem. Sed feugiat auctor neque vel efficitur. Quisque blandit porttitor massa, eu facilisis tortor volutpat a. Nam accumsan faucibus mauris, in lobortis sapien imperdiet vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer hendrerit sit amet purus vitae finibus. Curabitur ut sodales lacus, ac dignissim arcu. Maecenas sit amet rhoncus odio. Aliquam viverra ligula ac justo elementum vestibulum. Maecenas at semper tellus. Sed malesuada placerat gravida. Maecenas sapien erat, vestibulum eget ante sollicitudin, laoreet blandit nunc. Donec nisi turpis, vestibulum eu lacus sed, cursus aliquam ipsum.</p>
<p>Quisque sed rhoncus leo. Suspendisse nec nibh odio. Aenean sed felis dignissim, faucibus massa id, tincidunt erat. Nullam nec rutrum risus. Fusce rutrum orci et pulvinar condimentum. In hac habitasse platea dictumst. Praesent eget justo pulvinar, rutrum erat non, luctus justo. Nulla nisi velit, mollis non ipsum eu, convallis tincidunt odio. Ut et massa ac magna pellentesque varius sit amet at dolor. Morbi tristique, elit eget ornare fringilla, ipsum neque ultrices neque, eget scelerisque dolor purus id enim. Aenean in fringilla mi, nec tristique nunc. Suspendisse potenti. Sed ultricies eros sit amet maximus ultrices.</p>
</main>
<div class="footer-basic">
<footer>
<div class="social"><img class="discord_logo" src="images/social_icons/logo-discord.svg"></img><img class="forum_logo" src="images/social_icons/people-circle-outline.svg"></img>
<ul class="list-inline">
<li class="list-inline-item">Leave a Review</li>
<li class="list-inline-item">Donate To Us</li>
<li class="list-inline-item">Make A Suggestion</li>
<li class="list-inline-item">Harassment Policy</li>
</ul>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Add width :100% to body css
#charset "utf-8";
body {
margin:0;
overflow:hidden;
position: absolute;
padding:0;
width:100% /* add width 100% */
}
html {
overflow-x:hidden;
height: 100%;
padding:0;
margin:0;
}
body {
color: #fff;
margin: 0;
padding: 0;
-webkit-perspective: 1px;
perspective: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 100%;
overflow-x: hidden;
}
header {
box-sizing: border-box;
min-height: 40vw;
padding: 30vw 0 10vw;
position: relative;
-webkit-transform-style: inherit;
transform-style: inherit;
width: 100vw;
}
header,
header:before { background: 50% 50% / cover; }
header::before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-color: midnight-blue;
background-image: url(https://imgur.com/ehxgn4Q.png);
background-size: 100%;
margin-left:0px;
-webkit-transform-origin: center center 0;
-webkit-transform: translateZ(-1px) scale(2);
transform-origin: center center 0;
transform: translateZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
header * {
font-family:Jura;
font-weight: bold;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
header p { background-color: hsla(0, 0%, 100%,0.1); }
main {
background-color:white;
line-height: 1.7;
max-width: 32em;
padding: 5% calc(50% - 16em) 35%;
position: relative;
z-index: 2;
font-family:Jura;
color:#4b4c4d;
}
.footer-basic {
padding:40px 0;
background-color:#b7e2fc;
color:#4b4c4d;
}
.footer-basic ul {
padding:0;
list-style:none;
text-align:center;
font-size:18px;
line-height:1.6;
margin-bottom:0;
}
.footer-basic li {
padding:0 10px;
}
.footer-basic ul a {
color:inherit;
text-decoration:none;
opacity:0.8;
}
.footer-basic ul a:hover {
opacity:1;
}
.footer-basic .social {
text-align:center;
padding-bottom:25px;
}
.footer-basic .social > a {
font-size:24px;
width:40px;
height:40px;
line-height:40px;
display:inline-block;
text-align:center;
margin:0 8px;
color:inherit;
opacity:0.75;
}
.footer-basic .social > a:hover {
opacity:0.9;
}
.footer-basic .copyright {
margin-top:15px;
text-align:center;
font-size:13px;
color:#aaa;
margin-bottom:0;
}
.list-inline-item {
float:left;
margin-left:268px;
font-family:Jura;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/main.css" rel="stylesheet">
<script src="main.js"></script>
<title>WinterCrest</title>
</head>
<body>
<header>
<h1>Server IP Address: play.wintercrestmc.com</h1>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta, augue ut vulputate aliquet, est massa malesuada libero, nec aliquet nibh nisl sit amet urna. In tincidunt maximus quam, ac feugiat ante porta id. Maecenas lobortis feugiat lorem vel auctor. Integer a nulla in orci ultrices semper. Suspendisse dapibus quam vel fringilla elementum. Etiam nibh lectus, maximus non sapien non, faucibus porttitor est. Proin eget fringilla sem. Nullam urna augue, vulputate sit amet dui eget, scelerisque facilisis mauris. Nam lorem est, elementum sed ullamcorper volutpat, suscipit et dui.</p>
<p>Nulla ac justo lacus. Vestibulum urna nulla, iaculis in sapien sed, pretium semper tortor. Maecenas tristique, erat nec fermentum varius, massa arcu faucibus libero, ut convallis lacus odio a enim. Aenean semper, turpis auctor placerat pellentesque, ligula justo vehicula ex, accumsan pellentesque nisi diam eget neque. Mauris id risus velit. Phasellus malesuada est turpis, ac congue odio malesuada ornare. Vivamus in diam mi. Mauris pharetra vestibulum lacus, nec iaculis mi vehicula eget. Integer finibus id libero ut cursus.</p>
<p>Etiam nec gravida tortor. Duis placerat egestas urna. Nulla ullamcorper nisl non nulla consectetur, ut sodales elit iaculis. Sed gravida porttitor felis non commodo. Nunc venenatis lorem diam, nec ornare purus fringilla vitae. Curabitur sed leo orci. Nam eros enim, interdum elementum tristique vel, aliquam a nisl. In ac interdum neque, in lacinia mi. Donec porta a lacus sit amet auctor.</p>
<p>Nunc tincidunt erat vulputate velit malesuada, quis dapibus est tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper maximus urna a suscipit. In at vulputate sapien, sit amet sollicitudin lorem. Sed feugiat auctor neque vel efficitur. Quisque blandit porttitor massa, eu facilisis tortor volutpat a. Nam accumsan faucibus mauris, in lobortis sapien imperdiet vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer hendrerit sit amet purus vitae finibus. Curabitur ut sodales lacus, ac dignissim arcu. Maecenas sit amet rhoncus odio. Aliquam viverra ligula ac justo elementum vestibulum. Maecenas at semper tellus. Sed malesuada placerat gravida. Maecenas sapien erat, vestibulum eget ante sollicitudin, laoreet blandit nunc. Donec nisi turpis, vestibulum eu lacus sed, cursus aliquam ipsum.</p>
<p>Quisque sed rhoncus leo. Suspendisse nec nibh odio. Aenean sed felis dignissim, faucibus massa id, tincidunt erat. Nullam nec rutrum risus. Fusce rutrum orci et pulvinar condimentum. In hac habitasse platea dictumst. Praesent eget justo pulvinar, rutrum erat non, luctus justo. Nulla nisi velit, mollis non ipsum eu, convallis tincidunt odio. Ut et massa ac magna pellentesque varius sit amet at dolor. Morbi tristique, elit eget ornare fringilla, ipsum neque ultrices neque, eget scelerisque dolor purus id enim. Aenean in fringilla mi, nec tristique nunc. Suspendisse potenti. Sed ultricies eros sit amet maximus ultrices.</p>
</main>
<div class="footer-basic">
<footer>
<div class="social"><img class="discord_logo" src="images/social_icons/logo-discord.svg"></img><img class="forum_logo" src="images/social_icons/people-circle-outline.svg"></img>
<ul class="list-inline">
<li class="list-inline-item">Leave a Review</li>
<li class="list-inline-item">Donate To Us</li>
<li class="list-inline-item">Make A Suggestion</li>
<li class="list-inline-item">Harassment Policy</li>
</ul>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
My first thought is that browsers have their own default settings for many tags.
Often, a css file is used to make sure that only the css you specify is used by the browsers.
Something like:
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,p,th,td {
margin:0;
padding:0;
}
Include whatever tags and attributes you want.
Set the margins and paddings for all the tags you use in your html to 0.
Then you can set what you want in classes or IDs or inline so you know exactly what is coming from where.
Not sure if this is your issue, but should help you track it down.
Also, put borders on all your tags to identify which element is the one responsible for the margin you don't want.
border: 1px solid red;
Just a couple thoughts.
This will most likely be caused by some stray margin or padding somewhere in your website.
A good habit to get into is resetting margin and padding to 0 on all elements at the top of your CSS.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
More specific I want the content section (the section with the white background) fill the mising space, so the header and footer have it's own fixed size and the content section is as big as it takes to fill/fit the full height.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Startseite - Malermeister Gen</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/script.js"></script>
<link rel="shortcut icon" type="image/png" href="img/favicon.ico">
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="last-modified" content="21.10.2018 08:22:20"> <!-- Edit: Nach Abschluss der Arbeit aktualisieren! -->
<meta charset="UTF-8">
<meta name="author" content="Til Jungbluth">
<meta name="description" content="Hier wird eine Beschreibung stehen..."> <!-- Edit: Beschreibung hinzufuegen! -->
<!-- <meta name="keywords" content="Malerorth, GmbH, Maler, Orth, Malermeister, Westerwald, Seck"> <!-- Edit: Ergaenzen! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<div id="headerWrapper">
<header id="header">
<img id="headerLogo" src="img/Logo Malerinnung.jpg" alt="">
<h1 id="headerHeading">Malermeister Gen</h1>
<p id="headerSlogan"><span id="gestaltung">Gestaltung</span> - <span id="schoenheit">Schöhnheit</span> - <span id="schutz">Schutz</span></p>
</header>
<nav id="headerNav">
Home
Unser Team
Kontakt
</nav>
</div>
<div id="contentWrapper">
<h2 id="contentHeading">Lorem ipsum dolor sit amet</h2>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis ligula ac dui rhoncus finibus. Duis sit amet sollicitudin lorem, id interdum nisi. Curabitur tincidunt odio vitae elit hendrerit, sit amet pellentesque nibh faucibus. Ut in molestie lectus, sed faucibus dui. Phasellus auctor finibus erat, eget iaculis nunc euismod in. Suspendisse rhoncus erat volutpat neque varius, a sodales ante pharetra. Sed ullamcorper dictum eros non porta. Nulla viverra enim id odio eleifend, eu malesuada est mollis.</p>
<p>Phasellus nec egestas dolor, a blandit nibh. Fusce sit amet volutpat turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum nunc erat, et finibus erat scelerisque sed. Praesent eget dolor dolor. Praesent sit amet nisi est. Vivamus augue purus, dapibus vitae velit et, ultricies commodo diam. Proin in justo sed mi molestie malesuada a eget enim. Donec venenatis posuere nisi. Fusce felis metus, scelerisque ut lacus ut, hendrerit porta magna.</p>
<p>Nullam dictum varius mi sit amet gravida. Sed tortor metus, bibendum et sem quis, aliquet lacinia dolor. Suspendisse eu enim eget metus tristique laoreet sit amet vel ligula. Sed risus diam, elementum ac est a, mollis porta lacus. Nullam in erat elementum, venenatis purus et, iaculis odio. Aenean et orci viverra, aliquet elit vel, blandit ipsum. Aenean id velit id tellus faucibus pretium et eu ipsum. Fusce ac libero ultricies, vestibulum eros vel, aliquam lectus. Nullam est magna, vestibulum rutrum enim a, ultricies auctor ipsum. Nunc consectetur, sem at facilisis lacinia, nibh libero pulvinar elit, et convallis massa ligula in libero. Etiam finibus imperdiet odio vel tristique. Vestibulum ornare nibh at justo dictum accumsan. Donec non sapien risus. Suspendisse sed ante vitae neque sollicitudin posuere. Fusce mollis dapibus rutrum.</p>
<p>Etiam vel odio est. Nulla quis urna bibendum, tincidunt est id, laoreet nulla. Nunc consequat, ante at blandit rutrum, nisl odio vestibulum est, ut aliquam ligula ligula in nulla. Quisque rutrum, lorem in posuere fringilla, lorem libero bibendum metus, vel aliquet ex urna sed sem. Donec quis nisi arcu. Nunc magna odio, mollis auctor tortor nec, tincidunt ornare magna. Aenean sagittis enim et libero condimentum, at pellentesque risus hendrerit. Quisque eget purus in dui semper dignissim blandit non dui. Etiam mollis vehicula nulla lacinia pretium. Ut cursus, libero eu vehicula dapibus, massa nisi venenatis ex, nec fermentum mi lacus in leo. Nunc massa orci, vestibulum in pellentesque vitae, suscipit at augue. Vestibulum tempus arcu at fermentum aliquet. Duis feugiat, lacus eu accumsan viverra, eros nisi sodales libero, non pulvinar ante erat id lorem. Phasellus mauris orci, condimentum in eros non, aliquam egestas erat. Etiam neque libero, imperdiet vitae lobortis id, ultrices efficitur ante.</p>
</div>
</div>
<footer id="footer">
<p id="footerP">© Malermeister Gen GmbH |
Kontakt |
Impressum
</p>
<button onclick="topFunction()" id="scrollBackToTop" title="Go to top">Zum Seitenanfang</button>
</footer>
</div>
</body>
</html>
CSS:
body{
background: linear-gradient(to right, rgb(0, 51, 145) 0%, rgb(241, 185, 0) 50%, rgb(212, 24, 0) 100%);
margin: 0;
font-size: 14px;
}
#header{
height: 4.3em; /*Actual height is 4.1em. There was a space between #header and #headerNav, whyever...*/
margin: 0 0 -0.2em 0; /*In this way they overlap, so there's no unwanted space between.*/
padding: 0.6em;
background: darkgrey;
}
#headerLogo{
float: left;
height: 100%;
}
#headerHeading{
margin: 0 0 0 0.4em;
display: inline-block;
}
#headerSlogan{
display: block;
margin: 0.2em 0.2em 0 0;
float: right;
font-size: 1.25em;
}
#gestaltung{
color: rgb(0, 51, 145);
}
#schoenheit{
color: rgb(241, 185, 0);
}
#schutz{
color: rgb(212, 24, 0);
}
#headerNav{
height: 1.9em; /*Actual height is 1.7em. There was a space between #headerWrapper and #contentWrapper, whyever...*/
margin: 0 0 -0.2em 0;
padding: 0.5em 0 0.23em 0;
display: block;
text-align: center;
background: lightgrey;
}
.headerNavLinks{
margin: 0 0.4em;
padding: 0 0.6em;
text-decoration: none;
font-size: 1.25em;
border: 0.0625em solid black;
border-radius: 10%;
}
.headerNavLinks:hover{
background: black;
color: white;
}
#headerNavActive{
border: 0.0625em solid green;
border-radius: 10%;
}
#contentWrapper{
background: white;
padding: 0.6em;
}
#contentHeading{
margin: 0;
}
#content{
}
#content p:last-child{
margin: 1em 0 0 0;
}
#footer{
background: darkgrey;
padding: 0.6em;
}
#footerP{
margin: 0 0 0.4em 0;
text-align: center;
}
#scrollBackToTop{
background: lightgrey;
display: block;
margin: 0 auto;
}
#media only screen and (min-width: 480px){
body{
font-size: 15px;
}
}
#media only screen and (min-width: 545px){
body{
font-size: 16px;
}
#headerHeading{
margin: 0;
display: block;
}
#headerLogo{
margin: 0 0.8em 0 0;
}
}
#media only screen and (min-width: 650px){
body{
font-size: 17px;
}
}
#media only screen and (min-width: 768px){
body{
font-size: 18px;
}
#headerLogo{
margin: 0 1.2em 0 0;
}
#headerSlogan{
margin: 0.2em 0.2em 0 0;
}
}
#media only screen and (min-width: 1024px){
#wrapper{
width: 768px;
margin: auto;
}
}
#media only screen and (min-width: 1676px){ /* Just tried to make the content fit the height...*/
html{
max-height: 52.38em;
}
body{
max-height: 52.38em;
}
}
#media only screen and (min-width: 2560px){
#wrapper{
height: 100%;
}
}
body {
height: 100vh; //sets the height of the website to fit the screen.(even if the content is too less)
overflow-y:auto; // allows vertical scroll if the content is more.
}
I've added this image of piggy so it would be next to the text, but when I'm trying to add horizontal line and text, it doesn't show up under the image and texts but stays with image.Screenshot
HTML:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Sími portfólio</title>
<link rel="stylesheet" type="text/css" href="pokus1.css" />
</head>
<body>
<div id="hlavni">
<h1 id="nadpis"> XXXXXXXXXXXXXX </h1>
<p id="text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
In dapibus augue non sapien. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam ornare wisi eu metus.
Duis viverra diam non justo. Etiam posuere lacus quis dolor. Pellentesque arcu. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nulla est.
Phasellus faucibus molestie nisl. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nam sed tellus id magna elementum tincidunt.
Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Integer tempor. Pellentesque arcu. </p>
</div>
<img src="tučík.png" alt="prasátko" id="prasatko">
<hr>
<p> . Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam ornare wisi eu metus.
Duis viverra diam non justo. Etiam posuere lacus quis dolor. </p>
</div>
</body>
</html>
CSS:
body {
display:block;
width: 800px;
margin-top: 10px;
margin-left: 550px;
margin-right: 550px;
background-image: url("pozadi.png");
overflow: hidden;
}
#hlavni {
clear: both;
overflow: hidden;}
#nadpis {
display:block;
background-color: grey;
font-size: 50px;
font-family: Garamond;
font-style: italic;
padding: 8px;
overflow: hidden;}
#text {
line-height: 30px;
font-size: 20px;
float: right;
clear: right;
width: 55%;
overflow: hidden;
}
#prasatko {
height: 300px;
width: 300px;
position: relative;
right: 60px;
bottom: 50px;
float: left;
clear: left;
overflow: hidden;
}
Thanks for your help, I've tried overflow: hidden or clear: both but nothing works
You have one DIV extra.
And also just do this:
<hr style="clear:both">
#hlavni {
clear: both;
overflow: hidden;
}
#nadpis {
display:block;
background-color: grey;
font-size: 50px;
font-family: Garamond;
font-style: italic;
padding: 8px;
overflow: hidden;}
#text {
line-height: 30px;
font-size: 20px;
float: right;
clear: right;
width: 55%;
overflow: hidden;
}
#prasatko {
height: 300px;
width: 300px;
position: relative;
right: 60px;
bottom: 50px;
float: left;
clear: left;
overflow: hidden;
}
<div id="hlavni">
<h1 id="nadpis"> XXXXXXXXXXXXXX </h1>
<p id="text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
In dapibus augue non sapien. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam ornare wisi eu metus.
Duis viverra diam non justo. Etiam posuere lacus quis dolor. Pellentesque arcu. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nulla est.
Phasellus faucibus molestie nisl. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nam sed tellus id magna elementum tincidunt.
Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Integer tempor. Pellentesque arcu. </p>
<img src="tučík.png" alt="prasátko" id="prasatko" style="background:red">
<hr style="clear:both">
<p> . Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam ornare wisi eu metus.
Duis viverra diam non justo. Etiam posuere lacus quis dolor. </p>
</div>
After the end of your floating, add a <div> per example with clear:both
I'm trying to align a div at the bottom right corner inside a specific column, but all instead it aligns at the bottom right corner of the main parent.
https://jsfiddle.net/jonnijonnason/L9vg468g/
If you check the fiddle, I want it to align beneath the image.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Arbetsprov | Baldvin Haraldsson</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div class="page">
<div class="row">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
</div>
<div class="item">
<p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
</div>
<div class="item">
<H3>Image</H3>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.
<div class = "foo">Read More</div>
</div>
</div>
</div>
</body>
</html>
CSS
#charset "UTF-8";
.item {
width: 33%;
background: rgba(0, 0, 0, 0.1);
display: table-cell;
}
.row {
border: 1px solid red;
display: table;
border-spacing: 20px;
}
.page {
max-width: 900px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
img {
float: right;
margin: 0 0 10px 10px;
padding: 10px;
}
.foo {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #4a4a4a;
height: 50px;
width: 162px;
position: absolute;
bottom: 0;
right: 0;
}
Add to <div class="item"> column a position:relative;
The button inside has an absolute position so it is relative to the next parent element with relative (or absolute) positioning.
Also, to make it not overlap the text you can also set padding-bottom
.item.contains-button {
position:relative;
padding-bottom:60px;
}
Your updated JSFiddle
What you need to do is just add Position: relative; to the last column. This will make Read more div to be at bottom right corner of the direct parent DIV instead of the main DIV.
Updated jsFiddle: https://jsfiddle.net/L9vg468g/4/
HTML:
<body>
<div class="page">
<div class="row">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
</div>
<div class="item">
<p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
</div>
<div class="item lastcol">
<H3>Image</H3>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.
<div class = "foo">Read More</div>
</div>
</div>
</div>
</body>
CSS:
#charset "UTF-8";
.item {
width: 33%;
background: rgba(0, 0, 0, 0.1);
display: table-cell;
position: relative;
}
.item.lastcol {
position: relative;
}
.row {
border: 1px solid red;
display: table;
border-spacing: 20px;
}
.page {
max-width: 900px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
img {
float: right;
margin: 0 0 10px 10px;
padding: 10px;
}
.foo {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #4a4a4a;
height: 50px;
width: 162px;
position: absolute;
bottom: 0;
right: 0;
}
As you have placed other two columns description inside paragraph tag, you can keep third description also inside a paragraph and it can be achievable by using css flexbox if your browser support is IE10 +.
Updated code below.
.item {
width: 33%;
background: rgba(0, 0, 0, 0.1);
display: table-cell;
display: flex;
flex-direction: column;
}
.row {
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-spacing: 20px;
}
.page {
max-width: 900px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
img {
float: right;
margin: 0 0 10px 10px;
padding: 10px;
}
.foo {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #4a4a4a;
height: 50px;
width: 162px;
position: relative;
bottom: 0;
right: 0;
}
.item h3 {
order: 1;
}
.item img {order: 2;}
.item div {order: 3;}
.item p {order: 4;}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Arbetsprov | Baldvin Haraldsson</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div class="page">
<div class="row">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
</div>
<div class="item">
<p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
</div>
<div class="item lastcol">
<H3>Image</H3>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
<p>Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.</p>
<div class = "foo">Read More</div>
</div>
</div>
</div>
</body>
</html>