text decoration rule not working? - html

I am designing my first site... the footer section to be specific. I am trying to style the <a> tags into a white color without the default webkit styling but I am unable to do so.
What am I doing wrong, and how can I change the styling?
* {
margin: 0px;
padding: 0px;
}
div {
display: block;
}
.header {
background-color: #333333;
}
.nav {
padding: 0px auto;
margin: 0px auto;
}
.nav ul {
}
.nav ul li {
color: #e6e6e6;
display: inline-block;
padding: 20px 30px 20px 20px ;
font-family: 'raleway', sans-serif;
font-weight: 20px;
}
.nav ul li a {
text-decoration: none;
color: #efefef;
padding: 20px 20px 20px 20px ;
font-family: 'raleway', sans-serif;
font-weight: 20px;
}
.nav ul li a:hover {
color: #efefef;
background-color: #191919;
transition: background .5s;
}
.second_section .container {
background-image: url(http://1.bp.blogspot.com/-I0jOcWYqW94/UdFZ9U8Si0I/AAAAAAAACRw/2Hhb0xY7yzY/s1600/84.jpg);
height: 900px;
width: 100%;
}
.copy {
position: absolute;
margin: 100px 50px 500px 500px;
color: white;
font-family: 'Josefin Sans', sans-serif;
letter-spacing: 2px
}
.copy {
text-align: center;
}
.btn_section {
top: 400px;
text-align: center;
position: relative;
}
.btn {
position: relative;
margin-top: 100px
color: white;
border: solid 2px fixed;
}
.btn_section a {
border: 1px solid white;
padding: 20px 40px;
text-decoration: none;
background-color: #191919;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 1.33em;
letter-spacing: 2px;
text-transform: uppercase;
}
.btn_section a:hover {
background-color: #e6e6e6;
color: #191919;
transition: background .5s;
cursor: pointer;
}
.third_section a: hover {
background-color: black;
}
.third_section {
height: 20px;
background-color: black;
}
.fourth_section .col {
display: inline-block;
padding-top: 50px;
padding-bottom: 75px;
padding-left: 6%;
padding-right: 6%;
text-align: center;
font-family: 'Raleway';
width: 20%;
vertical-align: top;
}
.fourth_section img {
padding: 5px 5px 10px 5px;
height: 32px
}
.fourth_section > h2 {
font-family: 'Raleway';
font-size: 1.33em;
}
.col > p {
font-size: 1.12em;
}
.col a {
text-decoration: none;
color: #323232;
}
.col {
text-align: center;
font-family: Garamond;
}
.footer {
height: 100px;
background-color: #333;
padding: 20px;
}
.footer a {
text-decoration: none;
}
.footer_info {
position: relative;
text-decoration: none;
margin-bottom: 10px;
color: white;
}
<div class="header">
<div class="nav">
<ul>
<li>ABOUT</li>
<li>WORK</li>
<li>TEAM</li>
<li>CONTACT</li>
</div>
</div>
<div class="second_section">
<div class="container">
<div class="copy">
<h1>ACTUATE CONTENT</h1>
<br>
<h3>Expert content for every business</h3>
</div>
<div class="btn_section">
Write For Me!
</div>
</div>
<div class="third_section">
</div>
<div class="fourth_section">
<div class="col">
<img src="https://cdn0.iconfinder.com/data/icons/seo-smart-pack/128/grey_new_seo2-17-256.png"><h2>RESEARCH</h2>
<br>
<p>Our meticulous research methods will uncover the most relevant information for your project. </p>
</div>
<div class="col">
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/Icon_17-512.png">
<h2>WRITING</h2></a>
<br>
<p>Our seasoned, handpicked writers craft stellar content for your specific needs.</p>
</div>
<div class="col">
<a href="#"><img src="http://i.imgur.com/AinCaug.png">
<h2>EDITING</h2></a>
<br>
<p>Our editors work with leading authors and publishers to bring out the best in their writing.</p>
</div>
</div>
<div class="footer">
<div class="footer_info">
<p>Terms of Use / Privacy Policy</p>
</div>
</div>

Add your styles into this :
.footer .footer_info a {
...
}

Related

Unable to get two <p> or <div> in the footer to be stacked

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>

How to get boxes to adjust by page space rather than content

I've got the below layout and all I'm trying to do is get the height of the boxes at the bottom to be sized by the space available in the browser rather than their content.
I thought it'd be a simple 'height:33%' but looks like it'll be something to do with flex box (which I've tried loads of variations on and have not succeeded)?
Help me Obi-Wan Kenobi's you're my only hope...
html:
</head>
<body>
<div class="parent">
<h1>Right title</h1>
<h2></h2>
<div class="child">
<h3>Left title</a><br></h3>
</div>
</div>
<div class="box">
<p> First Button</a>
</div>
<div class="box">
<p> Second Button</a>
</div>
<div class="box">
<p> Third Button</a>
</div>
</div>
</body>
css
body {
background: #fff;
color: #666666;
font-family: "Open Sans", sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0px;
}
a {
color: #2822a9;
}
a:hover, a:active, a:focus {
color: red;
outline: none;
text-decoration: none;
}
.parent {
width:100%;
padding:10px;
background-color:#CCCCCC;
position:relative;
}
h1 {
font-size: 5vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: right;
}
h2 {
font-size: 4vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: right;
}
.child {
padding: 10px;
width:50%;
height:100%;
background-color:#999999;
position:absolute;
top:0px;
left:0px;
}
h3 {
font-size: 1.75vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: left;
padding: 10;
}
h4 {
font-size: 2vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: left;
padding: 10;
}
.box {
line-height: 1vh;
font-size:2vw;
text-align: center;
border: 1px solid #e6e6e6;
position: relative;
}
.btn-get-started {
font-family: "Poppins", sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 2rw;
letter-spacing: 1px;
display: inline-block;
padding: 8px 28px;
border-radius: 50px;
transition: 0s;
margin: 10px;
border: 2px solid blue;
color: blue;
width: 25%;
}
.btn-get-started:hover {
border: 2px solid #2dc997;
}
table, tr, th, td {
position: relative; top: 0; bottom: 0; left: 0; right: 0;
border: 1px solid black;
width:100%;
height:100%
text-align: center;}
Make sure the html element is actually occupying the full screen height. You can then use height: 33% as you mentioned on the box divs. Below I used 28% below to make room for the header "parent" div. I also corrected some html tags.
html
{
height: 100%;
}
body {
background: #fff;
color: #666666;
font-family: "Open Sans", sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0px;
}
a {
color: #2822a9;
}
a:hover, a:active, a:focus {
color: red;
outline: none;
text-decoration: none;
}
.parent {
width:100%;
padding:10px;
background-color:#CCCCCC;
position:relative;
}
h1 {
font-size: 5vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: right;
}
h2 {
font-size: 4vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: right;
}
.child {
padding: 10px;
width:50%;
height:100%;
background-color:#999999;
position:absolute;
top:0px;
left:0px;
}
h3 {
font-size: 1.75vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: left;
padding: 10;
}
h4 {
font-size: 2vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: left;
padding: 10;
}
.box {
line-height: 1vh;
font-size:2vw;
text-align: center;
border: 1px solid #e6e6e6;
position: relative;
height: 28%;
}
.btn-get-started {
font-family: "Poppins", sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 2rw;
letter-spacing: 1px;
display: inline-block;
padding: 8px 28px;
border-radius: 50px;
transition: 0s;
margin: 10px;
border: 2px solid blue;
color: blue;
width: 25%;
}
.btn-get-started:hover {
border: 2px solid #2dc997;
}
table, tr, th, td {
position: relative; top: 0; bottom: 0; left: 0; right: 0;
border: 1px solid black;
width:100%;
height:100%
text-align: center;
}
<body>
<div class="parent">
<h1>Right title</h1>
<div class="child">
<h3>Left title</h3>
</div>
</div>
<div class="box">
<p>First Button</p>
</div>
<div class="box">
<p>Second Button</p>
</div>
<div class="box">
<p>Third Button</p>
</div>
</body>

Why is my footer not centered? (HTML & CSS)

html,
body {
width: 100%;
margin: 0px;
padding: 0px;
font-family: 'Century Gothic', sans-serif;
box-sizing: border-box;
overflow-x: hidden;
}
.wrapper {
overflow-x: hidden;
}
#main-header {
background-color: transparent;
text-align: center;
color: darkslategray;
font-family: 'Century Gothic', sans-serif;
font-size: 20px;
letter-spacing: 4px;
line-height: 50px;
}
#main-header a {
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#main-header a:hover {
color: #5e3232;
}
#menu {
background-color: transparent;
}
#menu ul {
background-color: transparent;
text-align: center;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
font-size: 18px;
padding-left: 10px;
padding-right: 10px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#menu a:hover {
color: rgb(136, 94, 38);
}
body {
background-color: /*linear-gradient(60deg, #CCFFFF, #FFCCCC);*/
thistle;
background-repeat: none;
line-height: 24px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
color: #555;
font-weight: normal;
}
main {
margin: 0 auto;
padding: 30px 20px;
width: 90vw;
}
section {
margin: auto;
}
article {
padding: 20px;
margin-bottom: 20px;
}
footer {
text-align: center;
font-size: 15px;
font-family: 'Century Gothic', sans-serif;
padding: 20px;
background-color: thistle;
bottom: 0;
margin: 0;
width: 100%;
position: absolute;
}
#item a {
font-size: 18px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#item a:hover {
color: rgba(104, 161, 28, 0.911);
}
#media (max-width: 768px) {
#main-header {
float: none;
text-align: center;
padding-top: 15px;
}
#main-header h1 {
font-size: 24px;
line-height: 25px;
}
.logos {
padding-top: 5px;
}
#menu {
margin-top: -10px;
}
#menu a {
font-size: 17px;
}
body {
position: relative;
}
body::after {
content: "";
display: block;
height: 50px;
}
body h2 {
font-size: 20px;
margin-top: -25px;
}
body p {
font-size: 16px;
}
}
<div class="wrapper">
<header id="main-header" class="alt">
<div class="logos">
</i>
</i>
</i>
</div>
</header>
<nav id="menu">
<!--<div class="container">-->
<ul class="links">
<li>Home</li>
<li>About Me</li>
<li class="current">Projects</li>
</ul>
<!--</div>-->
</nav>
<main>
<section>
<article id="item">
<h2>Projects</h2>
<h4>Request</h4>
<small>January to April 2020</small>
<h4>Reverse</h4>
<small>September to December 2018</small>
</article>
</section>
</main>
<footer>
<p>© 2020</p>
</footer>
</div>
I'm not sure why my footer is not centered. The main header, menu, and social media links are all centered, but it's just the footer that is not. I've tried redoing the code from scratch, but I'm not sure if I missed something. I'm new to coding, so any help would be appreciated.
The problem is in your footer css declaration. You have the padding set to 20px and width at 100%, which is adding some space to the left of your footer and offsetting it, but since the width is 100%, it spans past the page width.
Just change the padding to only apply to the top and bottom
footer {
text-align: center;
font-size: 15px;
font-family: 'Century Gothic', sans-serif;
padding: 20px 0;
background-color: thistle;
bottom: 0;
margin: 0;
width: 100%;
position: absolute;
}
Your problem is with box-sizing box-sizing: content-box is the default setting, which means that the rendering engine measures the width (set here to 100%) before adding the padding. box-sizing: content-box will tell the rendering engine to add the padding into the measurement, so your width: 100% will include the 20px padding.
html,
body {
width: 100%;
margin: 0px;
padding: 0px;
font-family: 'Century Gothic', sans-serif;
box-sizing: border-box;
overflow-x: hidden;
}
.wrapper {
overflow-x: hidden;
}
#main-header {
background-color: transparent;
text-align: center;
color: darkslategray;
font-family: 'Century Gothic', sans-serif;
font-size: 20px;
letter-spacing: 4px;
line-height: 50px;
}
#main-header a {
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#main-header a:hover {
color: #5e3232;
}
#menu {
background-color: transparent;
}
#menu ul {
background-color: transparent;
text-align: center;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
font-size: 18px;
padding-left: 10px;
padding-right: 10px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#menu a:hover {
color: rgb(136, 94, 38);
}
body {
background-color: /*linear-gradient(60deg, #CCFFFF, #FFCCCC);*/
thistle;
background-repeat: none;
line-height: 24px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
color: #555;
font-weight: normal;
}
main {
margin: 0 auto;
padding: 30px 20px;
width: 90vw;
}
section {
margin: auto;
}
article {
padding: 20px;
margin-bottom: 20px;
}
footer {
text-align: center;
font-size: 15px;
font-family: 'Century Gothic', sans-serif;
padding: 20px;
background-color: thistle;
bottom: 0;
margin: 0;
width: 100%;
position: absolute;
box-sizing: border-box;
}
#item a {
font-size: 18px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#item a:hover {
color: rgba(104, 161, 28, 0.911);
}
#media (max-width: 768px) {
#main-header {
float: none;
text-align: center;
padding-top: 15px;
}
#main-header h1 {
font-size: 24px;
line-height: 25px;
}
.logos {
padding-top: 5px;
}
#menu {
margin-top: -10px;
}
#menu a {
font-size: 17px;
}
body {
position: relative;
}
body::after {
content: "";
display: block;
height: 50px;
}
body h2 {
font-size: 20px;
margin-top: -25px;
}
body p {
font-size: 16px;
}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="wrapper">
<header id="main-header" class="alt">
<div class="logos">
</i>
</i>
</i>
</div>
</header>
<nav id="menu">
<!--<div class="container">-->
<ul class="links">
<li>Home</li>
<li>About Me</li>
<li class="current">Projects</li>
</ul>
<!--</div>-->
</nav>
<main>
<section>
<article id="item">
<h2>Projects</h2>
<h4>Request</h4>
<small>January to April 2020</small>
<h4>Reverse</h4>
<small>September to December 2018</small>
</article>
</section>
</main>
<footer>
<p>© 2020</p>
</footer>
</div>

