so I'm coding my first site using HTML, CSS, and JS.
I've run into some issues in the past, but I've been able to use various Stack Overflow threads, youtube videos, etc, to get through, however, I have been trying to fix an issue with my footer for about an hour.
At first, the footer would move to the right to make room for the text when resizing the window. After doing some shenanigans with the position: absolute; and position: relative; I was able to make it stay at the bottom and not move to the right.
Now my text that is being shifted ends up behind the header... Here is the HTML and CSS code for one of my pages.
This is the entire HTML file:
<!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">
<title>Writers Guild</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<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=Mukta:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
<a href="/" id="navbar__logo"><i class="fas fa-pen-nib"></i> Writers Guild</a>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
<a href="/" class="navbar__links">Home</a>
</li>
<li class="navbar__item">
<a href="/members.html" class="navbar__links">Members</a>
</li>
<li class="navbar__item">
<a href="/about.html" class="navbar__links">About</a>
</li>
<li class="navbar__item">
<a href="/works.html" class="navbar__links">Works</a>
</li>
<li class="navbar__item">
<a href="/member-login.html" class="navbar__links">Login</a>
</li>
<li class="navbar__btn">
<a href="/sign-up.html" class="button">Sign Up</a>
</li>
</ul>
</div>
</nav>
<!-- Main About Page -->
<!-- Style settings to utilize within the text -->
<style>
.centeralign {
text-align: center; /*creation of a style that allows .centeralign when creating any text type */
}
</style>
<style>
.indented {
padding-left: 25pt;
padding-right: 25pt;
}
</style>
<style>
p {
text-indent: 30pt
}
</style>
<div class="about__section">
<div class="about__container">
<div class="about__content-section">
<div class="about__title">
<br>
<h1 class="centeralign">About the Writers Guild</h1>
</div>
<div class="indented">
<br>
<div class="intro">
<p>The Writers Guild is a club at St. Joseph's High School which encourages students to further their skills with the written word.</p>
</div>
<br>
<div class="explanation">
<br>
<p>The Guild is officially run by: Mrs. Rancourt</p>
<p>When arriving at a common session, everyone will arrive and take their seats.
Depending on the week, two main things will happen:</p>
<ul>
<br>
<li>Everyone will have the opportunity to share their personal works or
a work of someone they enjoy. Everyone else present will offer feedback, comments and impressions,
and constructive criticism (if it is wanted).
</li>
<br>
<h4><em>OR</em> </h4>
<br>
<li>Everyone present can contribute any writing prompts they may have found or come up with,
and, following the conclusion of this, there will be a brief 30 minute writing session. Once the time
is up, everyone will share what they have written, and feedback will follow.
</li>
</ul>
</div>
<div class="rules">
<br>
<p>At the Writers Guild, there are a set of <a href="/rules.html">rules</a> that each and every member must follow.
These rules are more with regard to respect for each other than they are about anything else.
</p>
</div>
</div>
</div>
<div class="about__image-section">
<img src="/images/fancy-writer.jpeg" alt="">
</div>
</div>
</div>
<!-- FOOTER -->
<div class="footer__wrapper">
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
<h2>Information</h2>
<a href="/about.html">About the Guild</a>
<a href="/rules.html">Rules</a>
<a href="/members.html">Members</a>
</div>
<div class="footer__link--items">
<h2>Contact</h2>
<a href="/sign-up.html">Questions/Inquiries</a>
<a href="/website-help.html">Website Support</a>
</div>
<div class="footer__link--items">
<h2>Other</h2>
<a href="/works.html">Uploaded Works</a>
<a href="/member-login.html">Member Registry</a>
</div>
</div>
</div>
<div class="footer__pic">
<a href="/" id="footer__logo"><i class="fas fa-pen-nib"></i>Writers Guild</a>
</div>
<div class="website__rights">
<br>
<h5 class="centeralign"> © SJO Writers Guild 2021. All Rights Reserved. </h5>
<h6 class="centeralign">Website Design and Programming: Jason Mueller</h5>
</div>
</div>
</div>
<script src='app.js'></script>
</body>
</html>
CSS Section:
.footer__wrapper{
position: relative;
}
.footer__container {
background-color: #252525;
padding: 1rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
min-height: 150px;
width: 100%;
}
#footer__logo{
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links{
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper{
display: flex;
}
.footer__link--items{
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 12px;
/* text-decoration: underline; */
}
.footer__link--items > h2 {
color: #f3f3f3;
}
.footer__link--items a {
color: #f3f3f3;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: all 0.3s ease-out;
}
.website__rights {
color: #fff;
}
@media screen and (max-width: 550px){
.footer__links{
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
margin-bottom: 2rem;
}
.footer__link--wrapper{
flex-direction: column;
}
}
@media screen and (max-width: 480px){
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Section for About Page */
.about__section{
width: 100%;
min-height: 100vh;
background-color: #f3f3f3;
}
.about__container{
width: 80%;
display: block;
margin: 0 auto;
padding-top: 25px;
}
.about__content-section{
float: left;
width: 55%;
overflow: auto;
}
.about__image-section{
float: right;
width: 40%;
margin: 30px 10px;
}
.about__image-section img{
width: 100%;
height: auto;
padding-bottom: 2rem;
}
.about__content-section .about__title{
font-size: 19px;
background-color: #0f4061;
background-image: linear-gradient(to top, #8b1b0c 20%, #f7e011 100%);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.about__content-section .indented .intro{
color: #5d5d5d;
font-family: 'Mukta', sans-serif;
font-weight: 600;
font-size: 20px;
}
.about__content-section .indented .explanation {
font-family: sans-serif;
line-height: 1.25;
}
.about__content-section .indented .explanation h4{
text-align: center;
}
.about__content-section .indented .explanation {
font-size: 18px;
}
.about__content-section .indented .rules {
font-size: 18px;
font-family: 'Kumbh Sans', sans-serif;
}
.about__content-section .indented .rules p a {
text-decoration: none;
}
.about__content-section .indented .rules p a:hover {
color: rgb(51, 79, 201)
}
(For context, in case you're wondering what this is all for, my old English teacher from High School asked me to create a site for her Writers Guild)
If it would help to put the entire CSS file and add the JS file so that the site can be run properly, let me know. Not sure how easy of a fix this is with all of my jumbled code. Been using dozens of different sources, and my overall organization and naming conventions, etc, is probably horrid.
I understand the file is quite large and it's a lot to pick through, but any help would be much appreciated.
Thank you
Aucun commentaire:
Enregistrer un commentaire