Foros del Web » Creando para Internet » CSS »

ayudaa!!! mi web se ve mal en resoluciones mas pequeñas.!

Estas en el tema de ayudaa!!! mi web se ve mal en resoluciones mas pequeñas.! en el foro de CSS en Foros del Web. Buena smi web se descuadra totalmente al verla en alguna resolucion mas pequeña.. por que no pasa esto con otras web.. :S el codigo de ...
  #1 (permalink)  
Antiguo 01/02/2011, 16:44
Avatar de JoseGMariani  
Fecha de Ingreso: diciembre-2008
Ubicación: Edo Lara
Mensajes: 251
Antigüedad: 9 años
Puntos: 8
ayudaa!!! mi web se ve mal en resoluciones mas pequeñas.!

Buena smi web se descuadra totalmente al verla en alguna resolucion mas pequeña.. por que no pasa esto con otras web.. :S

el codigo de css estilo que uso es este:

Código HTML:
/* CSS Document */
body {
	font:12px arial;
	color: #222;
	text-align:center;
	padding:35px; }
 
form, p, span {
	margin:0;
	padding:0; }
 
input { font:12px arial; }
 
a {
	color:#0000FF;
	text-decoration:none; }
 
	a:hover { text-decoration:underline; }
 
#wrapper, #loginform {
	position:absolute; left:100px;
	margin:0 auto;
	padding-bottom:25px;
	background:#EBF4FB;
	width:1300px;
	border:1px solid #ACD8F0; }
 
#loginform { padding-top:18px; }
 
	#loginform p { margin: 5px; }
 
#chatbox {
position:absolute; right:40px;
	text-align:left;
	margin:0 auto;
	margin-bottom:25px;
	padding:10px;
	background:#fff;
	height:270px;
	width:280px;
	border:1px solid #ACD8F0;
	overflow:auto; }
 #usermsg {
 position:absolute; right:80px; top:345px;
	width:260px;
	border:1px solid #ACD8F0; }
 
#submitmsg {width: 60px;
 position:absolute; right:15px; top:343px;} 
#visor{
	text-align:left;
	margin:0 auto;
	margin-bottom:25px;
	padding:10px;
	background:#fff;
	height:375px;
	width:526px;
	border:1px solid #ACD8F0;
	overflow:auto; }
	
#ustream {
position:absolute; left:10px; top:40px;
	text-align:center;
	margin:0 auto;
	margin-bottom:25px;
	padding:0px;
	background:#fff;
	height:219px;
	width:347px;
	border:1px solid #ACD8F0;
	overflow:auto; }
