How to align header items with HTML and SCSS - html

I'd like to align the h1 element with the nav element in the header. Right now they appear in two different lines.
fiddle
header {
background-color: #F4C724;
color: white;
text-transform: uppercase;
width: 100%;
align-items: center;
}

Change your .header ul and nav css property with flexbox.
header {
align-items: center;
background-color: #F4C724;
display: flex;
flex-direction: row;
color: white;
text-transform: uppercase;
width: 100%;
#media (max-width: 767px){
flex-direction: column;
}
}
ul {
display: flex;
flex-directon: row;
justify-content: flex-end;
margin: 0;
li {
display: inline-block;
/*remove browser default settings with 0 for both margin and padding*/
&:not(:last-child){
margin-right: 25px;
}
}
}
nav {
margin-left: auto;
padding-right: 15px;
}
Design will like this.
SCSS is modifyed.
* {
margin: 0;
padding: 0;
//i don't want the default margin and padding settings because it messes with the position of things
}
header {
align-items: center;
background-color: #F4C724;
display: flex;
flex-direction: row;
color: white;
text-transform: uppercase;
width: 100%;
#media (max-width: 767px){
flex-direction: column;
}
}
h2 {
color: black;
margin-bottom: 20px;
}
body {
background-image: url("../img/growing.jpeg");
background-repeat: no-repeat;
background-size: cover;
//you have to include two dots so the machine looks for the file outside of the css file
//it doesn't repeat the img over and over again as the body content extends
//background-size will size the img to the screen appropropriately
}
ul {
display: flex;
flex-directon: row;
justify-content: flex-end;
margin: 0;
li {
display: inline-block;
/*remove browser default settings with 0 for both margin and padding*/
&:not(:last-child){
margin-right: 25px;
}
}
}
nav {
margin-left: auto;
padding-right: 15px;
}
h1 {
font-family: 'Teko', sans-serif;
color: white;
border: none;
width: 32%;
text-align: center;
span {
color: #218c74;
}
}
.nav-link {
text-decoration: none;
color: #218c74;
font-weight: bolder;
font-size: 12px;
&:hover {
color: white;
}
}
.hero {
text-align: center;
width: 50%;
color: black;
padding: 20px;
p {
text-align: justify;
//justify reorders all the text to fit in the box evenly
}
}

