Como dejar fijas la capas

riky68 · #1 (**permalink**) 29/08/2009, 10:09

Me gustaria saber que es lo que tengo que hacer, para que las capas se queden fijas.

El problema que tengo es que cuando veo mi pag en un movil o un monitor con la pantalla pequeña, se me ven todas la capas amontonadas. He agrupado todas las capas en una tabla al 100%, pero sigue ocurriendo lo mismo.

Gracias

deirdre · #2 (**permalink**) 29/08/2009, 21:16

Hola riky68

No es buena cosa crear una estructura de div sobre una tabla. Es mucho mejor prescindir de la tabla y organizar los divs utilizando css.

Para poder ayudarte de forma más concreta es necesario que pongas tu código completo y así podríamos ver lo que se puede hacer.

Bye

riky68 · #3 (**permalink**) 30/08/2009, 03:48

Este el html:

<head>
<title>Nuestra Carta</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/estylos.css"type="text/css" />
<link href="css/Menu/dropdown.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/Menu/default.ultimate.css" media="all" rel="stylesheet" type="text/css" />

<script src="Scripts/AC_RunActiveContent.js"type="text/javascript"></script>
</head>

<body> <div id="div_centrado" align="center">
<table class="table1"> 

<tr>
<td><div id="cuerpo"/>
<div class="cabecera">

<div align="center"><img src="img/logo summum.jpg" />

<hr class="linea_1" />

</div>
</div>


<div id="container_menu"> 
<ul class="dropdown dropdown-horizontal" id="nav" >
<li id="n-home"><a href="portada.html" target="_self">Presentación</a></li>

<li id="n-music"><a href="Mapa.html" target="_self" class="dir">Mapa</a></li>

<li id="n-shows"><a href="Nuestra Carta.html" class="dir">Nuestra carta </a>

</li>
</li>

</li><li id="n-news"><a href="Nuestro local .html" target="_self" class="dir">Nuestro local</a>
</li><li id="n-news"><a href="Contacto.html"target="_self" class="dir">Contacto</a>
</li><li id="n-news"><a href="Fotos.html" class="dir">Fotos</a>
</li>

</ul></div>



<div id="container_txt_piepag_formul"><div id="texto_pie"> <p>2009 Copyright © SUMMUMBAR. Creada y editada por:<a href="mailto:[email protected]">Riky68</a></p></div>
</div>


</td> </tr>

</table>

</ul> </div>
</body>
</html>

Y este el css:

@charset "utf-8";
/* CSS Document */

/*CAPAS DE CUERPO*/

/* Hace que se vea un poco mejor en los nav */

*{-moz-box-sizing: border-box;box-sizing: border-box}
p{margin-top:0px;margin-bottom:1em}
form{margin:0px}
input{padding:1px}
/* fin */

#div_centrado {
margin: auto;
width: 1400px;

}

/* atributos del cuerpo */
body {
background:#000000 /*color e imagen de fondo del documento;*/
no-repeat bottom center fixed; /*evita el efecto mosaico, si el no, sale;*/
font-size:9px /*tamaño texto*/
}
/*fin */

/*tabla contenedor de pag. con 100% para adapta ancho pantalla*/
.table1
{
width:100%; height:100%;
border:0;align:center;
background:url(/fondo_estucado.JPG);

-moz-border-radius: 15px;/*para redondear las esquinas de tabla*/
}
/*fin*/
/*idem*/

#div_centrado {
margin: auto;
width: 1400px;
text-align:center;

}

/*medidas y atributos del cuerpo de trabajo */
#cuerpo {

width:1025px;
min-height:1100px;
height: 100%;
margin:auto;
background: #22201f;
border-left: 3px solid #111111;
border-right: 3px solid #111111;
border-bottom: 3px solid #22201f;
overflow:auto; /*Barra de despazamiento */
-moz-border-radius: 15px;/*para redondear las esquinas de tabla*/
}
/*fin*/

/*una cabecera en cuerpo donde va el logo */
.cabecera{
height: 117px;
-moz-border-radius: 15px;/*para redondear las esquinas de tabla*/
background:black no-repeat center;
}

/*fin*/
/*FIN CAPAS DE CUERPO*/

/*CONTENEDORES*/
/*contenedor text*/

#container_txt1 {
position:absolute;
width:350px;
height:300px;
margin:25px auto auto auto;
left:60%;
top:60%;
margin-top:-200px;
margin-left:-300px;
overflow:visible;
}

/*fin*/

/*contenedor text2*/
#container_txt2 {
position:absolute;
width:500px;
height:250px;
margin:25px auto auto auto;
left:55%;
top:60%;
margin-top:-200px;
margin-left:-300px;
overflow:visible;
}
/*fin*/

/*contenedor formulario*/
#container_formulario{
position:absolute;
width:500px;
height:250px;
margin:25px auto auto auto;
left:55%;
top:80%;
margin-top:-200px;
margin-left:-300px;
overflow:visible;
}
/*fin*/

/*contenedor mapa*/
#container {
position:absolute;
width:650px;
height:450px;
margin:25px auto auto auto;
left:50%;
top:110%;
margin-top:-200px;
margin-left:-300px;
overflow:visible; }

/*fin*/

/*Contenedro pie de pag*/
#container_txt_piepag {
position:absolute;

width:589px;
height:38px;
margin:0px auto auto auto;
left:50%;
top:175%;
margin-top:-200px;
margin-left:-300px;
overflow:visible;
}

/*fin*/

/*Contenedro pie de pag del formulario*/
#container_txt_piepag_formul{
position:absolute;

width:589px;
height:38px;
margin:0px auto auto auto;
left:50%;
top:300%;
margin-top:-200px;
margin-left:-300px;
overflow:visible;
}
/*fin*/

