hola amigos, tengo un problema y no se como resolverlo, estoy haciendo la maqueta para una pagina de clasificados que sea responsive, pero no se por que motivo se me sube el footer sobre la lista. adjunto el html y el css para ver si me pueden ayudar
Código HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The classified advertising website</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="menu.css">
</head>
<body>
<div id="container">
<div class="topbar"><div class="topbaractions">Login Register | Contact Us</div></div>
<div style="clear: both"></div>
<section class="top">
<div class="logo"><img src="seacell.png"/>
</div>
<div><label for="show-menu" class="show-menu">Show menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li class="categorylist"><a href="index.html">HOME</a></li>
<li class="categorylist"><a href="browse.html">BROWSE ALL ADS</a></li>
<li class="categorylist"><a href="post.html">POST NEW AD</a></li>
<li class="categorylist"><a href="myad.html">MY AD</a></li>
</ul></div>
</section>
<div style="clear: both"></div>
<div class="add">Post an AD</div>
<div style="clear: both"></div>
<div id="menu-category">
<span>Select a group</span>
<ol id="sub-category">
<li>Antiques, Art, Collectables</li>
<li>Automotive</li>
<li>Baby & Children</li>
<li>Boats & Jet Skis</li>
<li>Business Services</li>
<li>Community</li>
<li>Cothing & Jewellery</li>
<li>Books, Music & Games</li>
<li>Friends & Partners</li>
<li>Home & Garden</li>
<li>Pets</li>
<li>Real Estate</li>
<li>Jobs</li>
<li>Sport & Fitness</li>
<li>Tickets</li>
</ol>
</div>
<div style="clear: both"></div>
</div><!-- div contenedot -->
<footer>
Copyright 2014
</footer>
</body> css style
Código:
html{height:100%;}
body{
font-family: 'PT Sans', sans-serif;
background-color:#fff;
margin:0;
height:100%;}
#container{
margin: 10px auto 8px auto;
width: 90%;
height:100%;
margin-top:10px;
background-color:#EBEBEB;}
/* --------------------------- POST AN AD -------------------------*/
.add{
color:#000;
height:3%;
padding:1em;
text-align:center;
background-color:#ffcc00;
box-shadow:rgba(0,0,0,0.1) 0 5px 0 0;
}
/* --------------------------- LOGIN -------------------------*/
.top{
margin-top:0;}
.topbar{
background-color:#CCC;
color:#fff;
padding-top:1em;
padding-bottom:1em;
width:100%;}
.topbaractions{
color:#333;
text-align:right;
padding-right:5%;}
/* --------------------------------- LOGO -------------------------*/
.logo{
float:left;}
.logo img{
max-width:100%;
padding:1em;}
/* --------------------------- CATEGORYES -------------------------*/
#menu-category{
background: #d2691e ;
position:absolute;
color: white;
margin-top: 30px;
margin-left:20px;
font-weight: bolder;
border-radius:14px 15px 0 0;
cursor: pointer;
padding: 10px;
width: 300px;}
#sub-category{
position:relative;
background: white;
cursor: pointer;
font-weight: lighter;
padding: 0;
margin: 10px -10px 0 -10px;
width: 320px;}
#sub-category li{
color: #333;
cursor: pointer;
padding: 10px;
margin: 0;
list-style: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;}
#sub-category li:hover{
border-left: solid 5px #a98701;
background: #ffcc00;
font-weight: bolder;}
/* --------------------------- FOOTER -------------------------*/
footer{
position:relative;
text-align:center;
padding:1em;
background-color:#999;
width:88%;
margin:0 auto;}
/* --------------------------- @MEDIAS -------------------------*/
@media (max-width: 1024px) {
.logo{float:none; text-align:center;}
.logo img{ padding:0 0 1em 0;}
.topbaractions{text-align:center;}
.add{margin-top:3em;}
}
@media (max-width: 480px) {
#menu-category{ float:none; text-align:center; margin:15PX auto 0 auto;}
}
@media (max-width: 340px) {
#menu-category{width:200px; margin:10px auto 10px auto; text-align:center;}
#sub-category{width:220px;}
}