CSS - se me descuadran las capas

   
Vista:

se me descuadran las capas

Publicado por rosy (1 intervención) el 27/11/2012 16:14:44
Hola, la idea de mi pagina es tener un menu lateral al lado izquierdo, en el centro dos capas; la primera donde va una foto grande, debajo de esta 4 capas y alli van 4 fotos pequeñas, luego en el lado derecho una capa donde va una descripcion de la foto grande. Estaba todo bien, (y quiero aprovechar de agradecer a Xve que me ha ayudado muchisimo), pero no me habia dado cuenta que cuando la descipcion de la foto grande es muy larga, las 4 fotos pequeñas se apartan de la foto grande y esa no es la idea, la idea es que siempre esten pegaditas en la parte de abajo de la foto Grande. A continuacion coloco la pagina de estilo y la pagina html a ver si alguien me puede ayudar con las capas.

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
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
body {background-image: url(../img/fondo.jpg);
	 }
 
#fondo {background-color:#FFFFFF;
        width:850px;
		height:auto;
		margin: 4px auto;
		padding: 6px 0px;
/*		text-align:center*/
	   }
 
#global {margin: 0px auto;
         width: 800px;
		}
 
#cabecera { background-image:url(../img/degradado1.jpg);
			height: 120px;
			margin: 0px 0px 4px 0 px
		   }
 
#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 {}
 
#menu1{float:left; width:200px;text-align:left; padding:2px}
 
#imagenes{ height:-1%; overflow:hidden}
 
#fotoG{float:left;width:400px; height:300px; background:#FFCC99}
#foto1{float:left;clear:left; width:93px; height:80px; margin: 2px 6px 2px 0px}
#foto2{float:left;width:93px; height:80px; margin: 2px 6px 2px 0px }
#foto3{float:left;width:93px; height:80px; margin: 2px 6px 2px 0px }
#foto4{float:left;width:93px; height:80px; margin: 2px 6px 2px 0px }
 
.imagen{width: 95%;height: 95%;}
 
#descrip{ float:left; 
		width:185px;
		height:auto;
		margin: 2px 2px 2px 4px}
 
#pie {height:20px; width:800px; color:#FFFFFF; font:bold; background:#003399;margin: 4px auto;}
 
.tit_cat {
	color: #FFCC33;
	font-weight: bold;
	font-size: 18px;
	font-style: italic;
}
 
#sep_cat{ 
	width:199px;
	color:#000099;
	left:auto;
	border: 1px #ccc;
	margin:0 auto;
	height:2px
}
 
#p_cat {text-indent: 0.5cm; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:11px; 
   margin-bottom: 0;
   margin-top:0;
}



index.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
<!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>CATALOGO</title>
<link href="pagina.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
 
<div id="fondo">
<div id="global">
<div id="cabecera"></div>
 
<div id="menu1" style="background-color: #FFFF00" >
	<p align="center" style="color:#333399">PRODUCTOS</p>
	<ul>
	 <li>Item 01</li>
	 <li>Item 02</li>
	 <li>Item 03</li>
	 <li>Item 04</li>
	 <li>Item 05</li>
	 <li>Item 06</li>
	</ul>
</div>
 
<div id="imagenes">
<div id="fotoG">FOTO GRANDE</div>
<div id="descrip" style="background-color:#CCCCCC" style="font-size: small;" align="justify" >
Hombres y mujeres de distinta condición cultural, racial o étnica conforman nuestro staff que cautiva por sus elementos diferenciadores y ciertamente profesionales. Destacan modelos bellas, cultas y bilingües, capaces de interactuar con éxito ante todo evento de primer nivel y según los estándares de protocolo internacional más exigentes. Ellas, delicadas, finas y femeninas. Ellos, caballeros, atentos, y varoniles. Así, con inusitada sorpresa clientes constatan que las/os modelos presentados por nuestra agencia, tienen destacado comportamiento, y disposición, junto a una pulcra presencia, en atención al sello distintivo que nuestra estilo y trato imprime. Alejados del ruido de la farándula cada modelo presentada/o por Agencia Promodel Chile, encarna la distinción, elegancia y clase que toda empresa moderna reclama.
</div>
<div id="foto1" style="background-color:#FF00FF"></div>
<div id="foto2" style="background-color:#FF66FF"></div>
<div id="foto3" style="background-color:#FF99FF"></div>
<div id="foto4" style="background-color:#FFCCCC"></div>
</div>
 
</div> <!--Fin capa Global -->
 
</div> <!--Fin capa Fondo -->
 
 
</body>
</html>
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