/*contenedor menu*/
#container_menu {
position:absolute;
width:900px;
height:35px;
margin:25px auto auto auto;
left:12%;
top:5%;
margin-top:80px;
margin-left:80px;
overflow:visible; }
/*fin*/

/*contenedor album*/
#container_album {
position:absolute;
width:650px;
height:545px;
margin:25px auto auto auto;
left:45%;
top:92%;
margin-top:-200px;
margin-left:-300px;
overflow:visible; }
/*fin*/

/*FIN CONTENEDORES*/

/*TEXTOS*/
/*Texto de direccion*/
#texto1 {
text-align:center; font-size:19px; font-family:Geneva, Arial, Helvetica, sans-serif; color:#FFFFFF;
}
/*fin*/

/*Texto pie de pagina*/

#texto_pie {
text-align:center;font-size:9px; font-family:"Times New Roman", Times, serif; color:#0033FF;
}
/*fin*/

/*Texto de local*/
#textolocal {
text-align:center; font-size:17px; font-family:Geneva, Arial, Helvetica, sans-serif; color:#FFFFFF;
}
/*fin*/

/* FIN TEXTOS*/

/*VARIOS*/

/*linea divisoria*/
.linea_1 {
hr color:#990000; width:95%;
}
/*fin*/

/*color hipervinculo*/

a {
color:#0033CC
}

a:hover {
color:#FF0000
}

/*fin*/

deirdre · #4 (**permalink**) 30/08/2009, 09:14

Hola riky68

El código tiene varios errores: no declaras doctype y otras cosas.

Visto por encima, sin detallar, te he corregido varias cosas. También tienes errores en la hoja de estilo.

Por otra parte, pregunto: ¿si al contenedor principal le das 1400px de ancho cómo quieres que se vea en resoluciones menores?; por ejemplo en 1024 todo el conjunto queda desplazado a la derecha (con un gran margen a la izquierda) y sale la barra scroll horizontal). En resoluciones menores el desplazamiento será aún mayor. Lo que no veo es lo que dices que se "amontonan las capas". Si el título de tu hilo es "Como dejar fijas la capas", exactamente qué es lo que deseas con tu diseño, cómo quieres que se comporte en otras resoluciones.

Código HTML:

<!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>
<title>Nuestra Carta</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="estilo.css"type="text/css" />
<link href="css/Menu/dropdown.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/Menu/default.ultimate.css" media="all" rel="stylesheet" type="text/css" />



<script src="Scripts/AC_RunActiveContent.js"type="text/javascript"></script>
</head>

<body> <div id="div_centrado"><!--  sobra esto align="center" -->
<!-- eliminar la tabla <table class="table1">

<tr>
<td> --><div id="cuerpo"/>
<div class="cabecera">

<div align="center"><img src="img/logo summum.jpg" />

<hr class="linea_1" />

</div>
</div>

<!-- Menu desplegable -->
<div id="container_menu"> <!-- contenedor menu -->
<ul class="dropdown dropdown-horizontal" id="nav" >
<li id="n-home"><a href="portada.html" target="_self">Presentación</a></li>



<li id="n-music"><a href="Mapa.html" target="_self" class="dir">Mapa</a></li>

<li id="n-shows"><a href="Nuestra Carta.html" class="dir">Nuestra carta </a>

</li>
<!-- sobra esto: </li> -->


<!-- sobra esto: </li> --><li id="n-news"><a href="Nuestro local .html" target="_self" class="dir">
Nuestro local</a>
</li><li id="n-news"><a href="Contacto.html"target="_self" class="dir">Contacto</a>
</li><li id="n-news"><a href="Fotos.html" class="dir">Fotos</a>
</li>


</ul></div>
<!-- Fin Menu desplegable -->






<!-- Pie de pagina -->
<div id="container_txt_piepag_formul"><div id="texto_pie"> <p>2009 Copyright © 
	SUMMUMBAR. Creada y editada por:<a href="mailto:[email protected]">Riky68</a></p></div>
</div>
<!-- fin -->


<!-- eliminar la tabla
</td> </tr>

</table>

-->

<!-- sobra esto </ul> --> </div>
</body>
</html>

Bye

riky68 · #5 (**permalink**) 30/08/2009, 11:13

Gracias por tu ayuda deirdre.

Al final la he hecho toda con tablas, ya se que no es lo correcto, pero ahora la veo bien incluso en el movil.

El problema que tenia era que la img de la cabecera, el txt y la img del centro, me aparecian todas juntas, unas encima de otras, apelotonadas. Y me gustaria saber como hay que hacerlo para que esto no ocurra.
ya que mi proxima web, la quiero hacer con div y me gustaria que se viese bien en cualquier resolucioón de pantalla

cristian_cena · #6 (**permalink**) 01/09/2009, 15:12

Cito: "ya que mi proxima web, la quiero hacer con div y me gustaria que se viese bien en cualquier resolucioón de pantalla"

aquí va mi granito de arena:

http://www.araudi.net/migracion/migr...sin_dolor.html
http://www.araudi.net/migracion/migr..._parte_II.html

y ... para que se viese en cualquier resolución. Supongo que lo mejor sería que trabajes con la unidad de medida em y abandones los píxeles px.

http://www.forosdelweb.com/f53/sobre-medida-em-201109/
http://www.librosweb.es/css/capitulo...de_medida.html
http://riddle.pl/emcalc/ (te simplifica la vida

)

Saludos!

P/D:

cito: El problema que tenia era que la img de la cabecera, el txt y la img del centro, me aparecian todas juntas, unas encima de otras, apelotonadas

mmm .. no será que debes aplicar la propiedad z-index?
http://www.librosweb.es/referencia/css/z-index.html