I am trying to make a footer for my site. How would I go about doing this? I want the footer to look like mineplex.com
NOTE: I am a css and an HTML newbie.
Here is index.html and layout.css:
index.html:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- Site Title -->
<title>Minecraft</title>
<!-- Styles -->
<link rel="stylesheet" href="style/layout.css">
<link href='http://fonts.googleapis.com/css?family=Sanchez' rel='stylesheet' type='text/css'> <!-- Google Font (Replace with own if needed) -->
<!-- Javascript -->
<script src="js/jquery00.js"></script>
<script src="js/ticker00.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#items').list_ticker({
speed:5000,
effect:'fade'
});
})
</script>
</head>
<body>
<!-- Site Header -->
<div id="header">
<div id="logo">
<h1></h1> <!-- Site's Title on line 36 and 42 in layout.css -->
</div>
</div>
<!-- Navigation Bar -->
<div id="nav">
<div id="nav_holder">
<ul>
<li class="first"><a href="#"> Home </a> </li>
<li><a href="rules.html"> Rules </li> </a>
<li><a href="#"> Help </a> </li>
<li><a href="#"> Forum </a> </li>
</ul>
<ul class="right">
<li class="first"><a href="#"> Sign Up! </a> </li>
</ul>
</div>
</div>
<!-- Main Content -->
<div class="sub_header">
<!-- Announcements Ribbon -->
<div class="announcement">
<ul id="items">
<!-- Replace these with your messages -->
<li>Server's site was made by sgt_awes0me</li>
<li>Sign up on the forums now!</li>
<li>Here is another one. This one is a little bit longer</li>
<li>Server's Ip is 555.5555.5555:55555</li>
</ul>
</div>
<!-- Creates the ribbon feel -->
<div class="triangle-l"></div>
<div class="triangle-r"></div>
</div>
<!-- End of Header and Sub-Header -->
<!--
====================================
Now The Main Content Begins
====================================
-->
<!-- Content Container -->
<div id="content_container">
<!-- Right Content -->
<div class="right_content">
<h1> Welcome! </h1> <!-- Title -->
<!-- This is dummy text. You can change it to whatever you like -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia lorem blandit erat bibendum pharetra. In odio sapien, sodales in tempus nec, feugiat a ante. Sed tincidunt vestibulum lacus at posuere. Nulla metus justo, pretium in tempor a, condimentum non metus. Suspendisse enim velit, rhoncus eu vehicula ut, molestie non neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rutrum, lacus ut condimentum dapibus, leo enim faucibus lectus, a dictum lacus ipsum non nulla. Maecenas tempus magna quis nunc aliquam sit amet venenatis felis vulputate. Fusce vel nisl odio, eget suscipit tellus.
Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam hendrerit sagittis posuere. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Sed imperdiet enim in diam venenatis vel faucibus velit vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse mauris quam, porta molestie volutpat et, consectetur eu nisi. Etiam at risus massa, non accumsan tortor. Sed tortor ligula, rhoncus eget fermentum ut, tincidunt eu tortor. Quisque urna lectus, posuere iaculis tempor id, lobortis sed dui. Vivamus ultricies luctus eros non molestie. Nunc vitae erat lectus. Proin elit lectus, cursus et cursus ac, posuere porta felis. Ut vitae felis et ipsum vulputate convallis. Proin tincidunt orci a dolor congue ut tempor quam egestas.</p>
<div class="footer">
<p>Copyright © 2014 - Maven PVP
<br />
<p>Home | Rules | Help | Forum | Sign Up</p>
</div>
</div>
<!-- Sidebar. You can either have one long sidebar or multiple "widgets" -->
<div class="sidebar">
<h3 class="address">Server Address</h3>
<p class="address">555.5555.555:25565</p>
</div>
<div class="sidebar">
<!-- Change To Online or Offline depending on your server status -->
<h3>Server Status: </h3> <div class="offline"></div>
</div>
<div class="sidebar">
<h3> Example Header </h3>
<p>This is where you can put a server description or anything else!</p>
<h3>
</h3>
</div>
</div>
</body>
</html>
layout.css:
body {
margin: 0px;
height: 100%;
background-image: url(../img/bg_main.png);
}
@font-face {
font-family: Logo;
src: url(font/minecraft_font_by_pwnage_block-d37t6nb.ttf);
}
#header {
background:#8cbeff;
background-image: url(../img/180px-Sun.png), url(../img/bg-outside-clouds.png);
background-position: center right, top;
background-repeat: no-repeat;
width: 100%;
padding: 20px 0;
margin:0;
overflow: hidden;
}
#logo {
margin: 0px auto;
margin-bottom: -50px;
width: 990px;
font-size: 30px;
}
#logo h1 {
color: #222;
text-shadow:0 0 30px #333;
}
#logo h1:before {
content:"Maven"; /* Yellow Text */
color: yellow;
font-family: Logo;
}
#logo h1:after {
content: "PVP"; /* Black Text */
font-family: Logo;
}
#nav {
margin-top: -20px;
margin-bottom: -5px;
background-color:#2b2b2b;
border-bottom:4px solid #444442;
font-size:15px;
height:36px;
-webkit-box-shadow:0 0 5px #666;
-moz-box-shadow: 0 0 5px #666;
box-shadow:0 0 5px #666;
border-top: 10px solid #009514;
position: relative;
z-index: 9999;
}
#nav_holder {
width: 1000px;
margin: 0px auto;
margin-top: -15px;
}
#nav_holder ul.right {
float: right;
margin-top: 0px;
margin-right: 10px;
}
#nav_holder li.first {
margin-left: -30px;
border-left: 1px solid #333;
box-shadow: 1px 0 #000 inset, -1px 0 #000 inset;
-moz-box-shadow: 1px 0 #000 inset, -1px 0 #000 inset;
-webkit-box-shadow: 1px 0 #000 inset, -1px 0 #000 inset;
text-shadow:0 0 1px #000;
}
#nav_holder li {
list-style: none;
float: left;
border-right: 1px solid #333;
box-shadow: -1px 0 #000 inset;
-moz-box-shadow: -1px 0 #000 inset;
-webkit-box-shadow: -1px 0 #000 inset;
text-shadow:0 0 1px #000;
}
#nav_holder li:hover { background: #C0C0C0; }
#nav_holder li a {
line-height: 36px;
text-decoration: none;
color: #FFF;
opacity: 0.9;
margin-right: 20px;
margin-left: 20px;
transition: color .2s linear;
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
font-size: 12px;
color: yellow;
font-family: Logo;
}
#nav_holder li a:hover {
opacity: 0.5;
color: #00a5f0;
transition: color .2s linear;
-webkit-transition: color .1s linear;
-moz-transition: grow .1s linear;
}
#nav_holder li a:active {
opacity: 1;
color: #000;
width: 300px;
}
/* Now the header is done */
/* Main Content */
.sub_header {
width: 960px;
min-height: 105px;
margin: 0px auto;
padding: 10px;
background: url(../img/planks.jpg);
border: 4px solid #56472A;
-moz-box-shadow: -2px 2px 3px #333;
-webkit-box-shadow: -2px -2px 3px #333;
box-shadow: -2px -2px 3px #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 14px;
z-index: 9;
position: relative;
}
.announcement {
background: #7f9db9;
margin: 0px auto;
height: 50px;
width: 1020px;
position: relative;
left: -29px;
top: 20px;
float: left;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
z-index: 100;
}
.announcement ul#items {
list-style: none;
margin-top: 8px;
color: #fff;
font-size: 30px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.triangle-l {
border-color: transparent #7d90a3 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: -44px;
top: 55px;
z-index: -1;
}
.triangle-r {
border-color: transparent transparent transparent #7d90a3;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: 974px;
top: 27px;
z-index: -1;
}
#content_container {
width: 950px;
margin: 0px auto;
margin-top: 10px;
}
.sidebar {
margin-bottom: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 10px;
border-radius: 10px;
border-top: 2px inset black;
border-bottom: 2px outset black;
background-image:url(../img/sidebar.png);
width: 249px;
float: left;
}
.sidebar h1,h2,h3,h4,h5,h6,p{
padding-left: 20px;
font-family: 'Sanchez', serif;
}
.sidebar h3.address {
margin-bottom: -10px;
}
.sidebar div.online {
float: right;
margin-right: 40px;
margin-top: -36px;;
width: 15px;
height: 15px;
border-radius: 50px;
background-color: green;
box-shadow: 0px 0px 2px 2px green;
}
.sidebar div.offline {
float: right;
margin-right: 40px;
margin-top: -36px;;
width: 15px;
height: 15px;
border-radius: 50px;
background-color: red;
box-shadow: 0px 0px 2px 2px red;
}
.sidebar p.address {
color: green;
}
.right_content {
background-image:url(../img/right_content.png);
float: right;
margin-top: 3px;
margin-bottom: 100px;
min-height: 150px;
border: 4px solid #222;
border-radius: 3px;
-webkit-box-shadow: 0px 0px 10px rgba(000, 0, 0, 1);
-moz-box-shadow: 0px 0px 10px rgba(000, 0, 0, 1);
box-shadow: 0px 0px 10px rgba(000, 0, 0, 1);
width: 660px;
color: #999;
}
.right_content h1,h2,h3,h4,h5,h6,p {
padding-left: 30px;
margin-right: 30px;
}
.right_content h1 {
color: #999;
text-shadow: 1px 1px 1px #000;
width: 300px;
margin-top: 0px;
background-color: #222;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
}
.footer {
list-style: none;
margin-top: 8px;
margin-bottom: 5px;
color: #fff;
font-size: 15px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
Basically your footer needs to be at the bottom (before the ending body tag of </body>). Then the code can get adjusted a bit. You did need a clear of the floats because it was sneaking under the sidebar.
.footer {
clear:both;
list-style: none;
margin-top: 8px;
color: #fff;
font-size: 15px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
background-color:black;
border-top:thick solid blue;
padding-bottom:10px;
}