Ayuda por favor..no sé que hacer con la página que hago.

Sayu · #1 (**permalink**) 23/07/2010, 10:18

Hola a todos
Tengo una situación que me está dando dolores de cabeza y no sé que hacer.
Llevo poco haciendo páginas, la verdad sé cosas básicas y he aprendido mucho de consejos que dan por aquí.

El punto es el siguiente, no sé porque razón en la laptop donde diseño la página, todo se ve bien, perfectamente acomodado. Pero en otras pc's se ve mal.
Lo más extraño es que en el mismo navegador (por ejemplo firefox) en la lap se ve bien y en la pc se ve mal. (suceso extraño)

Sólo en la laptop se ve bien, llevo los archivos a otra pc, le muevo ahi para comodarlo y si lo regreso a la lap, se ve mal...

No sé que peuda ser..tal vez tengo error en mis codigos, o lo hice mal...pero es extraño que en el mismo navegador se vea diferente, siendo el mismo contenido.

dejo aquí el codigo, esperando alguien pueda orientarme.

Código HTML:

<body>
<div id="contenedor">
   <div id="titulo"><img src="images/index_titulo.jpg" alt="Proyección personal y profesional"></img></div>
   <div id="imagen"><img src="images/index_imagen.png" alt="Profesional"></img></div>

   <div id="ingresar">
      <div id="campos">
        <p class="informacion">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Correo:</p>
        <p class="informacion">Contrase&ntilde;a:</p>
      </div>
      <form>
         <div id="nombre"><input type="text" name="correo" size=11 maxlength=60></div>
         <div id="contrasena"><input type="password" name="clave" size=11></div>
         <div id="boton"><a href="#" target="_self"><img src="images/btn_entrar.jpg" width=91 height=26 border=0 alt="Entrar"></a></div>
      </form>
      <div id="texto">
         <p class="informacion2"><span class="enlace"><a href="#" target="_self">¿Olvidaste tu contrase&ntilde;a?</a></span></p>
         <p class="informacion2">¿A&uacute;n no tienes una cuenta?.&nbsp;&nbsp;<span class="enlace"><a href="#" target="_self">Reg&iacute;strate aqu&iacute;</a></span></p>
      </div>
      <div id="cuadro"></div>
   </div> <!-- end of ingresar -->
</div> <!-- end of contenedor -->
</body>

Código:

BODY {
background: #FFFFFF url(../images/bg.jpg);
font : Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin: 0;
padding: 0;
text-align: center;
}

a:link {color: #000000; text-decoration: none; font-weight: bold;}
a:visited {color: #000000; text-decoration: none; font-weight: bold;}
a:active {color: #000000; text-decoration: underline;}
a:hover {color: #000000; text-decoration: underline;}


#titulo {
margin-top: 100px;
clear: both;
}

#imagen {
float: left;
margin-top: -2px;
clear: both;
}

#nombre {
float: left;
margin-top: -337px;
margin-left: 570px;
clear: both;
}

#contrasena {
float: left;
margin-top: -310px;
margin-left: 570px;
clear: both;
}

#campos {
margin-top: 10px;
margin-left: 11px;
position: relative;
left: -296px;
top: 65px;
line-height:100%;
}

#texto {
margin-top: 10px;
margin-left: 11px;
position: relative;
left: -203px;
top: 100px;
line-height:60%;
}

p.informacion {
font-weight: normal;
color: #000000;
font-family: Arial;
font-size: 12px;
}

p.informacion2 {
font-weight: normal;
color: #000000;
font-family: Arial;
font-size: 12px;
}

span.enlace {
font-weight: bold;
color: #000000;
font-family: Arial;
font-size: 12px;
}

#boton {
float: left;
margin-top: -325px;
margin-left: 680px;
clear: both;
}

#cuadro {
width: 342px;
height: 183px;
background: url(../images/index_cuadro.jpg) no-repeat;
margin-left: 460px;
margin-top: -58px;
}

La imagen de fondo, se ve mal tambien, quisiera poder encontrar la manera de que se adapte a toda la resolución de la pantalla.

Ojala me pueda ayudar
Gracias

_cronos2 · #2 (**permalink**) 23/07/2010, 11:26

