Foros del Web » Creando para Internet » CSS »

evitar que se muevan las capas

Estas en el tema de evitar que se muevan las capas en el foro de CSS en Foros del Web. Hola alguien me puede decir como evitar que las capas se muevan lo que pasa es que yo ya tengo maquetada la pagina con la ...
  #1 (permalink)  
Antiguo 25/01/2011, 20:31
Avatar de carlosloaiza21  
Fecha de Ingreso: julio-2009
Mensajes: 175
Antigüedad: 8 años, 4 meses
Puntos: 0
Exclamación evitar que se muevan las capas

Hola alguien me puede decir como evitar que las capas se muevan lo que pasa es que yo ya tengo maquetada la pagina con la ventana de el navegador maximizada no hay problema el problema esta en cuanto modifico el tamaño de la ventana de el explorador todo se me mueve se enciman los textos las capas etc etc ojala me halla explicado bien y me puedan ayudar
  #2 (permalink)  
Antiguo 25/01/2011, 20:41
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: evitar que se muevan las capas

Para poder ayudarte deberías colocar: Link, html, css.

Este foro es para ayudarte, no para adivinarte!

Saludos!
  #3 (permalink)  
Antiguo 25/01/2011, 20:49
Avatar de carlosloaiza21  
Fecha de Ingreso: julio-2009
Mensajes: 175
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: evitar que se muevan las capas

<html>
<head>
<title>SISTEMA DE GESTION DE DOCUMENTOS</title>
<link href="estilo.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="boody">
<div class="principal">

<div class="banner">
<center><img src="banner.gif"></center>
</div>

<div class="contenido1">
<center>[email protected] La fecha es: <?php echo(date("d /m / Y")); ?><br>Indica que tipo de usuario eres </center>
<br>
<table width="303" height="234" border="0" align="center">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td><center><img src="administrador.jpg"></center></td>
<td><center><img src="usuario.jpg"></center></td>
</tr>
<tr>
<td><center><input type="button" value="Administrador" onClick="administrador();"></center></td>
<td><center><input type="button" value="Usuario" onClick="usuario();"></center></td>
</tr>
<tr>
<td colspan="2" align="center">Si no estas registrado comunicate con el administrador de el Sistema</td>
</tr>
</table>
<div id="administrador" class="administrador">
<form>
<center><h3>Acceso para administrador</h3></center><br>
Usuario:<input type="text" id="texto">&nbsp; Contraseña:
<input type="password"><br><br>
<center><input type="button" value="Continuar"></center>
</form>
</div>





</div>
</div>


</div>
</html>

estilos:

.boody
{
background:url(fondo.jpg);
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
width:100%;
height:100%;
}

.principal
{
position:absolute;
background:url(celeste07.jpg);
top:0px;
left:20%;
right:20%;
height:100%;
width:60%;
}
.banner
{
background:url(celeste07.jpg);
position:absolute;
top:0px;
width:100%;
height:15%;
}
.contenido1
{
position:relative;
top:18%;
height:60%;
width:50%;
left:25%;
}
.administrador
{
position:absolute;
top:80%;
left::80%;
width:100%;
height:40%;
}
.usuario
{
position:absolute;
top:80%;
left::80%;
width:100%;
height:40%;
}

Última edición por carlosloaiza21; 25/01/2011 a las 20:58 Razón: agregar detalles
  #4 (permalink)  
Antiguo 25/01/2011, 22:24
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: evitar que se muevan las capas

trata de maquetar con un ancho fijo en pixeles, no en % (porcentajes), ya que esto hace que se mueva todo, ya que segun el tamaño de la ventana se hace un xx%.

Ejemplo, si tu pantalla mide 1000px, y tienes 50% de ancho, entonces medira 500px, pero al momento de un monitor chico o minimizar, a 700px, tu ancho seria de 50% que es igual a 350px.

Entienes, por que se recorre ??

Aun asi, puedes dejar los porcentajes, pero deberas usar un min-width.
Saludos.
__________________
Diseñador y Desarrollador web :)
  #5 (permalink)  
Antiguo 25/01/2011, 22:39
Avatar de carlosloaiza21  
Fecha de Ingreso: julio-2009
Mensajes: 175
Antigüedad: 8 años, 4 meses
Puntos: 0
Exclamación Respuesta: evitar que se muevan las capas

oki ahora el problema seria como puedo hacer que mi aplicacion se vea bien en las distintas resoluciones de pantalla por que ahora segun entiendo si lo manejo ccon mi resolucion yo lo vere bien pero alguien con una resolucion mayor o menor la vera ma o no es asi??

saludos
  #6 (permalink)  
Antiguo 25/01/2011, 22:43
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: evitar que se muevan las capas

no la vera mal, si pones anchos fijos, mas bien, si es muy pequeño, simplemente saldria el scroll horizontal, y si es muy grande, ps no pasaria nada, para eso agregale un fondo al body, para que el usuario vea algo de diseño en aquellas partes, donde no hay nada, si es que su resolucion es muy grande :)
__________________
Diseñador y Desarrollador web :)
  #7 (permalink)  
Antiguo 26/01/2011, 02:33
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: evitar que se muevan las capas

Tantas tablas, acostumbrate a maquetar con divs de una ves por todas.

Cita:
Iniciado por Kurozaki Ver Mensaje
trata de maquetar con un ancho fijo en pixeles, no en % (porcentajes), ya que esto hace que se mueva todo, ya que segun el tamaño de la ventana se hace un xx%.
Kurozaki no creo que deberías decir si maquetar con diseños líquidos o fijos.. ya es de cada quién.

Creo que maquetando todo a "position:absolute" no es muy bueno ya que "position:absolute" se usa para otras cosas y podría ser mejor utilizado como "float" para realizar columnas ó simples margenes.

para agregar un margen puedes hacerlo por "margin:top right bottom left;" es decir, como gira las manecillas del reloj "arriba, derecha, abajo y izquierda" así puedes colocar los valores de margin, padding, entre otras propiedades de CSS.

un ejemplo:

Cita:
margin-left:5px;
margin-top:15px;
margin-bottom:20px;
margin-right:2px;
yo lo haría de la siguiente forma:
Cita:
margin:15px 2px 20px 5px;
Estudia margin y float, para realizar un template y lo que escuches que utiliza "diseños fijos" y nunca utilizar "diseños líquidos" es mentira, diseña como quieras pero eso sí, tenga presente siempre cuando utilice diseños líquidos en que no se pasen de 100%.

Aquí te dejo unos libros de CSS para que los estudies:

xHTML: http://librosweb.es/xhtml/index.html
Introducción a CSS: http://librosweb.es/css/index.html
Referencia de CSS 2.1: http://librosweb.es/referencia/css/index.html
CSS Avanzado: http://librosweb.es/css_avanzado/

PD: No te colaboro ya que es un lío hacer todo por medio de position:absolute y ayudarte es como realizarte todo el trabajo y este foro es para ayudas.

Saludos!

Etiquetas: capas
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 17:07.