I'm trying to align an image next to some text on my webpage without using any position properties like right:, left:, top:, and bottom: but I just can't align it the way I want
body {
background-color: #fafafa;
font-family: Epilogeal, sans-serif;
}
.main {
padding: 20px;
overflow: hidden;
}
nav {
width: 100%;
position: sticky;
display: flex;
}
.nav-links {
flex: 1;
text-align: left;
padding-left: 50px;;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
padding-left: 50px;
}
a {
text-decoration: none;
color: hsl(0, 0%, 41%);
font-family: Epilogeal, sans-serif;
}
.register-btn {
border: 2px solid hsl(0, 0%, 41%);
border-radius: 15px;
padding: 10px;
width: 4%;
text-align: center;
position: fixed;
right: 60px;
top: 16px;
}
.login-btn {
color:hsl(0, 0%, 41%);
position: fixed;
right: 215px;
}
.hero {
padding: 150px;
}
.hero-header {
color: hsl(0, 0%, 8%);
font-size: 50px;
}
.hero-text {
color: hsl(0, 0%, 41%);
font-size: 18px;
float: left;
}
.image {
width: 700px;
height: 700px;
float: right;
margin-bottom: 100px;
}
<!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="index.css">
<link rel="stylesheet" href="https://fonts.google.com/specimen/Epilogue">
<title>Document</title>
</head>
<body>
<div class="main">
<nav>
<div class="logo">
<img src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\logo.svg" alt="logo">
</div>
<div class="nav-links">
<ul>
<li>Features</li>
<li>Company</li>
<li>Careers</li>
<li>About</li>
</ul>
</div>
<div class="login-btn">
Login
</div>
<div class="register-btn">
Register
</div>
</nav>
<div class="hero">
<div class="hero-header">
<h1>Make <br> remote work</h1>
</div>
<div class="hero-text">
<p>Get your team in sync, no matter your location. <br> Streamline processes, create team rituals, and <br> watch productivity soar.</p>
</div>
<img class="image" src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\image-hero-desktop.png" alt="hero-image">
</div>
</div>
</body>
</html>
Here's what my webpage looks like:
And here's what I want it to look like:
I'm not good with positioning stuff in CSS, so any help would be much appreciated!
You can try this.
Replace the Hero Element with this.
<div class="hero">
<div class="hero-left">
<div class="hero-header">
<h1>Make <br> remote work</h1>
</div>
<div class="hero-text">
<p>Get your team in sync, no matter your location. <br> Streamline processes, create team rituals, and <br> watch
productivity soar.</p>
</div>
</div>
<img class="image" src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\image-hero-desktop.png" alt="hero-image" />
</div>
and CSS of .hero selector with
.hero {
padding: 150px;
display: flex;
justify-content: space-between;
}
Related
I'm having trouble getting my grid to display the way i want and i can't see what i've done wrong. Please take a look at this for me.
It was displaying correctly when i was using background-image url() in css but i needed to use image tags because they need to be hyperlinks and i'm pretty sure this was the only way. When i use img tags the pictures were now displaying in their full size and i couldnt get them back to the right scale. and when i wrapped them in anchor tags they stopped displaying in the correct order.
Here's my code
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
p {
margin: 0;
font-size: 1.8rem;
}
body {
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.5;
}
header {
display: flex;
width: 100%;
justify-content: space-between;
background-color: darkgrey;
padding-right: 5%;
}
header h1 {
background-color: blue;
padding: 1px;
min-width: 20%;
color: yellow;
}
nav {
display: flex;
text-decoration: underline darkblue;
width: 60%;
align-items: center;
justify-content: space-around;
}
nav li {
display: inline;
justify-content: flex-end;
padding-left: 8%;
color: yellow;
}
.heroBanner {
background-image: url("../images/02-hero-bg.jpg");
background-size: cover;
height: 200px;
position: relative;
}
#page-section {
width: 100%;
}
#title {
position: absolute;
bottom: 10%;
right: 10%;
background-color: blue;
color: yellow;
}
/* Put my about stuff here */
#about {
display: flex;
padding: 3%;
}
#about p {
align-items: stretch;
color: yellow;
}
#about-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#about-2 {
width: 80%;
padding-left: 3%;
background-image: url(/my-work/images/Portfolio-avatar.png);
background-size:contain;
background-position: center;
}
#work {
height: 1200px;
display: flex;
padding: 3%;
}
#work-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#work-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'one one'
'two three'
'four five'
}
.pics {
position: relative;
}
.pic-title {
position: absolute;
bottom: 15%;
background-color: blue;
color: yellow;
}
#big {
grid-area: one;
object-fit: contain;
margin: 10px;
border: solid 4px darkblue;
}
#pic1 {
grid-area: two;
object-fit: contain;
width: 25%;
margin: 10px;
border: solid 4px darkblue;
}
#pic2 {
grid-area: three;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic3 {
grid-area: four;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic4 {
grid-area: five;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#picture1, #picture2, #picture3, #picture4, #picture5 {
object-fit: cover;
}
#contact {
display: flex;
width: 100%;
display: flex;
padding: 3%;
}
#work-2 {
width: 75%;
}
#contact-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#contact-2 {
width: 80%;
}
#contact-2 ul {
display: flex;
list-style: none;
display: flex;
text-decoration: underline darkblue;
width: 80%;
align-items: center;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en-gb">
<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>Lorenzo Francis-Walker // Junior Web Developer</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- main logo / nav -->
<header>
<h1>Lorenzo Francis-Walker</h1>
<nav>
<li>About me</li>
<li>Work</li>
<li>Contact Me</li>
</nav>
</header>
<!-- hero banner -->
<section class="heroBanner">
<h2 id="title">Room4Renzo</h2>
</section>
<main class="page-wrapper">
<!-- about me -->
<section class="page-section" id="about">
<div id="about-1">
<h2>About Me</h2>
</div>
<div id="about-2">
<p>My love for computers comes from a fairly young age and is greater than my current experience. I was given an
old PC by a friend that soon stopped working. He had another one that worked but soon after giving that to me
, it too stopped working. I found a pdf of how to build computers for dummies on my phone and used what i had
learned to combine the two PC's parts into one case, and it worked. I had always been interested in technology
but this is where my love for understanding computers and how they work. Once you learn about different types
of hardware theres not many places to go. ie networking, coding, etc. fortunately for me, the depth of the
limited options are vast, so there is alot left for me to learn and I never want my journey to end.</p>
</div>
</section>
<!-- portfolio container -->
<section class="page-section" id="work">
<div id="work-1">
<h2>Work</h2>
</div>
<div id="work-2">
<a href="" target="_blank">
<div id="big" class="pics">
<img src="./images/02-run-buddy.jpg" id="picture1" alt="" class="grid-column-span-2">
<div class="pic-title">
<h2>Run Buddy</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic1" class="pics">
<img src="./images/02-portfolio-1.jpg" id="picture2" alt="">
<div class="pic-title">
<h2>LED Wall</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic2" class="pics">
<img src="./images/02-portfolio-2.jpg" id="picture3" alt="">
<div class="pic-title">
<h2>Calculator</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic3" class="pics">
<img src="./images/02-portfolio-3.jpg" id="picture4" alt="">
<div class="pic-title">
<h2>Pastel Puzzels</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic4" class="pics">
<img src="./images/02-portfolio-4.jpg" id="picture5" alt="">
<div class="pic-title">
<h2>Surf Report</h2>
<p>Languages Used</p>
</div>
</div>
</a>
</div>
</section>
<!-- contact -->
<section class="page-section contact" id="contact">
<div id="contact-1">
<h2>Contact Me</h2>
</div>
<div id="contact-2">
<ul>
<li>Email: Lorenzo.afw#gmail.com</li>
<li>Github: Room4Renzo </li>
</ul>
</div>
</section>
</main>
</body>
</html>
i tried manually resizing, using object-fit as i saw in another answer, i tried different amount of columns for the grid, same for the rows. i can;t find where my mistake is. appreciate any help. Thanks
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
How to center an element horizontally and vertically
(27 answers)
Closed 3 years ago.
I'm practicing publishing of this site
How can I handle vertical alignment of div?
JSFIDDLE
.header {
background: rgba(0, 0, 0, 0) linear-gradient(135deg, rgb(6, 68, 161) 0%, rgb(56, 205, 255) 100%) repeat scroll 0% 0%;
height: 668px;
}
.header__nav {
padding: 20px;
}
.header__nav__logo {
float: left;
}
.header__nav__logo {
padding: 6.5px 20px 6.5px 0;
display: inline-block;
margin-left: -20px;
}
.header__nav__logo img {
width: 150px;
height: 36px;
}
.header__nav__list {
overflow: hidden;
float: right;
margin-right: -20px;
}
.header__nav__list li {
float: left;
}
.header__nav__list li a {
padding: 20px;
display: inline-block;
color: white;
}
.header__nav__list__button {
background-color: #eb4336;
border-radius: 3px;
}
.header__main {
text-align: center;
color: white;
background-color: green;
}
.header__main__title {
font-size: 50px;
}
.header__main__intro {
font-size: 20px;
margin-top: 20px;
margin-bottom: 10px;
}
.header__main__button {
background-color: #eb4336;
border-radius: 5px;
padding: 15px 50px;
font-size: 20px;
margin-top: 20px;
display: inline-block;
}
.header__main__signin {
margin-top: 10px;
}
.contents {
background-color: yellow;
}
.footer {
background-color: blue;
}
<!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">
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="style.css">
<title>Project Management Software</title>
</head>
<body>
<header class="header">
<div class="l__wrapper">
<div class="header__nav clearfix">
<a class="header__nav__logo" href="#"><img src="./images/pareto2.png" alt=""></a>
<ul class="header__nav__list clearfix">
<li>Features</li>
<li>Pricing</li>
<li>Sign-in</li>
<li><a class="header__nav__list__button" href="#">FREE TRIAL</a></li>
</ul>
</div>
<div class="header__main">
<h1 class="header__main__title">
Manage your projects, tasks & team to get things done faster!
</h1>
<p class="header__main__intro">
A simple tool for project management, invoicing & time tracking.
</p>
<a class="header__main__button" href="#">TRY IT FREE NOW!</a>
<p class="header__main__signin">
Already using Pareto.pm? <span>Sign in</span>
</p>
</div>
</div>
</header>
<section class="contents">
Contents
</section>
<footer class="footer">
Footer
</footer>
</body>
</html>
I wanna div of green space to align vertically in the blue background except nav bar. How can I handle this?? I searched solutions and tried lots of things, but I failed. Many solutions suggest display: table-cell for vertical alignment, but it didn't work.
.l__wrapper {
display: grid;
grid-template-columns: auto;
justify-content: center;
align-items: center;
grid-row-gap: 10px;
}
.header {
background: rgba(0, 0, 0, 0)
linear-gradient(135deg, rgb(6, 68, 161) 0%, rgb(56, 205, 255) 100%)
repeat scroll 0% 0%;
height: 668px;
}
.header__nav {
padding: 20px;
}
.header__nav__logo {
float: left;
}
.header__nav__logo {
padding: 6.5px 20px 6.5px 0;
display: inline-block;
margin-left: -20px;
}
.header__nav__logo img {
width: 150px;
height: 36px;
}
.header__nav__list {
overflow: hidden;
float: right;
margin-right: -20px;
}
.header__nav__list li {
float: left;
list-style-type: none;
}
.header__nav__list li a {
padding: 20px;
display: inline-block;
color: white;
}
.header__nav__list__button {
background-color: #eb4336;
border-radius: 3px;
}
.header__main {
text-align: center;
color: white;
background-color: green;
}
.header__main__title {
font-size: 50px;
}
.header__main__intro {
font-size: 20px;
margin-top: 20px;
margin-bottom: 10px;
}
.header__main__button {
background-color: #eb4336;
border-radius: 5px;
padding: 15px 50px;
font-size: 20px;
margin-top: 20px;
display: inline-block;
}
.header__main__signin {
margin-top: 10px;
}
.contents {
background-color: yellow;
}
.footer {
background-color: blue;
}
<!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">
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="style.css">
<title>Project Management Software</title>
</head>
<body>
<header class="header">
<div class="l__wrapper">
<div class="header__nav clearfix">
<a class="header__nav__logo" href="#"><img src="./images/pareto2.png" alt=""></a>
<ul class="header__nav__list clearfix">
<li>Features</li>
<li>Pricing</li>
<li>Sign-in</li>
<li><a class="header__nav__list__button" href="#">FREE TRIAL</a></li>
</ul>
</div>
<div class="header__main">
<h1 class="header__main__title">
Manage your projects, tasks & team
to get things done faster!
</h1>
<p class="header__main__intro">
A simple tool for project management, invoicing & time tracking.
</p>
<a class="header__main__button" href="#">TRY IT FREE NOW!</a>
<p class="header__main__signin">
Already using Pareto.pm? <span>Sign in</span>
</p>
</div>
</div>
</header>
<section class="contents">
Contents
</section>
<footer class="footer">
Footer
</footer>
</body>
</html>
Use display: grid to the parent class, and to align it vertically use align-content: center
For reference go through this link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
I am working on a little project. Until now everything went well, but for one reason or another, when I am making my second page, it will only load a part of the CSS (everything until calendar). I tried to put it in another CSS file and link the two files to the HTML file, and that works, but I would like to have all my CSS in just one file.
Can you help me?
Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="headerWrapper">
<h1>Volg ons leven op deze website!</h1>
</div>
</div>
<div class="timeline" id="timeline">
<div class="timelineWrapper">
<h3>Tijdlijn</h3>
<div class="timelinegrid">
<img src="./assets/pictures/family_pic.jpg">
<p>Zeeland - 2018</p>
<p>Welkom Tuur in de familie - 11/01/2018</p>
<img src="./assets/pictures/tuur.jpg">
<img src="./assets/pictures/verjaardag-marie-2017.jpg">
<p>Verjaardag Marie - 2017</p>
<p>Verjaardag Eline - 2016</p>
<img src="./assets/pictures/verjaardag-eline-2016.jpg">
</div>
</div>
</div>
</body>
</html>
calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="calendar">
<div class="calendarWrapper">
<h3>Kalender</h3>
<div class="cal">
<!-- CalendarLink -->
</div>
</div>
</div>
style.css
#import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
html {
font-family: 'Oswald', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
/* Header */
.header {
background-image: url(assets/pictures/hero_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
max-width: 100%;
}
.nav {
width: 100%;
height: 100px;
}
.navWrapper {
width: 85%;
margin: auto;
}
.navWrapper img {
height: 35px;
padding-top: 32.5px;
}
.right {
padding-top: 32.5px;
float: right;
}
#homepage, #calendar, #photoalbum, #lists, #recipes {
color: #000;
font-weight: bold;
font-size: 16px;
margin-right: 35px;
letter-spacing: 0.6px;
}
.headerWrapper {
padding-top: 235px;
}
.headerWrapper h1 {
font-size: 8vw;
font-weight: bold;
color: #4A4A4A;
text-align: center;
letter-spacing: 3.33px;
}
/* Timeline */
.timeline {
width: 100%;
}
.timelineWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.timelineWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
.timelinegrid {
margin-top: 40px;
display: grid;
grid-template-columns: 500px 500px;
grid-auto-rows: auto auto;
grid-gap: 2%;
align-items: end;
justify-content: center;
}
.timelinegrid img {
width: 100%;
}
.timelinegrid p {
font-size: 30px;
color: #4A4A4A;
}
/* Calendar */
.calendar {
width: 100%;
}
.calendarWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.calendarWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
Your css has an error. In .timelinegrid(line 98), you have align-items set to end.
If you fix this, the css should fully load.
https://www.w3schools.com/cssref/css3_pr_align-items.asp
Trying to rebuild a part of the Pixar site, having trouble with the logo. Is there a way to resize the image in CSS? Or do I have to resize the image in Photoshop and add it that way?
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Pixar Mock Up</title>
</head>
<body>
<header>
<div class="logo logo-size"></div>
<nav class="nav">
<ul>
<li>FEATURE FILMS</li>
<li>SHORT FILMS</li>
<li>CAREERS</li>
<li>EXTRAS</li>
<li>TECHNOLOGY</li>
<li>ABOUT</li>
</nav>
</header>
<main>
<div class="hero hero-size">
<div class="hero-text">
<h2>FEATURE FILMS</h2>
</div>
</div>
<div class="films">
<div class="posters">
<img src="images/incredibles2.jpg"alt="The Incredibles">
<p class="poster1">The Incredibles</p>
</div>
<div class="posters">
<img src="images/coco.jpg" alt="Coco">
<p class="poster2">Coco</p>
</div>
<div class="posters">
<img src="images/cars.jpg" alt="Cars3">
<p class="poster3">Cars</p>
</div>
</div>
<div class="posters">
<img src="images/dory.jpg"alt="Finding Dory">
<p class="poster1">Finding Dory</p>
</div>
<div class="posters">
<img src="images/dino.jpg" alt="The Good Dinosaur">
<p class="poster2">The Good Dinosaur</p>
</div>
<div class="posters">
<img src="images/inside.jpg" alt="Inside Out">
<p class="poster3">Inside Out</p>
</div>
</main>
</body>
</html>
CSS CODE:
body {
max-width: 1700px;
min-width: 700px;
background-color: white;
padding: 0px;
margin: 0px;
}
.logo {
margin: 25px 80px;
background: url('../logo/logo.jpg') left no-repeat;
}
.logo-size{
width: 170px;
height: 51px;
}
.hero {
background: url('../hero/hero.jpg');
background-position: center;
background-repeat: no-repeat;
}
.hero-size {
height: 550px;
width: 100%;
}
.hero-text {
font-size: 42px;
color: white;
float: left;
position: relative;
top: 175px;
left: 500px;
letter-spacing: 4px;
}
.nav li {
display: inline;
}
.nav ul {
margin: 0px 100px;
}
.nav a {
color: black;
position: fixed;
position: relative;
bottom: 61px;
float: right;
padding-right: 30px;
text-decoration: none;
}
.posters {
text-align: center;
padding: 0px;
float: right;
display: block;
width: 30%;
position: relative;
right: 80px;
margin: 80px 0px;
}
.posters img{
height: 275px;
width: 200px;
}
The Size/Width I want
The Full Image
To sum up, I am trying to get the image found in the second link to fit in the width defined in the first image (width set to 170px). I have tried setting it to 'width: auto', but that did not work.
It would be better if you use img instead of a div with a background for the logo, you'll have more control,
<img src="../logo/logo.jpg" />
But if you have to use a div, add background-size:cover to .logo
https://www.w3schools.com/cssref/css3_pr_background-size.asp
I'm learning html/css/javascript by myself, and I've come across a dilemma. For some reason the content of the page is overlapping the header to the page, making the header useless. How do I make the header go on top of the content. I'll include pictures below of the code and how to page looks.
html file,
<!DOCTYPE html>
<html>
<head>
<title>Abismuth Homepage</title>
<link rel="stylesheet" type="text/css" href="../../css/styles.css">
<meta charset="UTF-8">
<meta name="description" content="Homepage">
<meta name="keywords" content="Homepage">
<meta name="author" content="Riley">
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="../aboutus.html">Abismuth</h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Latest story</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<h1><u>Welcome</u></h1>
<p>Demo Text</P
</div>
</div>
<div class="footer">
<div class="container">
<div class="logo">
<h1></h1>
</div>
</div>
</div>
</body>
</html>
Css file,
body {
margin: auto;
background: linear-gradient(132deg, #ffffff, #000000);
background-size: 1500% 1500%;
animation: BackgroundGradient 30s ease infinite;
}
#keyframes BackgroundGradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
.container {
width: 955px;
margin: 0 auto;
word-wrap: break-word;
}
.header {
text-align: centre;
background: #D50000;
width: 100%;
height: 50px;
top: 0;
position: fixed;
}
.footer {
text-align: centre;
background: #D50000;
width: 100%;
bottom: 0;
position: fixed;
}
.logo {
float: left;
color: white;
font-family: 'Helvetica', 'Arial', 'sans-serif';
font-size: 15px;
}
.content {
text-align: center;
padding-top: 50px;
font-family: 'Helvetica', 'Arial', 'sans-serif';
background-color: #ffffff;
opacity: 0.5;
}
a {
text-decoration: none;
color: white;
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
}
.nav {
float: right;
font-family: 'Helvetica', 'Arial', 'sans-serif';
}
Since your nav is position: fixed, other elements on the page will not be aware of it's layout and will overlap it, and it will overlap other elements.
Since you've defined a height to the nav, you can use that height as the padding-top on body to offset the nav and start the content below it.
body {
margin: auto;
background: linear-gradient(132deg, #ffffff, #000000);
background-size: 1500% 1500%;
animation: BackgroundGradient 30s ease infinite;
padding-top: 50px;
}
#keyframes BackgroundGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container {
width: 955px;
margin: 0 auto;
word-wrap: break-word;
}
.header {
text-align: centre;
background: #D50000;
width: 100%;
height: 50px;
top: 0;
position: fixed;
}
.footer {
text-align: centre;
background: #D50000;
width: 100%;
bottom: 0;
position: fixed;
}
.logo {
float: left;
color: white;
font-family: 'Helvetica', 'Arial', 'sans-serif';
font-size: 15px;
}
.content {
text-align: center;
padding-top: 50px;
font-family: 'Helvetica', 'Arial', 'sans-serif';
background-color: #ffffff;
opacity: 0.5;
}
a {
text-decoration: none;
color: white;
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
}
.nav {
float: right;
font-family: 'Helvetica', 'Arial', 'sans-serif';
}
<!DOCTYPE html>
<html>
<head>
<title>Abismuth Homepage</title>
<link rel="stylesheet" type="text/css" href="../../css/styles.css">
<meta charset="UTF-8">
<meta name="description" content="Homepage">
<meta name="keywords" content="Homepage">
<meta name="author" content="Riley">
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="../aboutus.html">Abismuth</h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Latest story</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<h1><u>Welcome</u></h1>
<p>Demo Text</P </div>
</div>
<div class="footer">
<div class="container">
<div class="logo">
<h1></h1>
</div>
</div>
</div>
</body>
</html>