Here is my CODE:
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/********* global styles *******/
img:not(.nav-logo) {
width: 100%;
display: block;
}
/* header */
.header {
display: flex;
/* flex-direction: column; */
}
/* navbar */
.nav-bar {
position: sticky;
}
.nav-wrap {
min-width: 3rem;
max-height: 100vh;
display: flex;
/* flex-wrap: wrap; */
/* flex-direction: row; */
}
.nav-header {
display: flex;
/* flex-direction: column; */
max-width: 3.4rem;
background: transparent;
padding: 1rem 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
/* align-content: center; */
}
.nav-toggle {
margin: auto auto;
/* align-self: center; */
/* justify-self: center; */
background: transparent;
border: none;
/* transform: translateX(-0%); */
/* padding: 1rem; */
outline: none;
color: var(--primaryColor);
font-size: 1.45rem;
cursor: pointer;
transition: var(--mainTransition);
margin-bottom: 10.5rem;
}
.nav-toggle:hover,
.nav-link:hover {
transform: scale(1.2);
}
.nav-links {
margin: auto auto;
height: 22.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-link {
background: transparent;
border: none;
/* transform: translateX(-0%); */
/* padding: 1rem; */
outline: none;
color: var(--primaryColor);
font-size: 1.35rem;
cursor: pointer;
transition: var(--mainTransition);
}
/* hero */
.hero {
width: 100%;
min-height: 100vh;
background: linear-gradient(hsla(0, 0%, 100%, 0), hsla(285, 83%, 60%, 0)),
url(https://dummyimage.com/821x1082/d415d4/fff) center/cover no-repeat fixed;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- style -->
<!--<link rel="stylesheet" href="fontawesome-free-5.15.3-web/css/all.css" />-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./styles.css" />
<title>Културата Ще Спаси Света</title>
</head>
<body>
<!-- header -->
<header id="home" class="header">
<!-- navbar -->
<nav class="navbar">
<div class="nav-wrap">
<!-- nav header -->
<div class="nav-header">
<button
type="button"
class="nav-toggle"
id="nav-toggle"
aria-label="nav toggler"
>
<i class="fas fa-bars"></i>
</button>
<div class="nav-links">
<i class="fas fa-volleyball-ball nav-link"></i>
<i class="fas fa-paint-brush nav-link"></i>
<i class="fas fa-music nav-link"></i>
<i class="fas fa-pray nav-link"></i>
<i class="fas fa-globe-americas nav-link"></i>
</div>
<!-- nav links -->
</div>
</div>
</nav>
<!-- hero -->
<div class="hero">
</div>
</header>
<section>More content<section>
</body>
</html>
Here is how it looks now
I want the side navbar to stay fixed while I am scrolling down. And to occupy all the height of the right side.
Any help would be great.
Thank you
I am adding this because StackOverflow would not let me post this without more details which I do not think I need.
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/********* global styles *******/
img:not(.nav-logo) {
width: 100%;
display: block;
}
/* header */
.header {
display: flex;
flex-direction: column;
position:fixed;
left:0;
top:0;
}
/* navbar */
.nav-bar {
position: sticky;
}
.nav-wrap {
min-width: 3rem;
max-height: 100vh;
display: flex;
/* flex-wrap: wrap; */
/* flex-direction: row; */
}
.nav-header {
display: flex;
/* flex-direction: column; */
max-width: 3.4rem;
background: transparent;
padding: 1rem 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
/* align-content: center; */
}
.nav-toggle {
margin: auto auto;
/* align-self: center; */
/* justify-self: center; */
background: transparent;
border: none;
/* transform: translateX(-0%); */
/* padding: 1rem; */
outline: none;
color: var(--primaryColor);
font-size: 1.45rem;
cursor: pointer;
transition: var(--mainTransition);
margin-bottom: 10.5rem;
}
.nav-toggle:hover,
.nav-link:hover {
transform: scale(1.2);
}
.nav-links {
margin: auto auto;
height: 22.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-link {
background: transparent;
border: none;
/* transform: translateX(-0%); */
/* padding: 1rem; */
outline: none;
color: var(--primaryColor);
font-size: 1.35rem;
cursor: pointer;
transition: var(--mainTransition);
}
/* hero */
.hero {
width: 100%;
min-height: 100vh;
background: linear-gradient(hsla(0, 0%, 100%, 0), hsla(285, 83%, 60%, 0)),
url("./imgs/hero.jpeg") center/cover no-repeat fixed;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- style -->
<!--<link rel="stylesheet" href="fontawesome-free-5.15.3-web/css/all.css" />-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./styles.css" />
<title>Културата Ще Спаси Света</title>
</head>
<body>
<!-- header -->
<header id="home" class="header">
<!-- navbar -->
<nav class="navbar">
<div class="nav-wrap">
<!-- nav header -->
<div class="nav-header">
<button
type="button"
class="nav-toggle"
id="nav-toggle"
aria-label="nav toggler"
>
<i class="fas fa-bars"></i>
</button>
<div class="nav-links">
<i class="fas fa-volleyball-ball nav-link"></i>
<i class="fas fa-paint-brush nav-link"></i>
<i class="fas fa-music nav-link"></i>
<i class="fas fa-pray nav-link"></i>
<i class="fas fa-globe-americas nav-link"></i>
</div>
<!-- nav links -->
</div>
</div>
</nav>
<!-- hero -->
<div class="hero">
</div>
</header>
<section>More content<section>
</body>
</html>
Take the navigation out of HEADER, put it right under the BODY tag, use "position: fixed; height: 100%;" with CSS.
Related
I'm currently in an online class in web-design, I'm a beginner and I struggle to finish the second "project" which involve rendering a website design in html and css with responsive element without using pre-processors, so we have to go in with only html and hand-coded css.
I've got several problems to solve but maybe solving the first one will help me figuring out the rest.
there is what I have in computer screen-size and then, what I get with smaller screen-sizes.
Here is the expected result in smartphone size :
I've been struggling with the same overlapping problem at two different areas of the project, but, as mentioned before, I'll limit myself to this first example to see if your potential explanations might help me solve the other instance too.
Here is the html, css and media queries used so far but I don't think there is need of it to replicate the problem:
PS: I separate the 'head' from the 'body' for more clarity of read
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Booki</title>
<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=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/e943e673fe.js" crossorigin="anonymous"></script>
</head>
PS : I use a copy of normalize.css not mentioned in the above head. Also, links to the css mentioned below have been cut out for clarity purpose.
there is the html 'body':
<body>
<div class="recherche">
<section class="filtres">
<h3>Filtres</h3>
<div class="filtres-serie">
<section class="economique">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-money-bill-wave fa-lg"></i>
</span>
<p class="filtre-p">Économique</p>
</section>
<section class="familial">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-child-reaching fa-lg"></i>
</span>
<p class="filtre-p">Familial</p>
</section>
<section class="romantique">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-heart fa-lg"></i>
</span>
<p class="filtre-p">Romantique</p>
</section>
<section class="animaux">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-dog fa-lg"></i>
</span>
<p class="filtre-p">Animaux autorisés</p>
</section>
</div>
</section>
<section class="recherche-end">
<span >
<i class="fa-solid fa-circle-info fa-xl"></i>
</span>
<p>Plus de 500 logements sont disponibles dans cette ville</p>
</section>
</div>
</body>
Then the style.css related to the above html:
*{
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
margin: 0px;
width: 100%;
height:100%;
}
/* LIENS - MISE EN FORME*/
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {color: #0065FC ;}
a:active {
text-decoration: none;
color: black;
}
i {
display: block
}
.filtres {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 35px;
/*margin-bottom:41px;*/
}
.filtres-serie {
position: relative;
display: flex;
flex-direction: row;
width: 845px;
height:50px;
gap: 25px;
}
.filtre-p {
position: relative;
margin-top: 17px;
margin-bottom: 14px;
}
.filtres-serie section {
position: relative;
display: flex;
flex-direction: row;
/*justify-content: space-evenly;*/
align-items:center;
border: solid 3px #F2F2F2;
border-radius: 29px;
font-weight: bold;
font-size: 18px;
right: 25px;
}
.filtres-serie section:hover {
color:cornflowerblue;
border-color:cornflowerblue;
background-color:#F2F2F2 ;
}
.economique {
width: 193px;
height: 50px;
}
.filtres-icon {
position: relative;
left: -10px;
color: #0065FC;
background-color: #DEEBFF;
border-radius: 29px;
}
.familial {
height: 50px;
width: 151px;
;
}
.romantique {
height: 50px;
width:183px;
}
.animaux {
height: 50px;
width: 242px;
}
.recherche-end {
display: flex;
flex-direction: row;
align-items: center;
width: 500px;
height:41px;
margin-left: 9px;
gap:12px;
margin-bottom:41px;
padding-left: 50px;
}
.recherche-end i {
color: #0065FC;
}
and finally the media queries related to that section:
#media screen and (max-width:737px) {
.filtres {
display: flex;
flex-direction: column;
width: 100%;
}
.filtres-serie {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap:0;
}
.recherche-end {
width: 100%;
}
}
Thank you for reading this long post and for any help you will be able to provide me. I've looked up this kind of overlapping problem but couldn't find any clear way to untie my Gordian knot.
I'm of course at your disposition for any further precision or clarification if needed.
Regards,
Elrad
Below is the result I got after few modifications on both your html and CSS files (No page content was modified though), mainly CSS. As for the HTML file, I just added the link to CSS file then removed the <div class="recherche">...</div> tag which was surrounding all the page content.
As you can see, this is slightly different from your expected result in that the boxes around the links are wider. However The result remains unchanged on wide screens.
.
The modifications I made on the CSS file are quite important, so I can't just list them all.
Here are the final codes, both HTML and CSS.
*{
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
margin: 0px;
width: 100%;
height:100%;
}
/* LIENS - MISE EN FORME*/
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {color: #0065FC ;}
a:active {
text-decoration: none;
color: black;
}
i {
display: block
}
.filtres {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 35px;
}
.filtres-serie {
display: flex;
flex-direction: row;
width: 845px;
height:50px;
gap: 25px;
}
.filtre-p {
margin-top: 17px;
margin-bottom: 14px;
}
.filtres-serie section {
display: flex;
flex-direction: row;
align-items:center;
border: solid 3px #F2F2F2;
border-radius: 29px;
font-weight: bold;
font-size: 18px;
right: 25px;
}
.filtres-serie section:hover {
color:cornflowerblue;
border-color:cornflowerblue;
background-color:#F2F2F2 ;
}
.economique {
width: 193px;
height: 50px;
}
.filtres-icon {
position: relative;
left: -10px;
color: #0065FC;
background-color: #DEEBFF;
border-radius: 29px;
}
.familial {
height: 50px;
width: 151px;
;
}
.romantique {
height: 50px;
width:183px;
}
.animaux {
height: 50px;
width: 242px;
}
.recherche-end {
display: flex;
flex-direction: row;
width: 500px;
height:41px;
margin-left: 9px;
gap:12px;
margin-bottom:41px;
padding-left: 50px;
}
.recherche-end i {
color: #0065FC;
}
#media screen and (max-width:737px) {
body{
margin-left: 30px;
position: relative;
}
.filtres {
display: flex;
flex-direction: column;
width: 100%;
justify-content: space-between;
}
.filtres-serie {
min-width: 425px;
width: 70%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
gap:12px;
}
.recherche-end {
width: 100%;
margin-top: 160px;
padding-left: 0;
gap: 12px;
}
.romantique, .animaux{
display: flex;
flex-direction: row;
width: 80%;
justify-content: flex-start;
padding-right: 70px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Booki</title>
<link rel="stylesheet" href="styles.css" type="text/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=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/e943e673fe.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- <div class="recherche"> -->
<section class="filtres">
<h3>Filtres</h3>
<div class="filtres-serie">
<section class="economique">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-money-bill-wave fa-lg"></i>
</span>
<p class="filtre-p">Économique</p>
</section>
<section class="familial">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-child-reaching fa-lg"></i>
</span>
<p class="filtre-p">Familial</p>
</section>
<section class="romantique">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-heart fa-lg"></i>
</span>
<p class="filtre-p">Romantique</p>
</section>
<section class="animaux">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-dog fa-lg"></i>
</span>
<p class="filtre-p">Animaux autorisés</p>
</section>
</div>
</section>
<section class="recherche-end">
<span >
<i class="fa-solid fa-circle-info fa-xl"></i>
</span>
<p>Plus de 500 logements sont disponibles dans cette ville</p>
</section>
<!-- </div> -->
</body>
</html>
I'm creating landing page and I want to separate navbar, text that should be in the middle of wallpaper and text that should at the bottom.
Here is the sandbox:
https://codesandbox.io/s/long-worker-dy31zt?file=/index.html
As you can see, justify-content: space-between is not doing anything on Y axis even-though I made sure it is flex-direction: column. What is the best way to center text in the middle of the background on the landing page? I wanted to do it with flex but it's not working.
You need to use this:
.header-wrap {
height: 100vh;
}
Only after that the .header-wrap will take all the space vertically and your big title and mini title will be placed in the middle of the page.
Here you can check that:
https://codesandbox.io/s/elated-clarke-rkwrj9?file=/styles.css
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
html {
scroll-behavior: smooth;
}
header {
min-height: 100vh;
background-color: black;
}
.header-wrap {
width: min(90%, 1290px);
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
height: 100vh;
}
.logo {
font-size: 2rem;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 45px 0;
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.486);
}
.navbar-nav {
list-style: none;
width: 50vw;
display: flex;
justify-content: space-between;
}
.header-text {
text-align: center;
}
.header-text h5 {
color: orange;
font-size: 1.5rem;
}
.header-text h1 {
color: white;
font-size: 5rem;
}
.header-text-down {
color: white;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<div class="header-wrap">
<nav class="navbar">
<div class="logo">LOGO</div>
<ul class="navbar-nav">
<li class="nav-item">ITEM1</li>
<li class="nav-item">ITEM2</li>
<li class="nav-item">ITEM3</li>
<li class="nav-item">ITEM4</li>
</ul>
</nav>
<div class="header-text">
<h5>mini title</h5>
<h1>BIG TITLE</h1>
</div>
<div class="header-text-down">
<p>small text that should be down</p>
</div>
</div>
</header>
</body>
</html>
space-between isn't doing anything because it doesn't know how much space is there with no defined height. Set the height of the header-wrap to 100vh and it'll work.
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
html {
scroll-behavior: smooth;
}
/* ===============
header styles
===============
*/
header {
min-height: 100vh;
background-color: black;
}
.header-wrap {
width: min(90%, 1290px);
margin: 0 auto;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}
.logo {
font-size: 2rem;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 45px 0;
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.486);
}
.navbar-nav {
list-style: none;
display: flex;
}
.header-text {
text-align: center;
}
.header-text h5 {
color: orange;
font-size: 1.5rem;
}
.header-text h1 {
color: white;
font-size: 5rem;
}
.header-text-down {
color: white;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<div class="header-wrap">
<nav class="navbar">
<div class="logo">LOGO</div>
<ul class="navbar-nav">
<li class="nav-item">ITEM1</li>
<li class="nav-item">ITEM2</li>
<li class="nav-item">ITEM3</li>
<li class="nav-item">ITEM4</li>
</ul>
</nav>
<div class="header-text">
<h5>mini title</h5>
<h1>BIG TITLE</h1>
</div>
<div class="header-text-down">
<p>small text that should be down</p>
</div>
</div>
</header>
</body>
</html>
I'm new to HTML/CSS. I'm trying to space out the items on my nav-link, due to the fact that the "collections" and "spark" seem to be overlapping each other. Is there any way to go about this, and why it is happening? should i accomplish this using Flexbox or grid? I've included the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="nav.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=Ubuntu:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<div class="navigation-wrapper">
<div class="left-column">
<img src="Logos/codepen-wordmark-display-inside-
white#10x.png" alt="Logo">
</div>
<div class="center-column">
<div class="links-wrapper">
<div class="nav-link">
Pens
</div>
<div class="nav-link">
Projects
</div>
<div class="nav-link">
Posts
</div>
<div class="nav-link">
Collections
</div>
<div class="nav-link">
<div class="icon">
<i class="fas fa-chevron-down"></i>
Spark
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.navigation-wrapper {
color: #cbcbcb ;
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 50px 10px 35px 5px;
background-color: black;
}
.navigation-wrapper > .left-column {
margin-left: 15px;
margin-bottom: 30px;
width: 250px;
}
.navigation-wrapper > .left-column img {
align-items: top;
width: 175px;
padding: 30px 50px 10px 15px;
}
.navigation-wrapper > .center-column {
display: flex;
padding: 50px 30px 10px 10px;
justify-content: space-between;
align-items: center;
}
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
------CSS Here------
.navigation-wrapper {
color: #cbcbcb ;
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 50px 10px 35px 5px;
background-color: black;
}
.navigation-wrapper > .left-column {
margin-left: 15px;
margin-bottom: 30px;
width: 250px;
}
.navigation-wrapper > .left-column img {
align-items: top;
width: 175px;
padding: 30px 50px 10px 15px;
}
.navigation-wrapper > .center-column {
display: flex;
padding: 50px 30px 10px 10px;
justify-content: space-between;
align-items: center;
}
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
.nav-link a {
color:#cbcbcb;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 20px;
font-weight: bold;
transition: 1.0s;
}
The problem lies here :
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
You have given a fixed width to the nav-link class and that's why the content is overlapping. Change the CSS like this:
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 4rem; /* add some gap as well */
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
/* width: 70px; */
text-align: center;
}
.head{
display:flex;
}
.navbar{
display:flex;
}
a{
text-decoration:none;
margin-right:2rem;
}
li{
list-style:none;
}
img{
width:10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<header class="head">
<div class="logo">
<img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
</div>
<nav class="navbar">
<li>Pens</li>
<li>Projects</li>
<li>Posts</li>
<li>Collections</li>
<li>Spark</li>
</nav>
</header>
</body>
</html>
this is how my page looks:
How do i get rid of the red/html/body & centering?
Note
wanted outcome: Everything to fill page without any red visible
the same happens when the content-wrapper expands beyond 100vh
darkred is html
lightgray is header
gray is main
blue is content wrpper
gold is footer
:root {
font-size: 20px;
margin-top: var(--header-height);
margin-bottom: var(--footer-height);
--header-height: 10vh;
--footer-height: 3vh;
--footer-padding: 2vh;
--color-first: #42b797;
--color-text: #328b73;
--font-header: "Nunito", sans-serif;
--font-lobster: "Lobster", cursive;
--font-roboto: "Roboto", sans-serif;
/*
font-family: 'Lobster', cursive;
font-family: 'Roboto', sans-serif;
*/
}
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
}
/*Header*/
header {
width: 100%;
display: flex;
height: 10vh;
align-items: center;
background-color: #666;
}
.header-active {
color: var(--color-first);
}
.header-logo,
.header-list,
.header-authenticate {
padding: 1vh;
justify-content: space-evenly;
font-family: var(--font-header);
font-weight: 600;
}
header h1 {
flex: 1;
display: flex;
color: var(--color-first);
justify-content: center;
align-items: center;
}
.header-logo {
}
.header-list {
display: flex;
flex: 2;
}
.header-authenticate {
flex: 1;
display: flex;
}
/*END Header*/
/**/
.content-wrapper {
position: relative;
background-color: cornflowerblue;
min-height: 50vh;
}
main {
/* margin-top: var(--header-height); */
/* padding-bottom: calc(var(--footer-height) + var(--footer-padding) / 2); */
background-color: #333;
min-height: 10vh;
/* min-height: calc(200vh - (var(--header-height) + var(--footer-size))); */
position: relative;
}
footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 0.5rem;
background-color: darkgoldenrod;
padding: var(--footer-padding) 0;
height: var(--footer-height);
width: 100%;
position: absolute;
bottom: 0;
}
html {
background-color: darkred;
}
body {
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!---->
<link rel="canonical" href="https://certificate.wiki" />
<link rel="stylesheet" href="assets/css/global.css" />
<link rel="stylesheet" href="assets/css/index.css" />
<link rel="stylesheet" href="assets/css/master.css" />
<link rel="stylesheet" href="assets/css/mobile.css" />
<link
href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght#300&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Nunito&display=swap"
rel="stylesheet"
/>
<!---->
<meta
name="description"
content="Upload you certificates from udemy, linkedin or school and show them of to your employer, friends and family"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!---->
<title>Certificate</title>
</head>
<body>
<header>
<h1>Stianlife.com</h1>
<ul class="header-list">
<li>
Home
</li>
<li>
Certificate
</li>
<li>
About
</li>
<li>
Manage Profile
</li>
</ul>
<ul class="header-authenticate">
<li>
Login
</li>
<li>
Sign up
</li>
</ul>
</header>
<div class="content-wrapper">
<main>
<div class="background"></div>
</main>
<footer>
<p>© 2020 - Stian Håve - About</p>
<p>
this work is licenced under Creative Commons Attributions 4.0
International license
</p>
</footer>
</div>
</body>
</html>
Firstly your adding padding to --root thereby pushing your body away from the top and bottom
Remove this from the --root styles
margin-top: var(--header-height);
margin-bottom: var(--footer-height);
Also position:absolute is relative to the closest position:relative parent so your applying bottom:0 to your footer is positioning it to the bottom of the content-wrapper, you probably want to remove position:relative from content-wrapper and then bottom:0 will work the way you expect it.
Check out Positioning contexts here
The navbar position is not changing when I am clicking the checkbox.
I have tried the other solutions from the similar questions but nothing is working.
I do not understand why it is not working.
do I have to do display: block on the navbar?.
I have watched many tutorials but I just cant get it to implement it here.
--index.html--
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/style.css">
<title>Presentation Blog Page</title>
</head>
<body>
<div class="sidebar">
<div class="portfolio-info">
<div class="image">
<img src="/img/venu.jpg" alt="">
</div>
<div class="name">
<p>Venu Gopal Reddy</p>
<p>Programming Enthusiast</p>
</div>
</div>
<div>
<label for="check">☰</label>
<input type="checkbox" id="check">
</div>
<div class="navbar">
<div class="nav-items">
HOME
BLOG
CONTACT
</div>
<div class="social-icons">
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</body>
</html>
--style.css--
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;700;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
:root {
--primary-text-color: #35383b; /*(53,56,59)*/
--secondary-text-color: #555a5f; /*(85,90,95)*/
--primary-bg-color: #6f8f8e; /*(111,143,142)*/
--secondary-bg-color: #96b2b1; /*(150,178,177)*/
}
html,
body {
font-family: 'Roboto', sans-serif;
color: var(--primary-text-color);
background-color: #e2e2e2;
font-size: 100%;
}
#media(max-width: 768px) {
.sidebar {
width: 100%;
height: 100px;
background-color: var(--primary-bg-color);
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
text-align: center;
}
/* Portfolio styling */
.sidebar .portfolio-info {
flex-basis: 50%;
height: 100%;
display: inherit;
justify-content: flex-start;
align-items: center;
}
.sidebar .portfolio-info .image {
width: 5rem;
height: 5rem;
margin-right: 1rem;
}
.sidebar .portfolio-info .image img {
width: 100%;
height: 100%;
border: none;
border-radius: 50%;
}
.sidebar .portfolio-info .name p:first-child {
font-size: 1.5rem;
}
.hamburger label{
display: block;
cursor: pointer;
}
/* Menu styling */
.sidebar .navbar {
position: absolute;
top: 0;
right: -1000px;
display: flex;
flex-direction: column;
flex-basis: 50%;
width: 100%;
height: 300px;
justify-content: space-evenly;
align-items: center;
}
#check:checked ~ .sidebar .navbar {
right: 100px;
}
}
what am I doing wrong here?
You were doing a small mistake in selector
#check:checked ~ .sidebar .navbar
here, I have corrected it, by just a small change in your HTML. ~ does not work the way you were using it, Read it here.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;700;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
:root {
--primary-text-color: #35383b; /*(53,56,59)*/
--secondary-text-color: #555a5f; /*(85,90,95)*/
--primary-bg-color: #6f8f8e; /*(111,143,142)*/
--secondary-bg-color: #96b2b1; /*(150,178,177)*/
}
html,
body {
font-family: 'Roboto', sans-serif;
color: var(--primary-text-color);
background-color: #e2e2e2;
font-size: 100%;
}
#media(max-width: 768px) {
.sidebar {
width: 100%;
height: 100px;
background-color: var(--primary-bg-color);
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
text-align: center;
}
/* Portfolio styling */
.sidebar .portfolio-info {
flex-basis: 50%;
height: 100%;
display: inherit;
justify-content: flex-start;
align-items: center;
}
.sidebar .portfolio-info .image {
width: 5rem;
height: 5rem;
margin-right: 1rem;
}
.sidebar .portfolio-info .image img {
width: 100%;
height: 100%;
border: none;
border-radius: 50%;
}
.sidebar .portfolio-info .name p:first-child {
font-size: 1.5rem;
}
.hamburger label{
display: block;
cursor: pointer;
}
/* Menu styling */
.sidebar .navbar {
position: absolute;
top: 0;
right: -1000px;
display: flex;
flex-direction: column;
flex-basis: 50%;
width: 100%;
height: 300px;
justify-content: space-evenly;
align-items: center;
transition: all 1s;
}
#check {display: none;}
#check:checked + .navbar {
right: 100px;
}
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/style.css">
<title>Presentation Blog Page</title>
</head>
<body>
<div class="sidebar">
<div class="portfolio-info">
<div class="image">
<img src="/img/venu.jpg" alt="">
</div>
<div class="name">
<p>Venu Gopal Reddy</p>
<p>Programming Enthusiast</p>
</div>
</div>
<label for="check">☰</label>
<input type="checkbox" id="check">
<div class="navbar">
<div class="nav-items">
HOME
BLOG
CONTACT
</div>
<div class="social-icons">
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</body>
</html>