Foros del Web » Creando para Internet » HTML »

Como dejar fijas la capas

Estas en el tema de Como dejar fijas la capas en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/08/2009, 11:09
Avatar de riky68  
Fecha de Ingreso: junio-2009
Mensajes: 18
Antigüedad: 8 años, 5 meses
Puntos: 0
Como dejar fijas la capas

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
  #2 (permalink)  
Antiguo 29/08/2009, 22:16
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Como dejar fijas la capas

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
  #3 (permalink)  
Antiguo 30/08/2009, 04:48
Avatar de riky68  
Fecha de Ingreso: junio-2009
Mensajes: 18
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Como dejar fijas la capas

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"><!-- capa que contiene todo en cuerpo -->
<table class="table1"> <!-- tabla que contiene todo en cuerpo -->

<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&oacute;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>
<!-- Fin Menu desplegable -->






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



</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*/
  #4 (permalink)  
Antiguo 30/08/2009, 10:14
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Como dejar fijas la capas

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
  #5 (permalink)  
Antiguo 30/08/2009, 12:13
Avatar de riky68  
Fecha de Ingreso: junio-2009
Mensajes: 18
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Como dejar fijas la capas

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
  #6 (permalink)  
Antiguo 01/09/2009, 16:12
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Como dejar fijas la capas

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

Última edición por cristian_cena; 01/09/2009 a las 16:18
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:52.