a href style inheriting

I am having an issue where my navigation a is conflicting with an a href on .content - I have been trying to tackle this for the last few hours and no luck, thanks.
ul.nav {
list-style-type: none;
margin: 0;
min-width: 360px;
}
ul.nav li {
display: table-cell;
text-align: center;
}
a.active {
background-color: #cc293f;
font-weight: 700;
}
.nav-container {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
margin: 5px 0 0;
}
.table {
display: table;
margin: 5px auto;
}
a {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
border-right: 1px solid #fff;
color: #fff;
float: left;
padding: .2em .6em;
text-decoration: none;
width: 10em;
}
a:hover {
background-color: #cc293f;
}
.content {
border-radius: 10px 10px 10px 10px;
border: 2px solid #cc293f;
margin-top: 10px;
min-width: 360px;
min-height: 650px;
}
.content h1 {
font-size: 26px;
color: #fff;
text-align: center;
margin-top: 5px;
}
.content h2 {
font-size: 22px;
text-align: center;
margin-top: -35px;
}
.content p {
font-size: 18px;
margin-top: -5px;
margin-left: 10px;
}
.content #p2 {
font-size: 19px;
margin-left: 50px;
margin-top: -5px;
}
<html>
<body>
<div class="nav-container">
<div class="table">
<ul class="nav">
<li style="border-left:1px solid white;"><a class="active" href=
"index.html">Home</a></li>
<li>FAQs</li>
<li>Resolution Center</li>
<li>Upload</li></ul>
</div>
</div>
<div class="content">
<p>example</p>
<img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png" height="75" width="75">
</body>
</html>
You declare style for global <a> tag, so all <a tags will use that style. Special style for <a tags from .content class can be achieved by adding to your css file: .content a { your instructions }.
Furthermore, use ul nav li a to specify your desired options for the menu. If you have multiple ul list in your project, use a specific class for each of them.
See this now has very different properties on default and hover.
ul.nav {
list-style-type: none;
margin: 0;
min-width: 360px;
}
ul.nav li {
display: table-cell;
text-align: center;
}
a.active {
background-color: #cc293f;
font-weight: 700;
}
.nav-container {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
margin: 5px 0 0;
}
.table {
display: table;
margin: 5px auto;
}
a {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
border-right: 1px solid #fff;
color: #fff;
float: left;
padding: .2em .6em;
text-decoration: none;
width: 10em;
}
a:hover {
background-color: #cc293f;
}
.content {
border-radius: 10px 10px 10px 10px;
border: 2px solid #cc293f;
margin-top: 10px;
min-width: 360px;
min-height: 650px;
}
.content h1 {
font-size: 26px;
color: #fff;
text-align: center;
margin-top: 5px;
}
.content h2 {
font-size: 22px;
text-align: center;
margin-top: -35px;
}
.content p {
font-size: 18px;
margin-top: -5px;
margin-left: 10px;
}
.content #p2 {
font-size: 19px;
margin-left: 50px;
margin-top: -5px;
}
.content a {
background:blue;
transition:1s;
}
.content a:hover {
transform:translateX(500px);background:red;
}
<html>
<body>
<div class="nav-container">
<div class="table">
<ul class="nav">
<li style="border-left:1px solid white;"><a class="active" href=
"index.html">Home</a></li>
<li>FAQs</li>
<li>Resolution Center</li>
<li>Upload</li></ul>
</div>
</div>
<div class="content">
<p>example</p>
<img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png" height="75" width="75">
</body>
</html>

How can I correct the positioning of my footer element?

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%;
}