I am trying to fix a few issues in my code, but somehow it seems to get worse.
It should look like the example. The four boxes need to sit next to each other. All six images have to be in in row of three. for that I used div class column. On these images the names of the animal should be written (transparent).
For this I used Pad. Now the names appear on the background image instead of the individual images under.
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("images/mandarinfish.jpg");
/* Full height */
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Playfair Display', serif;
}
/* bovenste rand*/
header {
background-color: #D3D3D3;
padding: 10px;
text-align: center;
font-size: 35px;
color: white;
border-radius: 0px;
}
#grade {
height: 200px;
background-color: grey;
background-image: linear-gradient(grey, white, grey);
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li{
float: left;
width: 200px;
height: 40px;
background-color: transparent;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a{
text-decoration: none;
color: black;
display: block;
}
ul li a:hover{
background-color:gainsboro;
}
/* positie navbar */
position: relative;
}
.navbar a {
float: left;
display: flex;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/*menu*/
.container {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
}
.navbar
{
background-color: transparent
}
/*blok categorie*/
.box2 {
display: inline-block;
border: 2px solid black ;
padding: 30px;
border-radius: 25px;
text-align: center;
margin: 1em;
width: 500;
height: 100;
}
/*size foto's*/
{
box-sizing: border-box;
}
img {
height: 300px;
width: 200px;
align-self: flex-start;
}
.row {
display: flex;
}
/* three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
/*onderste zes afbeeldingen tekst op foto */
.image {
position: relative;
width: 100%;
text-align: center;
color: transparent;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
img {
border:2px solid #000000;
}
footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
}
/* Tablet Landscape */
#media screen and (min-width: 320px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Tabled Portrait */
#media screen and (max-width:768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Dieren</title>
<link href="normalise.css" rel="stylesheet" type="text/css">
<link href="dieren.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
</header>
<div class="bg"></div>
<div class="bg-img">
<div class="scrollmenu">
<div class="container">
<div class="topnav">
<ul>
<li><a>Amfibieën</a></li>
<li><a>Vogels</a></li>
<li><a>Vissen</a></li>
<li><a>Zoogdieren</a></li>
</ul>
</div>
</div>
</div>
<div class="box2">
<h1>Kikker</h1>
<p>Categorie Amfibieën</p>
</div>
<div class="box2">
<h1>Bosui</h1>
<p>Categorie vogels</p>
</div>
<div class="box2">
<h1>Siamese Kempvis</h1>
<p>Categorie vissen</p>
</div>
<div class="box2">
<h1>Eekhoorn</h1>
<p>Categorie zoogdieren</p>
</div>
<div class="row">
<div class="row">
<div class="column">
<img src="images/clownfish.jpg" alt="clown vis" style="width: 100%"/>
<div class="centered">Clown vis</div>
</div>
<div class="column">
<img src="images/eagle.jpg" alt="adelaar" style="width: 100%">
<div class="centered">Adelaar</div>
</div>
<div class="column">
<img src="images/elephants.jpg" alt="olifant" style="width: 100%">
<div class="centered">Olifant</div>
</div>
<div class="column">
<img src="images/Yellowbanded.jpg" alt="kikker" style="width: 100%">
<div class="centered">Kiker</div>
</div>
<div class="column">
<img src="images/peacock.jpg" alt="pauw" style="width: 100%">
<div class="centered">Pauw</div>
</div>
<div class="column">
<img src="images/toad.jpg" alt="pad" style="width: 100%">
<div class="centered">Pad</div>
</div>
</div>
<footer>Deze pagina is gemaakt voor opdracht 4 van HTML5 & CSS.</footer>
</div>
</div>
</body>
</html>
1: https://i.stack.imgur.com/tFRuK.jpg The correct example
Current Code Output My code sorry I cant add my images so you won't see the result with the right images.
check this , remove some css code for better view , for text you can add text-shadow too
changes:
add display: flex; to bg class , and .topnav{align-self: flex-end;width:100%;background: rgb(255,255,255);background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6839869736957283) 35%, rgba(255,255,255,0.5943511193539917) 100%);}
you should put topnav div inside bg div
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://natgeo.imgix.net/subjects/headers/Animal-Tigers.jpg?auto=compress,format&w=1920&h=960&fit=crop");
/* Full height */
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Playfair Display', serif;
z-index:100;
display: flex;
}
/* bovenste rand*/
header {
background-color: #D3D3D3;
padding: 10px;
text-align: center;
font-size: 35px;
color: white;
border-radius: 0px;
}
#grade {
height: 200px;
background-color: grey;
background-image: linear-gradient(grey, white, grey);
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li{
float: left;
width: 200px;
height: 40px;
background-color: transparent;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a{
text-decoration: none;
color: black;
display: block;
}
ul li a:hover{
background-color:gainsboro;
}
/* positie navbar */
position: relative;
}
.navbar a {
float: left;
display: flex;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/*menu*/
.container {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
}
.navbar
{
background-color: transparent;
}
.topnav{
align-self: flex-end;
width:100%;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6839869736957283) 35%, rgba(255,255,255,0.5943511193539917) 100%);
}
/*blok categorie*/
.box2 {
display: inline-block;
border: 2px solid black ;
padding: 30px;
border-radius: 25px;
text-align: center;
margin: 1em;
width: 500;
height: 100;
}
/*size foto's*/
{
box-sizing: border-box;
}
img {
height: 300px;
width: 200px;
align-self: flex-start;
}
.row {
display: flex;
}
/* three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
/*onderste zes afbeeldingen tekst op foto */
.image {
position: relative;
width: 100%;
text-align: center;
color: transparent;
}
/* .centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} */
img {
border:2px solid #000000;
}
footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
}
/* Tablet Landscape */
#media screen and (min-width: 320px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Tabled Portrait */
#media screen and (max-width:768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Dieren</title>
<link href="normalise.css" rel="stylesheet" type="text/css">
<link href="dieren.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
</header>
<div class="bg">
<div class="topnav">
<ul>
<li><a>Amfibieën</a></li>
<li><a>Vogels</a></li>
<li><a>Vissen</a></li>
<li><a>Zoogdieren</a></li>
</ul>
</div>
</div>
<div class="bg-holder">
</div>
<div class="bg-img">
<div class="scrollmenu">
<div class="container">
</div>
</div>
<div class="box2">
<h1>Kikker</h1>
<p>Categorie Amfibieën</p>
</div>
<div class="box2">
<h1>Bosui</h1>
<p>Categorie vogels</p>
</div>
<div class="box2">
<h1>Siamese Kempvis</h1>
<p>Categorie vissen</p>
</div>
<div class="box2">
<h1>Eekhoorn</h1>
<p>Categorie zoogdieren</p>
</div>
<div class="row">
<div class="row">
<div class="column">
<img src="images/clownfish.jpg" alt="clown vis" style="width: 100%"/>
<div class="centered">Clown vis</div>
</div>
<div class="column">
<img src="images/eagle.jpg" alt="adelaar" style="width: 100%">
<div class="centered">Adelaar</div>
</div>
<div class="column">
<img src="images/elephants.jpg" alt="olifant" style="width: 100%">
<div class="centered">Olifant</div>
</div>
<div class="column">
<img src="images/Yellowbanded.jpg" alt="kikker" style="width: 100%">
<div class="centered">Kiker</div>
</div>
<div class="column">
<img src="images/peacock.jpg" alt="pauw" style="width: 100%">
<div class="centered">Pauw</div>
</div>
<div class="column">
<img src="images/toad.jpg" alt="pad" style="width: 100%">
<div class="centered">Pad</div>
</div>
</div>
<footer>Deze pagina is gemaakt voor opdracht 4 van HTML5 & CSS.</footer>
</div>
</div>
</body>[enter image description here][1]
</html>
I'm brand new to this. I'm trying to create my first webpage. I want three boxes placed inside my wrapper - it should look like this drawing: https://ibb.co/xGDCv2f
I basically want to place three boxes inside the wrapper. "Registrer Pant", "Nexus Fordele" and "Samlet Donation" I'm kinda clueless how to, though.
MY HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registrer Pant</title>
<link rel="stylesheet" type="text/css" href="Forside.css"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="header">
<h1>Godmorgen, Mathias</h1>
</div>
<div id="wrapper">
</div>
<br/>
<br/>
<br/>
<div id="box1" class="Pant">
Registrer Pant
</div>
<br/>
<br/>
<br/>
<div id="box2" class="Nexus">
Nexus fordele
</div>
<br/>
<br/>
<div id="box3" class="Samlet">
Samlet donation
</div>
</body>
</html>
MY CSS:
.header {
padding: 40px;
text-align: center;
background: #4968aa;
color: white;
}
.header h1 {
font-size: 40px;
}
#wrapper {
width: 1260px;
height: 500px;
border: 2px solid black;
}
.Pant {
background-color: #BCBCBA;
width: 800px;
height: 300px;
margin: 0 auto;
text-align: center;
vertical-align: middle;
line-height: 300px;
font-size: 100px;
#box2 {
background-color: lime;
width: 200px;
height: 100px;
margin: 0 auto;
text-align: center;
vertical-align: middle;
line-height: 100px;
}
#box3 {
background-color: dodgerblue;
width: 200px;
height: 100px;
margin: 0 auto;
text-align: center;
vertical-align: middle;
line-height: 100px;
}
Much appreciated.
If you want the boxes in the wrapper don't close the wrapper div (with </div>) until after the boxes' HTML.
Then just some minor adjustments in the CSS.
.header {
padding: 40px;
text-align: center;
background: #4968aa;
color: white;
}
.header h1 {
font-size: 40px;
}
#wrapper {
width: 1260px;
height: 500px;
border: 2px solid black;
text-align: center;
}
.Pant {
background-color: #BCBCBA;
width: 800px;
height: 300px;
text-align: center;
vertical-align: middle;
line-height: 300px;
font-size: 100px;
margin: auto;
}
#box2 {
background-color: lime;
width: 200px;
height: 100px;
text-align: center;
vertical-align: middle;
line-height: 100px;
display: inline-block;
}
#box3 {
background-color: dodgerblue;
width: 200px;
height: 100px;
text-align: center;
vertical-align: middle;
line-height: 100px;
display: inline-block;
}
<div class="header">
<h1>Godmorgen, Mathias</h1>
</div>
<div id="wrapper">
<div id="box1" class="Pant">
Registrer Pant
</div>
<div id="box2" class="Nexus">
Nexus fordele
</div>
<div id="box3" class="Samlet">
Samlet donation
</div>
</div>
<html lang="en">
<meta charset="utf-8" />
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>
<body>
<div id="container">
<header>
<div id="static_nav">
<nav class='navbar'>
Home
About Us
Contact Us
Events
login
</nav>
</div>
</header>
<div id="block_two">
<p></p>
</div>
<div id="block_three">
<div id="column-center">
<header>
Column center
</header>
</div>
<div id="column-left">
<header>
Column left
</header>
</div>
<div class="column-right">
<header>
Column right
</header>
</div>
</div>
<div id="block_four">
<p> Block Four </p>
</div>
<div id="end_block">
<footer<p>This is where the footer would go</p>
</footer>
</div>
</div>
</body>
</html>
Here is the css
html {
overflow: hidden;
}
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
}
div#static_nav{
font-family: Verdana, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 7vh;
background-color: #3A3D3F;
position:fixed;
opacity: .90;
color: red;
vertical-align: middle;
}
div#static_nav a{
color: white;
text-decoration: none;
}
.navbar {
padding-right: 20px;
padding-top: 10px;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
div#block_two{
background-color: ;
padding-top: 10px;
height: 100vh;
background-image: url(sample_image.png);
background-size: cover;
}
div#block_three{
padding-top: 10px;
height: 100vh;
background-color: #FFFFFF;
padding-left: 10px;
}
These are the following columns I would like to line up in a row in the #block_three. I figured that 33% for the width would do the trick but one div column(column right) always gets pushed below the others.
div#column-left{
float: left;
width: 33%;
}
div#column-right{
float: right;
width: 33%;
}
div#column-center{
display: inline-block;
width: 33%;
}
div#block_four{
padding: 10px;
height: 100vh;
background-color: #FFFFFF;
}
div#end_block{
padding: 10px;
background-color: #3A3D3F;
height: 50vh;
}
Try to add these settings:
* {
box-sizing: border-box;
}
html {
margin: 0;
}
You have a padding-left of 10px on the block with the columns which is not calculated into the overall width, so this is probably the reason for your problem. The first of the rules above should hopefully fix that.
EDIT/ADDITION:
I just noticed you float settings on those colums - not good... ;-)
Change all of the them to float-left and change their order in the HTML code to "left/center/right" to simply float them from left to right (the inline-block won't work here)
div#column-left {
float: left;
width: 33%;
}
div#column-right {
float: left;
width: 33%;
}
div#column-center {
float: left;
width: 33%;
}
My 2 secondary div don't want to be at the center of the primary.
I have this code :
HTML:
<div id="body">
<div id="content">
<div id="contact">
<div class="contact">
<img id="contact_photo" src="images/contact_photo.png">
</div>
<div class ="contact" id="contact-text">
some text<br>
some text<br>
some text
</div>
</div>
</div>
</div>
CSS :
#body{
background-image: url("../images/background_body.png");
height : 100%;
width:101%;
margin : 10px -10px;
overflow: hidden;
}
#content{
color: white;
padding: 0 0 0 395px;
height: 100%;
overflow: hidden;
font-family: "Lato";
font-size: 26px;
}
#contact{
font-size: 26px;
font-family: "Lato";
color: white;
width: 1035px;
/* background-color: green;*/
display: flex;
padding: 35px 80px 0 80px;
float:left;
text-align: center;
}
.contact{
float: none;
display: inline-block;
text-align:left;
}
#contact-text{
width: 385px;
height: 145px;
}
#contact_photo{
margin-right: 40px;
}
If someone can help me, I saw everywhere that they centered the div only with :
text-align: center;
and
float: none;
display: inline-block;
I don't find what's the matter.
Thank you
Try this:
.contact {
margin: 0 auto;
}
This makes the margins on right and left sides set to the same so that the item will be displayed in the center;
Try to access acetheinterview.co on your mobile phone and go to page 2. You will see that the part of the screen you see when you land on the page has a background color but when you start to scroll it becomes white and you cannot see the last part of my content.
Any ideas how to fix?
.page {
display:none;
padding-left: 20px;
padding-right: 20px;
padding-top: 0px;
padding-bottom: 0px;
}
* {
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
margin: 0;
font-family: "Helvetica Neue" !important;
}
html {
margin: 0;
}
.jumbotron {
height:100%;
background: url('hero-bg-v1.jpg');
text-align: center;
margin: 0 !important;
}
h1 {
color: #FFFFFF !important;
font-size: 45px !important;
padding-top: 10%;
font-weight: 500;
line-height: 50px;
letter-spacing: 0.8px;
}
h2 {
color: #FFFFFF !important;
font-size: 20px !important;
font-weight: 400;
letter-spacing: 0.8px;
padding-bottom: 20px;
}
#page1 {
width: 100%;
height: 100%;
background-color: #7DBB91;
}
#page2 {
width: 100%;
height: 100%;
background-color: #8BCBCA;
}
#page3 {
width: 100%;
height: 100%;
background-color: #C384C5;
}
#page4 {
width: 100%;
height: 100%;
background-color: #7C8DF5;
}
#page5 {
width: 100%;
height: 100%;
background-color: #E96C6C;
text-align: center;
}
<div class="container">
<div class="row">
<h1 class="advice">ADVICE #1</h1>
</div>
<div class="row">
<div class="col-sm-5">
<p class="quote">Always, always research the company you are interviewing with. What is their core product?
What other opportunities are they pursuing? What are the challenges they are facing?
</p>
<br>
<br>
<button type="button" class="btn-md sales-cta" id="previousbuttonpage1">Previous</button>
<button type="button" class="btn-md sales-cta" id="nextbuttonpage1">Next</button>
</div>
<div class="col-sm-7 text-center hidden-xs">
<%= image_tag("quote.png", width: "250", height: "170") %>
<h2 class="author">Girl</h2>
<h3 class="job-title">Product Manager</h3>
<h4 class="company">Google</h4>
</div>
</div>
</div>
<div class="col-xs-12 hidden-xs">
<div class="author-picture" id="joe">
<%= image_tag("joe-zadeh.png") %>
</div>
</div>
</div>
As I guess this is the problem:
body { height: 100vh;}
100vh limits the heigh to the viewport height. Change this to height:100% or min-height:100vh; as Paulie_D suggested