I need to set the footer at the bottom of the page. I changed the footers position from absolute, to fixed to relative, and it will either be sent high up the page or stay atop my aside element.
I have tried placing my footer in and outside my body element. This is unusual and not sure what else to do.
I am also open to other issues or bad style with my code.
@charset "utf-8"
/*
Portfolio Project 1
HTML Styles
Author: John Smith
Date: 4/10/2021
*/
div.wrapDiv {
width: 960px;
text-align: center;
position: fixed;
margin: auto;
}
figure img {
width: 20%;
float: right;
}
body {
background-color: rgb(204, 195, 151);
font-family: Georgia, serif;
}
aside {
position: absolute;
border-radius: 15px;
}
aside h2 {
color: rgb(178, 102, 255);
background-color: rgb(135, 206, 235);
}
aside.asideText {
font-size: 0.75em;
font-style: italic;
}
aside ul {
list-style-type: square
}
section aside {
position: absolute;
}
h1 {
font-size: 1.5em;
}
footer address {
font-size: 0.75em;
text-align: center;
}
footer {
background-image: url(coffeelaptop.jpg);
position: absolute;
bottom: 0;
width: 960px;
border: 3px solid rgb(145, 153, 235);
}
header ul {
list-style-type: none;
}
header a {
color: rgba(138, 115, 156, 61);
}
header a:hover {
color: rgba(216, 195, 232, 91)
}
header nav {
float: left;
margin: 20px;
padding: 10px;
}<!doctype html>
<html>
<!--
Portfolio Project 1
Author: John Smith
Date: 4/10/2021
-->
<head>
<meta charset="utf-8">
<meta name="description" content="Web Designer for Hire: John Smith">
<meta name="keywords" content="WebDesign, JohnSmith, Website, Create, Design">
<title>John Smith: Web Design Porfolio</title>
<link href="normalize.css" rel="stylesheet" />
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div id="wrapDiv">
<a name="top"></a>
<figure img>
<a href="portfolio_resume.html"><img src="y9DpT.jpg" id="homePicture" alt="Place Holder" /></a>
</figure>
<header>
<h1>John Smith - Web Designer</h1>
<nav>
<ul>
<li><a href="portfolio_home.html">Home</a> </li>
<li><a href="portfolio_projects.html">Projects</a></li>
<li><a href="portfolio_resume.html">Resume</a></li>
<li><a href="portfolio_contacts.html">Contact</a></li>
</ul>
</nav>
</header>
<section id=MainFocus>
<article>
<h2>About Me</h2>
<p>Hello, I John Smith and I am an aspiring Web Designer! I am working towards an associate degree for Software Development. I’d like to expand my skills and network with clients like you! We will make a great website together, at a Low Price!</p>
<p>I was born and raised in [Redacted], [Redacted]. I was raised on computers since I was little. I am working on a two-year degree at Local Technical College, while attending free online classes. These classes range from codeacademy.com and freecodecamp.org.
I am eager to learn more about software development and web design to be able to help people, from entrepreneur to big businesses be able to prosper! </p>
<p>My dream is too improve my webdesign and software developer skills everyday. I believe webdesign is a great way working towards fullfilment as you help realize other peoples goals. Web Design simply put is my passion.</p>
</article>
<aside class="asideText">
<h2>I am here for You!</h2>
<p class="asideText">From business websites to vlogs I can make it for your business or personal needs!</p>
<h2>Skills</h2>
<ul>
<li><strong>Responsibility</strong>: I put forth qualtiy work and deliver them to my clients by the times they need!</li>
<li><strong>Communication</strong> I will work with both my clients and other developers to deliver the best and most appropriate product possible.</li>
<li><strong>Innovation</strong> I will not only give you what you need, but I will go the extra mile and try to make your website more effiencent and well designed!</li>
</ul>
</aside>
</section>
</div>
<footer>
<address>Example Street 123 City, State Zip</address>
<a href=https://stackoverflow.com/questions/ask>LinkedIn Profile
</a>
<br>
<a href=example@gmail.com>Email Me</a>
<br>
<a href="#top">Back to top of page</a>
</footer>
</body>
</html>