HTML - tengo un problema con una lista

   
Vista:

tengo un problema con una lista

Publicado por Nicolas (3 intervenciones) el 10/09/2014 17:28:31
hola amigos, estroy realizando una maqueta para un sitio de lcasificados y no se por que tengo una lista que se me superpone con el footer, como si no estubiera cerrada, llevo tiempo y no encuentro como solucionarlo.

thump_9067914lista
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SeaCell - 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">
    </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>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
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;
	height:50px;
	margin-top:-50px;
	text-align:center;
	padding:1em;
	background-color:#999;
	width:88%;
	}
 
/* --------------------------- @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;}
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

tengo un problema con una lista

Publicado por xve (1178 intervenciones) el 10/09/2014 18:59:05
Hola Nicolas, te he tenido que quitar tres estilos para que se posicione bien... aqui te adjunto el código con los estilos que he quitado en negrita

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
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; */
	height:50px;
	margin-top:-50px;
	text-align:center;
	padding:1em;
	background-color:#999;
	width:88%;
	}
 
/* --------------------------- @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;}
}

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

tengo un problema con una lista

Publicado por Nicolas (3 intervenciones) el 17/09/2014 17:20:45
eso resolvio el problema, muchisimas gracias, llevaba dias buscando la solucion!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar