evitar que se muevan las capas

carlosloaiza21 · #1 (**permalink**) 25/01/2011, 20:31

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

PrendekZ · #2 (**permalink**) 25/01/2011, 20:41

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

Este foro es para ayudarte, no para adivinarte!

Saludos!

carlosloaiza21 · #3 (**permalink**) 25/01/2011, 20:49

<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>Bienvenid@ 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">  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%;
}

Kurozaki · #4 (**permalink**) 25/01/2011, 22:24

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.

carlosloaiza21 · #5 (**permalink**) 25/01/2011, 22:39

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

Kurozaki · #6 (**permalink**) 25/01/2011, 22:43

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 :)

PrendekZ · #7 (**permalink**) 26/01/2011, 02:33

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

Cita:

Iniciado por Kurozaki

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!