se me superpone el footer

funnico · #1 (**permalink**) 10/09/2014, 08:25

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

jesus1975 · #2 (**permalink**) 11/09/2014, 13:57

Buenas, he probado en chrome y con tu codigo no se superpone, pero en firefox si, he cambiado el codigo del style y si funciona, lo unico que te vale si las categorias siempre son las mismas...

#container{
margin: 10px auto 8px auto;
width: 90%;
margin-top:10px;
background-color:#EBEBEB;
min-height:925px;}

Espero te sirva...