3 Correct answers
Add this for fixed navigation on top.
You've got left & right margins on everything. Start by removing this. You don't need it.
html, body, h1, p, ul {margin: 20px 20px 0px 20px;padding: 0px;}
Increase nav width from 40% to 100% (full page width).
It's useless having an empty <header> tag on the page. Get rid of it.
But keep in mind that the <header> content on your landing page is quite possibly the MOST IMPORTANT piece of real estate on your site. It's the first impression people have of you and frequently appears in search engine results. If you're going to use it, use it properly.
<body>
<nav>
About
Gallery
Contact
</nav>
<header>
<h1>XYZ Website Name</h1>
<h2>Some pithy slogan</h2>
<p>Brief description of the site and wha
...
10
Replies
The problem is caused by position: absolute. DO NOT use absolute positioning in basic layouts. Absolute positioning is for special use cases only.
Try this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertically Centered with CSS Flexbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
/** font size grows 1px for every 100px of viewport width **/
font-size: calc(16px + 1vw);
/** line-height grows with font size **/
line-height: calc(1.1em + 0.5vw);
background: url(https://placeimg.com/1200/1200/nature) center center fixed;
background-size: cover;
}
main {
background: rgba(0, 0, 0, 0.60);
width: 75%;
color: #EAEAEA;
padding: 10%;
text-align:center;
}
</style>
</head>
<body>
<main>
<h3>Welcome to CSS Flexbox</h3>
<p>This is horizontally and vertically centered.</p>
</main>
</body>
</html>
Hope that helps.
Add this for fixed navigation on top.
My Navigation bar will not run across the entire page?
@charset "utf-8";
html, body, h1, p, ul {
margin: 20px 20px 0px 20px;
padding: 0px;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
body {
Background: url("working graphics/web1-home-background.jpg")
center center fixed;
background-size: cover;
}
main {
background: rgba(0, 0, 0, 0.60);
width: 75%;
color: #EAEAEA;
padding: 10%;
text-align:left;
}
nav{
position: fixed;
top: 0;
width: 40%;
overflow:hidden;
text-align: center;
background-color: #F18307;
transition: 1s background-color;
}
nav a {
color: white;
text-decoration: none;
padding: 3%;
font-size: 1.7rem;
font-weight: bold;
font-family: 'Vidaloka', serif;
}
nav a:hover, nav a:active, nav a:focus {
color: white;
text-decoration: underline;
background-color: crimson;
transition: 1s background-color;
}
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Project One</title>
<link href="webpage layout.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Vidaloka&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<a href="about.html">ABOUT</a>
<a href="about.html">GALLERY</a>
<a href="contact.html">CONTACT</a>
</nav>
</header>
<main>
<p>
HELLO THIS IS MY WEBPAGE!
</p>
</main>
</body>
</html>
AdChoices