| gazaian1 |
11-26-2012 04:16 PM |
How to get footer at the bottom of the screen
I have gotten the footer under the container but it leaves a huge gap under it.
you can view here: http://www.separatethescams.com/newdesign/
Any help appreciated thanks.
Code:
@charset "utf-8";
*{
margin:0;
}
header, article, section, aside, hgroup{display:block;}
html, body {border: 0; margin: 0; padding: 0; text-align: center; height:100%;}
body{
background: #ececec url(../images/bg4.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
a {
color: #0099CC;
text-decoration: none;
}
a:hover {
color: #156388;
}
p {
padding-bottom: 12px;
}
a img {
border: none;/*remove border for linked images*/
}
h1 {
font-size: 1.6em;
height: 20px;
padding-top: 0;
}
h2{
font-size: 1.2em;
height: 20px;
padding-top: 0;
}
/***** Main Layout ****/
#Container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -422px;
width:975px;
}
header{
float:left;
width:100%;
height:340px;
}
#logo{
float:left;
margin:20px 0 0 -18px;
padding:0;
width:250px;
height:250px;
}
#headerAd{
float:right;
width:728px;
height:90px;
background-color:#666666;
margin:60px 10px 0 0;
padding:0;
}
#search{
float:right;
}
/********************************************
Navigation Area
********************************************/
#menuwrap{
float:left;
margin:0;
padding:0;
width:100%;
background-color:#116f92;
height:70px;
}
nav{
padding:0;
margin:9px 0 0 0;
width:100%;
height:53px;
background:#189ecb;
}
nav ul{
margin:0;
padding:0;
line-height:49px;
}
nav ul li{
margin:0;
padding:0;
list-style:none;
float:left;
height:49px;
margin:2px 0 0 0;
position:relative;
border-left: 1px solid #116f92;
border-right: 1px solid #116f92;
}
nav ul li a{
text-align:center;
font-family:'Nobile', Helvetica, Arial, sans-serif;
font-size:18px;
text-decoration:none;
height:53px;
width:162.5px;
color:#ffffff;
display:block;
}
nav li.menu-item-71 a{
width:160.6px !important;
}
nav li.menu-item-71{
border-left:none;
width:160.6px !important;
}
nav li.menu-item-65{
border-right:none;
}
#menu-item-65 a{
width:154px;
}
nav ul ul{
position:absolute;
visibility:hidden;
top:53px;
z-index:25;
}
nav ul li:hover ul{
visibility:visible;
}
/*************************************************/
nav a:hover{
margin:0 0 0 0;
background-color:#156388;
color:#06A4DC !important;
height:49px;
width:162.5px;
line-height:49px;
}
nav li.menu-item-71 a:hover{
margin:0 0 0 0;
background-color:#156388;
color:#06A4DC !important;
height:49px;
width:160.6px !important;
line-height:49px;
}
nav ul li ul{
background-color:#DAD6D3;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
margin:-4px 0 0 0 !important;
}
nav ul li ul li a{
color:#ffffff;
height:55px !important;
}
nav ul li ul li{
border-left:none;
border-right:none;
}
#menu-item-65 ul li{
width:154px !important;
}
#menu-item-65 ul li a{
width:154px !important;
}
#menu-item-65{
width:154px !important;
}
#menu-item-65{
width:154px !important;
}
.dividerm{
background-color: #ccc;
height: 1px;
width: 170px;
}
.dividermm{
background-color: #ececec;
height: 1px;
width: 170px;
margin:1px 0 0 0;
}
nav ul li.menu-item-72, .menu-item-73, .menu-item-74, .menu-item-75:hover ul li a:hover{
background-color:#C2C1BD !important;
color:#fff !important;
}
.menu-item-75 a:hover{
margin:-2px 0 0 0 !important;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
#toggle,#open.open,#close.close{
font-family:"arial", helvetica, sans-serif;
font-size:12px !important;
}
/**********************************************
Main Content Area
**********************************************/
article {
display:inline-block;
margin:0 auto;
width: 975px;
padding:3px 0 0 0;
text-align:left;
background-color:#37A1C3;
}
/*********************************************
Latest Articles Section
*********************************************/
#postarea{
display:inline-block;
background-color:#F6F6F6;
width:635px;
height:280px;
}
#postAd{
display:inline-block;
background-color:#000;
width:336px;
height:280px;
}
#latestarticles{
float:left;
width:635px;
height:45px;
padding:0;
background-color:#B50800;
}
#latestarticles h1{
display:inline-block;
margin:0 0 0 8px;
Color:#ECBC08;
line-height:45px;
}
#slidingpost{
display:inline-block;
width:635px;
height:235px;
margin:0 auto;
padding:0;
}
#contentarea{
float:left;
background-color:#F6F6F6;
width:635px;
margin:0 0 5px 0;
font-family:'Helvetica', Arial, sans-serif !important;
}
.contenttitle{
float:left;
width:635px;
height:45px;
padding:0;
background-color:#B50800;
}
.contenttitle h1{
display:inline-block;
margin:0 0 0 8px;
Color:#ECBC08;
line-height:45px;
}
.realcontent{
display:inline-block;
width:625px !important;
margin:5px 8px 0 8px;
font-size:16px;
}
.realcontent p{
display:inline-block;
margin:5px 0 0 0;
text-align:left;
}
#mainsidebar{
float:right;
width:336px;
margin:0 0 5px 0;
}
#sidebararea{
float:right;
background-color:#ECBC08;
width:336px;
text-align:left;
margin:0 0 0 0;
}
#sidebararea1{
float:right;
background-color:#ECBC08;
width:336px;
text-align:left;
margin:0 0 0 0;
border-bottom:2px solid #ffffff;
}
#sidebararea2{
float:right;
background-color:#ECBC08;
width:336px;
text-align:left;
margin:0 0 0 0;
border-bottom:2px solid #ffffff;
}
.sidetitle{
float:left;
width:336px;
height:45px;
padding:0;
background-color:#B50800;
}
.sidetitle h1{
display:inline-block;
margin:0 0 0 8px;
Color:#ECBC08;
line-height:45px;
}
.sidecontent{
display:inline-block;
width:336px;
height:100%;
margin:0 auto;
}
.sidecontent li{
list-style:none;
font-family:'Nobile', Helvetica, Arial, sans-serif !important;
font-size:16px;
font-weight:bold;
color:#ffffff !important;
height:53px;
border-bottom:2px solid #ffffff;
}
.sidecontent li a{
color:#ffffff !important;
margin: 0 0 0 8px;
line-height:53px;
}
.sidecontent li a:hover{
color:#000000 !important;
}
#ny_subscribe_wrapper{
margin:0 auto !important;
width:300px;
}
#ny_subscribe_wrapper p{
font-family:'Nobile', Helvetica, Arial, sans-serif !important;
font-size:16px !important;
margin:0 0 0 1px;
}
#ny_subscribe_form input{
background-color: rgba(255, 255, 255, 0.4);
border: 5px solid #ECBC08;
padding: 10px;
font-family:'Nobile', Helvetica, Arial, sans-serif !important;
color: #4b4b4b;
font-size: 24px;
-webkit-border-radius: 5px;
margin-bottom: 15px;
margin-top: -10px;
}
#ny_subscribe_form input[type="submit"] {
margin:0 0 0 4px;
border: none;
cursor: pointer;
color: #B50800;
font-size: 24px;
background-color: #ECBC08;
padding: 5px 36px 8px 36px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.6);
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #ECBC08),
color-stop(0.62, #ECBC08)
);
background: -moz-linear-gradient(
center bottom,
#ECBC08 23%,
#ECBC08 62%
);
}
#ny_subscribe_form input[type="submit"]:hover {
color: #ECBC08;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
background-color: #ff5400;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #B50800),
color-stop(0.62, #B50800)
);
background: -moz-linear-gradient(
center bottom,
#B50800 23%,
#B50800 62%
);
}
input[type="submit"]:active { top: 1px; }
/****************************************
Footer Area
****************************************/
footer{
margin:0 auto;
background-color:#17404E;
text-align:center;
font-family:'Nobile', Helvetica, Arial, sans-serif;
color:#ffffff;
height:422px;
width:975px;
}
footer, .push{
height:422px;
clear: both;
}
#footerleft{
float:left;
width:325px;
/*background-color:#ECBC08;*/
text-align:left;
}
.footertitle{
font-family:'Nobile', Helvetica, Arial, sans-serif;
font-size:21px;
}
#lefttitle{
background-color:#B50800;
padding:5px 0 0 0;
width:325px;
height:35px;
text-align:center;
}
#footermiddle{
float:left;
width:325px;
/*background-color:#528C8C;*/
text-align:left;
}
#middletitle{
background-color:#E29213;
padding:5px 0 0 0;
width:325px;
height:35px;
text-align:center;
}
#footerright{
float:left;
width:325px;
/*background-color:#B50800;*/
text-align:left;
}
#righttitle{
background-color:#17404E;
padding:5px 0 0 0;
width:325px;
height:35px;
text-align:center;
}
#copyright{
display:inline-block;
font-size:14px;
font-weight:bold;
}
#copyright a{
color:#B50800;
}
#fmiddle{
}
/*Search Styling*/
#search {
background: #ECECEC;
background-image: -moz-linear-gradient(#fff, #ececec);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ececec),color-stop(1, #fff));
-moz-border-radius: 35px;
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #e7f7ff #fff #e7f7ff;
width: 400px;
height: 35px;
padding: 10px;
margin: 25px 10px 0 0px;
overflow: hidden; /* Clear floats */
}
.screen-reader-text{
display: none;
}
#s {
padding: 5px 9px;
height: 23px;
width: 280px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
float: left;
-moz-border-radius: 50px 3px 3px 50px;
border-radius: 50px 3px 3px 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
#searchsubmit {
background: #528C8C;
background-image: -moz-linear-gradient(#528C8C, #0099CC);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #528C8C),color-stop(1, #0099CC));
-moz-border-radius: 3px 50px 50px 3px;
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #528C8C;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 -10px;
padding: 0;
width: 90px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #003F5F;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
/*Contact form 7*/
.textwidget input {
width: 270px;
height:28px;
}
.textwidget textarea {
width: 270px;
height:100px;
}
.textwidget input[type=submit] {
background: #528C8C;
background-image: -moz-linear-gradient(#528C8C, #0099CC);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #528C8C),color-stop(1, #0099CC));
-moz-border-radius: 50px 50px 50px 50px;
border-radius: 50px 50px 50px 50px;
border-width: 1px;
border-style: solid;
border-color: #528C8C;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 0px;
padding: 0;
width: 110px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #003F5F;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
/*post styling*/
.post-excerpt a{
display:block;
margin:18px 0 0 -7px;
}
|
