i'm really new at developing websites. And i read somewhere that grids are basically the future of simple responsive designs, so i am trying to use it. Right now i can't figure out how an element outside the wrapper class is following the first column maximum width.
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>GRID</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="userpage.css" />
</head>
<body class= 'wrapper'>
<div class= 'box header'>
<img src=''>
<ul class= 'nav-ul'>
<li class= 'nav-li'><a href='#'>Home</a></li>
<li class= 'nav-li'><a href='#'>About Us</a></li>
<li class= 'nav-li'><a href='#'>Contact</a></li>
</ul>
</div>
<!-- End of header -->
<div class= 'box left'>
box left
</div>
<div class= 'box right'>
box right
</div>
<div class= 'box contact'>
contact
</div>
</body>
<!-- End of Body -->
<footer>
This is the footer
</footer>
</html>
Here is the CSS:
*{
padding: 0px;
margin: 0px;
}
.wrapper {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"header header"
"body-l body-r"
"contact contact";
margin: 0px;
padding: 0px;
}
.box {
border-style: dotted;
border-color: red;
padding: 10px;
}
.header {
grid-area: header;
background-color: #1df9b7;
}
.left {
grid-area: body-l;
}
.right {
grid-area: body-r;
}
.contact {
grid-area: contact;
}
.nav-ul {
list-style: none;
float: right;
}
.nav-li {
float: left;
padding-right: 0.7em;
}
.nav-li a {
text-decoration: none;
color: white;
}
footer {
background-color: #00704e;
}
What i would like is the footer to fill the remaining area of the website.
First you need to understand how to use the <body> tag.
The HTML <body> Element represents the content of an HTML document.
Only elements inside the <body> tag will actually be displayed on the page.
You can use the <main> tag to wrap the main content of the page.
Next, you can make the body take up the entire height of the screen, and give it the desired background color:
body {
height: 100vh;
background-color: #00704e;
}
Since the footer is the last element, with the same background color, it will appear as though it's filling the remaining area.
*{
padding: 0px;
margin: 0px;
}
body {
height: 100vh;
background-color: #00704e;
}
.wrapper {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"header header"
"body-l body-r"
"contact contact";
margin: 0px;
padding: 0px;
background-color: #fff;
}
.box {
border-style: dotted;
border-color: red;
padding: 10px;
}
.header {
grid-area: header;
background-color: #1df9b7;
}
.left {
grid-area: body-l;
}
.right {
grid-area: body-r;
}
.contact {
grid-area: contact;
}
.nav-ul {
list-style: none;
float: right;
}
.nav-li {
float: left;
padding-right: 0.7em;
}
.nav-li a {
text-decoration: none;
color: white;
}
footer {
background-color: #00704e;
}
<main class= 'wrapper'>
<div class= 'box header'>
<img src=''>
<ul class= 'nav-ul'>
<li class= 'nav-li'><a href='#'>Home</a></li>
<li class= 'nav-li'><a href='#'>About Us</a></li>
<li class= 'nav-li'><a href='#'>Contact</a></li>
</ul>
</div>
<!-- End of header -->
<div class= 'box left'>
box left
</div>
<div class= 'box right'>
box right
</div>
<div class= 'box contact'>
contact
</div>
</main>
<!-- End of Body -->
<footer>
This is the footer
</footer>
Related
I've finished to divide each part of layouts with grid. But the contents (including the elements and the nesting elements inside) cannot be shown at the correct position (between nav and footer) when I debugged the HTML and CSS code which will be shown below:
article {
display: grid;
grid-template-rows: 20vh 10vh auto 10vh;
grid-template-columns: 10vw 20vw 20vw 20vw 20vw 10vw;
grid-template-areas: ". header header header header ."
". nav nav nav nav ."
". section section section section ."
". footer footer footer footer ."
}
header {
grid-area: header;
background-color: whitesmoke;
position: fixed;
}
nav {
grid-area: nav;
background-color:lightskyblue;
display: flex;
justify-content: center;
flex-direction: row;
margin: auto;
left: 0ex;
right: 0ex;
background-color: lightskyblue;
align-items: center;
position: relative;
font-family: Kanit;
}
section {
grid-area: content;
background-color: whitesmoke;
}
footer { grid-area: footer; background-color: lightskyblue; }
div.pi{
width: 60vh;
height: 40vh;
margin: 0;
font-family: Ubuntu;
}
h1{
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Introduce Myself</title>
<link rel="stylesheet" type="text/css" href="indexDemo.css">
</head>
<body>
<article>
<header> </header>
<nav>
<a class="guilding" href="#P2">Personal Information & Career Goal</a>
<a class="guilding" href="#P3">Education</a>
<a class="guilding" href="#P4">Work Experience & Placements</a>
<a class="guilding" href="#P5">Skills</a>
<a class="guilding" href="#P6">Hobbies & Interests & Achievements</a>
</nav>
<section>
<div class="pi">
<h1 id="#P2">Personal Information</h1>
<p>concrete contents
</p>
</div>
<div class="photo">
</div>
<div class="pic">
</div>
<div class="cg">
</div>
<div id="#P5">
</div>
</section>
<footer> </footer>
</article>
</body>
</html>
I don't know why It happened and ask for any help.
You just need to change
section {
grid-area: content; <---- content is not one of your grid-areas
background-color: whitesmoke;
}
to
section {
grid-area: section;
background-color: whitesmoke;
}
Your header still needs to be fixed to the top but I'll leave you to that.
article {
display: grid;
grid-template-rows: 20vh 10vh auto 10vh;
grid-template-columns: 10vw 20vw 20vw 20vw 20vw 10vw;
grid-template-areas: ". header header header header ." ". nav nav nav nav ." ". section section section section ." ". footer footer footer footer ."
}
header {
grid-area: header;
background-color: whitesmoke;
position: fixed;
}
nav {
grid-area: nav;
background-color: lightskyblue;
display: flex;
justify-content: center;
flex-direction: row;
margin: auto;
left: 0ex;
right: 0ex;
background-color: lightskyblue;
align-items: center;
position: relative;
font-family: Kanit;
}
section {
grid-area: section;
background-color: whitesmoke;
}
footer {
grid-area: footer;
background-color: lightskyblue;
}
div.pi {
width: 60vh;
height: 40vh;
margin: 0;
font-family: Ubuntu;
}
h1 {
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Introduce Myself</title>
<link rel="stylesheet" type="text/css" href="indexDemo.css">
</head>
<body>
<article>
<header>test</header>
<nav>
<a class="guilding" href="#P2">Personal Information & Career Goal</a>
<a class="guilding" href="#P3">Education</a>
<a class="guilding" href="#P4">Work Experience & Placements</a>
<a class="guilding" href="#P5">Skills</a>
<a class="guilding" href="#P6">Hobbies & Interests & Achievements</a>
</nav>
<section>
<div class="pi">
<h1 id="#P2">Personal Information</h1>
<p>concrete contents
</p>
</div>
<div class="photo">
<h1 id="#P2">Personal Information</h1>
<p>concrete contents
</p>
</div>
<div class="pic">
<h1 id="#P2">Personal Information</h1>
<p>concrete contents
</p>
</div>
<div class="cg">
<h1 id="#P2">Personal Information</h1>
<p>concrete contents
</p>
</div>
<div id="#P5">
<h1 id="#P2">Personal Information</h1>
<p>concrete contents
</p>
</div>
</section>
<footer> </footer>
</article>
</body>
</html>
For a few days I've been trying to create a footer that is consistent with the style of my site, which is itself in the process of being created but already has a defined style
I have an image to illustrate the footer "of my dreams" :p
And I would like to know how I can create it ? I thought of creating divs containing <p> and <a> the <p> for the titles and the <a> to contain the different links
Here is an image of what I would like to have on my site: https://prnt.sc/13kr8kt
Would anyone know how to explain me the right way? Because I tried but unfortunately impossible to succeed... I would like to understand my mistakes thanks in advance!
Here is my code :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
font-weight: 500;
width: 100%;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62, 62, 62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35, 35, 35);
padding: 192px 16px;
}
.topbar {
height: 80px;
background-color: #fff;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%;
}
.topbar nav {
display: flex;
width: 100%;
}
.middle {
margin: 0 auto;
}
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
}
.topbar nav a:hover,
.topbar nav a.active {
color: #000;
}
.header-logo {
cursor: pointer;
width: 25vh;
}
h1 {
text-align: center;
color: #fff;
}
.footer {
color: #fff;
background-color: rgb(9, 9, 9);
padding: 100px;
}
<!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>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Kurium Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Support
</div>
<div class="right">
Social 1
Social 2
</div>
</nav>
</header>
</head>
<body>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="footer">
<footer>
Copyright
</footer>
</div>
</body>
</html>
Use a grid layout with flex on the logo element. using grid-layout you can express how wide you want the columns to be using grid-template-columns: then call the grid-area on each selector with in the grid parent. You may need to tweak a bit to your liking depending on what view ports you are going for.
Use flex on child items you wish to align in a row. Simple Ul/li for links...
/* for display purposes in this snippit only adding margin and padding
to your body may have a negatrive affect on your display in your browser */
body {
margin: 0;
padding: 0;
}
/**/
#footer {
position: relative;
font-family: sans-serif;
height: 20%;
background-color: black;
color: white;
display: grid;
grid-template-columns: 2fr 0.9fr 0.7fr 0.2fr 1.2fr;
grid-template-rows: 1.9fr 0.1fr;
grid-template-areas:
"logo product resource resource business"
"social social . design design";
}
li {
list-style: none;
padding-top: 2%;
font-size: .9em;
}
.flex {
display: flex;
}
#footer li a {
color: #065299;
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 60px;
height: 50px;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copy {
padding-top: .3rem;
font-size: .7em;
color: #7d8287;
}
.product {
grid-area: product;
}
.resource {
grid-area: resource;
}
.business {
grid-area: business;
}
.social {
grid-area: social;
padding-left: .3rem;
padding-bottom: .3rem;
font-size: .6em;
display: flex;
}
.design {
grid-area: design;
font-size: .6em;
text-align: right;
padding-right: .3rem;
padding-bottom: .3rem;
}
.icons {
width: 1rem;
height: 1rem;
padding-left: .3rem;
}
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="https://thumb9.shutterstock.com/image-photo/redirected-150nw-795281602.jpg">
<h4>My Company</h4>
</div>
<div class="copy">© Poseidon Bot 2012 - All Rights Reserved</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Articles</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with ❤ by <span style="color: #065299;">My Discord ID</span>
</div>
<div class="social">
<img class="icons" src="http://icons.iconarchive.com/icons/custom-icon-design/mono-general-3/128/twitter-icon.png">
<img class="icons" src="https://www.stackbuilders.com/assets/img/github-icon-hover.png">
<img class="icons" style="filter: invert(100%)" src="https://www.iconninja.com/files/625/765/244/social-media-stackoverflow-icon.png">
</div>
</div>
EDIT: note the circled items in the picture, they take up two different wide columns to make up their full width. Resource is 0.2 + 0.7 which = 0.9fr, where design is 0.2 + 1.2 which is = 1.4fr, furthermore this allow us to skew the bottom row column by starting its left side at the preceding column which is 0.2fr to the left of resources right side.
I need help with my grid layout for a free code camp project.
Basically, I'd like to show 3 of my portfolio pages in a row. I setup a grid layout for this and can't seem to get the middle page to lineup with the others. Also, as I am brand new, feel free to give feedback on what I have so far in general.
here is the link to the codepen just in case https://codepen.io/eddiepearson/pen/xMaaYX
* {
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,300i,400');
}
html, body {
margin: 0;
padding: 0;
}
nav ul {
text-align: right;
position: fixed;
margin-top: 0;
width: 100%;
background-color: #002171;
}
nav ul li {
display: inline-block;
margin: 55px;
margin-bottom: 15px;
margin-top: 30px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
nav ul {
text-align: left;
height: 75px;
}
nav ul li {
margin: 20px;
height: 5px;
}
}
.intro {
top: 0;
background: #002171;
min-height: 55vh;
padding-top: 45vh;
}
.intro p {
text-align: center;
color: #fff;
}
.intro h1 {
text-align: center;
color: #fff;
}
.work {
margin-top: 50px;
}
.work-header {
text-align: center;
}
#projects {
display: grid;
grid-template-columns: 300px 300px 300px;
grid-row-columns: 300px 300px;
justify-content: space-evenly;
}
#third-p {
}
.project-pic {
width: 100%;
}
.project-title {
text-align: center;
}
<nav>
<ul style="list-style-type: none" id="navbar">
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
<section>
<div id="welcome-section" class="intro">
<h1>Hey i'am eddie</h1>
<p>a web dev with a focus on UX</p>
</div>
</section>
<section>
<h2 class="work-header">These are some of my projects.</h2>
<div id="projects" class="work">
<div id="first-p">
<a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
<img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
<div class="project-title">
Tribute Page
</div>
</div>
</a>
<div id="second-p">
<a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
<img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
<div class="project-title">
Tribute Page
</div>
</div>
</a>
<div id="third-p">
<a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
<img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
<div class="project-title">
Tribute Page
</div>
</div>
</a>
</div>
</section>
First, you have a small issue (typo I assume) here in the CSS
grid-template-columns: 300px 300px 300px;
grid-row-columns: 300px 300px;
Shouldn't that last part be grid-template-rows?
Also you could use this to manually control each element in the grid:
#first-p {
grid-row:1;
grid-column:3;
}
I am trying to edit the margin on the nav bar links, however when I change the margin, nothing happens. Does anyone know why this is happening?
/* Whole Page or not one specific section */
main {
text-align: center;
}
body {
max-width: 100%;
height: 100vh;
margin: 0px 0px 0px 0px;
color: #C2D3CD;
}
.topbar, nav {
background-color: #847E89;
}
/* Top Bar */
#temp-logo, #donate-top {
display: inline-block;
}
#donate-top {
float: right;
padding-right: 2%;
padding-left: 2%;
background-color: #C2D3CD;
color: #847E89;
height: 10vh;
cursor: pointer;
}
.donate-name {
padding-top: 4vh;
background-color: #C2D3CD;
border: none;
cursor: pointer;
}
#temp-logo {
padding-top: 0vh;
margin-left: 2%;
font-size: 22px;
}
.topbar {
display: block;
border-bottom: solid 1px #C2D3CD;
height: 10vh;
}
/* Nav Bar */
nav {
text-align: center;
height: 7vh;
}
.link, link:visited {
color: #C2D3CD;
text-decoration: none;
}
#mission-link, #about-link, #donations-link, #contact-link {
margin-top: 5%;
}
/* First Page */
#home-screen {
background-image: url(Images/beach-background-1-NEW.jpg);
height: 80vh;
width: 100%;
background-repeat: no-repeat;
background-size: 100%;
}
.text {
padding-top: 30vh;
}
/* Gallery */
.img {
width: 20vw;
height: 20vw;
}
.desc {
display: inline-block;
position: relative;
margin: 1%;
}
.desc:hover img {
filter: blur(1.5px) brightness(60%);
transition: 0.3s;
box-shadow: 0 0 10px gray;
}
.desc :not(img) {
position: absolute;
top: 37%;
z-index: 1;
text-align: center;
width: 100%;
color: #FFF;
opacity: 0;
transition: 0.3s;
}
.desc:hover :not(img) {
opacity: 1;
}
.img:hover {
transform: scale(1.1);
}
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<title>Conejo Teen Organization</title>
</head>
<body>
<!-- Top Bar -->
<div class="topbar">
<!-- Get logo ASAP -->
<p id="temp-logo"><em>Conejo Teen Organization</em></p>
<a id="donate-top" class="donate" href="#"><button class="donate-name">Donate</button></a>
</div>
<!-- Nav -->
<nav>
<a id="mission-link" class="link" href="#">Mission</a>
<a id="about-link" class="link" href="#">About Us</a>
<a id="donations-link" class="link" href="#">What We Do</a>
<a id="contact-link" class="link" href="#">Contact</a>
</nav>
<!-- Main -->
<main>
<!-- First Section -->
<section id="home-screen">
<article class="text">
<h1 id="h1">Conejo Teen Organization</h1>
<p id="h1-desc">Helping California teens in need since 2017</p>
<button id="donate-home" class="donate">Donate Now!</button>
</article>
</section>
<!-- Our Mission -->
<section id="mission">
<h2 id="mission-h2">Our Mission</h2>
<p id="mission-statement">Our goal is to identify organizations and individuals in need, and assist in the most effective and appropriate way. In addition, the specific objective and purpose of Conejo Teen Organization shall be to provitde teens in an opportunity to learn about, perform and be engaged in community service activities. We want to provide a safe outlet and positive culture for teens to engage with other like-minded teens and mentors.</p>
</section>
<!-- Image Gallery (images of projects) -->
<section id="gallery">
<h2 id="images">Gallery</h2>
<!-- Put service images here. On hover, enlarge image and put text overlay with link to that project -->
<div class="row1 row">
<!-- Image 1 -->
<div class="desc-1 desc">
<img src="Gallery/DecMyRoom-1-Edit.jpg" class="img img-1">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 2 -->
<div class="desc desc-2">
<img src="Gallery/DecMyRoom-2-Edit.jpg" class="img img-2">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 3 -->
<div class="desc desc-1">
<img src="Gallery/DecMyRoom-3-Edit.jpg" class="img img-3">
<h3 id="img-desc">Dec My Room</h3>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<p id="copyright">© 2018 Conejo Teen Organization</p>
<p id="my-credit">Created by Jacob Pieczynski</p>
</footer>
</body>
</html>
You're trying to apply margin-top to inline elements which you can't do since it would disrupt the flow of the page:
#mission-link, #about-link, #donations-link, #contact-link {
display: inline-block; /* Try making them inline block */
margin-top: 5%;
}
Try making the links inline-block.
Add display: inline-block like:
#mission-link, #about-link, #donations-link, #contact-link {
margin-top: 5%;
display: inline-block;
}
I have checked your code remove: height: 10vh; from topbar class
I am trying to place footer to the bottom of a div using bootstrap without applying margin to the div I want to push to the bottom of the div as footer. This is my attempt but the footer aligns to the top
<div style="background-color:#191919;" class="container">
<h3 style="color: #32CD32; font-family: Copperplate; align:left;">
HEADER TEXT
</h3>
<h5>... reaching out</h5>
<hr style="width:101.6%;">
<div class="col-lg-12">
<nav id="main_menu">
<div align="center" class="menu_wrap">
</div>
</nav>
<div class="row">
<div class="contents">
The contents in each page
</div>
</div>
<footer style="color:#fff; text-align:center;"> © 2016 All rights reserved
<br> For more information visit our website
</footer>
</div>
</div>
Please how can I place the footer to the bottom of .
There are multiple ways to do that, i think the faster way for you is this case is using position: absolute on the footer;
First move out you footer from .col-lg-12 to be a directly children of .container. I also added a class .myFooter
<footer class="myFooter">
copy 2016 All rights reserved
<p>You can visit our website for more info</p>
</footer>
And then the css. Don't use css inline on the markup. I moved the color and text-align to the class.
.myFooter {
color:#fff;
text-align:center;
position: absolute;
bottom: 0;
}
The last step is to add position:relative to the .container. That way the position:absolute on .myFooter works properly.
.container {
position: relative;
}
Here is a working example:
http://plnkr.co/edit/Ypl82cdqxuHFIjAcpRo8?p=preview
<html>
<head>
<title>
Lugah Salisu Foundation
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<style type="text/css">
#media (max-width: #screen-xs) {
body{font-size: 10px;}
}
#media (max-width: #screen-sm) {
body{font-size: 14px;}
}
h3{
font-size: 300%;
margin-bottom: 0px;
clear: both;
margin-left: 7px;
}
h5{
margin-top: 0px;
padding: 0px;
margin-left: 15px;
color: #fff;
margin-bottom: 1px;
clear: both;
}
hr{
margin: 0px;
}
.container {
width: auto;
margin-left: 200px;
margin-right: 200px;
height:500px;
max-height:500px !important;
padding-left: 0px;
}
.nav>li {
position: relative;
display: inline-block!important;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color:transparent!important;
color:#d3d3d3;
}
.nav>li>a {
padding: 10px 4px!important;
color:#fff;
}
.golden-base {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight:bold;
-webkit-margin-before: 0.3em;
-webkit-margin-after: 0.2em;
}
.golden1 {
background-image: -webkit-linear-gradient(#FFF65C, #3A2C00);
text-shadow: -0.02em -0.03em 0.005em rgba(255, 223, 0, 0.60);
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
</style>
</head>
<body style="background-color:#1f5060;">
<div style="background-color:#191919;" class="container">
<h3 style="color: #32CD32; font-family: Copperplate; align:left;">
HEADER TEXT
</h3>
<h5>... reaching out</h5> <hr style="width:101.6%;">
<div class="col-lg-12">
<nav id="main_menu">
<div align="center" class="menu_wrap"></div>
<ul class="nav sf-menu">
<li class="sub-menu"><small>Home</small></li> |
</ul>
</div>
</div>
</nav>
<footer style="color:#fff; text-align:center;"> © 2016 All rights reserved
<div class="row">
<div class="contents">
The contents in each page
</div>
</div>
</div>
</footer>
</body>
</html>