problemas con capas
Publicado por Rosy (68 intervenciones) el 28/11/2012 16:12:30
Aunque este tema lo puse en el foro de CSS, como parece que ahi penan las ánimas, nadie me respondió, a ver si por aqui temgo mejor suerte.
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
index.html
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
0
porque asi como envié el codigo efectivamente funciona, pero luego cuando lo apliqué a mi pagina no funcionó. Te cuento lo que pasa, para el foro traté te simplificar la pagina enviando solo lo que tenia que ver con el tema de la maquetacion y saqué todo la programacion, conexion a base de datos y funciones javascrip porque no tenia sentido incluirlo ya que no iba a funcionar principalmente por la base de datos. Apliqué los cambios a mi pagina y no funcionó, se desordenó pero ahora de otra forma. De todas maneras pienso que debiera funcionar y que la programacion no debiera incluir asi que voy a revisar bien el codigo porque pienso que entre lineas debo tener algo que debe estar mal y que está afectando.