There were few things you need to modify so I did behalf of you:
View it in full page for the correct alignment.
Observations:
You don't have to declare code like this:
ul {
li {
display: inline-block;
margin-right: 60px;
}
}
It should be something like this:
ul li {
display: inline-block;
margin-right: 60px;
}
The reason it was in 2 lines because both the h1 size and the nav bar width were congested so, you have to increase the width of the h1.
I also see there were wrong comments used in CSS file use a correct one, ideally you should use something like this /* .... */
* {
margin: 0;
padding: 0;
}
header {
background-color: #F4C724;
color: white;
text-transform: uppercase;
width: 100%;
}
h2 {
color: white;
}
body {
background-image: url("../img/growing.jpeg");
background-repeat: no-repeat;
background-size: cover;
}
ul li {
display: inline-block;
margin-right: 60px;
}
nav {
float: right;
vertical-align: middle;
}
#leftContent {
width: 60%;
}
h1 {
font-family: 'Teko', sans-serif;
color: white;
border-style: solid;
text-align: center;
}
span {
color: #218c74;
}
.nav-link {
text-decoration: none;
color: #218c74;
font-weight: bolder;
font-size: 12px;
&:hover {
color: white;
}
}
.hero {
text-align: center;
width: 50%;
color: white;
p {
text-align: justify;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="refresh" content="">
<title>Grow Plants</title>
</head>
<body>
<header>
<div id="leftContent">
<h1>How to <span>Grow Plants</span></h1>
</div>
<nav>
<ul>
<li class="navbutton"><a class="nav-link" href="html/seedling.html">Seedling</a></li>
<li class="navbutton"><a class="nav-link" href="html/germination.html">Germination</a></li>
<li class="navbutton"><a class="nav-link" href="html/vegetative.html">Vegetative</a></li>
<li class="navbutton"><a class="nav-link" href="html/flowering.html">flowering</a></li>
<li class="navbutton"><a class="nav-link" href="html/about.html">About</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h2>Every Man Falls in Love with Mary Jane</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</body>
</html>

Use flexbox:
header {
display: flex;
background-color: #F4C724;
color: white;
text-transform: uppercase;
width: 100%;
align-items: center;
}

Assign classes to the h1 and nav elements:
<h1 class="header_title">How to <span>Grow Plants</span></h1>
<nav class="header_nav">
<ul>
<li class="navbutton"><a class="nav-link" href="html/seedling.html">Seedling</a></li>
<li class="navbutton"><a class="nav-link" href="html/germination.html">Germination</a></li>
<li class="navbutton"><a class="nav-link" href="html/vegetative.html">Vegetative</a></li>
<li class="navbutton"><a class="nav-link" href="html/flowering.html">flowering</a></li>
<li class="navbutton"><a class="nav-link" href="html/about.html">About</a></li>
</ul>
</nav>
In the CSS, remove the width from the h1,
and add:
.header_title{
width: 25%;
float:left;
background-color: green;
}
.header_nav{
width: 65%;
float:left;
background-color: blue;
}
an even better solution would be to create a wrapping div elements around the h1 and nav, with specific IDs, and then size them and float them. Although it is not correct to have multiple h1 elements on a single page, it is possible, and you can have multiple navs. So start your work now, by partitioning your code into well defined sections, that if you have to make changes in the future, it will be easier.

Flex solved the problem:
* {
margin: 0;
padding: 0;
//i don't want the default margin and padding settings because it messes with the position of things
}
header {
background-color: #F4C724;
color: white;
text-transform: uppercase;
width: 100%;
display: flex;
justify-contant: space-between;
align-items: center;
}
h2 {
color: white;
}
body {
background-image: url("../img/growing.jpeg");
background-repeat: no-repeat;
background-size: cover;
//you have to include two dots so the machine looks for the file outside of the css file
//it doesn't repeat the img over and over again as the body content extends
//background-size will size the img to the screen appropropriately
}
ul {
li {
display: inline-block;
margin-right: 60px;
/*remove browser default settings with 0 for both margin and padding*/
}
}
nav {
flex: 0 0 50%;
max-width: 50%;
}
h1 {
font-family: 'Teko', sans-serif;
color: white;
border-style: solid;
width: 32%;
text-align: center;
span {
color: #218c74;
}
}
.nav-link {
text-decoration: none;
color: #218c74;
font-weight: bolder;
font-size: 12px;
&:hover {
color: white;
}
}
.hero {
text-align: center;
width: 50%;
color: white;
p {
text-align: justify;
//justify reorders all the text to fit in the box evenly
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="refresh" content="">
<title>Grow Plants</title>
</head>
<body>
<header>
<h1>How to <span>Grow Plants</span></h1>
<nav>
<ul>
<li class="navbutton"><a class="nav-link" href="html/seedling.html">Seedling</a></li>
<li class="navbutton"><a class="nav-link" href="html/germination.html">Germination</a></li>
<li class="navbutton"><a class="nav-link" href="html/vegetative.html">Vegetative</a></li>
<li class="navbutton"><a class="nav-link" href="html/flowering.html">flowering</a></li>
<li class="navbutton"><a class="nav-link" href="html/about.html">About</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h2>Every Man Falls in Love with Mary Jane</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</body>
</html>

Related

How do I fix navbar hover effect without breaking the animation?

Long story short: Is it possible to make the hover effect appear inside the animation box without going out of border? Right now it's because of the .menu li having a display: flex. Without it, animation breaks. I am pretty sure I'm doing something wrong but I haven't been able to figure it out. I'm a newbie so any help is appreciated. Code attached. Thanks in advance!
I have this --->>>
Looking to get this without breaking the animation ---->>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/158ff5ced2.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>Live like legends</title>
<link rel="stylesheet" href="./css/style.css">
<script src="javakood.js"></script>
</head>
<body>
<nav class="navbar">
<input type="checkbox" id="check">
<label for="check" class="menubtn">
<i class="fas fa-bars"></i>
</label>
<div class="logo">
<img src="./veebipilt.png" width="128" height="56">
</div>
<ul class="menu">
<li>Beginning</li>
<li>About me</li>
<li>Statistics</li>
</ul>
<ul class="menu2">
<li><a class="speciall" href="#">Objectives</a></li> <! -- this is not a class typo, they need to be separated -->
<li><a class="special" href="#">Contact</a></li>
</ul>
</nav>
<! Esimene vahemik veebilehes kus on tekst ja pilt korvuti---->
<section class="home">
<div class="rida">
<div class="tekstall">
<h1>Tere tulemast minu lehele!</h1>
<p>siia tuleb veel midagi lahedat veel ei tea</p>
</div>
<div class="piltnext">
<img src="./12345.jpg" width="500" height="300">
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<section class="about">
<div class="tekstabout">
<h1><mark>Veidi</mark> minust</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar{
background: #cbcca3;
position: fixed;
width: 100%;
padding: 5px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
margin-bottom: 0;
}
.home{
background: url("./sigma.gif") no-repeat center;
background-size: cover;
height: 100vh;
}
.logo {
float: left;
line-height: 70px;
margin-left: 30px;
margin-right: 50px;
}
.menu{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
align-items: center;
}
.menu li {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
margin-right: 30px;
}
.menu li:after,
.menu li:before {
content: "";
position: absolute;
display: block;
border: 0px solid transparent;
}
.menu li:after {
width: 0%;
height: 80%;
border-top: 2px solid #8a2be2;
border-bottom: 2px solid #8a2be2;
transition: all 0.6s ease;
}
.menu li:before {
width: 120%;
height: 0%;
border-left: 2px solid #8a2be2;
border-right: 2px solid #8a2be2;
transition: all 0.5s ease;
}
.menu li:hover::before {
height: 75%;
}
.menu li:hover::after {
width: 110%;
}
.menu2{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
align-items: center;
}
.menu2 {text-align: right;}
.menu a {
margin: 0 5px;
font-size: 20px;
line-height: 70px;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
}
.menu2 a {
margin: 0 5px;
font-size: 20px;
text-transform: uppercase;
line-height: 70px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
letter-spacing: 2px;
}
a.special,a:hover{
background-color: ghostwhite;
transition: .5s;
}
p{
color: floralwhite;
}
.menubtn {
color: blueviolet;
font-size: 25px;
float: right;
display: none;
cursor: pointer;
}
#check{
display: none;
}
#media (max-width: 933px){
.menubtn{
display: block;
}
.menu li, .menu2 li{
position: fixed;
width: auto;
height: auto;
background: white;
text-align: center;
top: 70px;
left: 0;
}
}
.rida{
display: flex;
align-items: center;
justify-content: space-between;
}
.tekstall{
flex-basis: auto;
min-width: 300px;
margin-left: 20px;
padding-left: 30px;
}
.piltnext{
max-width: 100%;
padding: 20px;
height: auto;
margin-top: 0px;
}

CSS And HTML Issue With Image Styles

*Hello, I want to have text below the image like in the example, but I can't figure out what is wrong, i took the code from
W3Schools: https://www.w3schools.com
/css/tryit.asp?filename=trycss_ex_images_card
Can someone help? Thanks
Example Image: https://imgur.com/a/P86DVjW
What It Looks Like: https://imgur.com/a/JOXpAJI*
```{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #32053d;
}
header {
position: absolute;
top: 0;
Left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center
}
header .logo
{
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul
{
display: flex;
justify-content: center;
align-items: center;
}
header ul li
{
list-style: none;
margin-left: 20px;
}
header ul li a
{
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a:hover,
header ul li a.active
{
background: #fff;
color: #4a2880;
}
h1 {
color: white;
margin-top: 250px;
margin-left: 270px;
}
p {
color:white;
margin-left: 60px;
text-align: center;
font-size: 15px;
}
.sec {
margin-right: 80px;
}
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
```<!DOCTYPE html>
<html>
<h1>ABC</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<center><img src="images/ArrowDown.webp" id="arrow" width="200"></center>
<div class="sec">
<center> <div class="polaroid">
<img src="Images/Darbs1.png" alt="Darbs1" style="width:100%">
<div class="container">
<p>Code</p>
</div>
</div> </center>
<center> <div class="polaroid">
<img src="images/Darbs1.png" alt="Darbs2" style="width:100%">
<div class="container">
<p>Code</p>
</div>
</div> </center>
<head>
<title>Projects</title>
<link rel="stylesheet" type="text/css" href="Website.css"
</head>
<body>
<header>
Logo
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</header>
</body>
</html>```
The problem is with the css. You have set the p tag color:white that is why it is not showing. Set color:black
p {
color:black;
margin-left: 60px;
text-align: center;
font-size: 15px;
}
I approve of Usama's answer, the description is written in white on a white background.
You can add a specific rule:
.polaroid .container p {
color:black;
}
PS: Can you reformat your code?
Use 4 spaces or the button {} in the text editor

Why is my <main></main> stacked on top of my <nav></nav>?

Hello there i want to ask something related to (maybe) element positioning.
So i've been stuck with this problem for a while. The and the are stacking on top of each other. Is there a efficient workaround so the will be directly under the ? And weirdly the is stuck there too.
Here's the screenshoot of it:
Screenshot of the page
Here's my css and html snippet:
#-ms-viewport {
width: device-width;
}
* {
box-sizing: border-box;
}
/* FONT */
#import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght#0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
body,
html {
width: 100%;
height: 100%;
margin: auto 0;
/*background-color: #FDE500;*/
font-family: 'Arimo', sans-serif;
}
ul {
list-style: none;
}
li {
padding: 20px;
margin: 10px;
}
h3 {
font-family: 'Arimo', sans-serif;
font-size: 1em;
}
.nav-container li a {
text-decoration: none;
color: black;
font-family: 'Arimo', sans-serif;
font-weight: 1000;
}
/* NAV */
.zone-nav {
background-color: #1A1EB0;
width: 100%;
display: block;
}
.nav-container li a {
color: #FDE500;
}
ul.nav-container {
padding-left: 0;
margin: 0 auto;
}
.nav-container {
display: flex;
flex-flow: row wrap;
font-size: 1.2em;
margin: 0;
justify-content: space-between;
align-items: center;
width: 100%;
margin: auto 0;
}
#media only screen and (max-width: 600px) {
.nav-container {
font-size: 1.3em;
padding: 0;
flex-flow: column wrap;
}
}
.nav-container li a img {
display: block;
width: 1.5em;
margin: 0 auto;
margin-bottom: -10px;
}
.item-1 {
margin: 0 auto;
flex: 1 1 0px;
text-align: center;
}
li.item-1 {
padding: 30px;
}
/*.logo {
margin: auto 0;
}*/
.item-2 {
margin: auto 0;
background-color: ;
}
li.item-1.logo img {
width: 5em;
display: block;
margin: 0 auto;
padding: auto 0;
}
li.item-1.logo {
margin: auto 0;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
/* z-index: 1;*/
}
/* MAIN */
.zone-main {
display: flex;
flex: 1 0 auto;
max-width: 100%;
background: rgb(238, 174, 202);
background: linear-gradient(90deg, rgba(238, 174, 202, 1) 38%, rgba(148, 187, 233, 1) 100%);
}
.wrap-main {
flex: 1 1 auto;
max-width: 100%;
position: relative;
}
/* FOOTER */
.zone-footer {
background-color: #FDE500;
}
.footer-container {
display: flex;
flex-flow: row wrap;
font-size: 16px;
color: #1A1EB0;
font-weight: 1000;
margin: 0;
justify-content: safe center;
align-items: center;
margin: auto 0;
padding: 0 20px 0 20px;
}
.footer-item {
margin: 0;
padding: 10px;
text-align: center;
}
li.footer-item-buffer {
flex-grow: 1;
}
.push {
margin-left: auto;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home | P.Y.G. Headquarters</title>
<link rel="stylesheet" type="text/css" href="style-base.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=Arimo:ital,wght#0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width">
</head>
<body>
<nav class="zone-nav sticky">
<ul class="nav-container">
<li class="item-1">
<img src="assets/img/join.png" alt="ICON I"><br>JOIN
</li>
<li class="item-1">
<img src="assets/img/home.png" alt="ICON II"><br>HOME
</li>
<li class="item-1">
<img src="assets/img/lineups.png" alt="ICON I"><br>LINEUPS
</li>
<li class="item-1 logo"><img src="assets/img/pyg.png" alt="ICON I"></li>
<li class="item-1">
<img src="assets/img/tickets.png" alt="ICON III"><br>SCHEDULE
</li>
<li class="item-1">
<img src="assets/img/shopping-bag.png" alt="ICON IV"><br>STORE
</li>
<li class="item-1">
<img src="assets/img/link.png" alt="ICON IV"><br>LINKS
</li>
</ul>
</nav>
<main class="zone-main">
<div class="wrap-main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</main>
<footer class="zone-footer">
<ul class="footer-container">
<li class="footer-item">P.Y.G. Administrative Service - Since 2012</li>
<li class="footer-item-buffer"></li>
<li class="footer-item push">PRIVACY POLICY</li>
<li class="footer-item push">HELP</li>
</ul>
</footer>
</body>
</html>
Thanks in advance.
Remove the sticky css class on the nav element.
The sticky css class makes your main content sticking to the top of the page.
And add the following css on the body
body {
display:flex;
flex-direction: column;
height: 100%;
}
This puts all containers (nav, main, footer) under each other.

How to stop web page header scrolling off screen when a nav link is selected

I'm having some problems with the following CSS/HTML. This is on a Mac but occurs both with Safari and Chrome, so it seems to be my CSS.
I'm trying to get a simple web page to display basic documentation for a personal project. I have a "fixed" header, then a navigation section and a main section underneath.
The general setup works fine: I can click links in the navigation bar and the main section scrolls to that link.
The problem is that if the main content is too long (i.e. longer than the current viewport) then when the main section scrolls to that location the header scrolls off the top of the screen and I can't get it back without resizing the browser window.
I'm assuming that it's CSS related, probably something to with flexbox but I don't know enough CSS to be able to frame the question properly for a search here. So apologies if this has been asked before or is a well understood technique.
:root {
--nav-width: 24rem;
--nav-padding: 1rem;
--article-width: 72rem;
--article-padding: 1rem;
--main-padding: 2rem;
--main-width: calc(var(--nav-width) + var(--article-width));
--header-width: var(--main-width);
--header-padding: 1rem;
--body-padding: 10rem;
--body-width: calc(var(--main-width) + 2 * var(--body-padding));
}
html {
box-sizing: border-box;
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
height: 100%;
}
body {
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
margin: 0 auto;
font-family: serif;
font-size: 1.6rem;
overflow: hidden;
}
header {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: space-between;
width: var(--header-width);
margin: 0 auto;
padding-top: var(--header-padding);
padding-bottom: var(--header-padding);
border-bottom: 1px solid black;
}
main {
box-sizing: border-box;
display: flex;
flex-direction: row;
height: 100%;
margin: 0 auto;
padding-top: var(--main-padding);
padding-bottom: var(--main-padding);
}
nav {
box-sizing: border-box;
flex: 0 1 auto;
width: var(--nav-width);
height: calc(100% - 2 * var(--nav-padding));
padding-top: 2rem;
margin: 0;
padding: var(--nav-padding);
overflow-y: auto;
counter-reset: nav-annex;
}
article {
box-sizing: border-box;
flex: 1;
flex-direction: row;
max-width: var(--article-width);
width: var(--article-width);
height: calc(100% - 2 * var(--article-padding));
padding: var(--article-padding);
padding-top: 0;
padding-right: calc(2 * var(--article-padding));
margin: 0;
overflow-y: auto;
}
footer {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: space-between;
border-top: 1px solid;
margin-top: 2rem;
}
footer p {
font-size: 1rem;
}
p {
margin: 1.5rem 0;
text-align: justify;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
color: #111;
line-height: 125%;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
font-weight: normal;
}
h1 {
font-size: 4rem;
margin-top: 0;
font-weight: bolder;
font-variant: small-caps;
}
h2 {
font-size: 3.25rem;
margin-top: 3rem;
}
h3 {
font-size: 2.5rem;
margin-top: 2rem;
}
nav ul, nav li {
list-style-type: none;
padding: 0 0 0 0.5rem;
}
nav > ul:first-of-type > li > a {
font-variant: small-caps;
font-size: 1.5rem;
}
nav > ul > li > a {
font-weight: bold;
}
nav ul ul {
padding: 0 0 0 1rem;
margin: 0 inherit;
}
nav a {
font-size: 1.33rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="author" content="phil">
<title>Test</title>
<style type="text/css">code{white-space: pre;}</style>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<header>
<div>Header</div>
<div>
header things
</div>
</header>
<main>
<nav id="TOC">
<ul>
<li>page title</li>
</ul>
<ul>
<li>Overview
<ul>
<li>section 1</li>
<li>section 2</li>
</ul>
</li>
</nav>
<article>
<h1 id="TITLE">Page Title</h1>
<h2 id="overview">Overview</h2>
<h3 id="section-1">section 1</h3>
<p>Fugiat nisi cupidatat do deserunt voluptate amet ipsum ea exercitation nisi excepteur. Officia laborum culpa duis labore cillum id tempor duis enim. Deserunt sint deserunt ex anim nostrud laborum ad ea. Elit dolore velit deserunt adipisicing esse eu. Et veniam minim aliquip ipsum officia tempor fugiat elit laborum sunt consectetur.</p>
<h3 id="section-2">section 2</h3>
<p>Et magna nulla deserunt excepteur aliquip tempor non exercitation commodo. Excepteur pariatur nostrud ea aliqua dolore. Irure culpa quis sit Lorem reprehenderit ad consectetur adipisicing Lorem laboris. Do culpa aliquip veniam ea deserunt reprehenderit cupidatat consequat officia.</p>
<footer>
<p>footer stuff
<p>
<p><span>Modified: 2020-05-05 by phil</span></p>
</footer>
</article>
</main>
</body>
</html>
Any help would be appreciated!
Thanks
If you add main overflow: auto; it will make your main scrollable. So the header won't disappear. I hope this code will solve your problem.
main{
box-sizing: border-box;
display: flex;
flex-direction: row;
height: 100%;
margin: 0 auto;
padding-top: var(--main-padding);
padding-bottom: var(--main-padding);
overflow:auto;
}

Positioning nav on lower header border with overlapping divs (HTML/CSS)

I'm trying to create a simple web page consisting of three divs: A header div containing an image, a content div containing text and a nav div containing the nav elements and a logo. My goal is to overlap the header div with the nav div so that the nav elements and the logo are always positioned vertically centered on the lower border of the header div.
Here's my code so far:
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
text-align: center;
}
#headerimage {
height: 100%;
width: 100%;
z-index: 50;
position: relative;
}
#headerimage > img {
max-width: 100%;
max-height: 100%;
border: 6px;
border-style: solid;
border-color: #671013;
}
#nav {
width: 100%;
overflow: visible;
top: 97.75%;
z-index: 100;
position: absolute;
}
#nav > img {
text-align: center;
vertical-align: middle;
margin-top: -6.2%;
height: 20%;
width: 20%;
}
.nav-element {
width: 10%;
height: 100%;
padding: 5px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
text-align: center;
font-weight: bold;
border: 4px;
border-style: solid;
border-color: #2d3139;
background-color: white;
color: #80857f;
}
.nav-element:hover {
background-color: #2d3139;
color: white;
cursor: pointer;
}
.left {
float: left;
z-index: 100;
}
.first {
margin-left: 3%;
}
.right {
float: right;
z-index: 100;
}
.last {
margin-right: 3%;
}
#point2 {
margin-left: 9%;
}
#point3 {
margin-right: 9%;
}
#content {
height: 100%;
width: 100%;
}
#text {
padding-top: 8%;
padding-left: 3%;
padding-right: 3%;
padding-bottom: 5%;
text-align: justify center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
</style>
</head>
<body>
<div id="headerimage">
<img src="https://images.pexels.com/photos/34577/pexels-photo.jpg" alt="Headerimage" />
<div id="nav">
<div id="point1" class="nav-element left first">
Point 1
</div>
<div id="point2" class="nav-element left ">
Point 2
</div>
<img src="https://pixabay.com/get/55e2d3454853a814f1dc8460da2932771736dfe6575074_640.png" alt="Logo" />
<div id="point3" class="nav-element right last">
Point 3
</div>
<div id="point4" class="nav-element right">
Point 4
</div>
</div>
</div>
<div id="content">
<div id="text">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</h1>
</div>
</div>
</body>
</html>
Currently the nav div doesn't stay centered on the lower border and my online researches haven't brought any useful results so far, so if anyone has an idea to point me in the right direction, I'd be really grateful!
Hope this is what you want:
nav img {
margin-top: -40px;
}
#point1, #point2, #point3, #point4 {
margin-top: -40px;
}
Fine-tune the margin as fits.