I wanted to try a fixed navbar, but the images overlap the navbar. if you scroll trough my page the images go over the navbar and the other elements beneath. Is there a way to fix it? i suspect it's about the relative position of my figure but I don't know how to change it.
Also all suggestions are welcome. I'm a newbie and i want to learn. Thanks in advance.
My HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cats</title>
<meta name="description" content="Cats and other cute things">
<meta name="author" content="Daniel Parpart">
<link type="text/css" rel="stylesheet" media="screen" href="stylesheet.css" />
</head>
<body>
<div class="grid">
<header class="header">
<nav>
<ul>
<li>Start</li>
<li>Gallery</li>
<li>About me</li>
</ul>
</nav>
</header>
<div class="main">
<figure id="p">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Gr%C3%BCne_Augen_einer_Katze.JPG/800px-Gr%C3%BCne_Augen_einer_Katze.JPG" alt="cat">
<figcaption>Picture by 4028mdk09 / CC BY-SA</figcaption>
</figure>
<h2>Why are cats so cute?</h2>
<p>
Est constias sed mentitum eu fabulas illum ipsum commodo aute.
Do sunt quamquam comprehenderit, ullamco fugiat est probant exquisitaque.
Singulis ut quorum litteris e hic an quorum cillum aliqua.
Incididunt eruditionem aut appellat ad laborum est veniam eiusmod.
Mandaremus esse cernantur probant, fabulas o cupidatat.
Culpa ea incididunt ad culpa concursionibus incurreret quid voluptate.
Officia legam deserunt, veniam praesentibus commodo nulla constias.
<h3>Five reasons to live</h3>
</p>
<figure id="p">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Cat_poster_1.jpg" alt="different types of cats">
<figcaption>Alvesgaspar / CC BY-SA</figcaption>
</figure>
<p>
Quo dolore singulis ingeniis aut quo ea illustriora.
</p>
<h3>Another one bits the dust</h3>
<p>
Fugiat aliquip excepteur in quibusdam multos illum cernantur dolor.
</p>
</div>
<div class="sidebar">
<h4>Advertisment</h4>
<figure id="ad">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/2b/Bundesarchiv_Bild_183-R94483%2C_Leipzig%2C_Reklame_f%C3%BCr_Fahrradbereifung.jpg" alt="ad">
<figcaption>Bundesarchiv, Bild 183-R94483 / CC-BY-SA 3.0 / CC BY-SA 3.0 DE </figcaption>
</figure>
<p>
Elit graviterque nescius quae deserunt, pariatur nulla incididunt incurreret.
Incididunt in illum, ut fugiat philosophari.</p>
</div>
<div class="twitter">
<a class="twitter-timeline" data-height="1400" href="https://twitter.com/Ophur_Cat?ref_src=twsrc%5Etfw">Tweets by Ophur_Cat</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<footer class="footer">
<p>This is a test website.</p>
</footer>
</div>
</body>
</html>
My CSS:
background-color: white;
margin-top: 40px;
}
header {
background-color: #173753;
width: auto;
border-radius: 25px;
}
/*navbar*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #173753;
border-radius: 15px;
position: fixed;
overflow: hidden;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
h4 {
clear: both;
position: relative;
text-align: center;
}
p {
margin: 25px;
text-align: justify;
/*text-indent: 2em;*/
}
footer {
background-color: #173753;
text-align: center;
border-radius: 25px;
}
.header {
grid-area: header;
text-align: center;
}
.main {
grid-area: main;
background-color: #7fb7be;
border-radius: 15px;
}
.sidebar {
grid-area: sidebar;
align-content: center;
align-items: center;
}
.footer {
grid-area: footer;
}
.twitter {
grid-area: twitter;
}
.grid {
display: grid;
grid-template-columns: 3fr;
grid-template-rows: auto;
justify-content: center;
align-content: center;
grid-template-areas:
"header"
"main"
"sidebar"
"footer"
}
img {
width: 100%;
height: auto;
border-radius: 25px;
}
#media screen and (max-width: 480px) {
.twitter {display:none;}
h2 {
clear: both;
position: relative;
text-align: center;
}
h3 {
clear: both;
position: relative;
text-align: center;
}
}
#media only screen and (min-width: 768px) {
.grid {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto;
justify-content: center;
align-content: center;
grid-gap: 5px;
grid-template-areas:
"header header header"
"sidebar main twitter"
"footer footer footer"
}
}
figcaption {
background-color: black;
color: white;
max-width: 400px;
font-size: 10px;
display: block;
float: left;
position: absolute;
top: 0;
margin: 15px 15px auto 15px;
}
figure {
position: relative;
float: left;
}
a {
color: white;
text-decoration: none;
}
It's probably a z-index issue: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Add z-index:n and position:fixed to your header element. The value for the z-index can be any number, as long as it's higher than 0 and higher than the z-index over other elements on the page.
Related
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.
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;
}
I am trying to create a single page website using relative units (vh; em; rem) for the first time but the footer wouldn't stay at the bottom and for different screen sizes it stays at the viewport height of the screen. For mobile it works fine since the text is smaller thanks to the units.
I've tired setting each sections (nav, homePG, footer) a grid-row of 1,2,3 respectively to see if it can fix the issue.
html, body {
height: 100%;
width: 100%;
margin: auto;
padding: auto;
background-color: #020224;
color: white;
}
.container{
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
/* NAV SECTION */
.nav{
position: sticky;
background-color: transparent;
top: 0;
left: 0;
right: 0;
display: grid;
grid-template-columns: auto auto;
z-index: 1;
}
.nav a:link, .nav a:visited{
color: white;
text-decoration: none;
}
.nav a:hover{
color: cyan;
}
.navLeft {
font-size: 2em;
text-align: left;
}
.navRight{
font-size: 1.5em;
text-align: right;
}
.navRight a {
padding-left: 10px;
}
/* MAIN CONTENT */
.homePG{
position: absolute;
margin: auto;
width: 100%;
text-align: center;
font-size: 7vw;
}
.homePG img{
width: 500px;
height: 500px;
}
.homePG h1{
font-size: 1em;
}
.homePG p{
font-size: 0.5em;
}
/* FOOTER CONTENT */
.footer{
position: absolute;
text-align: center;
margin: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #030342;
padding:10px;
font-size:15px;
}
#media screen and (max-width: 1000px) {
.homePG{
padding-top: 50%;
}
.homePG img{
width: 400px;
height: 400px;
}
}
#media screen and (max-width: 750px) {
.homePG img{
width: 200px;
height: 200px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Brandon</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="container">
<section class="nav">
<nav class="navLeft">
Brandon
</nav>
<nav class="navRight">
ABOUT
PROJECTS
CONTACT
</nav>
</section>
<section class="homePG">
<img src="./assets/pic.png"></img>
<h1>Brandon</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>
</section>
<section class="footer">
<footer>
# Copyright
</footer>
</section>
</body>
</html>
why you are using position: absolute please change it to relative in below two classes hope this will help you.
.homePG{
position: relative;
margin: auto;
width: 100%;
text-align: center;
font-size: 7vw;
}
.footer{
position: relative;
text-align: center;
margin: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #030342;
padding:10px;
font-size:15px;
}
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.
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>