Se ve bien en tu portátil porque has hecho la web para una pantalla de x pulgadas, pero cuando aumenta el tamaño se descuadra todo, o al menos es lo que yo creo. Sé que es mucho trabajo, pero lo que te recomiendo es que en vez de usar px uses %, así todos los elementos están siempre dispuestos de la misma manera, sea cual sea la resolución.
Saludos (:

Adermall · #3 (**permalink**) 23/07/2010, 12:55

O lo que puedes hacer también es crear un contenedor que tenga medidas especificas, que como minimo sea de 1024 px (aunque muchos recomiendan 960px) y ya alinear el contenido en base a ese contenedor. Así se verá igual en todas partes.

emprear · #4 (**permalink**) 23/07/2010, 13:37

Sayu:

Que tengas mayor o menor resolución en al ver una web, puede que te genere diferencias, eso es obvio, pero de ninguna manera tiene porque descuadrarte todo. Aparte supongo que si pasas de la Notebook a una PC de escritorio estarás trabajando con una resolución mayor, asi que menos aun debería pasarte eso.
Sin embargo te advierto que tu código está bastante mal. usas DIVS en forma redundante, has complicado tu CSS con los márgenes, tienes un form sin un SUBMIT (una imágen con un link que dice "Entrar" no tiene nada que ver con
<input type="image" src="boton.jpg alt="" /> y unas cuantas cosas más (la etiqueta img no tiene un cierre </img> !.)
Te sugiero que reveas todo tu código y el uso adecuado del form, y después recien le apliques un estilo a través de CSS

un esquema básico sobre el que puedes trabajar es este

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" xml:lang="es" lang="es" >
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="x" />
<meta name="keywords" content="x" />
<meta http-equiv="Content-Language" content="ES" />
<style type="text/css">
/*<![CDATA[*/

label {
width: 150px;
display: block;
position: relative;
float: left;
margin-right: 10px;
}
input {
position: relative;
float: left;
border: solid 1px #666;
}
.entrar {
margin-left: 160px;
}

/*]]>*/
</style>
</head>
<body>
<div><img src="images/index_titulo.jpg" alt="Proyección personal y profesional" width="200" height="50" /></div>
<div><img src="images/index_imagen.png" alt="Profesional" width="200" height="50" /></div>


<div id="formulario">

<br />
<form action="xxx.html" method="post">
<div>
<label>Correo electrónico</label>
<input type="text" name="correo" size="11" maxlength="60" /><br /><br />
<label>Contraseña</label>
<input type="password" name="clave" size="11" /> 
<br /><br />
<input class="entrar" type="submit" value="entrar" />
<br /><br />
</div>
</form>

</div>


<div>
<p><a href="#" target="_self">¿Olvidaste tu contraseña?</a><br />
¿Aún no tienes una cuenta? <a href="#" target="_self">Regístrate aquí</a></p>
</div>
</body>
</html>

El css solo lo puse para alinearte los campos del formulario

Saludos

Sayu · #5 (**permalink**) 23/07/2010, 15:20

_cronos2, Adermall y emprear por responder, sus comentarios me son de mucha ayuda y ver un panorama de donde me encuentro.

Cita:

Sin embargo te advierto que tu código está bastante mal. usas DIVS en forma redundante, has complicado tu CSS con los márgenes, tienes un form sin un SUBMIT (una imágen con un link que dice "Entrar" no tiene nada que ver con
<input type="image" src="boton.jpg alt="" /> y unas cuantas cosas más (la etiqueta img no tiene un cierre </img> !.)
Te sugiero que reveas todo tu código y el uso adecuado del form, y después recien le apliques un estilo a través de CSS

aww...ya sabía que algo así debía estar afectando...tendre que ver bien eso y modificarlo todo . Muchas gracias por poner la alineación de los campos del formulario, me servirá de mucho.

Por el momento, como soy novata no podré terminarlo todo, ¿alguien podría maquetar la web que me pidieron hacer?
obviamente se pagará por el servicio. El diseño ya está hecho, sólo es cuestión de acomodar todo en html y ponerle los estilos

emprear · #6 (**permalink**) 23/07/2010, 15:30

Sayu:

No creo que el foro este para eso. Trata de hacer un esfuerzo, y una vez que tengas algo lo reviso por aqui y te hago alguna sugerencia.

Saludos

Sayu · #7 (**permalink**) 23/07/2010, 15:34

El punto es que el trabajo tenía que estar para el jueves(ayer)...
y pues ahora debe estar lo más pronto posible terminado(que no pase del lunes)

entonces me tardaré en hacerlo... y como no soy tan experta en eso, la presión del tiempo acaba conmigo..

emprear · #8 (**permalink**) 23/07/2010, 16:24

bueno, no es tan grave
bajate alguna plantilla prefabricada de la web, busca una sencilla,

http://www.freewebsitetemplates.com/template3.php
hay muchos mas sitios con cosas mas básicas. Busca un poco en Google

Y para la próxima, no te comprometas si no puedes cumplr.

saludos

Sayu · #9 (**permalink**) 24/07/2010, 09:48

mil gracias emprear
entregaré la web para este lunes, así todavia tengo tiempo
estoy cambiando todo el codigo y parece que voy por buen camino
todavia está abierta la oferta de revisar mi trabajo? jejeje espero que sip

y tengo otra duda, pero no sé si deba hacerla en este tema ocrear otro nuevo
jeje

gracias de nuevo!

emprear · #10 (**permalink**) 24/07/2010, 10:59

Sayu:
ni debería responderte....
por supuesto que si

Saludos