I am trying to place a footer at the center bottom of my page. I have the following css and html but I can't figure out a good way of doing it. Currently the issue is that the footer falls outside of the screenview on loading. Hate that and I think it has to do with the fact that the footer has position:flex. But I set "absolute" it gets messed up (see 2nd picture).
css
body {
background-color: white;
margin-top:3em;
margin-bottom:3vw;
margin-left:12vw;
margin-right:12vw;
font-family:Georgia;
font-size:1em;
color: #4D4D4D;
}
hr {
margin-bottom:3vw;
margin-top:10px;
height:0.08em;
border-width:0;
color:#231F20;
background-color:#231F20;
opacity: 0.2
}
a:link {
color: #0168DA;
text-decoration: none;
font-size:1em;
}
ul {
font-family:Georgia;
}
h3 {
margin-block-end: 0em;
}
p {
margin-block-start: 0.5em;
margin-block-end: 0.5em;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
margin-bottom: 4em;
}
* {
box-sizing: border-box;
}
#media only screen and (min-device-width: 480px) {
body {
margin-left:17vw;
margin-right:17vw;
}
}
/* other */
.menu {
padding-top: 3em;
margin-bottom: 5em;
}
.right {
text-align: right;
}
/* footer */
.footer-basic {
padding:40px 0;
margin-top: 16em;
background-color:#ffffff;
color:#4b4c4d;
bottom: 10px;
text-align: center;
}
.footer-basic ul {
padding:0;
list-style:none;
text-align:center;
font-size:15px;
line-height:1.6;
margin-bottom:0;
}
.footer-basic li {
padding:0 10px;
}
.footer-basic ul a {
color:inherit;
text-decoration:none;
opacity:0.8;
}
.footer-basic ul a:hover {
opacity:1;
}
.footer-basic .copyright {
margin-top:15px;
text-align:center;
font-size:13px;
color:#aaa;
margin-bottom:0;
}
.list-inline {
list-style: none;
padding: 0;
}
.list-inline > li {
display: inline;
margin: 0;
}
html
html>
<head>
{% load static %}
</head>
<body>
<p align="center">
<span style="color:#B02E25;font-size:1.5em;">A Month At A Time</span>
</p>
<div>
<img width="150" height="94" src="https://res.cloudinary.com/giaggi/image/upload/v1613837471/amonthatatime/images/general/calvinandhobbes.png">
</div>
{% for post in latest_posts %}
<div class="post">
<h3> {{post.title | safe}}
<br> <span style="opacity:0.6; font-size:0.8em">{{post.month | safe}} {{post.year | safe}} </span>
</h3>
<p style="opacity: 0.7;"> {{post.whatsapp | safe | truncatewords:50 }} </p>
<div class="right">
<a style="color:#B02E25;" href="/amonthatatime/{{post.year}}/{{post.month}}/" target="">Open</a>
</div>
</div>
<hr>
{% endfor %}
<div style="position:flex; bottom:0.5em;">
<div class="footer-basic">
<footer>
<ul class="list-inline" style="margin:3px" >
<li class="list-inline-item"><a style="font-family:Georgia;color: #0168DA;" href="/amonthatatime/subscribe">Subscribe</a></li>
</ul>
<!-- <p class="copyright">A month at a Time</p> -->
</footer>
</div>
</div>
</body>
</html>
I hope's the result goes acording you're need's
You can use this, i just change the next CSS lines:
.footer-basic {
padding: 10px 0;
margin-top: 1em;
}
body {
background-color: white;
margin-top:3em;
margin-bottom:3vw;
margin-left:12vw;
margin-right:12vw;
font-family:Georgia;
font-size:1em;
color: #4D4D4D;
}
hr {
margin-bottom:3vw;
margin-top:10px;
height:0.08em;
border-width:0;
color:#231F20;
background-color:#231F20;
opacity: 0.2
}
a:link {
color: #0168DA;
text-decoration: none;
font-size:1em;
}
ul {
font-family:Georgia;
}
h3 {
margin-block-end: 0em;
}
p {
margin-block-start: 0.5em;
margin-block-end: 0.5em;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
margin-bottom: 4em;
}
* {
box-sizing: border-box;
}
#media only screen and (min-device-width: 480px) {
body {
margin-left:17vw;
margin-right:17vw;
}
}
/* other */
.menu {
padding-top: 3em;
margin-bottom: 5em;
}
.right {
text-align: right;
}
/* footer */
.footer-basic {
padding: 10px 0;
margin-top: 1em;
background-color:#ffffff;
color:#4b4c4d;
bottom: 10px;
text-align: center;
}
.footer-basic ul {
padding:0;
list-style:none;
text-align:center;
font-size:15px;
line-height:1.6;
margin-bottom:0;
}
.footer-basic li {
padding:0 10px;
}
.footer-basic ul a {
color:inherit;
text-decoration:none;
opacity:0.8;
}
.footer-basic ul a:hover {
opacity:1;
}
.footer-basic .copyright {
margin-top:15px;
text-align:center;
font-size:13px;
color:#aaa;
margin-bottom:0;
}
.list-inline {
list-style: none;
padding: 0;
}
.list-inline > li {
display: inline;
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p align="center">
<span style="color:#B02E25;font-size:1.5em;">A Month At A Time</span>
</p>
<div>
<img width="150" height="94"
src="https://res.cloudinary.com/giaggi/image/upload/v1613837471/amonthatatime/images/general/calvinandhobbes.png">
</div>
<div class="post">
<h3> {{post.title | safe}}
<br> <span style="opacity:0.6; font-size:0.8em">{{post.month | safe}} {{post.year | safe}} </span>
</h3>
<p style="opacity: 0.7;"> {{post.whatsapp | safe | truncatewords:50 }} </p>
<div class="right">
<a style="color:#B02E25;" href="/amonthatatime/{{post.year}}/{{post.month}}/" target="">Open</a>
</div>
</div>
<hr>
<div style="position:flex; bottom:0.5em;">
<div class="footer-basic">
<footer>
<ul class="list-inline" style="margin:3px">
<li class="list-inline-item"><a style="font-family:Georgia;color: #0168DA;"
href="/amonthatatime/subscribe">Subscribe</a></li>
</ul>
<!-- <p class="copyright">A month at a Time</p> -->
</footer>
</div>
</div>
</body>
</html>
So one way to achieve this, would be to add a fixed height to your footer and then a min-height to your content. Something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
min-height: calc(100vh - 4rem);
}
footer {
display: flex;
align-items: center;
justify-content: center;
height: 4rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<main>
<p>Main content goes here</p>
</main>
<footer>
<p>Subscribe</p>
</footer>
</body>
</html>
This just relies on the main content filling up the majority of the page, and 'pushing' down the footer to the bottom. The major con with this method is that you need to set a height on your footer, which may or may not be fine for your needs - that way you can se the height of the main section to calc(100vh - 4rem) where 100vh is the the entire height of the page, less the height of your footer, in this example I made it 4rem (but you could make it whatever you like).
I didn't bother putting all your code in there, but I hope you can work it out from here.
Make sure to use min-height on your content, so that it can grow as you have more content.
Related
I am trying to reengage my knowledge of Html/CSS but I have hit a dead-end as I can not float my navbar to the right while initiating the flex-box to keep items in a row. Also, initial attempts to create the model navbar forced content to go under the navbar and sometimes forced the navbar background to disappear. Could someone maybe revise the code and tell me what next to do.
<div class = "header">
<section class = "logo-section">
<img src = "#" alt= "">
<div class = "logo-writing">
<div><strong> Adakole's test Program </div>
<div>IG: test</div></strong>
</div>
</section>
<div class = "navbar">
<ul>
<li><strong>Home</li>
<li>Contact Us</strong></li>
</ul>
</div>
</div>
<body>
<div> Why is my code not working?</div>
</body>
.header{
background-color: #CCFFFF;
display:flex;
position:sticky;
top:0;
border-radius: 10px;
}
.logo-section{
color:grey;
opacity: 0.5;
font-size: 15px;
font-family: Helvetica, Sans-serif;
margin-left: 10px;
}
.logo-section:hover{
color: #FFCCCC;
opacity: 1;
}
.navbar {
margin-right: 1%;
float:right;
}
.navbar ul{
list-style-type: none;
display:flex;
}
.navbar a{
display:inline-block;
text-decoration: none;
color: grey;
opacity: 0.5;
font-family: sans-serif;
background-color: #DDDDDD;
padding: 10px;
border-radius: 15%;
margin-right: 10px;
}
.navbar a:hover{
background-color: #FFCCCC;
}
Div is a block level element, so it can not have float property. But if you add display: inline; it can have float. Try this;
Edit*
Dude you have some misunderstand of using HTML tags. The snippets will work as you wanted. But you have to understand how HTML tags works. So here is the snippet;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class = "header">
<section class = "logo-section">
<img src = "#" alt= "">
<div class = "logo-writing">
<strong>
<div>Adakole's test Program </div>
<div>IG: kol.eee</div>
</strong>
</div>
</section>
<div class = "navbar">
<ul>
<li><strong>Home</li>
<li>Contact Us</strong></li>
</ul>
</div>
</div>
<div class= "main">
<div id = "title">
<h1> The Death of a Hero</h1>
<h3 id = "name">"Dr. Herman Boulang"</h3>
</div>
</div>
<style>
.header
{
background-color: #CCFFFF;
display:flex;
position:sticky;
justify-content: space-between;
top:0;
border-radius: 10px;
}
.logo-section
{
color:grey;
opacity: 0.5;
font-size: 15px;
font-family: Helvetica, Sans-serif;
margin-left: 10px;
}
.logo-section:hover
{
color: #FFCCCC;
opacity: 1;
}
.navbar
{
margin-right: 1%;
float:right;
}
.navbar ul
{
list-style-type: none;
display:flex;
}
.navbar a
{
display:inline-block;
text-decoration: none;
color: grey;
opacity: 0.5;
font-family: sans-serif;
background-color: #DDDDDD;
padding: 10px;
border-radius: 15%;
margin-right: 10px;
}
.navbar a:hover
{
background-color: #FFCCCC;
}
body
{
background-color: #cddfff;
}
#title
{
text-align: center;
font-size: 40px;
font-family: Helvetica;
color: #ffffff
}
#name
{
margin-top: -40px;
}
</style>
</body>
</html>
You are using flex for header, so floats will never work. You cant look at justify-content, justify-self for alignment. So you have two elements to align, i used justify-content: space-between; so there will be a space between these two elements. But please first learn how to write tags.
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<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">
<title>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.
So I've managed to figure out how to set the footer at the bottom of the webpage.
However, I am running into problems when I have to scroll down a page, or when I zoom and unzoom. The footer doesnt actually stay at the bottom, and it seems to be just sitting in a fixed position to the size of the web page.
This is my html/php coding for the main webpage:
<html>
<head>
<title> First Html! </title>
<link rel="stylesheet" href="http://bdpastudents.com/~t4645202/2015-2016/%22my%20first%20html%20website%22%20assignment/firsthtml.css">
<?php include("header.php"); ?>
</head>
<body>
<?php include ("navigation.php"); ?>
<p> Welcome to my website! Have a look around! Have fun!<br>
Oh and dont forget... Images are not just images.</p>
<br>
<br>
<center>
<img src="https://lh3.googleusercontent.com/-o27DZE9cGwE/VpE4Thx7gSI/AAAAAAAAAIA/mXv9P9UQ3Ew/w488-h650-no/socer%2Bpic.jpeg" height="300" width="200">
</center>
</body>
</html>
<?php include ("footer.php"); ?>`
This is my footer coding:
<div id="footer">
<meta http-equiv="refresh" content="none">
<title> First Html! </title>
<link rel="stylesheet" href="http://bdpastudents.com/~t4645202/2015-2016/%22my%20first%20html%20website%22%20assignment/firsthtml.css">
<?php
// Prints the day, date, month, year, time, AM or PM
echo date("d/m/Y h:i A") ;
echo " Craed!." ;
?>
</div>
And this is my css:
body {
height:100%;
font-family: Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
background-color: #a2a2a2;
}
p {
text-align:center;
color: white;
font-size: 150%;
}
ul {
color: white;
font-size:150%;
}
#fade {
display: none;
}
#head {
background-color: #65659a;
color: white;
text-align: center;
padding: 5px;
}
#footer {
height:50px;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #65659a;
text-align: center;
color: white;
}
#nav {
position: absolute;
line-height:30px;
background-color: #000000;
height:85%;
width:120px;
padding:5px;
}
#nav ul {
margin: 0;
padding: 10px;
color: white;
font-size:125%;
}
#nav ul li {
list-style: none;
padding: 10px;
font-size: 93%;
What am I doing wrong? Is there something that I am missing?
Sorry for the long post, im pretty new to this.
Thanks!
I tried to clean the code a little bit, because it was so messy. I haven´t checked the CSS code so I don´t really know if there´s something wrong with it. Just fixed the HTML. I properly added the <head> section and fixed the problem with the markup for the <footer>
Check out this JSFiddle
Regards!
PS: Also I would suggest studying more about HTML. You can learn a lot here.
Okay here is a shot at it
Create a big container with an id called 'parent'. This div will occupy your whole screen
Make the main container a flexbox
create two flex boxes items in the flexbox
The first div flexbox will have an id 'main' and will hold are your main contents
The second div will have an id called 'footer_container' and will hold all the contents of your footer
This is the css styling for the flexbox with id 'parent' and its children
.parent {
display: flex;
min-height: 95vh; /* Or whatever */
flex-direction:column;
}
.child {
width: 100%;
margin: none;
padding:0px;
}
#footer_container{
flex-grow:0;
height:20%;
margin: auto;
border:solid;
}
#main{
flex-grow:1;
height:80%;
}
I also made some adjustments to your css (Note in you css file change #footer position to relative)
snippet below
body {
height:100%;
font-family: Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
background-color: #a2a2a2;
}
p {
text-align:center;
color: white;
font-size: 150%;
}
ul {
color: white;
font-size:150%;
}
#fade {
display: none;
}
#head {
background-color: #65659a;
color: white;
text-align: center;
padding: 5px;
}
#footer {
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #65659a;
text-align: center;
color: white;
border:solid black;
}
#nav {
position: absolute;
line-height:30px;
background-color: #000000;
height:85%;
width:120px;
padding:5px;
border:solid;
}
#nav ul {
margin: 0;
padding: 10px;
color: white;
font-size:125%;
}
#nav ul li {
list-style: none;
padding: 10px;
font-size: 93%;
}
/*THIS IS THE END OF YOUR CSS STYLE*/
/*FLEXBOX STYLING */
.parent {
display: flex;
min-height: 95vh; /* Or whatever */
flex-direction:column;
}
.child {
width: 100%;
margin: none;
padding:0px;
}
#footer_container{
flex-grow:0;
height:20%;
margin: auto;
border:solid;
}
#main{
flex-grow:1;
height:80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='parent'>
<div class='child' id='main'>1
<?php include("header.php"); ?>
<?php include ("navigation.php"); ?>
<p> Welcome to my website! Have a look around! Have fun!<br>
Oh and dont forget... Images are not just images.</p>
<br>
<br>
<center>
<img src="https://lh3.googleusercontent.com/-o27DZE9cGwE/VpE4Thx7gSI/AAAAAAAAAIA/mXv9P9UQ3Ew/w488-h650-no/socer%2Bpic.jpeg" height="300" width="200">
</center>
</div>
<div class='child' id='footer_container'>
<div id="footer">
<meta http-equiv="refresh" content="none">
<?php
// Prints the day, date, month, year, time, AM or PM
echo date("d/m/Y h:i A") ;
echo " Craed!." ;
?>
</div>
</div>
</div>
I have tried absolute to my footer to stay on the bottom of the page but it covers up the elements that are already at the bottom instead of going underneath them. Fixed does the similar thing except if the page is longer it will cover up elements in the center of the page. I literally just want the backgound color of my div to extend to the bottom of the page and have my logo and text stay in between the div at a set height. Here's what I've got.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css"/>
<title>
</title>
<div class="heading">
<img src="Images/Redbird.gif" alt="Redbird" style="float:left; padding-left:15px; padding-top:15px; width:150px;height:90px">
<form>
Search:
<input type="search" name="Search" style="float:right;">
</form>
<br></br>
<button type="button" id="Login">Login</button>
<button type="button" id="Login">Create New Account</button>
<h1>Technology Blog</h1>
<a href="index.html">
<img src="Images/House.png" alt="Home" style="width:35px; height:35px;">
</a>
</div>
<div class="table">
<table style+"width:100%">
<tr>
<td>Phones & Tablets</td>
<td>Computers & Laptops</td>
<td>Internships</td>
<td>Troubleshooting</td>
<td>Product Ratings & Reviews</td>
</tr>
</table>
</div>
</head>
<body>
<div class="Welcome">
<h2>Welcome</h2>
<p>Welcome to Illinois State University's Technology Blog. Here you can view and post questions, answers, reviews, and other information that is related to technology. This website is for Illinois State University Students ONLY! You must sign in or create an account to view or post on this website.</p>
</div>
<div class="Slideshow">
<img src="Images/DellComps.jpg" alt="Computers" style="width: 397px; height: 298px">
</div>
</body>
<div class="Footer">
<img src="Images/Seal.png" alt="ISU Seal" style="width: 40px; height: 40px; padding-bottom: 10px; padding-top: 10px">
Copyright 2014 # TEC 319 Group <br/> Illinois Sate University
</div>
</html>
heres the CSS. I only need to edit the .Footer tag i believe
html{
height: 100%;
position: relative;
}
h1{
text-align: center;
font-family: impact;
font-style: italic;
}
.heading{
background-color: #CA0000;
height:150px;
}
td{
border:5px solid black;
text-align:center;
background-color:#790000;
color:white;
padding:10px;
font-family: helvetica;
font-style: italic;
font-size: 15px;
}
table{
width:100%
}
.table{
background-color:black;
height:53px;
}
form{
float:right;
}
button{
float:right;
}
.Slideshow img{
display: block;
position: center;
margin-left: auto;
margin-right: auto;
}
.Footer img{
display: block;
position: center;
margin-left: auto;
margin-right: auto;
}
.Footer{
margin-top: 40px;
text-align: center;
background-color: #D8D8D8;
padding-bottom: 20px;
width: 100%;
}
.Preview td{
display: block;
text-align: left;
color: black;
background-color: white;
}
.Blog td{
display: block;
text-align: left;
color: black;
background-color: white;
border: 0px;
}
.newPost h2{
display: block;
position: center;
margin-left:auto;
margin-right: auto;
vertical-align: middle;
color: white;
background-color: #790000;
border: 5px solid black;
border-collapse: collapse;
width: 250px;
text-align: center;
}
h3 {
color: white;
background-color: #790000;
border: 5px solid black;
}
h4{
text-align: left;
font-size: 14pt;
color:#790000
}
.back h2{
display: block;
position: left;
border:5px solid black;
background-color:#790000;
color:white;
padding:10px;
font-family: helvetica;
font-style: italic;
font-size: 15px;
width: 100px;
}
form.comment{
float:left;
size
}
a.blogTitle:link {
color: #790000;
text-decoration: none;
}
a.blogTitle:visited{
color: #790000;
text-decoration: none;
}
a.blogTitle:active{
color: #790000;
text-decoration: none;
}
a.blogTitle:hover{
color: #CA0000;
text-decoration: none;
}
a:link {
color: white;
text-decoration: none;
}
a:visited{
color: white;
text-decoration: none;
}
a:active{
color: white;
text-decoration: none;
}
a:hover{
color: #CA0000;
text-decoration: none;
}
You need to set the footer position to relative to have it respect other elements on the page. Both absolute and fixed remove the element from the page flow, which causes overlapping.
Demo
Change position:relative to fixed in the demo CSS and then uncomment bottom to see the difference. You can also play with height on the body tag to see how behavior changes.
<div id="content">
<p>Content</p>
</div>
<div id="footer">
<p>Footer stuff</p>
</div>
body {
margin:0;
padding:0;
}
#content {
height:1200px;
width:100px;
background-color:#eee;
position:relative;
margin:0;
padding:0;
border:1px solid black;
}
#footer {
width:100px;
position:relative;
/* bottom:0; */
background-color:#eee;
margin:0;
padding:0;
border:1px solid black;
}
this is my test responsive web page and first time to do responsive web site.
http://www.oldcompany.com.sg/test
everything is fine but when I look in mobile, there is a big gap or white space between slider and footer.. also in below of the footer..
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Old Company - Integrated Solution</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page styles-->
<link href="css/styles.css" rel="stylesheet">
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/fotorama.css">
<script src="js/fotorama.js"></script>
</head>
<body>
<div class="header">
<div class="fotorama-header">
<!-- header -->
<div style="letter-spacing: 1px; font-weight: bold; font-size: 16px;">
<a href="http://www.oldcompany.com.sg" style="text-decoration: none; color: #fff;">
<img src="img/oc_logo.png" />
</a>
</div>
<!-- /header -->
</div>
<div class="menu">
Home
About Us
Services
Contact Us
</div>
</div>
<div class="page-wrap">
<div class="fotorama" data-width="100%" data-height="100%" data-nav="none" data-autoplay="true"
data-minHeight="auto" data-fitToWindowHeight="true" data-fitToWindowHeightMargin="0" data-margin="0"
data-shadows="false" data-cropToFit="true">
<div class="caption" data-img="img/open.png">
</div>
<div class="caption" data-img="img/lead.png">
</div>
<div class="caption" data-img="img/dynamic.png">
</div>
</div>
<div class="push"></div>
</div>
<div class="site-footer">
<div>
Copyright © 2013, theoldcompany Pte Ltd. All right reserved
</div>
</div>
</body>
</html>
CSS:
/* Global reset */
* {
padding:0;
margin:0;
}
html , body{ height: 100%; }
img, object {max-width: 100%;}
/* Clear fix: nicolasgallagher.com/micro-clearfix-hack/ */
.group:before, .group:after { content:""; display:table; }
.group:after { clear:both; }
.group { *zoom:1; } /* IE6-7 */
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin: 0 auto -2.5em;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer
{
background: rgba(0,0,0, .7);
}
.site-footer::after {height: 0px;}
.site-footer > div
{
width: 90%;
margin: 0px auto;
text-align: center;
font-size: 0.8em;
color: #FFF;
padding-top: 10px;
}
.site-footer, .push {
/* .push must be the same height as footer */
height: 2.5em;
}
body {
font-family:century gothic, "Helvetica Neue", Helvetica, Arial, sans-serif;
background:#fff;
color:#111;
font-size:16px;
}
/* Header */
.header {
position:relative;
top:0;
left:0;
width:100%;
color:#ccc;
background:#111;
background:hsla(0,0%,0%,.6);
z-index:10;
}
.header a,
.header a:link,
.header a:visited {
color:#ccc;
}
.header a:hover,
.header a:active,
.header a:focus {
color:#fff;
}
.fotorama-header {
margin-left:8px;
}
.menu {
position:absolute;
top:25px;
right:8px;
font-size:13px;
}
.menu a {
margin-left:1em;
}
just remove .page-wrap{
min-height:100%}
from css
If you want fixed footer or header, you must set their heights and match the margins of page-wrap.
html, body {
margin: 0;
padding: 0;
height: 100%; /* needed for content height */
text-align: left;
vertical-align: top;
overflow: hidden;
position: relative; /* help with position absolute */
}
.header {
display: block;
position: relative;
height: 40px;
width: 100%;
background-color: black;
color: white;
overflow: hidden;
text-align: center;
}
.page-wrap {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top: 40px; /* same height as header */
margin-bottom: 40px; /* same height as footer */
}
.content {
overflow-y: auto;
overflow-x: hidden;
height: 100%;
text-align: left;
-webkit-overflow-scrolling: touch;
background-color: blue;
color: white;
}
.site-footer {
position: absolute;
bottom: 0px;
display: block;
height: 40px;
width: 100%;
background-color: black;
color: white;
overflow: hidden;
text-align: center;
}
http://jsfiddle.net/s2yZW/
use this:
.site-footer{over-flow-y:hidden;}