Okay, I'll try to make this pretty quick. I'm working on upgrading my website's looks as a fun project. I used tables before as my site layout, but I'm trying to use CSS Grid as I've learned a lot since then. I'm using a CSS grid of just 3 columns, the outer two act as margins and the center is for content. Whenever there is enough content to make the page scroll down, the margins don't grow with it. In fact, neither does the center, because when I scroll to the bottom after putting something below a tall image it just shows the background color of my container.
To make the question simpler, how do I make the off white parts of my page black like the rest of the margins?
Scrolled to middle of page: Link to first picture
Scrolled all the way to the bottom: Link to second picture
I repeat, the off white color is not intentional, that's there because it's the color of the container. Everything that's the cream color should be black or gray!
body {
margin: 0;
width: 100vw;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
}
.content {
width: 70vw;
height: 100vh;
background-color: #252525;
}
.margin {
width: 15vw;
height: 100vh;
background-color: #000000;
}
table{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
tr {
vertical-align: top;
}
a {
color: dodgerblue;
}
p {
color: #45d163;
font-size: 3.0vh;
text-align: left;
margin-left: 2.5vw;
font-family: Arial, bold;
font-weight: bold;
}
ol {
margin-left: 3.5vw;
}
ul{
}
li{
}
.fixed {
position: fixed;
}
.grid-container {
display: grid;
grid-template-columns: 15% 70% 15%;
background-color: #fceee3;
width: 100vw;
height: 100vh;
min-width: 0;
min-height: 100vh;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
min-height: 100vh;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
color: blue;
font-size: 30vh;
text-align: left;
min-height: 100vh;
margin-top: 0%;
}
<!DOCTYPE html>
<html lang="en" >
<!-- partial:index.partial.html -->
<head>
<meta charset="UTF-8">
<title>Keyboard Mechanic</title>
<link rel="stylesheet" href="style.css"> </link>
<style>
.header {
overflow: hidden;
background-color: #171615;
padding: 1% 1%;
width: 100%;
position: fixed;
height: 7%;
}
.header a {
float: left;
color: #f1f1f1;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
width: max-content !important;
margin-right: 10px;
}
.header a.active {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a.logo {
all: unset;
}
.login {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header-right {
float: right;
}
#media screen and (max-width: 100%) {
.header a {
float: none;
display: block;
text-align: left;
}
}
</style>
<style>
.wrapper {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-rows: 1fr;
background-color: #fceee3;
width: 100vw;
height: 100%;
overflow: scroll;
min-height: 100# !important;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
margin-top: 0%;
height: auto;
min-height: 100# !important;
}
.grid-center {
background-color: #252525;
margin-top: 0%;
width: 100%;
height: 100%;
min-height: 100# !important;
}
</style>
</head>
<body>
<div class="header">
<div class="header-right">
<a class="active" href="newLook.html">Home</a>
<a class="active" href="games.html">Games</a>
<a class="active" href="webprojects.html">Web Projects</a>
<a class="login" href="login.html">Login</a>
Contact
About
</div>
</div>
<div class="wrapper">
<div class="grid-item"> </div>
<div class="grid-center">
<p>Hello </p>
<img style="width: 100%;" src="https://i.imgur.com/DvlV8Sh.png" />
<p> Stuff outside the picture doesn't sit inside the center grid item, if it did, the background would be gray! </p>
</div>
<div class="grid-item"> </div>
</div>
</body>
</html>
<!-- partial -->
You could have done this with flex, To the best of my knowledge grid is not made for that purpose!
Here's an example made with flex
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #171615;
}
.header {
/* If you don't want the header to be sticky on scroll remove these lines */
position: sticky;
top: 0;
/* If you don't want the header to be sticky on scroll remove these lines */
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
background: #171615;
}
.header-logo {
height: 55px;
}
.logo {
height: 100%;
width: 135px;
object-fit: cover;
}
.header-menu {
display: flex;
flex-flow: row wrap;
}
.header-menu a {
color: #f1f1f1;
padding: 12px;
text-decoration: none;
border-radius: 4px;
margin-right: 8px;
white-space: nowrap;
}
.header a.active {
background: dodgerblue;
}
.login {
background-color: dodgerblue;
}
.header-menu a:hover {
background-color: #ddd;
color: black;
}
.wrapper {
width: 70%;
color: white;
}
/* you can remove this part */
.white-space {
display: flex;
height: 800px;
font-size: 3rem;
background: darkgray;
}
/* you can remove this part */
<div class="header">
<div class="header-logo">
<img class="logo" src="https://via.placeholder.com/135x55" alt="Logo" />
</div>
<div class="header-menu">
<a class="active" href="#">Home</a>
<a class="active" href="#">Games</a>
<a class="active" href="#">Web Projects</a>
<a class="login" href="#">Login</a>
Contact
About
</div>
</div>
<div class="wrapper">
<!-- put your content here -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
<div class="white-space">
<h2 style="margin: auto">White Space</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
<!-- put your content here -->
</div>
Updated:
added custom height to the header
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #171615;
}
.header {
/* If you don't want the header to be sticky on scroll remove these lines */
position: sticky;
top: 0;
/* If you don't want the header to be sticky on scroll remove these lines */
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
background: #171615;
}
.header-logo {
height: 55px;
}
.logo {
height: 100%;
width: 135px;
object-fit: cover;
}
.header-menu {
display: flex;
flex-flow: row wrap;
height: 100px;
align-items: center;
}
.header-menu a {
color: #f1f1f1;
padding: 12px;
text-decoration: none;
border-radius: 4px;
margin-right: 8px;
white-space: nowrap;
}
.header a.active {
background: dodgerblue;
}
.login {
background-color: dodgerblue;
}
.header-menu a:hover {
background-color: #ddd;
color: black;
}
.wrapper {
width: 70%;
color: white;
}
/* you can remove this part */
.white-space {
display: flex;
height: 800px;
font-size: 3rem;
background: darkgray;
}
/* you can remove this part */
<div class="header">
<div class="header-logo">
<img class="logo" src="https://via.placeholder.com/135x55" alt="Logo" />
</div>
<div class="header-menu">
<a class="active" href="#">Home</a>
<a class="active" href="#">Games</a>
<a class="active" href="#">Web Projects</a>
<a class="login" href="#">Login</a>
Contact
About
</div>
</div>
<div class="wrapper">
<!-- put your content here -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
<div class="white-space">
<h2 style="margin: auto">White Space</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
<!-- put your content here -->
</div>
Remove the min-height for .grid-center and .grid-item:
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
color: blue;
font-size: 30vh;
text-align: left;
margin-top: 0%;
}
Related
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500;700&family=Fraunces:opsz,wght#9..144,700&family=Rye&family=Seymour+One&family=Ultra&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: black;
}
.parent {
display: flex;
flex-direction: column;
max-width: 600px;
font-family: "Montserrat";
border-radius: 10px;
margin: 20px;
background-color: white;
}
picture {
display: block;
}
img {
width: 100%;
height: 100%;
}
.main-content {
padding: 1rem;
}
.cologne {
text-transform: uppercase;
letter-spacing: 0.5rem;
color: #8f8f8f;
}
h1 {
font-family: "Fraunces";
overflow-wrap: break-word;
color: #343434;
}
.description {
color: #8f8f8f;
overflow-wrap: break-word;
}
.price {
display: flex;
gap: 1rem;
align-items: center;
overflow-wrap: break-word;
}
.price p:nth-child(1) {
font-size: 2rem;
font-family: "Fraunces";
color: #343434;
}
.price p:nth-child(2) {
text-decoration: line-through;
}
.cart {
width: 100%;
padding: 0.5rem 0;
font-family: inherit;
color: #343434;
}
<main>
<div class="parent">
<picture>
<source media="(max-width:700px)" srcset="https://images.unsplash.com/photo-1592921248991-dd940d2977e9?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQzMjg&ixlib=rb-4.0.3&q=80" />
<img src="https://images.unsplash.com/photo-1514569369508-d2a48d3a423c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQ3NTM&ixlib=rb-4.0.3&q=80" alt="perfume" />
</picture>
<div class="main-content">
<span class="cologne">Lorem Ipsum</span>
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<div class="description">
Donec sit amet sapien elit. Etiam et pellentesque justo, id posuere justo. Donec urna neque, lobortis hendrerit ornare vel, laoreet vitae urna.</div>
<div class="price">
<p>$149.99</p>
<p>$169.99</p>
</div>
<button class="cart" href="#">Add to Cart</button>
</div>
</div>
</main>
I created this product-preview card and I set the border-radius on the parent class, however, it is not showing at the top, I do not want this, is there a way to fix this, I suspect that the problem is with the image and that it is blocking the radius from showing in some way but I am not exactly sure.
Adding overflow: hidden; to the .parent container fixes that. Otherwise the "not-rounded" edges of the image overflow the container:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500;700&family=Fraunces:opsz,wght#9..144,700&family=Rye&family=Seymour+One&family=Ultra&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: black;
}
.parent {
display: flex;
flex-direction: column;
max-width: 600px;
font-family: "Montserrat";
border-radius: 10px;
margin: 20px;
background-color: white;
overflow: hidden;
}
picture {
display: block;
}
img {
width: 100%;
height: 100%;
}
.main-content {
padding: 1rem;
}
.cologne {
text-transform: uppercase;
letter-spacing: 0.5rem;
color: #8f8f8f;
}
h1 {
font-family: "Fraunces";
overflow-wrap: break-word;
color: #343434;
}
.description {
color: #8f8f8f;
overflow-wrap: break-word;
}
.price {
display: flex;
gap: 1rem;
align-items: center;
overflow-wrap: break-word;
}
.price p:nth-child(1) {
font-size: 2rem;
font-family: "Fraunces";
color: #343434;
}
.price p:nth-child(2) {
text-decoration: line-through;
}
.cart {
width: 100%;
padding: 0.5rem 0;
font-family: inherit;
color: #343434;
}
<main>
<div class="parent">
<picture>
<source media="(max-width:700px)" srcset="https://images.unsplash.com/photo-1592921248991-dd940d2977e9?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQzMjg&ixlib=rb-4.0.3&q=80" />
<img src="https://images.unsplash.com/photo-1514569369508-d2a48d3a423c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQ3NTM&ixlib=rb-4.0.3&q=80" alt="perfume" />
</picture>
<div class="main-content">
<span class="cologne">Lorem Ipsum</span>
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<div class="description">
Donec sit amet sapien elit. Etiam et pellentesque justo, id posuere justo. Donec urna neque, lobortis hendrerit ornare vel, laoreet vitae urna.</div>
<div class="price">
<p>$149.99</p>
<p>$169.99</p>
</div>
<button class="cart" href="#">Add to Cart</button>
</div>
</div>
</main>
You're right; the image is blocking its parent's border. You need to add the border-radius property to the image as well:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500;700&family=Fraunces:opsz,wght#9..144,700&family=Rye&family=Seymour+One&family=Ultra&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: black;
}
.parent {
display: flex;
flex-direction: column;
max-width: 600px;
font-family: "Montserrat";
border-radius: 10px;
margin: 20px;
background-color: white;
}
.parent img { /* change this to select your particular image */
border-radius: 10px 10px 0 0;
}
picture {
display: block;
}
img {
width: 100%;
height: 100%;
}
.main-content {
padding: 1rem;
}
.cologne {
text-transform: uppercase;
letter-spacing: 0.5rem;
color: #8f8f8f;
}
h1 {
font-family: "Fraunces";
overflow-wrap: break-word;
color: #343434;
}
.description {
color: #8f8f8f;
overflow-wrap: break-word;
}
.price {
display: flex;
gap: 1rem;
align-items: center;
overflow-wrap: break-word;
}
.price p:nth-child(1) {
font-size: 2rem;
font-family: "Fraunces";
color: #343434;
}
.price p:nth-child(2) {
text-decoration: line-through;
}
.cart {
width: 100%;
padding: 0.5rem 0;
font-family: inherit;
color: #343434;
}
<main>
<div class="parent">
<picture>
<source media="(max-width:700px)" srcset="https://images.unsplash.com/photo-1592921248991-dd940d2977e9?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQzMjg&ixlib=rb-4.0.3&q=80" />
<img src="https://images.unsplash.com/photo-1514569369508-d2a48d3a423c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQ3NTM&ixlib=rb-4.0.3&q=80" alt="perfume" />
</picture>
<div class="main-content">
<span class="cologne">Lorem Ipsum</span>
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<div class="description">
Donec sit amet sapien elit. Etiam et pellentesque justo, id posuere justo. Donec urna neque, lobortis hendrerit ornare vel, laoreet vitae urna.</div>
<div class="price">
<p>$149.99</p>
<p>$169.99</p>
</div>
<button class="cart" href="#">Add to Cart</button>
</div>
</div>
</main>
P.S. shrink the screen a bit when viewing the snippet. The image in particular that is affecting your output only appears on smaller screens.
You can use overflow: clip; on the container and not have scroll bars vs overflow: hidden; which might allow scroll bars.
I also noticed your white background bleeding through, a common issue with starkly differing colors like white/black. I fixed this by moving the white background to the .main-content container - there are several other ways if this is not acceptable.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500;700&family=Fraunces:opsz,wght#9..144,700&family=Rye&family=Seymour+One&family=Ultra&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: black;
}
.parent {
display: flex;
flex-direction: column;
max-width: 600px;
font-family: "Montserrat";
border-radius: 10px;
margin: 20px;
overflow: clip;
}
picture {
display: block;
}
img {
width: 100%;
height: 100%;
}
.main-content {
padding: 1rem;
background-color: white;
}
.cologne {
text-transform: uppercase;
letter-spacing: 0.5rem;
color: #8f8f8f;
}
h1 {
font-family: "Fraunces";
overflow-wrap: break-word;
color: #343434;
}
.description {
color: #8f8f8f;
overflow-wrap: break-word;
}
.price {
display: flex;
gap: 1rem;
align-items: center;
overflow-wrap: break-word;
}
.price p:nth-child(1) {
font-size: 2rem;
font-family: "Fraunces";
color: #343434;
}
.price p:nth-child(2) {
text-decoration: line-through;
}
.cart {
width: 100%;
padding: 0.5rem 0;
font-family: inherit;
color: #343434;
}
<main>
<div class="parent">
<picture>
<source media="(max-width:700px)" srcset="https://images.unsplash.com/photo-1592921248991-dd940d2977e9?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQzMjg&ixlib=rb-4.0.3&q=80" />
<img src="https://images.unsplash.com/photo-1514569369508-d2a48d3a423c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQ3NTM&ixlib=rb-4.0.3&q=80" alt="perfume" />
</picture>
<div class="main-content">
<span class="cologne">Lorem Ipsum</span>
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<div class="description">
Donec sit amet sapien elit. Etiam et pellentesque justo, id posuere justo. Donec urna neque, lobortis hendrerit ornare vel, laoreet vitae urna.</div>
<div class="price">
<p>$149.99</p>
<p>$169.99</p>
</div>
<button class="cart" href="#">Add to Cart</button>
</div>
</div>
</main>
After moving things around, I tried to change the position: absolute to position: relative of the actual iframe class, it made the video position under 'Featured' but the dimension of the video is messed up. If I change it back to position: absolute, the video covers the entire page banner, but the responsiveness is good, however the dimension is too big. How do I make it look like the video is under the Featured page, aligned in the center, and responsive as well?
This is my code:
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/*setting font size as 62.5%=10px for easier REM fontsize calculations*/
html, body {
font-size: 62.5%;
height: 100%;
margin: 0;
font-family: font-family: 'Playfair Display', serif;
}
/*making the image parallax as a banner*/
.parallax1 {
background: url(https://i.imgur.com/6wPsROo.png);
min-height: 100%;
background-position: center;
position: relative;
opacity: .95;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
top: 0;
}
* {
padding: 0;
margin: 0;
text-declaration: none;
list-style: none;
box-sizing: border-box;
}
body {
background-color: white;
}
/*customizing banner text*/
#slogan {
font-size: 4.5rem;
color: white;
text-shadow: 1px 1.5px 1px #A26B40;
font-weight: lighter;
}
.heading2 {
width: 100%;
height: auto;
left: 0;
top: 50%;
position: absolute;
text-align: center;
line-height: 3.2rem;
}
#slogan-subheading {
font-size: 2.5rem;
color: white;
text-shadow: .5px .5px 1px #A26B40;
font-weight: lighter;
}
#shop-now {
background-color: #bd8d58;
width: 10%;
height: auto;
margin: 0 auto;
position: relative;
padding: 0px;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
}
#shop-now:hover {
cursor: pointer;
}
/*make container for each row comprising an image with caption side by side*/
.prod-container {
flex-direction: row;
display: flex;
padding: 10px 20px;
text-align: center;
justify-content: center;
}
/*customize each cell*/
.image-and-capt {
padding: 10px 40px;
}
/*customize productimg*/
#product-img {
width: 200px;
border-radius: 50%;
box-shadow: 3px 5px 15px rgba(182,124,72,0.3);
}
/*customize product name & description*/
#product-name, #product-descrp {
font-family: 'Open Sans', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: rgba(54, 46, 39, 0.8);
}
#product-name {
font-size: 1.5rem;
padding-top: 10px;
}
#product-descrp {
font-size: 1rem;
padding-top: 4px;
}
.featured-container {
background: rgba(255, 214, 170, 0.6);
padding: 50px 100px;
}
.vid-container {
position: relative;
width: 100%;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
}
.vid-container-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
bottom: 0;
right: 0;
display: block;
margin: 0 auto;
}
/*centering the logo and customizing size*/
#header-img {
max-width: 200px;
max-height: auto;
height: auto;
width: auto;
padding: 10px 0px 0px 0px;
}
/*customizing the navigation links*/
.nav-link {
text-decoration: none;
color: #54473C;
font-family: 'Playfair Display', serif;
display: column;
font-size: 1.5rem;
}
/*customizing the actual navigation bar*/
#nav-bar {
background-color: rgb(248, 234, 203);
height: 80px;
width: 100%;
padding: 0px 20px 0px 50px;
z-index: 1000;
position: fixed;
top: 0;
width: 100%;
transition: 0.6s;
}
/*aligning the nav links on the right of the header image*/
nav ul {
float: right;
padding: 0px 20px;
}
/*aligning the links to become horizontally aligned next to each other*/
nav ul li {
display: inline-block;
padding: 25px 10px 5px 50px;
margin-left: 0px;
}
/* customizing appearance of nav-links when hovered*/
.nav-link:hover, nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
transition: .5s;
color: white;
}
/* customizing nav-link when focused or clicked */
.nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
color: white;
}
/* customizing the three bars, making it invisible if in default full page view */
.check-bar {
font-size: 2.5rem;
color: #BF8D7A;
float: right;
cursor: pointer;
margin-right: 5px;
line-height: 80px;
display: none;
}
/*making the checkbox invisible, this checkbox is used as a condition later, that when checked itll make the navlinks appear in a a specific media query*/
#check {
display: none;
}
body, html {
height: 100%;
}
.products-container {
background: #f6f7e9;
padding: 50px 80px;
}
#sections {
font-family: 'Open Sans', sans-serif;
text-align: center;
width: 45%;
font-weight: 800;
font-size: 4rem;
margin: 0 auto;
text-transform: uppercase;
font-weight: lighter;
color: rgba(54, 46, 39, 0.5);
width: 100%;
text-align: center;
border-bottom: 1px solid rgba(54, 46, 39, 0.1);
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background: #f6f7e9;
padding: 0 10px;
}
#media (max-width: 792px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 175px;
max-height: auto;
}
}
#media (max-width: 712px){
.nav-link{
font-size: 1.2rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
}
#media (max-width: 675px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -30px;
}
}
#media (max-width: 675px){
.nav-link{
font-size: 1.1rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -40px;
}
}
/*configure what happens when you click three bars*/
#media (max-width: 500px){
.check-bar{
display: block;
}
/*center the logo , not yet done */
#header-img {
max-width: 200px;
max-height: auto;
display: block;
margin: auto;
}
ul{
position: fixed;
width: 100%
height: 100vh;
top: 80px;
/*when three bars are clicked the left bottom right values makes the whole ul disappear*/
left: -100%;
bottom: -100%;
right: 100%;
text-align: center;
background: rgba(255, 214, 170, 0.9);
transition: all .5s;
/* for stack, this makes the ul box in front of the parallax image since its z index is greater than the parallax*/
z-index: 2;
}
nav ul li {
display: block;
padding: 20px;
}
.nav-link {
font-size: 1.6rem;
font-weight: bold;
margin-left: 60px
}
#check:checked ~ul {
left: 0;
right: 0;
bottom: 0;
}
.nav-link:hover {
background: none;
color: #BF8D7A;
}
.parallax1 {
z-index: 1;
}
}
#media (max-width: 467px){
#header-img{
max-width: 190px;
}
.nav-link {
font-size: 1.6rem;
}
}
#media (max-width: 314px){
#header-img{
max-width: 200px;
margin: auto auto 0px auto;
padding-top: 10px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar {
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
#media (max-width: 271px){
#header-img{
max-width: 200px;
margin: auto auto 0px 0px;
padding-top: 5px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar{
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
#media (max-width: 251px){
#header-img{
max-width: 180px;
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
.nav-link {
font-size: 1.2rem;
}
#nav-bar {
padding-left: 8px;
}
.check-bar {
font-size: 1.8rem;
padding-top: 0px;
}
}
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<body>
<header id="header">
<nav id="nav-bar">
<input type="checkbox" id="check">
<label for="check" class="check-bar">
<i class="fas fa-bars"></i>
</label>
<img id="header-img" src="https://i.imgur.com/zxchwt8.gif">
<ul>
<li id="nav-links-list"><a class="nav-link" href="#the-products">products</a></li>
<li id="nav-links-list"><a class="nav-link" href="#featured" target=_blank>featured</a></li>
<li id="nav-links-list"><a class="nav-link" href="#pricing" target=_blank>pricing</a></li>
<li id="nav-links-list"><a class="nav-link" href="#contacts" target=_blank>contact</a></li>
</ul></nav></header>
<div class="parallax1">
<div class="heading2">
<span class="border">
<h1 id="slogan">Pamper your skin.</h1>
<h3 id="slogan-subheading">Cruelty-free, environmentally conscious, and organic. </h3>.
<span id="box"><h4 id="shop-now">SHOP NOW</h4></span
</div>
</div>
<div class="products-container">
<section id="the-products">
<h2 id="sections"><span>products</span></h2>
<div class="image-and-capt">
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/iSuRo4f.png" alt ="mock-up foundation">
<h3 id="product-name"> Foundation with SPF 50 </h3>
<p id="product-descrp"> Medium-coverage, long-lasting, and available in 50 shades.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/KSXpO9w.png" alt="moisturizer">
<h3 id="product-name"> Moisturizer for All Skin Types</h3>
<p id="product-descrp"> Nourishing and brightening, reduces appearance of fine lines and wrinkles.
</div>
</div>
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/cqzlfal.png" alt ="mock-up tinted moisturizer">
<h3 id="product-name"> Tinted Moisturizer </h3>
<p id="product-descrp"> Light-coverage with 50 shades, nourishing and brightening.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/UdInLk3.png" alt ="mock-up face wash">
<h3 id="product-name"> Facewash </h3>
<p id="product-descrp"> Gentle and hydrating facewash, thourougly cleanses dirt, make-up and sebum.</p>
</div>
</div>
</section>
</div>
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class"vid-container">
<iframe class="vid-container-iframe" src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560" height="315" frameborder="0"></iframe>
</div>
</section></div>
<section id="pricing">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
<section id="contact">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
</div>
</header>
</body>
Your code is a mess to be honest. You have multiple div without closing tag,p without closing tags,
also some = are missing while declaring classes in your html code.
First go through your code, make sure that every single tag has a closing tag, after that continue with your video because if you dont fix these things, then your responsivity will be broken because of those unclosed tags.
Have a look into that, i have fixed the video so now it is under your featured section, you just have to play around with it to make it responsive after you closed every unclosed tag.
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class="vid-container">
<iframe class="vid-container-iframe"
src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560"
height="315" frameborder="0"></iframe>
</div>
</div>
</section>
Upon clicking the mobile menu extra space appears on the right of the page causing a horizontal scroll bar to appear.
It appears that width: 100vw; on line 126 is causing the issue but changing this also changes the size of the menu item.
After investigating this issue I found it only appears on windows and not on mac(tested in firefox and chrome).
Codepen
const toggleButton = document.getElementsByClassName("toggle-button")[0];
const navbarLinks = document.getElementsByClassName("nav-links")[0];
toggleButton.addEventListener("click", () => {
navbarLinks.classList.toggle("active");
});
/****************************
PAGE STYLES
***************************/
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
font-size: 1.3125rem;
line-height: 1.6;
background-color: #e8e8e8;
}
.navbar {
background-color: #333;
color: #fff;
margin-bottom: 1.5rem;
}
.container-nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
width: 80%;
margin: 0 auto;
max-width: 1440px;
}
.nav-logo {
font-size: 1.5rem;
margin: 0.5rem;
}
.nav-links ul {
margin: 0;
padding: 0;
display: flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
text-decoration: none;
color: #fff;
padding: 1rem;
display: block;
font-size: 1rem;
}
.nav-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: 1rem;
right: 1rem;
display: none;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: #fff;
border-radius: 10px;
}
.container {
width: 80%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
img {
max-width: 100%;
height: auto;
display: block;
}
#media (max-width: 600px) {
/* NAV */
.toggle-button {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-links {
display: none;
/* width: 100vw; */
}
.navbar {
flex-direction: column;
align-items: flex-start;
/* justify-items: first baseline; */
}
.container-nav {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.nav-links ul {
flex-direction: column;
}
.nav-links li {
text-align: center;
width: 100vw;
}
.nav-links li a {
padding: 0.5rem 1rem;
}
.nav-links.active {
display: flex;
}
/* NAV END*/
.container {
width: 100%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style/style.css" />
<script src="/scripts/navbar.js" defer></script>
<title>test</title>
</head>
<body>
<nav class="navbar">
<div class="container-nav">
<div class="nav-logo">test</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<section class="">
<div class="container row">
<h2 class="section-title">container 1</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
<section class="">
<div class="container row">
<h2 class="section-title">container 2</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
</body>
</html>
Why is this happening?
The reason this is happening is because 100vw is the full width of the viewport, but your page has a vertical scrollbar so the available width is actually "viewport width - scrollbar width". (If you delete the content from the page so that there is no vertical scrollbar, the horizontal scroll doesn't appear).
So for example, if the viewport width is 600px and the scrollbar is 24px, then 100vw is 600px, but the actual space for the menu item is just 576px (600px - 24px) resulting in a scroll bar.
How to fix it?
It is rare that 100vw is really necessary in CSS layouts - 100% is usually preferable as it takes 100% of the available space of its container. So we just need to make sure each of your menu options' containers are also set up correctly. In your case, you need to make just a few changes to the CSS in your #media (max-width: 600px) query:
.nav-links {
width: 100%; /* change from 100vw; */
}
.nav-links li {
width: 100%; /* change from 100vw; */
}
.nav-links.active {
display: block; /* change from flex (it isn't needed and just affects the display) */
}
.container-nav {
width: 100%; /* this was 80% for some reason? */
}
Working Example
(Note I've changed the media query to #media (max-width: 800px) below, so we can see the dropdown menu here in the snippet window without resizing the screen)
const toggleButton = document.getElementsByClassName("toggle-button")[0];
const navbarLinks = document.getElementsByClassName("nav-links")[0];
toggleButton.addEventListener("click", () => {
navbarLinks.classList.toggle("active");
});
/****************************
PAGE STYLES
***************************/
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
font-size: 1.3125rem;
line-height: 1.6;
background-color: #e8e8e8;
}
.navbar {
background-color: #333;
color: #fff;
margin-bottom: 1.5rem;
}
.container-nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
width: 80%;
margin: 0 auto;
max-width: 1440px;
}
.nav-logo {
font-size: 1.5rem;
margin: 0.5rem;
}
.nav-links ul {
margin: 0;
padding: 0;
display: flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
text-decoration: none;
color: #fff;
padding: 1rem;
display: block;
font-size: 1rem;
}
.nav-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: 1rem;
right: 1rem;
display: none;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: #fff;
border-radius: 10px;
}
.container {
width: 80%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
img {
max-width: 100%;
height: auto;
display: block;
}
#media (max-width: 800px) {
/* NAV */
.toggle-button {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
/* justify-items: first baseline; */
}
.container-nav {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.nav-links ul {
flex-direction: column;
}
.nav-links li {
text-align: center;
width: 100%;
}
.nav-links li a {
padding: 0.5rem 1rem;
}
.nav-links.active {
display: block;
}
/* NAV END*/
.container {
width: 100%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
}
<nav class="navbar">
<div class="container-nav">
<div class="nav-logo">test</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<section class="">
<div class="container row">
<h2 class="section-title">container 1</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
<section class="">
<div class="container row">
<h2 class="section-title">container 2</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
I'm creating a MailChimp HTML email template and have the structure sorted.
I have an image that I created in illustrator that I want as the background for midContent. I want the lightblue part of this background image to overlap the above image. I've tried using z-index, but it doesn't seem to work. Is the flex-box column right for this kind of task, or should I use something else?
.templateContainer{
max-width:450px !important;
margin: 0 auto;
display: flex;
flex-direction: column;
}
#templateHeader img {
text-align: center;
height: 150px;
padding: 5px 0;
}
#templateHeader, #postheader {
text-align: center;
}
#postheader {
height: 75px;
background-color: #EAEAEA;
}
#postheader-container {
width: 90%;
height: 100%;
margin: 0 5%;
}
#postheader-container p {
text-align: center;
font-family: helvetica-light;
font-size: 14px;
color: #039FD6;
margin: 0 auto;
padding: 20px 0px;
}
#templateBody {
height: 495px;
}
.center {
display:flex;
align-items:center;
justify-content:center;
}
#topContent {
height: 225px;
width: 100%;
}
#topContent img {
width: inherit;
}
#midContent {
background-image: url("https://i.ibb.co/qsfyckt/Untitled-1.png");
z-index: 1;
background-size: cover;
background-position: 100% 0%;
width: 100%;
}
#midContent p {
padding: 40px 25px 0px 25px;
text-align: center;
color: #ffffff;
font-family: helvetica-light;
font-size: 16px;
margin: 0 auto;
}
#bottomContent {
width: 100%;
height: 125px;
margin-top: 1%;
}
#bottom-container {
height: auto;
width: 70%;
margin: 0% 15% 0% 15%;
}
#bottom-container button {
width: 85%;
padding: 10px;
margin: 3% 7% 0 7%;
font-family: helvetica-light;
font-weight: bold;
font-size: 12px;
color: #ffffff;
background-color: #0B409E;
text-transform: uppercase;
border-radius: 8px;
border-color: transparent;
}
#templateFooter {
width: 100%;
height: 30px;
background-color: #ECECEC;
}
#footer-container {
width: 90%;
margin: 0 5% 0 5%;
padding-top: 10px;
}
#footer-container p {
text-align: center;
font-family: helvetica-light;
font-size: 8px;
font-weight: bold;
color: #000000;
margin: 0 auto;
}
span {
color: #0B409E;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="templateContainer">
<!-- BEGIN HEADER // -->
<div id="templateHeader">
<img src="https://www.logolynx.com/images/logolynx/ca/caec3ebc94200aabb4a2c31891100f28.png" style="width: 350px">
<div id="postheader">
<div id="postheader-container" class="center">
<p>Lorem ipsum dolor sit amet.<br>Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor.</p>
</div>
</div>
</div>
<!-- // END HEADER -->
<!-- BEGIN BODY // -->
<div id="templateBody">
<div id="topContent" class="center">
<img src="https://thehardtimes.net/wp-content/uploads/2017/09/mknkjnklj.jpg">
</div>
<div id="midContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor, eget interdum ex erat suscipit nibh. Nam quis lectus mattis, dictum tortor id, vestibulum quam. Morbi a ligula nibh. Etiam id diam erat. Duis elit diam, posuere a lectus et, commodo pulvinar diam.</p>
</div>
<div id="bottomContent">
<div id="bottom-container">
<button>This is a button</button>
<button>Another button</button>
</div>
</div>
</div>
<!-- // END BODY -->
<!-- BEGIN FOOTER // -->
<div id="templateFooter">
<div id="footer-container">
<p>Pulse <span>aqui</span> si desea dejar de recibir recordatorios de revisiones a traves de este canal</p>
</div>
<!-- // END FOOTER -->
</div>
</body>
</html>
use position:relative with z-index:10000 for #midContent
position:relative;
z-index: 10000;
.templateContainer{
max-width:450px !important;
margin: 0 auto;
display: flex;
flex-direction: column;
}
#templateHeader img {
text-align: center;
height: 150px;
padding: 5px 0;
}
#templateHeader, #postheader {
text-align: center;
}
#postheader {
height: 75px;
background-color: #EAEAEA;
}
#postheader-container {
width: 90%;
height: 100%;
margin: 0 5%;
}
#postheader-container p {
text-align: center;
font-family: helvetica-light;
font-size: 14px;
color: #039FD6;
margin: 0 auto;
padding: 20px 0px;
}
#templateBody {
height: 495px;
}
.center {
display:flex;
align-items:center;
justify-content:center;
}
#topContent {
height: 225px;
width: 100%;
}
#topContent img {
width: inherit;
}
#midContent {
background-image: url("https://i.ibb.co/qsfyckt/Untitled-1.png");
position:relative;
z-index: 10000;
background-size: cover;
background-position: 100% 0%;
width: 100%;
}
#midContent p {
padding: 40px 25px 0px 25px;
text-align: center;
color: #ffffff;
font-family: helvetica-light;
font-size: 16px;
margin: 0 auto;
}
#bottomContent {
width: 100%;
height: 125px;
margin-top: 1%;
}
#bottom-container {
height: auto;
width: 70%;
margin: 0% 15% 0% 15%;
}
#bottom-container button {
width: 85%;
padding: 10px;
margin: 3% 7% 0 7%;
font-family: helvetica-light;
font-weight: bold;
font-size: 12px;
color: #ffffff;
background-color: #0B409E;
text-transform: uppercase;
border-radius: 8px;
border-color: transparent;
}
#templateFooter {
width: 100%;
height: 30px;
background-color: #ECECEC;
}
#footer-container {
width: 90%;
margin: 0 5% 0 5%;
padding-top: 10px;
}
#footer-container p {
text-align: center;
font-family: helvetica-light;
font-size: 8px;
font-weight: bold;
color: #000000;
margin: 0 auto;
}
span {
color: #0B409E;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="templateContainer">
<!-- BEGIN HEADER // -->
<div id="templateHeader">
<img src="https://www.logolynx.com/images/logolynx/ca/caec3ebc94200aabb4a2c31891100f28.png" style="width: 350px">
<div id="postheader">
<div id="postheader-container" class="center">
<p>Lorem ipsum dolor sit amet.<br>Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor.</p>
</div>
</div>
</div>
<!-- // END HEADER -->
<!-- BEGIN BODY // -->
<div id="templateBody">
<div id="topContent" class="center">
<img src="https://thehardtimes.net/wp-content/uploads/2017/09/mknkjnklj.jpg">
</div>
<div id="midContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor, eget interdum ex erat suscipit nibh. Nam quis lectus mattis, dictum tortor id, vestibulum quam. Morbi a ligula nibh. Etiam id diam erat. Duis elit diam, posuere a lectus et, commodo pulvinar diam.</p>
</div>
<div id="bottomContent">
<div id="bottom-container">
<button>This is a button</button>
<button>Another button</button>
</div>
</div>
</div>
<!-- // END BODY -->
<!-- BEGIN FOOTER // -->
<div id="templateFooter">
<div id="footer-container">
<p>Pulse <span>aqui</span> si desea dejar de recibir recordatorios de revisiones a traves de este canal</p>
</div>
<!-- // END FOOTER -->
</div>
</body>
</html>
So i'm working on a nav bar which should be aligned horizontally, but it won't. If i try to use
display: inline-block;
and then
float: left;
the navbar collides with the rest of my divisions
Here's my code:
http://jsfiddle.net/0p287vmb/
Try this:
nav
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
}
nav
a:hover {
background-color: white;
display: inline-block;
}
I removed the commas because with commas it translates to nav & a. In your case removing it solves the problem also it overwrote the width of the nav that's why it doesn't seem to take up the whole width.
That's because you are overriding the width of the navbar in
nav,
a {
...
width: 200px;
...
}
and the display block here:
nav,
a:hover {
background-color: white;
display: inline-block;
}
Just move the navbar styling after nav,a:hover ..., and remove nav from the same place because you are also ovveriding the background color of the nav.
Also, on the last line it should be font-weight not text-weight.
* {
font-family: Verdana;
font-size: 14px;
margin: 0;
}
p {
padding 20px;
}
#wrapper {
width: 900px;
background-color: #ff3333;
margin: auto;
}
header {
background-color: #00c9fd;
width: 900px;
}
nav,
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
float: left;
}
a:hover {
background-color: white;
display: inline-block;
}
nav {
background-color: #cccccc;
width: 900px;
}
#bigimage {
width: 900px;
}
#bigimage,
p {
color: #00c9fd;
background-color: #ffffff;
font-size: 12px;
}
main {
width: 900px;
}
article {
background-color: #cccccc;
width: 900px;
}
#contact {
background-color: #cccccc;
width: 900px;
}
footer {
background-color: #00c9fd;
width: 900px;
}
header,
h1 {
padding: 20px 0px 5px 0px;
color: rgb(255, 255, 255);
font-size: 30px;
font-family: Impact;
text-weight: normal;
}
<div id="wrapper">
<header>
<h1>SUPERCOMPUTERS</h1>
</header>
<nav>
Home
Meer informatie
Tijdlijn
</nav>
<div id="bigimage">
<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
<p>
<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
at, dignissim faucibus eros.
</p>
</div>
<main>
<article>hoi1</article>
<article>hoi2</article>
<article>hoi3</article>
</main>
<div id="contact">hoi4</div>
<footer>hoi5</footer>
</div>
Your selector was wrong. You wrote nav, a which would mean to apply those styles to both nav and a elements. Infact you needed nav a which means to only apply those styles to a elements that are children of nav elements.
nav a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
float: left;
}
You should remove the width from nav tag.
* {
font-family: Verdana;
font-size: 14px;
margin: 0;
}
p {
padding 20px;
}
#wrapper {
width: 900px;
background-color: #ff3333;
margin: auto;
}
header {
background-color: #00c9fd;
width: 900px;
}
nav {
background-color: #cccccc;
width: 900px;
}
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 5px 10px;
float: left;
}
nav,
a:hover {
background-color: white;
display: inline-block;
}
#bigimage {
width: 900px;
}
#bigimage,
p {
color: #00c9fd;
background-color: #ffffff;
font-size: 12px;
}
main {
width: 900px;
}
article {
background-color: #cccccc;
width: 900px;
}
#contact {
background-color: #cccccc;
width: 900px;
}
footer {
background-color: #00c9fd;
width: 900px;
}
header,
h1 {
padding: 20px 0px 5px 0px;
color: rgb(255, 255, 255);
font-size: 30px;
font-family: Impact;
text-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_new.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>SUPERCOMPUTERS</h1>
</header>
<nav>
Home
Meer informatie
Tijdlijn
</nav>
<div id="bigimage">
<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
<p>
<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
at, dignissim faucibus eros.
</p>
</div>
<main>
<article>hoi1</article>
<article>hoi2</article>
<article>hoi3</article>
</main>
<div id="contact">hoi4</div>
<footer>hoi5</footer>
</div>
</body>
</html>