PHP - problemas con capas

   
Vista:

problemas con capas

Publicado por Rosy (64 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
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

problemas con capas

Hola Rosy fijate si asi funciona.
Saludos

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; float:left;}
 
#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:right; 
    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;
}


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="css.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="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 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> <!--Fin capa Global -->
 
</div> <!--Fin capa Fondo -->
 
 
</body>
</html>
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

problemas con capas

No se si lo usas, pero por las dudas te recomiendo que instales firebug en firefox o en chrome, aunque chrome creo q ya trae herramientas para desarrolladores.
Hacen la vida mucho mas facil
Otra recomendacion es que ya que usas los estilos en un archivo aparte, saques los estilos que tenes en index.html

Los cambios fueron:
CSS
flotar a la izquierda el div#imagenes y a la derecha el div#descrip

HTML
Sacar el div descrip que estaba dentro de imagenes y ponerlo fuera, luego del cierre del div imagenes.


<div id="imagenes">
<div id="fotoG">FOTO GRANDE</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 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>


Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

problemas con capas

Publicado por Rosy (64 intervenciones) el 29/11/2012 18:42:39
Gracias Fernando, primero me alegré muchisimo 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.

Muchas gracias por la respuesta y la voluntad de ayudar, lo aprecio mucho.

Rosy
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

problemas con capas

Ok. Seguramente estas generando html desde php o javascript. si es asi, ahi es donde tendrias que hacer los cambios de los divs (index.html) No creo q sea muy complicado ya que es sacar el div descirp fuera del de imagenes. Lo del archivo css no tendrias que tener ningun problema
saludos
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

problemas con capas

Publicado por Rosy (64 intervenciones) el 30/11/2012 19:36:35
Fernando, disculpa tanta molestia pero me he estado dando de cabezasos y no puedo encontrar el problema, necesito de ayuda nuevamente, revisé el codigo e hice los cambios que me sugeriste pero ahora se me desordenó la capa descrip, me quedó debajo de la capa menu,. Voy a colocar el archivo html y css a ver si tu o alguien mas pueda echarle un vistazo por fis.

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!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 id="logotipo"></div>
	<div id="banner"></div>
</div>
 
 
<div id="navegacion">
<table width="100%" border="0">
<tr>
<td width="25%" align="left"><a href="#">Catalogo</a></td>
<td width="25%" align="left"><a href="#">Quienes Somos</a></td>
<td width="25%" align="left"><a href="#">Contactenos</a></td>
</tr>
</table>
</div>
 
<div id="menu1" style="background-color: #FFFF00" >
	<p align="center" style="color:#333399">PRODUCTOS</p>
 
	<ul>
		<li>ITEM 01</li>
		<li>ITEM 01</li>
		<li>ITEM 01</li>
		<li>ITEM 01</li>
		<li>ITEM 01</li>
		<li>ITEM 01</li>
		<li>ITEM 01</li>
		<li>ITEM 01</li>
		<li>ITEM 01</li>
		<li>ITEM 01</li>
		<li>ITEM 01</li>
		<li>ITEM 01</li>
	</ul>
</div> <!--Fin capa menu -->
 
<div id="imagenes">
<div id="fotoG">FOTO GRANDE</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> <!--Fin capa imagenes -->
 
<div id="descrip" >
 
Somos una agencia de modelos cuya creciente influencia en el mercado ha contribuido a dar seriedad y profesionalismo al rubro, ya sea a través del servicio prestado a nuestros clientes, como también por medio de la atención puesta en las/os modelos que conforman nuestro cada vez más numeroso staff. Asimismo, recogiendo el anhelo de nuestras modelos en torno a hacer realidad el aforismo "día trabajado, día pagado", hoy somos la única agencia en Chile que remunera en forma diaria. La belleza vive en Agencia Promodel Chile. Así, procuramos contar con modelos preocupadas/os por mantenerse en buen estado físico siempre que la disciplina empleada no atente contra su salud.
</div> <!--Fin capa descrip -->
 
</div> <!--Fin capa Global -->
 
</div> <!--Fin capa Fondo -->
 
 
</body>
</html>


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
body {background-image: url(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-color:#009900;
			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;
}
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

problemas con capas

Hola Rosy, fijate que el css que posteas ahora no tiene los cambios que yo te pase. Quizas sea ese el problema.
Del html tambien veo que agregaste algunas cosas... quizas tambien tenga algo que ver .
Para lo que es maquetado, te recomiendo siempre hacer primero la estructura y luego meter el contenido. Si la estructura esta bien, luego puedes meter todo lo que quieras que seguramente funcionara.
Y como te recomende antes, para evitar dolores de cabeza, en vez de aspirina usa firebug. Con eso vas a poder hacer todas las pruebas que quieras sin deshacer tu codigo. Y una vez que lo tengas bien... copy & paste.

Saludos
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