problema con capa que no crece
Publicado por Rosy (68 intervenciones) el 28/09/2012 17:03:03
Hola, hice una pagina y la maquetacion está hecha con capas, pero me di cuenta de un problema que se produce cuando agrego contenido en una de las capas, que corresponde a un menu del lado izquierdo de la pagina, la capa que contiene a la capa menu no crece quedando las opciones fuera de marco. Voy a colocar la pagina y los estilos a ver si alguien lo puede ver y echarme una mano con esto.
Aqui dejo pagina.html
A continuacion la pagina de estilos pagina.css
Aqui dejo pagina.html
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
<!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=iso-8859-1" />
<title>Maquetacion con Capas</title>
<link href="styles/pagina.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fondo">
<div id="global">
<div id="cabecera">
<div id="logotipo"><img src="img/logotipo.png" width="100" height="100" alt="Logo de Tu web">
</div>
<div id="banner"></div>
</div>
<div id="navegacion">
<table width="100%" border="0">
<tr>
<td width="25%" align="center"><a href="index.html">Índice</a></td>
<td width="25%" align="center"><a href="#">Sección 1</a></td>
<td width="25%" align="center"><a href="#">Sección 2</a></td>
<td width="25%" align="center"><a href="#">Sección 3</a></td>
</tr>
</table>
</div>
<div id="menu1">
<ul>
<li>Opcion1 </li>
<li>Opcion2 </li>
<li>Opcion3 </li>
<li>Opcion4 </li>
<li>Opcion5 </li>
<li>Opcion6 </li>
</ul>
</div>
<p>Aquí va lo que se ve</p>
<p>Ésta es otra línea</p>
</div> <!--Fin capa Global -->
</div> <!--Fin capa fondo -->
</body>
</html>
A continuacion la pagina de estilos pagina.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
#cabecera { background-image:url(../img/degradado1.jpg);
height: 120px; margin: 0px 0px 4px 0 px }#fondo {background-color:#FFFFFF;
width:820px; margin: 4px auto; padding: 6px 0px;text-align:center
}body {background-image: url(../img/fondo.jpg);
text-align:center
}#global {margin: 0px auto;
width: 800px }#menu1{float:left; width:200px;text-align:left; padding:2px}
#logotipo {float:left;
padding: 13px 0px 10px 13px }#banner {float:right}
#navegacion {margin: 4px 0px 4px 0px; background-color: #000066}
#navegacion a {color: #CCCCCC; text-decoration:none; margin: 1px; font-weight: bold}
#navegacion a:link {}
#navegacion a:hover {color: #FFFFFF; background-color:#000000}
#navegacion a:active {color: #99FFFF}
#navegacion a:visited {}
Valora esta pregunta
1
, a mi manera pero solucionado 
