How do I make text appear outside of my header/footer?
Question
I'm a beginner at CSS/HTML, and I'm working on a small project. I found the code to make a header and footer online, and text will appear in these areas as intended, but no text will appear in the non-header portion of the page. Any advice? (Code for reference, the second one is my stylesheet.)
<DOCTYPE! html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="en-US">
<head>
<link rel="stylesheet" href="css attempt">
<title>Prism Outreach</title>
</head>
<body>
<div class="fixed-header">
<h1><a href="index.html">Organization</a></h1>
<div class="container">
<nav>
<a href="#">About</a>
<a href="#">Resources</a>
<a href="#">Donate</a>
<a href="#">Projects</a>
<a href="#">Contact Us</a>
</nav>
</div>
</div>
<!--I have attempted to put <p> here, but the text does not appear.-->
<div class="fixed-footer">
<div class="container">Insert Text Lol</div>
</div>
</body>
body {
padding-top:60px;
padding-bottom: 40px;}
p {
color:black;}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
background: rgb(0, 0, 0);
padding: 10px 0;
color: aliceblue;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: large;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
.fixed-header {top: 0;}
.fixed-footer {bottom: 0;}
.container {
width: 100%;
margin: 0 auto;}
nav a {
color: #fff;
text-decoration: none;
padding: 7px 25px;
display: inline-block}
1 answers
solution1
0 ACCPTED 2022-12-14 04:59:46
You've got to close your header element
<body>
<div class="fixed-header">
<h1><a href="index.html">Organization</a></h1>
<!-- You needed this closing tag -->
</div>
<div class="container">
<nav>
<a href="#">About</a>
<a href="#">Resources</a>
<a href="#">Donate</a>
<a href="#">Projects</a>
<a href="#">Contact Us</a>
</nav>
</div>
</div>
<div class="fixed-footer">
<div class="container">Insert Text Lol</div>
</div>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I keep my footer text from appearing outside my footer
How do I fix my text to make it appear on one line?
How do I make the logo icons to appear on the right side of my footer?
How do I make the text in the header of my table not bold?
How do I make my logo button appear in the middle of a header element
How do I make a 2 column layout with a fixed header and footer in CSS?
How do I store my websites header and footer in one location?
How do I make the text my button toggles to appear right next to my button instead of on a new line?
How do I make my title and footer visible on my webpage?
How do I make my footer sit at the bottom of my content?
Related Tags