.sumit{background:#ffa822 url(btn_bg_submit.gif)left center repeat-x;}
 
.error { color: #ff0000; }
 
#menu { padding:12.5px 25px 12.5px 25px; }
 
.welcome { float:left; }

.limpiar { position:absolute; right:200px;  }

.actualiza { float:center;  }
 
.logout { float:right; }
 
.msgln { margin:0 0 2px 0; }
#admin {text-align:left;
	margin:0 auto;
	margin-bottom:25px;
	padding:10px;
	background:#FFCC00;
	height:23px;
	width:526px;
	border:1px solid #ACD8F0;
	overflow:auto; }
	
	.redondeo{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit	
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
text-shadow: #fff 0px 1px 1px;
background: -webkit-gradient(linear, left top, left bottom, from(#D7E9F3), to(#ffffff));
background: -moz-linear-gradient(top,  #D7E9F3,  #ffffff);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
	}
es decir, sera que tengo que cambiar de adsoluto a relativo? y ley por hay en la web, una repsuesta asi:

"ok, mete tus divs en un
<div> de style="position:relative", y todos tus divs internos, los flotantes que esten dentro de ese mismo div, y que tu div relativo este siempre fijo para que los demas se alinen dentro y respecto a él "

pero no entiendo como hacerlo.. :S
__________________
"Nunca seas arrogante con los humildes, ni humilde con los arrogantes." Paulo Coelho..
  #2 (permalink)  
Antiguo 01/02/2011, 18:03
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: ayudaa!!! mi web se ve mal en resoluciones mas pequeñas.!

mmmm no entendiste? y donde te dijeron eso?

jeje bueno a mi me ha quedado muy claro, en efecto tu problema es usar position:absolute en muchos elementos y no tener un div principal que encapsule tu sitio es decir

Código CSS:
Ver original
  1. #misitioweb{width:900px;margin:0 auto;position:relative;}

Código HTML:
Ver original
  1. <div id="misitioweb">
  2.      aqui todo el contenido de tu sitio actual
  3. </div>

esto es porque cuando utilizas position:absolute este lo hace con referencia a elemento padre inmediato que cuente con la propiedad position ya sea relative o absolute
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 01/02/2011, 18:03
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ayudaa!!! mi web se ve mal en resoluciones mas pequeñas.!

Hola:

Léete este artículo de Mikmoro, en concreto el apartado que habla del posicionamiento.

Por cierto, no me parece bien plantear las dudas en privado, el foro es libre y todos tenemos que compartir y aprender ¿de acuerdo?

Saludos.

  #4 (permalink)  
Antiguo 03/02/2011, 14:14
Avatar de JoseGMariani  
Fecha de Ingreso: diciembre-2008
Ubicación: Edo Lara
Mensajes: 251
Antigüedad: 9 años
Puntos: 8
Respuesta: ayudaa!!! mi web se ve mal en resoluciones mas pequeñas.!

gracias a los que respondieron, hola jomauro, si yo entiendo, pero cuando quieres una respuesta rapido de emergencia siempre acudes a una consulta con el prof? cierto..:)

miren ya coloque las demas capas adentro de la capa principal llamada wraper.. PUEDEN VER en el codigo : style:css comO LO E COLOCADO..






y igual me sigue cambiando las letras y las capas de tamaño cuando veo la pagina en una maquina de otra resolucion.. esto en paginas como facebook, o paypal no ocurre, y dichas paginas usan capas.. por que ami si me ocurree.. como hago para acomodarlo..

miren la pagina es esta:
http://visitamedica.tk/

para que ustedes mismos con sus resoluciones las vean, yo tengo una resolucion de : 1440x900

lo que uqiero es que se vea correctamente en resoluciones mas bajas, porlomenos 1024x768
:s veanla ustedes en sus exploradores y me dicen.. :) PORFA ESPERO RESPUESTA:: Y PORCIERTO MUY BUENO EL articulo de mikmoro; ayudo mucho! =)
__________________
"Nunca seas arrogante con los humildes, ni humilde con los arrogantes." Paulo Coelho..
  #5 (permalink)  
Antiguo 03/02/2011, 14:31
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: ayudaa!!! mi web se ve mal en resoluciones mas pequeñas.!

y observando tu código no encuentro las etiquetas <body></body>

agregándolas debería andar bien

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <title>Chat - Visita Medica Professional</title>
  4. <link type="text/css" rel="stylesheet" href="style.css" />
  5. <script language="javascript" src="js/jquery-1.2.6.min.js"></script>
  6. <script language="javascript">
  7. function recargar(){
  8.     var variable_post="";
  9.     $.post("pp.php", { variable: variable_post }, function(data){
  10.     $("#visor").html(data);
  11.     });
  12. }
  13. </head>
  14.  
  15.     <div id="loginform">
  16.     <form action="index.php" method="post">
  17.         <p>Por Favor coloque su nombre y su ciudad:</p>
  18.         <label for="name">Nombre:</label>
  19.         <input type="text" name="name" id="name" />
  20.         <label for="name">Ciudad:</label>
  21.         <input type="text" name="ciudad" id="ciudad" />
  22.         <input type="submit" name="enter" id="enter" value="Entrar" />
  23.     </form>
  24.     </div>
  25. </body>
  26.     </html>
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Última edición por webosiris; 10/02/2011 a las 02:31 Razón: editado a petición del usuario
  #6 (permalink)  
Antiguo 04/02/2011, 07:31
Avatar de JoseGMariani  
Fecha de Ingreso: diciembre-2008
Ubicación: Edo Lara
Mensajes: 251
Antigüedad: 9 años
Puntos: 8
Respuesta: ayudaa!!! mi web se ve mal en resoluciones mas pequeñas.!

Cita:
Iniciado por Ag666 Ver Mensaje
por favor cuando publiques una url usa la original y no el dominio .tk que este te inserta tu pagina dentro de iframe

y observando tu código no encuentro las etiquetas <body></body>

agregándolas debería andar bien

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <title>Chat - Visita Medica Professional</title>
  4. <link type="text/css" rel="stylesheet" href="style.css" />
  5. <script language="javascript" src="js/jquery-1.2.6.min.js"></script>
  6. <script language="javascript">
  7. function recargar(){
  8.     var variable_post="";
  9.     $.post("pp.php", { variable: variable_post }, function(data){
  10.     $("#visor").html(data);
  11.     });
  12. }
  13. </head>
  14.  
  15.     <div id="loginform">
  16.     <form action="index.php" method="post">
  17.         <p>Por Favor coloque su nombre y su ciudad:</p>
  18.         <label for="name">Nombre:</label>
  19.         <input type="text" name="name" id="name" />
  20.         <label for="name">Ciudad:</label>
  21.         <input type="text" name="ciudad" id="ciudad" />
  22.         <input type="submit" name="enter" id="enter" value="Entrar" />
  23.     </form>
  24.     </div>
  25. </body>
  26.     </html>

Ag666 porfavor!! porfavor... puedes editar tu comentario y quitar la url de mi sitio web, es que ya tube problemas en este foro , por que una ves queria borrar un post por el mismo motivo, te pido esto, por que mi sitio web, es decir la verdadera url, es un sitio comercial, y los clientes me buscan por google y si esta en foros del web se meten, y pueden ver parte de codigos echos por mi aqui, si entiendes..:) por favor, te pido solo que borres la url original, no hacia falta que la anotaras en el post.. solo puedes decir "pon tu url original"

si? :) bueno si, voy a ponerle el body.. =) aunque creo que haciendo eso igual se vana mover.. voya intentarlo.. y gracias y te comento..
pero por favor,
has hasme el favor que te comente..:)



---------------------------------------------------
edito: LO EDITE COMO DIJISTES, Y IGUAL SE SIGUE CORRIENDO, BUENO NO ES QUE SE CORRA.. ES QUE SE VE TODO MAS GRANDE..
YA SABES LA URL.. prueba meterte con una resolucion menor a al que yo te dije haya arriba y veras como se corre.. osea, cuando metes el nombre y la ciudad.. y le das entrar ..=) ves.. ese espacio en el medio entre el chat y el ustream.. si va ayi.. pero el punto es que salen las barras de desplazamiento.. y se ve corrido ves.. por el tamaño de las cosas.. :S

---------------------------------------------------
__________________
"Nunca seas arrogante con los humildes, ni humilde con los arrogantes." Paulo Coelho..

Última edición por JoseGMariani; 05/02/2011 a las 08:57 Razón: EDIT: probe lo que me dice ag666

Etiquetas: mal, mas
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 21:40.