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.
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
<!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
0
