I'm having trouble putting a sticky footer onto a site I'm working on.
I've tried everything and can't think of what the problem could be.If someone could take a look at the coding id appreciate it.
As some content on the site is only going to be small paragraphs i need a sticky footer to stick to the bottom to stop it floating in the middle of the site.
I have the content in a div that over laps a image and id like the footer to float on the bottom. however when i close the divs i can't get the footer to stay at the bottom, it starts floating under the image banner. Ive tried position:fixed; but i don't want that as it overlaps the content. Thanks
HTML
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Linear Partners</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta name="viewport" content="initial-scale=1, maximum-scale=2" />
<link href="style1.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script type='text/javascript' src='js/main.js'></script>
<script>
$(document).ready(function() {
$('#menu-toggle').click(function () {
$('#menu').toggleClass('open');
e.preventDefault();
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="mainpage">
<div id="header">
<img src="images/Linear.Partners.Logo.png" width ="173" height="65" alt="logo">
<nav class="nav clearfix">
<a id="menu-toggle" class="anchor-link" href="#"><img src="images/3lines.png" width ="31" height="25"></a>
<ul class="simple-toggle" id="menu">
<li>Home</li>
<li>About
<ul>
<li>Team</li>
</ul>
</li>
<li>Expertise</li>
<li>Research</li>
<li>Best Practice</li>
<li>Join Our Team</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="bg-image"style="background-image:url(images/slide1.jpg); background-position:50% 50%;">
<div id="main" class="wrapper clearfix">
<left>
<h1>Privacy Policy</h1>
<p>Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</p>
</left>
<right>
<h1>Privacy Policy</h1>
Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</right>
</div>
</div>
<div class="clear"></div>
<footer>
<div id="footer-wrapper">
<div id="footer-content">
<div class="Copyright">
Copyright © 2014 Linear Partners. All rights reserved.
</div>
<div class="footer-nav">
Home Privacy Diversity Policy
</div>
</div>
</div>
</footer>
<!-- #end footer area -->
</body>
</html>
CSS
html, body {
height: 100%; margin: 0; padding: 0;
}
body
{
margin:0;
padding:0;
background: #fff;
font: 13px'helvetica', ariel, sans-serif;
color: #000;
}
/*Header*/
#header
{
position:relative;
width:autopx;
max-width:950px;
height:65px;
margin: 0 auto;
z-index:10000;
background: #fff;
padding:20px;
}
#wrap {min-height: 100%;}
#mainpage {
padding-bottom: 85px;} /* must be same height as the footer */
.footer {position: relative;
margin-top: -85px; /* negative value of footer height */
height: 85px;
clear:both;}
/* nav */
.nav
{
width:autopx;
float:right;
padding-top:22px;
}
ul.simple-toggle
{
list-style:none;
padding: 0px;
margin: 0px;
text-align: center;
}
ul.simple-toggle li {
display: inline-block;
text-align: center;
border-right: 1px solid #cfcfcf;
}
ul.simple-toggle li:last-child
{
border-right: none;
}
ul.simple-toggle li a
{
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
color:#000;
text-decoration:none;
}
.anchor-link
{
display: none;
background-color: #16447b;
margin-top: -10px;
float: right;
height:40px;
width:40px;
}
.anchor-link img
{
margin:9px 6px 0px 4px ;
}
#mobile-nav
{
display:none;
}
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
nav ul
{
list-style: none;
position: relative;
display: inline-table;
}
nav ul li:hover
{
background: #16447b;
color: #fff;
}
nav ul li:hover a
{
color: #fff;
}
nav ul ul
{
background: #092a55; padding:0px; margin:0px;
position: inherit; top: 100%;
}
nav ul ul:hover a
{
background: #6689b3;
}
/*wrapper*/
#bg-image {
z-index:-5780000;
float: left;
width: 100%;
height:250px;
background-size:cover;
margin-top:2px;
border: 2px solid #16447b;
border-width: 2px 0;
border-color: #fff;
box-shadow: 0 2px 0px #16447b, 0 -2px 0px #16447b;
}
.wrapper
{
width:90%;
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:150px;
}
#main left{
background-color: #fff;
width: 62.5%;
float: left;
}
#main right
{
background-color:#fff;
width: 35%;
float: right;
}
/*Footer*/
#footer-wrapper
{
height:65px;
margin: 0 auto;
background: #000;
padding:20px;
}
#footer-content
{
height:65px;
max-height:120px;
position:relative;
width:100%;
max-width:950px;
margin: 0 auto;
margin-top:20px;
color: #fff;
}
.Copyright
{
margin-top:5px;
float:left;
color: #fff;
text-decoration:none;
}
.footer-nav
{
margin-top:5px;
float:right;
color: #fff;
text-decoration:none;
margin-right:-6px;
}
.footer-nav a
{
color: #fff;
padding-left:6px;
padding-right:5px;
border-right: 1px solid #fff;
text-decoration:none;
float: left;
}
.footer-nav a:last-child
{
border:none;
}
.footer-nav a:hover
{
text-decoration:underline;
}
.clear {
clear:both;
}
/*media*/
#media (max-width:750px){
ul.simple-toggle
{
display: none;
}
.anchor-link, #mobile-nav
{
display: block;
}
ul.open
{
background-color: #16447b;
display: block;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 20px;
top: 100%;
width: 175px;
z-index: 50000;
opacity:0.90;
}
ul.open ul
{
background-color: #092a55;
display: none;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
top: 100%;
width: 175px;
z-index: 50000;
}
ul.open li
{
display: block;
list-style: none;
text-align: center;
border: none;
}
ul.open li a
{
display: block;
padding: 10px 5px;
border-bottom: 0px solid #5578a4;
color: #fff;
}
ul.open li a:hover
{
background-color: #375d8f;
color: #fff;
}
.wrapper
{
width:85%;
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:250px;
}
#main left{
background:#fff;
width: 62.5%;
float: left;
}
#main right
{
background:#fff;
width: 35%;
float: right;
}
.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}
}
#media (max-width:480px){
img[src*="images/Linear.Partners.Logo.png"]
{
margin-top:13px;
height:40px;
width:106px;
}
.bg-image {
float: left;
width: 100%;
height:150px;
background-size:cover;
}
.wrapper{
width:80%;
height:200px;
margin-top:75px;
}
#main right
{
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
#main left
{
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}
}
To avoid the footer to overlap the content add a margin to the content corresponding to the footer's height
.footer-nav{
//...
position:fixed;
bottom;0;
height:50px; // just an example
//...
}
.wrap{
margin-bottom:50px;// same as .footer-nav height
}
FIDDLE
Try this for footer div:-
#footer-wrapper {
background: none repeat scroll 0 0 #000000;
height: 65px;
margin: 0 auto;
padding: 20px;
bottom: 0;/*add from here*/
left: 0;
position: fixed;
width: 100%;/*to here*/
}
Check out this code
it may help youjust wirte the footer tag inside the wrap div
<div id="wrap"> <footer></footer> </div>
It seems that everything alright but you missed somewhere 2 closing DIVs.
Try to add them before
<div class="clear"></div>
http://jsfiddle.net/wF9UL/
Related
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
I'm doing clone coding of Lotte World homepage in Korea.The homepage has a layout with the float elements. I gave the logo float property to the left. and I gave the .info class float property to the right. And naturally, the .gnb class becomes a central alignment. through text-align center. The problem is that there is an undefined margin on top of .gnb class. I did some experiments and deleted the logo and the problem was solved. I want to know exactly what caused the problem.
/*no reset css*/
header{
width: 100%;
height: 46px;
border-bottom: 1px solid #e1e1e1;
background: #f8f8f8;
}
#header::after{
content:"";
display: block;
clear: both;
}
#header{
position: relative;
width: 1173px;
margin: 0 auto;
}
#header .left li a{
display: inline-block;
height: 46px;
font-size: 13px;
color:#555;
}
#header .left li{
float: left;
position: relative;
padding: 0 20px;
line-height: 46px;
}
/* 첫 번째 자식 구분선 해제 */
#header .left li:first-child{
padding-left: 0;
}
#header .left li:first-child:after{
display: none;
}
/* 로고 구분선 */
#header .left li:after{
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 14px;
width: 1px;
height: 20px;
background: #e1e1e1;
}
/* 왼쪽 로고 이미지 */
#header .left li:first-child a{
padding: 0 0 0 28px;
background: url('https://adventure.lotteworld.com/common/images/icon/header_sky_icon.png') no-repeat 0 50%;
}
#header .left li:nth-child(2) a{
padding: 0 0 0 35px;
background: url('https://adventure.lotteworld.com/common/images/icon/header_aqua_icon.png') no-repeat 0 50%;
}
#header .left li:last-child a{
padding: 0 0 0 33px;
background: url('https://adventure.lotteworld.com/common/images/icon/header_water_icon.png') no-repeat 0 50%;
}
/* 오른쪽 */
.family,
.members,
.lang{
display: inline-block;
}
#header .right{
float: right;
}
#header .right li,
a{
float: left;
position: relative;
line-height: 46px;
}
#header .family > a:last-child{
padding-right: 30px;
}
#header .family a:hover{
color: #590fe4;
}
#header .members a:hover{
color: #000;
}
#header .members a,
#header .lang a{
font-weight: bold;
}
#header .family a,
#header .members a{
padding: 0 11px;
}
#header .family a,
#header .members a,
#header .lang a{
font-size: 13px;
color: #555;
}
#header .family li:first-child:after,
#header .members li:first-child:after{
display: none;
}
#header .family li:after,
#header .members li:after{
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 14px;
width: 1px;
height: 20px;
background: #e1e1e1;
}
#header .lang a{
padding-right: 16px;
height: 46px;
background: url('img/lang_arrow.png') no-repeat right center;
}
/* 네비게이션 */
nav{
width: 100%;
height: 99px;
border-bottom: 1px solid #e1e1e1;
}
#nav{
width: 1173px;
height: 100px;
margin: 0 auto;
text-align: center;
}
/* 왼쪽 */
#nav h1{
float: left;
margin-top: 13px;
}
/* 중앙 */
#nav .gnb::before{
content:"";
display: block;
clear: both;
}
#nav .gnb{
float: left;
height: 99px;
margin-left: 176px;
}
#nav .gnb li:first-child{
padding-left: 0;
}
#nav .gnb li{
height: 99px;
padding-left: 48px;
float: left;
}
#nav .gnb li a{
display: block;
font-size: 17px;
line-height: 95px;
}
/* 오른쪽 */
#nav .info{
height: 78px;
margin-top: 21px;
float: right;
}
#nav .info .srch, .reser, .group{
position: relative;
padding-left: 32px;
float: left;
}
#nav .info .Btn span{
display: block;
}
#nav .info .Btn span:nth-child(2){
padding-top: 13px;
}
#nav .info .txt{
position: absolute;
left: 50%;
font-size: 16px;
color: #590fe4;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>롯데월드 어드벤처</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="default.css">
</head>
<body>
<header>
<div id="header">
<ul class="left">
<li>SEOUL SKY</li>
<li>롯데월드 아쿠아리움</li>
<li>김해롯데워터파크</li>
</ul>
<ul class="right">
<div class="family">
<li>민속박물관</li>
<li>아이스링크</li>
</div>
<div class="members">
<ul>
<li>Login</li>
<li>회원가입</li>
</ul>
</div>
<div class="lang">
KOR
</div>
</ul>
</div>
</header>
<nav>
<div id="nav">
<h1>
<img src="img/logo.png" alt="롯데월드 어드벤처 로고">
</h1>
<ul class="gnb">
<li>즐길거리</li>
<li>요금/우대혜택</li>
<li>참여프로그램</li>
<li>이용가이드</li>
<li>소통서비스</li>
</ul>
<ul class="info">
<p class="srch Btn">
<span>
<img src="img/header_srch_btn.png" alt="검색하기">
</span>
<span class="txt">검색</span>
</p>
<p class="reser Btn">
<span>
<img src="img/reser_btn.png" alt="예매하기">
</span>
<span class="txt">예매</span>
</p>
<p class="group Btn">
<span><img src="img/group_btn.png" alt="단체예약"></span>
<span class="txt">단체</span>
</p>
</ul>
</div>
</nav>
</body>
</html>
Most Browsers render a default margin for ordered and unordered lists. To avoid that use reset css rules (for example this)
EDIT
actually you set the margin youself here:
#nav .gnb{
float: left;
height: 99px;
margin-left: 176px; // remove this line
}
I'm simply trying to modify the navigation bar of my site for smaller devices. The site should be remaining with a fixed design for iPads+ resolutions, and then become responsive for smaller resolutions. While the mobile-size specific codes are applying to some classes (container, main, etc.), they don't seem to apply to the navigation div. You can see how it's currently functioning here: http://moore.whiterabbitstudio.us/
Here is a fiddle for permanence: http://jsfiddle.net/ursalarose/xAp72/
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<body>
<div class="container">
<div class="main-hold">
<div class="main">
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Gallery</li>
<li>Process</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS:
body
{
display: table;
margin: 0 auto;
letter-spacing: .1em;
text-align: center;
font-size: 16px;
}
*
{
margin:0;padding:0;
}
html,body
{
height:100%;
}
.container {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.main-hold {
height:600px;
width:1000px;
display: table-cell;
vertical-align: middle;
text-align: center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.main {
height:540px;
width:900px;
background-position: left top;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
/* MOBILE DEVICES */
#media screen and (max-width: 950px){
.main-hold {
width:500px;
display: table-cell;
vertical-align: middle;
text-align: center;
margin-top: 0px auto;
}
.main {
width:100%;
background-repeat:no-repeat;
background-position:center top;
margin-top: 0px auto;
}
#nav {
margin: 20px auto 0 auto;
float:none;
width: 100%;
}
#nav ul {
list-style:none;
}
#nav li {
width: 100%;
}
#nav li a {
font-size: 14px;
text-decoration:none;
color:#888;
display: block;
text-align:center;
width: 100%;
height: 22px;
display: inline;
background-color:#CCC;
background-image: none;
padding-right: 0px;
padding-top: 6px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
#nav li a:hover, #nav li a.current {
background-color:#FFF;
}
}
/* NAVIGATION */
#nav {
float: left;
height: 250px;
width: 168px;
margin-top: 60px;
}
#nav ul {
list-style:none;
}
#nav li {
width: 168px;
height: 28px;
display: block;
margin-bottom: 8px;
}
#nav li a {
font-size: 14px;
text-decoration:none;
color:#888;
display: block;
text-align: right;
width: 148px;
height: 22px;
display: block;
padding-right: 20px;
padding-top: 6px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
#nav li a:hover, #nav li a.current {
background-color:#fff;
}
Thank you for any help! I've never tried designing for mobile devices before.
Try placing the mobile CSS below the desktop CSS, as the desktop CSS is now overwriting the mobile css.
I have 2 boxes that should show up next to eachother. I want one to have a vertical fixed position.
So when I scroll up or down the box stays at the same height.
But I don't want it to be horizontal fixed, because I want the 2 boxes together always in the center. Even when you make your browser bigger or smaller. For this I use the margin: 20px auto;
Is there any way how I can keep the margin and get 2 boxes where 1 of them has a vertical fixed position.
Just like this website when making a post. There is a the main page with the question and a sidebox with similar question that always stays on the screeen.
My code so far:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/favicon.ico">
<style>
html,
body {
background-color: #026642;
}
#container {
width: 800px;
margin: 20px auto;
position: relative;
}
#sidebox {
background-color: white;
padding: 5px;
margin: 5px;
border-radius: 5px;
width: 180px;
position: absolute;
}
#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 580px;
position: absolute;
}
#header {
text-align: center;
}
#content {
background-color: white;
padding: 5px;
margin: 5px;
border-radius: 5px;
}
#content i {
font-size: 14px;
}
#footer {
clear: both;
padding: 0 5px;
font-size: 11px;
clear: both;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
color: black;
}
a:active {
text-decoration: underline;
color: black;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebox">
Sidebox
</div>
<div id="indexcontainer">
<div id="header">
<img src="images/emte.jpg" alt="logo" width="200" height="100">
</a>
</div>
<div id='content'>
Main text box
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
How it needs to work:
use this CSS...
body {
background-color: #026642;
}
#container {
width: 100%;
}
#container #indexcontainer{
margin-left:23%;
width:30%;
}
#container #indexcontainer #header #sidebox {
background-color: white;
color:red;
padding: 5px;
margin-left:31%;
border-radius: 5px;
width: 20%;
position: fixed;
}
#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 580px;
position:relative;
}
#header {
text-align: center;
}
#content {
background-color: white;
padding: 5px;
margin: 5px;
border-radius: 5px;
}
#content i {
font-size: 14px;
}
#footer {
clear: both;
padding: 0 5px;
font-size: 11px;
clear: both;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
color: black;
}
a:active {
text-decoration: underline;
color: black;
}
for further look at this jsfiddle link http://jsfiddle.net/NJMK6/4/
Hope this help you... thanks
<html>
<head>
<script type="text/css">
#sidebox{
margin:left;
position:fixed;
}
</script>
</head>
<body>
<div id="sidebox">
Sidebox
</div>
<p>
other data to display......
</p>
</body>
Hope this will helps
also you can see this JsFiddle link http://jsfiddle.net/Dn3UH/
#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 40%;
position: relative;
margin: 0 auto;
}
#container {
width: 100%;
margin: 20px auto;
position: relative;
}
My footer will not stay at the bottom of my page.
I tried the sticky footer trick, but no good.
Seems my footer has white space beneath it.
Adjusting height on it has done no good.
Here is the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<!-- <meta name="viewport" content="width=device-width; initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<link rel="stylesheet" type="text/css" href="style3.css" />
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script src="navigation.js"></script>
</head><body>
<div id="top">
<header>
<div id="topLeft">topleft</div>
<nav id="nav-wrap">
<ul id="nav">
<li>Home</li>
<li>Attendees<ul><li>Sub Menu</li><li>Sub Menu</li><li>Sub Menu</li><li>Sub Menu</li></ul></li>
<li>Exhibitors</li>
<li>Speakers</li>
<li>Program</li>
</ul>
</nav>
<div id="topRight">topright</div>
</header>
</div>
<div id="middle">
<div id="headerLeft"></div>
<div id="headerimage">
<img src="header-2013.jpg"/>
</div>
<div id="headerRight"></div>
<br style="clear: left;" />
</div>
<div id="pagewrap">
<div id="content">
<!-- <h3>To see the mobile navigation, narrow your browser window or check with a mobile device.</h3>
<p>Unholy is a new, upcoming raiding guild with goals of
successfully accomplishing Player versus Environment and Player versus Player
raiding content. If thou art seeking such guild then thou would consider joining
us on our quest to victory over the evils that lurk within the depths of
Karazhan and Zul'Aman. All are welcome that have experienced the foul beasts
that roam abroad the forsaken ground in the Outlands and whish to further
explore and cleanse such places. If this should be thy calling then we welcome
you to our quest for victory, For the Horde </p> -->
</div>
</div>
<footer>
<div id="footer">
footer
</div>
</footer>
</body></html>
And here is the CSS:
/************************************************************************************
GENERAL
*************************************************************************************/
html{
height:auto;
}
body {
font: .9em/150% Arial, Helvetica, sans-serif;
color: #666;
overflow-x:hidden;
/******extra Mike Clayton **/
margin: 0;
padding:0;
height:100%;
}
a {
text-decoration: none;
color: #39C;
}
h1, h2 {
line-height: 120%;
margin: 0 0 10px;
color: #000;
}
header {
content: " ";
display: table;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
width: 100%;
max-width:650px;
margin: 0px auto;
/**Mike Clayton**/
min-height:100%;
height:100%;
}
#content {
clear: both;
border-top: solid 1px #ccc;
padding-top: 20px;
margin: 20px 0;
width:100%;
/**Mike clayton**/
/* padding-bottom:250px; */
padding-bottom:55%;
}
#top{
width:100%;
background-color:#002664;
clear:both;
}
#topLeft{
float:left;
background-color:#002664;
width:20%;
margin:0;
}
#topRight{
float:left;
background-color:#002664;
width:20%;
margin:0;
}
#middle{
width:100%;
background-color:#AD1B30;
overflow: hidden;
}
#headerLeft{
float:left;
background-color:#AD1B30;
width:20%;
margin:0;
}
#headerimage{
width:650px;
align:center;
margin:0 auto;
}
#headerimage img{
width:100%;
}
#headerRight{
float:left;
background-color:#AD1B30;
width:20%;
margin:0;
}
#footer{
/* background-color:#002664;
width:100%;
margin-top:-100;
height:150px; */
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color:#002664;
width:100%;
margin-top:-100;
}
/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
margin-top: 20px;
}
/* menu icon */
#menu-icon {
display: none; /* hide menu icon initially */
}
#nav,
#nav li {
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
float: left;
margin-right: 5px;
}
/* nav link */
#nav a {
padding: 4px 15px;
display: block;
color: #000;
background: #ecebeb;
}
#nav a:hover {
background: #f8f8f8;
}
/* nav dropdown */
#nav ul {
background: #fff;
padding: 2px;
position: absolute;
border: solid 1px #ccc;
display: none; /* hide dropdown */
width: 200px;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav li:hover > ul {
display: block; /* show dropdown on hover */
}
/************************************************************************************
MOBILE
*************************************************************************************/
#media screen and (max-width: 600px) {
/* nav-wrap */
#nav-wrap {
position: relative;
}
/* menu icon */
#menu-icon {
color: #000;
width: 42px;
height: 30px;
background: #ecebeb url(menu-icon.png) no-repeat 10px center;
padding: 8px 10px 0 42px;
cursor: pointer;
border: solid 1px #666;
display: block; /* show menu icon */
}
#menu-icon:hover {
background-color: #f8f8f8;
}
#menu-icon.active {
background-color: #bbb;
}
/* main nav */
#nav {
clear: both;
position: absolute;
top: 38px;
width: 160px;
z-index: 10000;
padding: 5px;
background: #f8f8f8;
border: solid 1px #999;
display: none; /* visibility will be toggled with jquery */
}
#nav li {
clear: both;
float: none;
margin: 5px 0 5px 10px;
}
#nav a,
#nav ul a {
font: inherit;
background: none;
display: inline;
padding: 0;
color: #666;
border: none;
}
#nav a:hover,
#nav ul a:hover {
background: none;
color: #000;
}
/* dropdown */
#nav ul {
width: auto;
position: static;
display: block;
border: none;
background: inherit;
}
#nav ul li {
margin: 3px 0 3px 15px;
}
#headerimage {
display: none;
}
}
#media screen and (min-width: 600px) {
/* ensure #nav is visible on desktop version */
#nav {
display: block !important;
}
}
So, that last post from Kakarott worked.
Also, I used position:relative for my Media Query mobile dev and it made that same CSS work for my Mobile site.
So, for desktop and tablet, I'm using position:absolute and for mobile:relative.
FYI, I'm using a responsive design.
Check this
http://code.google.com/p/cleanstickyfooter/
and the best solution
http://www.cssstickyfooter.com/
Change your footer css to:
#footer{
clear: both;
position: absolute;
z-index: 10;
height: 3em;
bottom:0;
background-color:#002664;
width:100%;
}
So my CSS layout was all fine until I wanted to add some into the content area of my web page.
What I'm trying to add into the content section is a wrapper box which contains a graph on the left and a bunch of little info boxes on the right, and potentially an info area underneath those two with 100% width of the content box.
But as soon as I add that in, it pushes my User Info div down below Content. =/ So I guess what's asking is how to create containers of divs within my content section that won't affect things like my sidebar?
Here's my code:
<div id="wrapper">
<div id="header"> </div><!-- #header-->
<div id="nav"> </div>
<div id="middle">
<div id="container">
<div id="content"><!-- content -->
<div id='containerGraph'>
<div id='sngAnimals'></div>
<div id='graph'><img src='./lib/pChart2.1.1/examples/chartAnimalKillsPerDay.php' width='x' height='y' id='graphImg'/></div>
<div id='bottomCont'></div></div>
</div><!-- #content-->
</div><!-- #container-->
<div class="sidebar" id="sideLeft">
User info
</div><!-- .sidebar#sideLeft -->
</div><!-- #middle-->
</div><!-- #wrapper -->
And the css:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-image:url('/mcimages/bg.png');
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
color: white;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
#content {
padding: 10px 0 10px 195px;
background: #666666;
}
#containerGraph {
border-style:solid;
border-width:5px;
width: 75%;
position:relative;
}
#graph {
width: 249px;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:left;
}
#sngAnimals {
width:50%;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:right;
}
#bottomCont{
position: relative;
clear:both;
}
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 175px;
margin-left: -100%;
position: relative;
margin-top: 10px;
padding-left: 5px;
padding-top: 10px;
border-right-style: solid;
border-right-color: black;
border-right-width: 1px;
}
#friend {
float: left;
background: #B5AAFF;
border:1px solid;
position: relative;
top:5px;
left:0px;
margin-left:10px;
width:175px;
height:175px;
}
You didn't close a div and your CSS had errors as well:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="A short description." />
<meta name="keywords" content="put, keywords, here" />
<title>CraftLink</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="wrapper">
<div id="header">HEADER CONTENT</div><!-- #header-->
<div id="nav">
Nav item 1
Nav item 2
Nav item 3
Nav item 4
</div>
<div id="middle">
<div id="container">
<div class="sidebar" id="sideLeft">USER INFO GOES HERE.</div><!-- .sidebar#sideLeft -->
<div id="content"><!-- content -->
<div id='containerGraph'>
<div id='sngAnimals'></div>
<div id='graph'><img src='./lib/pChart2.1.1/examples/chartAnimalKillsPerDay.php' width='x' height='y' id='graphImg'/></div>
<div id='bottomCont'></div>
</div>
</div><!-- #content-->
</div><!-- #container-->
</div><!-- #middle-->
</div><!-- #wrapper -->
<!-- #footer -->
<div id="footer">
<h1>Footer Stuff</h1>
</div>
</body>
</html>
The CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-image:url('/mcimages/bg.png');
}
a {
color: white;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
color: white;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
height: 100px;
background: #999999;
text-align: center;
font-size: 200%;
}
#nav {
height: 25px;
background: #555555;
text-align: center;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
#content {
padding: 10px 0 10px 195px;
background: #666666;
}
#containerGraph {
border-style:solid;
border-width:5px;
width: 75%;
position:relative;
}
#graph {
width: 249px;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:left;
}
#sngAnimals {
width:50%;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:right;
}
#bottomCont{
position: relative;
clear:both;
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 175px;
position: relative;
margin-top: 10px;
padding-left: 5px;
padding-top: 10px;
border-right-style: solid;
border-right-color: black;
border-right-width: 1px;
}
#friend {
float: left;
background: #B5AAFF;
border:1px solid;
position: relative;
top:5px;
left:0px;
margin-left:10px;
width:175px;
height:175px;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
width: 1000px;
margin: -100px auto 0;
height: 100px;
background: #BFF08E;
}
/* Progress bar
----------------------------------------------------------------------------*/
.meter-wrap{
position: relative;
}
.meter-wrap, .meter-value, .meter-text {
/* The width and height of your image */
width: 155px; height: 30px;
}
.meter-wrap, .meter-value {
background: #3D352A url(/path/to/your-image.png) top left no-repeat;
}
.meter-text {
position: absolute;
top:0; left:0;
padding-top: 5px;
color: #fff;
text-align: center;
width: 100%;
}