I am trying to get an image, some text, and a form that are in a container div to be centered instead of left justified, but when I try to float the image it just goes right or left and the text gets all screwed up.
.header, .navBar, .pageTitle {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}
footer {
background-color: #bfd8d8;
position: absolute;
bottom: 0px;
width: 100%;
font-size: 15px;
border: 1px solid black;
}
nav, h1, h2 {
font-family: arial, sans-serif;
}
nav a:hover {
background-color: #006400;
}
nav a {
color: white;
text-decoration: none;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100vh;
position: relative;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.currentNav {
background-color: #006400;
}
.emailStyle {
font-weight: bolder;
}
.footerSpacer {
height: 50px;
}
.header {
color: white;
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: white;
}
.navBar {
background-color: #228B22;
padding: 10px;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
background-color: #bfd8d8;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: georgia, serif;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 50%;
max-width: 50%;
}
.table {
background: #006464;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: #bfd8d8;
border: 1px solid black;
padding: 8px;
}
<!DOCTYPE html>
<! Must have tables, forms, multimedia, and links >
<head>
<title>Home - The Singular Effect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav class="navBar"> <a class="currentNav" href="index.html">Home</a> Music Photos Poetry About </nav>
<h2 class="pageTitle"> Get the Full Effect! </h2>
<img class="resizeHome" src="image/homepage.jpg" alt="Image of Daniel Adams">
<h3 id="welcomeFont"> Welcome to the home of The Singular Effect! </h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span> <br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
<div class="footerSpacer"> </div>
<footer> © 2016, Chris Hughes - SNHU. Contact me at <span class="emailStyle">christopher.hughes1#snhu.edu</span> </footer>
</div>
</body>
Add this to your CSS:
#container {
text-align: center;
}
And if you don't want all your content centered in this way, just wrap the content you do and give the container a text-align: center.
add text-align:center in your body tag. Try it.
body {
text-align:center;
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}
Related
I've tried having it be an unordered list item without it being a paragraph element, I've tried putting it in a div as well. For some reason I'm just unable to get those to be stacked with the smaller "test" under the bigger TestTest. Seems to work in the rest of the page if I have it as a separate div, just not sure of the reason why it's not working in the footer.
Here is my HTML and CSS:
body {
background-color: #414141;
/* background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden; */
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 0px;
font-family: Arial;
}
#font-face {
font-family: ubuntu-medium;
src: url(/fonts/ubuntu-medium.ttf);
}
#media (max-width: 7680px) {
body {
background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden;
}
}
#media (max-width: 800px) {
body {
background: url(/images/mobilebackground.jpg) no-repeat center center fixed;
}
}
#NavSection {
margin-top: 3%;
}
#MainNav {
position: left;
margin-left: 11%;
}
#Menu li {
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#Menu a:hover {
text-decoration-color: #414141;
text-underline-offset: 0.12em;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 4px;
box-shadow: 0px 13px 4px -3px rgba(65, 65, 65, 0.616);
}
hr {
margin: 0px;
border: 2px solid red;
width: auto;
}
a {
color: #414141;
text-decoration: none;
}
a:active {
color: #ff0000;
}
#SiteTitle {
margin-left: 0.5%;
}
#TestTest {
font-family: Impact;
font-weight: normal;
font-size: 30px;
color: #ffffff;
text-decoration: underline;
text-decoration-color: #414141;
text-decoration-thickness: 2px;
text-underline-offset: 0.08em;
}
#Japan {
color: red;
}
ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#SecondNav {
float: right;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
font-size: 15px;
margin-right: 11%;
}
#SecondMenu a:hover {
text-decoration: overline 4px solid #414141;
box-shadow: 0px -13px 4px -3px rgba(65, 65, 65, 0.616);
}
#SecondMenu li {
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#ContentDiv {
width: 70%;
height: 40%;
position: absolute;
top: 30%;
left: 15%;
transform: translateX(0%);
background-color: rgba(255, 0, 0, 0.4);
}
#ContentSection {
width: 90%;
height: 70%;
position: absolute;
top: 15%;
left: 5%;
background-color: rgba(255, 255, 255, 0.9);
}
#Content {
margin: 3%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 7%;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
}
#FooterTitle {
float: right;
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
float: right;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div id="NavSection">
<div id="TopNav">
<nav id="MainNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<hr />
<div id="SecondNavSection">
<nav id="SecondNav">
<ul id="SecondMenu">
<li>Archives</li>
<li>Categories</li>
</ul>
</nav>
</div>
<div id="SiteTitle">
<h1 id="TestTest">Test<span id="Japan">Test</span></h1>
</div>
</div>
<div id="ContentDiv">
<main id="ContentSection">
<div id="Content">
<p>Content goes here.</p>
</div>
</main>
</div>
<footer>
<p id="FooterTitle">Test <span id="FooterJapan">Test</span></p>
<p id="FooterCaption">Test</p>
</footer>
</body>
</html>
You should not be using float for FooterTitle and FooterCaption -- So remove the float:right;
Then you can add text-align:right; to the <footer> CSS
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 7%;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
text-align:right;
}
#FooterTitle {
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
The rest .. Like height and getting everything to show in the footer I trust you can do :) -- Personally, I think height:7%; is a bad idea .. Better to give it a static height height, or a height that statically will change inside media queries. --
OR You could scrap the text align right to get it to align left but still float right like:
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
}
#FooterTitle {
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
#footer-right-content{
float:right;
text-align:left;
width:100px;
}
HTML
<footer>
<div id="footer-right-content">
<p id="FooterTitle">Test <span id="FooterJapan">Test</span></p>
<p id="FooterCaption">Test</p>
</div>
</footer>
I am having a little bit of trouble figuring this out.
On the site I am working on, in between the two sections and footer, there seems to be a blank space with the background color showing, and I can't figure out how to get rid of that so the sections and footer sit on top of each other with no space between them. If someone could check out the code, it'll be much appreciated.
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: #5CDB95;
font-family: 'Gamja Flower', sans-serif;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: black;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-left: 20px;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
margin-bottom: 40px;
text-align: center;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
text-align: center;
}
footer {
background-color: black;
padding: 80px 0 80px;
margin: 50px 0px 50px;
text-align: center;
font-size: 20px;
}
<!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 href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
<title>Raijin Studios</title>
</head>
<header>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle" onmouseover="changeColor(this)" onmouseout="changeColor(this)">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
</div>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" maxlength="256" required="" class="field"><input class="button" type="submit" value="Get Notified"></form>
</div>
</header>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns to the
help of a strange girl who finds him and helps him remeber who he was and where he came from.</p>
</section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>
<footer>
<p>©Raijin Studios 2018.</p>
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
1) you can just delete margins for sections and increase paddings instead;
OR
2) You can make body background white, and than change add background color and padding bottom to sign-up-form
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: 'Gamja Flower', sans-serif;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: black;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-left: 20px;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
font-size: 16px;
text-align: center;
background: #5CDB95;
padding-bottom: 50px;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
margin-bottom: 40px;
text-align: center;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
text-align: center;
}
footer {
background-color: black;
padding: 80px 0 80px;
margin: 50px 0px 50px;
text-align: center;
font-size: 20px;
}
<!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 href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
<title>Raijin Studios</title>
</head>
<header>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
</div>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" maxlength="256" required="" class="field"><input class="button" type="submit" value="Get Notified"></form>
</div>
</header>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns to the
help of a strange girl who finds him and helps him remeber who he was and where he came from.</p>
</section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>
<footer>
<p>©Raijin Studios 2018.</p>
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
Use Margin for section margin: 0px;
There you go.
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: #5CDB95;
font-family: 'Gamja Flower', sans-serif;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: black;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-left: 20px;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
font-size: 20px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
text-align: center;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
padding: 80px 0 80px;
background-color: white;
font-size: 20px;
text-align: center;
margin-top:-50px;
}
footer {
background-color: black;
padding: 80px 0 80px;
margin: 50px 0px 50px;
text-align: center;
font-size: 20px;
}
I just started coding CSS and i am very mad because my login form in the header is going below my contact us nav link on smaller screens then my desktop. Can anyone tell me why? HTML & CSS BELOW
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Site Description">
<meta name="keywords" content="Site Keywords">
<title>AffAttraction | Performance Based Marketing Network</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/showcase.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>AffAttraction</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Advertisers</li>
<li>Publishers</li>
<li>About Us</li>
<li>Contact Us</li>
</nav>
<div id="login">
<form action="publishers/login.php" method="post">
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit" class="header_login_btn">Login</button>
</form>
</div>
</div>
</header>
<section id="showcase">
<div class="container">
<h1><span class="highlight">Performance</span> Based Marketing</h1>
<p>AffAttraction will help you make money from your Websites, Apps, Games, and More!</p>
</div>
</section>
</body>
</html>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: : 1.5;
margin: 0;
padding: 0;
background-color: #F4F4F4;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
.header_login_btn {
color: #FFFFFF;
background-color: #00CF03;
width: 70px;
height: 35px;
margin-top: 10px;
border: #00CF03 2px solid;
border-radius: 2px;
}
.header_login_btn:hover {
color: #FFFFFF;
background-color: #42DB4C;
width: 70px;
height: 35px;
margin-top: 10px;
border: #42DB4C 2px solid;
border-radius: 2px;
}
/* Header */
header {
color: #FFFFFF;
background-color: #418DD9;
padding-top: 15px;
min-height: 50px;
}
header a {
color: #FFFFFF;
text-decoration: none;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding-right: 20px;
padding-left: 20px;
}
header #branding {
float: left;
font-weight: bold;
}
header #branding h1 {
margin: 0;
}
header nav {
float: center;
padding-top: 10px;
}
header a:hover {
color: #42DB4C;
}
header #login {
margin-top: -15px;
float: right;
}
header #login input {
height: 25px;
width: 110px;
border: #FFFFFF;
border-radius: 8px;
padding: 5px;
float: none;
}
/* Showcase */
#showcase {
color: #FFFFFF;
min-height: 500px;
background: url('../img/cover.jpg') no-repeat;
text-align: center;
}
#showcase h1 {
margin-top: 100px;
font-size: 50px;
font-weight: bold;
}
#showcase p {
font-size: 30px;
}
#showcase .highlight {
color: #42DB4C;
}
Any help is appreciated!
(1) In your css file, you should set header #login margin-top to -35px.
header #login {
margin-top: -35px;
float: right;
}
（2）Use position:absolute to solve the problem
header {
color: #FFFFFF;
background-color: #418DD9;
padding-top: 15px;
min-height: 50px;
position: relative;
}
header #login {
position: absolute;
right: 20px;
transform: translateY(-50%);
}
(3)
header {
color: #FFFFFF;
background-color: #418DD9;
padding-top: 15px;
min-height: 50px;
position: relative;
}
header #login {
position: absolute;
top: 50%;
right: 20px;
margin-top: -22.25px;
}
So I know that there are other results here that are for this question, however I have a relatively "finished" code which I don't want to mess with too much if I can avoid it.
Basically I have everything on my website looking just the way I want it to, except that on larger displays the footer doesn't stick to the bottom of the screen, and there is this big ugly gap between my footer and the bottom of the screen.
Below are my index and css files. The footer element has been jostled around between the end tags, to no effect. I had it outside of my main body of content and tried bottom: 0; with position: absolute; and it just caused the right end of the footer to shoot off outside of the width I specified in my container.
.header,
.navBar,
.pageTitle {
margin: 0px;
padding: 0px;
}
body {
font-size: 20px;
background-color: #006464;
}
html,
body,
#container {
min-height: 100vh;
}
footer {
background-color: #006400;
}
nav,
h1,
h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100%;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav id="navBar">
Home
Music
Photos
Poetry
About
</nav>
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span>
<br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
</div>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</body>
You could try using css-tables. I tested it and seems to work as requested. The footer also expands if you add content to it.
Under body add
margin:auto;
display:table;
and under footer
display:table-row;
position:fixed;
width:1000px;
bottom: 0;
Also in this case you should probably remove the margin from the #container as it is defined in the body already.
Where I learned the trick: http://colintoh.com/blog/display-table-anti-hero#sticky-footer
I added 1 more div to target all the body content except footer so I can set the height for that element. Here are code that works:
<!DOCTYPE html>
<! Must have tables, forms, multimedia, and links >
<head>
<title>Home - The Singular Effect</title>
<link rel="stylesheet" href="css/style.css">`enter code here`
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 20px;
background-color: #006464;
}
html, body, #container {
height: 100%;
margin: 0;
}
footer {
margin-top: 50px;
background-color: #006400;
margin-bottom: 0px;
bottom: 0;
}
nav, h1, h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100%;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout{
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome{
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos{
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
.bodyContetExceptFooter{
padding: 20px;
min-height: 90%;
margin: 0 auto -50px;
}
</style>
</head>
<body>
<div id="container">
<div class="bodyContetExceptFooter">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<div id="navBar">
<nav>
Home
Music
Photos
Poetry
About
</nav>
</div>
<div id="divContent">
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3> <br>
<form>
<span id="signUp">Sign up for our newsletter!</span> <br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
</div>
</div>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</div>
</body>
</html>
Use relative positioning on body, absolute positioning on footer and position it to left: 0; bottom 0;, also add width: 100%; to footer to fill full width of body.
One last thing is to add padding-bottom: 23px; to body to avoid footer hiding content when the height of browser is less than your content.
.header,
.navBar,
.pageTitle {
margin: 0px;
padding: 0px;
}
body {
font-size: 20px;
background-color: #006464;
position: relative; /* added */
padding-bottom: 23px; /* added, where 23px is the height of the footer */
}
html,
body,
#container {
min-height: 100vh;
}
footer {
background-color: #006400;
position: absolute; /* added */
bottom: 0; /* added */
left: 0; /* added */
width: 100%; /* added */
}
nav,
h1,
h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100%;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav id="navBar">
Home
Music
Photos
Poetry
About
</nav>
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span>
<br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
</div>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</body>
.header,
.navBar,
.pageTitle {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}
html,
body,
#container {
min-height: 100vh;
}
footer {
background-color: #006400;
position: absolute;
bottom: 0px;
width: 100%;
}
nav,
h1,
h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100vh;
position: relative;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
<!DOCTYPE html>
<head>
<title>Home - The Singular Effect</title>
</head>
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" hreF="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav id="navBar">
Home
Music
Photos
Poetry
About
</nav>
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span>
<br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</div>
</body>
I want to sharpen my HTML & CSS skills by recreating the Bootstrap homepage in pure HTML & CSS. I am almost finished, but I seem to be having trouble with my footer. Everything else is positioned the way I would like it, but everything on the footer shoots up to the top and middle of my page. Can anyone tell me what I am missing here?
HTML
<header>
<div class="top-bar">
<p>Aww yeah, Bootstrap 4 is coming!</p>
</div>
<nav>
<div class="nav-bar">
<div class="logo">
Bootstrap
</div>
<div class="left-nav">
<ul>
<li>Getting Started</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
<li>Customize</li>
</ul>
</div>
<div class="right-nav">
<ul>
<li>Themes</li>
<li>Expo</li>
<li>Blog</li>
</ul>
</div>
</div>
<nav>
</header>
</div>
<center>
<main>
<section>
<div class="head-component">
<div class="b-logo">
<p>B</p>
</div>
<div class="short-description">
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
</div>
<div class="download-button">
<button class="dwn">Download Bootstrap</button>
</div>
<div class="current">
<p>Currently v3.3.5</p>
</div>
</div>
</section>
<section>
<div class="mid-section">
<div class="mid-info">
<h2>Designed for everyone, everywhere.</h2>
<p>Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
</div>
<hr class="hz-line" />
<div class="column-left">
<img src="http://getbootstrap.com/assets/img/sass-less.png" />
<h4>Preprocessors</h4>
<p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.</p>
</div>
<div class="column-middle">
<img src="http://getbootstrap.com/assets/img/devices.png" />
<h4>One framework, every device.</h4>
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div>
<div class="column-right">
<img src="http://getbootstrap.com/assets/img/components.png" />
<h4>Full of features</h4>
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div>
<div class="clear"></div>
<hr class="hz-line" />
<div class="github">
<p>Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p>
</div>
<div class="github-button">
<button class="view-git">View the Github Project</button>
</div>
<div class="clear"></div>
<div class="spacer"></div>
<div class="clear"></div>
<div class="photo-section">
<hr class="hrln-full" />
<div class="second-mid-info">
<h2>Built with Bootstrap.</h2>
<p>Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing collection of examples or by exploring some of our favorites.</p>
</div>
<hr class="hz-line" />
<div class="photos">
<img src="http://expo.getbootstrap.com/thumbs/lyft-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/vogue-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/riot-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/newsweek-thumb.jpg" />
</div>
<hr class="hz-line" />
<div class="expo-button">
<p>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
<button class="expo">Explore the Expo</button>
</div>
<hr class="hrln-full" />
</div>
</div>
<div class="clearfooter"></div>
</section>
</main>
<div class="clear"></div>
<footer>
<p>Designed and built with all the love in the world by #mdo and #fat.
<br /> Maintained by the core team with the help of our contributors.
<br /> Code licensed under MIT, documentation under CC BY 3.0.</p>
<ul>
<li>Github</li>
<li>Examples</li>
<li>v2.3.2 docs</li>
<li>About</li>
<li>Expo</li>
<li>Blog</li>
<li>Releases</li>
</ul>
</footer>
</center>
CSS
*, *:before, *:after {
box-sizing: border-box;
}
html, body, #wrap {
height: 100%;
}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #fff;
}
h1 {
font-size: 50px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 22px;
font-weight: 100px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 14px;
}
#container {}
ul {
list-style: none;
}
li {
list-style: none;
display: inline;
padding: 10px;
}
a {
list-style: none;
color: inherit;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
}
main {
padding-bottom: 150px;
display: block;
margin: 0 auto;
}
.top-bar {
margin: 0;
padding: 15px 0;
background-color: #0275D8;
text-align: center;
}
.top-bar p {
color: #fff;
font-size: 15px;
font-weight: 600;
text-align: center;
margin: 0;
}
.top-bar:hover {
margin: 0;
padding: 15px 0;
background-color: #0269C2;
text-align: center;
}
.nav-bar {
background-color: #fff;
position: relative;
color: #583F7E;
display: block;
width: 100%;
height: 50px;
}
.logo {
position: absolute;
font-size: 20px;
font-weight: 700;
color: #583F7E;
padding: 15px;
line-height: 0.8em;
margin-left: 100px;
}
.left-nav {
float: left;
font-size: 15px;
font-weight: 500;
text-align: center;
margin-left: 200px;
}
.right-nav {
float: right;
text-align: right;
font-size: 15px;
font-weight: 500;
margin-right: 120px;
}
.left-nav a:hover {
background-color: #f9f9f9;
}
.right-nav a:hover {
background-color: #f9f9f9;
}
.head-component {
background-color: #583F7E;
height: 700px;
display: block;
margin: 0 auto;
}
.b-logo {
margin: 0 auto;
padding-top: 5px;
width: 160px;
height: 300px;
display: block;
}
.b-logo p {
font-size: 130px;
font-weight: 700;
color: #fff;
border: 1px solid #fff;
border-radius: 25px;
text-align: center;
}
.short-description {}
.short-description p {
font-size: 30px;
color: #fff;
font-weight: 300;
width: 850px;
text-align: center;
display: block;
margin: 0 auto;
padding-top: 40px;
}
.download-button {
padding-top: 40px;
}
.dwn {
background: none;
font-size: 20px;
padding: 15px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.dwn:hover {
background: #fff;
font-size: 20px;
padding: 15px;
color: #583F7E;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.current p {
color: #9781A9;
font-size: 14px;
padding-bottom: 75px;
padding-top: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.mid-section {
height: 100%;
background-color: #fff;
display: block;
margin: 0 auto;
}
.mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
text-align: center;
display: block;
margin: 0 auto;
}
.mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
padding-bottom: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.hz-line {
width: 10%;
color: #f3f3f3;
opacity: 0.5;
}
.column-left {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-left img {
width: 100%;
}
.column-left p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-middle {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-middle img {
width: 100%;
}
.column-middle p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-right {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-right img {
width: 100%;
}
.column-right p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.clear {
clear: both;
}
.github {
padding-top: 15px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
text-align: center;
}
.github p {
font-weight: 400;
font-size: 18px;
color: #555;
padding-bottom: 20px;
text-align: center;
}
.view-git {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.view-git:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.hrln-full {
color: #f3f3f3;
opacity: 0.5;
}
.spacer {
height: 60px;
}
.second-mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
display: block;
margin: 0 auto;
text-align: center;
}
.second-mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
text-align: center;
display: block;
margin: 0 auto;
padding-bottom: 30px;
}
.photo-section {
height: 100%;
display: block;
margin: 0 auto;
}
.photos {
padding: 30px;
padding-left: 115px;
}
.photos img {
width: 23%;
}
.expo-button {
padding-top: 15px;
padding-bottom: 120px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
}
.expo-button p {
font-weight: 300;
font-size: 22px;
color: #555;
padding-bottom: 30px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.clearfooter {
height: 130px;
clear: both;
}
footer {
text-align: center;
bottom: 0;
height: 100%;
left: 0;
width: 100%;
display: block;
margin: 0 auto;
}
footer p {
text-align: center;
}
footer ul {
position: relative;
}
footer li {
color: #489FD6;
}
footer li:hover {
color: #23517C;
text-decoration: underline;
}
footer a {}
From what I can tell I believe its because of two main reasons.
You have set fixed heights for elements with content that is height than the fixed height.
.mid-section {
height: 500px;
background-color: #fff;
margin: 0;
}
.photo-section {
height:500px;
}
The footer has position: absolute but isn't contained by a parent with position: relative. If you would like the footer to stick to the bottom use position: fixed instead.
footer {
text-align: center;
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}