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
Related
I've created a grid, and it's just supposed to be 4 rows at the moment, so to see the rows I added a border to them, however I'm only seeing a line, not borders of different divs in my grid.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,html{
overflow-x: hidden;
font-family: "Poppins", sans-serif;
}
html{
background-color: black;
}
.webgl{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
nav{
color: white;
z-index: 2;
position: relative;
padding: 4rem 4rem;
display: flex;
justify-content: space-between;
}
nav a{
text-decoration: none;
color: white;
font-weight: bold;
}
nav ul{
list-style: none;
display: flex;
gap: 2rem;
}
main {
flex-grow: 1;
}
main > article {
display: grid;
height: 100%;
}
main > article > .article-section{
height: 100%;
border: 0.1px solid white;
background-color: white;
}
<!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="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Appearances</title>
</head>
<body>
<div class="header">
<nav>
B-1 Series Battle Droid - Appearances
<ul>
<li>Creation</li>
<li>Appearances</li>
</ul>
</nav>
</div>
<main>
<article>
<div class="article-section" id="section1"></div>
<div class="article-section" id="section2"></div>
<div class="article-section" id="section3"></div>
<div class="article-section" id="section4"></div>
<div class="article-section" id="section5"></div>
<div class="article-section" id="section6"></div>
</article>
</main>
</body>
</html>
When you run the code, you can see a white line at the top but that's it. I'm not sure why this is happening, but it's possible it has something to do with the article? I'm fairly new to HTML and CSS so I'm not sure.
Any ideas?
The problem you described is caused by your main not having a set height. Give it a height: 100vh to fix this.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,html{
overflow-x: hidden;
font-family: "Poppins", sans-serif;
}
html{
background-color: black;
}
.webgl{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
nav{
color: white;
z-index: 2;
position: relative;
padding: 4rem 4rem;
display: flex;
justify-content: space-between;
}
nav a{
text-decoration: none;
color: white;
font-weight: bold;
}
nav ul{
list-style: none;
display: flex;
gap: 2rem;
}
main {
flex-grow: 1;
height: 100vh;
}
main > article {
display: grid;
height: 100%;
}
main > article > .article-section{
height: 100%;
border: 0.1px solid white;
background-color: white;
}
main > article> .article-section:nth-child(odd) {
background-color: grey;
}
<!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="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Appearances</title>
</head>
<body>
<div class="header">
<nav>
B-1 Series Battle Droid - Appearances
<ul>
<li>Creation</li>
<li>Appearances</li>
</ul>
</nav>
</div>
<main>
<article>
<div class="article-section" id="section1"></div>
<div class="article-section" id="section2"></div>
<div class="article-section" id="section3"></div>
<div class="article-section" id="section4"></div>
<div class="article-section" id="section5"></div>
<div class="article-section" id="section6"></div>
</article>
</main>
</body>
</html>
Because the row blocks are empty, and at the same time do not have a given min-height. Shows only the borders, and the height of the content is 0. Accordingly, they are superimposed on each other, and it looks like a white line.
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 want to align the logo on the left side and the nav links on the right side horizontally.
Mainly, I used display: flex on .nav-wrapper and used align-items: center. However, there still seems to be a bit of misalignment between the logo and the nav link elements which I cannot seem to figure out how to properly correct. Would really appreciate some help on this!
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI";
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding-left: 30px;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid blue;
}
.right-menu {
display: flex;
padding-right: 12px;
}
.right-menu .right-menu-items {
display: flex;
}
.right-menu .right-menu-items li a {
padding: 0 12px;
}
.logo {
width: 80px;
height: 80px;
}
.main-wrapper {
background-image: url("/assets/lucrezia-carnelos-gvc7MK4gnDk-unsplash.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
height: 100vh;
width: 100%;
top: 0;
z-index: -1;
}
.main-wrapper .welcome-note {
position: relative;
top: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>italki: Learn a language online</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="nav-wrapper">
<a href="#">
<img src="./assets/white_logo.svg" alt="italki logo" class="logo" />
</a>
<nav class="right-menu">
<ul class="right-menu-items">
<li>Log in</li>
<li>Sign up</li>
<li>Become a Teacher</li>
</ul>
</nav>
</header>
<div class="main-wrapper">
<div class="welcome-note">
<h1>Become fluent in <br />any language</h1>
<p
>Choose from over 10,000 teachers for 1-on-1 lessons based on your
goals and interests</p
>
<input type="text" placeholder="Choose a language" />
</div>
</div>
</body>
</html>
I've created demo, Here Link: https://jsfiddle.net/590nartL/
Infact it really horizontally center, red border prove that.
Of couse, maybe you think font in red border box not vertical middle, you can add style as below:
.right-menu {
margin-top: -2px;
}
Any negative margin value as you want.
It happens because there is an unnecessary space between the <img> tag and the parent <a> tag.
The <img> is an inline element so this happened.
To remove the space, make <img> tag as block element as follows or implement vertical-align.
.logo {
display: block;
width: 80px;
height: 80px;
}
or make parent <a> as flex style
a {
display: flex;
flex-direction: column;
}
I have built a standard footer, emulating the tourlife.com footer. However my link next to the instagram image isn't centered with the image, also the links "terms" and "help" are also out of alignment with the form. This is my second attempt using w3school's 'css grid of boxes/ equal width boxes'.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<footer class="clearfix">
<div class="box">
<img class="ig_logo" src="images/instagramicon.jpg">
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email">
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/* Main Footer */
.box {
float: left;
width: 33.33%;
padding: 20px 0px;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 13px;
border-top: 1px solid black;
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.box .biggertext {
font-size: 16px;
padding: 0px 4px;
margin-left: 6px;
}
.box a:visited {
color: black;
}
.ig_logo {
height: 100%;
width: 20px;
}
/* Middle Box */
.form {
float: right;
}
.enter {
width: 10vw;
margin-right: 10px;
padding: 6px 10px;
}
.button_1 {
background-color: black;
color: white;
padding: 6px 10px;
width: 8vw;
font-size: 12px;
text-align: center;
}
/* Right Box */
This is way easier to do with flexbox.
When you set your box width to 33.33% it doesn't know what to refer to. If you set the height of your body it will automatically give 100% width of your screen and the child to your body has a reference.
By typing "display: flexbox" your items under that class will align in a row. Voila!
By using "justify-content", you can decide how you want to spread your items and with "align-items" you can center your items vertically. You must give them space to do this though.
Your Instagram-pic didn't work, so I added a new link. I think it should work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main Footer */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.clearfix {
border-top: 1px solid black;
width: 80%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.box {
display: flex;
align-items: center;
}
.box a {
text-decoration: none;
padding-right: 10px;
color: #000;
}
.button_1 {
background-color: black;
color: #fff;
border: none;
outline: none;
padding: 10px;
}
.enter {
padding: 8px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<footer class="clearfix">
<div class="box">
<img src="https://img.icons8.com/fluent/48/000000/instagram-new.png" />
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email" />
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
https://jsfiddle.net/battleaxe/5rc9asn0/
Complete newb here. Third question here.
How do I make the text "A Web Developer"
Come under "Hey I'm Hyde"
and how do I control the space between "A Web Developer" and "Hey I'm Hyde"?
I tried to use a line break but there has to be a better way. Line breaks did not work well.
html,
body {
margin: 0px;
padding: 0px;
}
nav {
position: fixed;
z-index: 999;
width: 100vw;
background-color: maroon;
display: flex;
align-items: center;
}
#logo {
display: flex;
flex-grow: 1;
padding-left: 0.5em;
}
#logo img {
max-height: 30px;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#links li {
display: inline-block;
padding: 1em 2em;
}
#links li:hover {
background: blue;
}
#links li a {
color: white;
text-decoration: none;
margin: 0.45px;
}
#links {
margin-right: 52px;
}
#welcome-section {
padding-top: 60px;
height: calc(100vh - 60px);
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
#big {
font-size: 65px;
display: inline-block;
color: gainsboro;
}
#projects {
display: grid;
grid-template-columns: 45px 45px 45px;
grid-template-rows: 45px 45px 45px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="flag.JPG" alt="logo" height="60px" />
</div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome-section">
<p>
<h1 id="big">
Hey I'm Hyde
</h1><br><br><br>
<br>A Web Developer</p>
</section>
<section id="projects">Projects here</section>
</body>
</html>
Link to Fiddle:
https://jsfiddle.net/so2w7rkp/
I wish to gain the ability to put the text "A web developer" underneath "Hey I'm hyde" for future flexbox projects.
html,
body {
margin: 0px;
padding: 0px;
}
nav {
position: fixed;
z-index: 999;
width: 100vw;
background-color: maroon;
display: flex;
align-items: center;
}
#logo {
display: flex;
flex-grow: 1;
padding-left: 0.5em;
}
#logo img {
max-height: 30px;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#links li {
display: inline-block;
padding: 1em 2em;
}
#links li:hover {
background: blue;
}
#links li a {
color: white;
text-decoration: none;
margin: 0.45px;
}
#links {
margin-right: 52px;
}
#welcome-section {
padding-top: 60px;
height: calc(100vh - 60px);
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#welcome-section p:nth-child(1) {
font-size: 30px;
}
#projects {
display: grid;
grid-template-columns: 45px 45px 45px;
grid-template-rows: 45px 45px 45px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="flag.JPG" alt="logo" height="60px" />
</div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome-section">
<p>
Hey I'm Hyde
</p>
<p>
A Web Developer
</p>
</section>
<section id="projects">Projects here</section>
</body>
</html>
flex-direction: column;
<section id="welcome-section">
<h1 id="big">
Hey I'm Hyde
</h1>
<small>A Web Developer</small>
</section>
#welcome-section {
padding-top: 60px;
height: calc(100vh - 60px);
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}