Foros del Web » Creando para Internet » CSS »

El contenido se mueve al achicar el navegador, ayuda.

Estas en el tema de El contenido se mueve al achicar el navegador, ayuda. en el foro de CSS en Foros del Web. Cita: Iniciado por buzu un enlace.... es mejor con un enlace. Un enlace con la web? Aquí: http://mybbtest.webspacemania.com/ihotel3.html Hola! quisiera saber porque a la hora ...
  #1 (permalink)  
Antiguo 24/11/2008, 23:22
Avatar de RufioStill  
Fecha de Ingreso: agosto-2008
Mensajes: 24
Antigüedad: 9 años, 3 meses
Puntos: 0
El contenido se mueve al cambiar de dimencion el navegador, ayuda por favor :\

Cita:
Iniciado por buzu Ver Mensaje
un enlace.... es mejor con un enlace.
Un enlace con la web? Aquí: http://mybbtest.webspacemania.com/ihotel3.html


Hola! quisiera saber porque a la hora de achicar el navegador un poco todo el contenido de mi web se mueve... como puedo solucionarlo? Gracias

Tengo otra duda, como hago para que mi web se vea bien en todas las resoluciones? actualmente solo se ve bien en 1024x768 :\


Aquí les dejo mi código CSS para que me digan lo que necesito cambiar (Esta un poco desordenado creo también) :\ si me echan una mano arreglando el código también les agradecería ^^
Código:
<style type="text/css">
body{
background: #333 url('http://www.habbotimes.net/assets/img/web_1.0.0/pagebg.png') repeat fixed;
font: 76% arial;
margin:0 0 5px 0;
padding: 0;
}

p{
color: #fff;
}

#contenedor{
	width: 950px;
	margin: 0 auto;
	padding: 0px 5px 0px 4px;
	border: 0px solid #5f8096;
	background: url('http://img246.imageshack.us/img246/7717/icentroqs9.gif') center repeat-y;
}

#contenedor2{
	height: 153px;
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
	border-top: 3px solid #fff;
	border-bottom:1px solid #ADAF96;
	background: #49A9B4 url('http://img222.imageshack.us/img222/901/fondosegurofx4.gif') repeat;
}
#contenedorin1{
	float: left;
	margin: 0 auto;
	margin: 0 auto;
	width: 775px;
	height: 150px;
	background: url('http://img221.imageshack.us/img221/859/elfondosombrann1.png') top no-repeat;

}
#contenedorin1 .top{
	width: 765px;
	height: 107px;
}
#contenedorin1 .topmenu{
	margin: 3px;
	padding-top: 0px;
}
#contenedorin2{
	float: right;
	width: 225px;
	height: 153px;
	padding: 0px 0px 0px 0px;
	margin: 0 auto;
}
#derecha{
	float: left;
	margin: 10px 10px 5px 10px;
	
	width: 210px;

	
}
#izquierda{
	float: left;
	margin: 10px 10px 5px 10px;
	
	width: 210px;
	
	
}
#medio{
	float: left;
	margin: 0px 0px 0px 0px;
	width: 480px;
	
	
}
#topcontainer{
	margin-top: 7px;
	padding: 8px 5px 0px 4px;
    background:  url('http://img126.imageshack.us/img126/5335/itopsitevq8.gif')  center no-repeat;

}		
	
#pie {
	clear: both;
	border-top: 1px solid #5e534f;
	background-color: #7ED0E4;
}
#pie p{
	margin:0;
	padding:5px 10px
}
#tabsB {
      float:left;
      width:100%;
      line-height:normal;
      }
    #tabsB ul {
        margin:7px;
        padding:18px 0px 0px 30px;
        list-style:none;
      }
    #tabsB li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsB a {
      float:left;
      background:url("http://img376.imageshack.us/img376/8052/leftbok1.gif") no-repeat left top;
      margin:0;
      padding:0 5px 0 4px;
      text-decoration:none;
      }
    #tabsB a span {
      float:left;
      display:block;
      background:url("http://img376.imageshack.us/img376/9454/rightbfl4.gif") no-repeat right top;
      padding:7px 10px 4px 5px;
      color:#fff;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsB a span {float:none;}
    /* End IE5-Mac hack */
    #tabsB a:hover span {
      color:#000;
      }
    #tabsB a:hover {
      background-position:0% -42px;
      }
    #tabsB a:hover span {
      background-position:100% -42px;
      }

        #tabsB #current a {
                background-position:0% -42px;
        }
        #tabsB #current a span {
                background-position:100% -42px;
        }



</style>
El XHTML

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Titulo de la web</title>

<body>

<div id="contenedor2">
<div id="contenedorin1">
<div class="top">
<IMG SRC="http://img123.imageshack.us/img123/754/fanlr4.gif"/>
</div>
<div class="topmenu">
<div id="tabsB">
                                <ul>
                                        <!-- CSS Tabs -->
<li id="current"><a href="#"><span><b>iHotel1</b></span></a></li>
<li><a href="#"><span><b>iHotel2</b></span></a></li>
<li><a href="#"><span><b>iHotel3</b></span></a></li>
<li><a href="#"><span><b>iHotel4</b></span></a></li>
<li><a href="#"><span><b>iHotel5</b></span></a></li>
<li><a href="#"><span><b>iHotel6</b></span></a></li>
<li><a href="#"><span><b>iHotel7</b></span></a></li>

                                </ul>
                        </div>

</div>
</div>
<div id="contenedorin2">
<IMG SRC="http://img385.imageshack.us/img385/15/logoihotelxr7.png"/></div>
</div></div>
<div id="topcontainer">
<br>
</div>
<div id="contenedor">


<div id="derecha">
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
</div>

<div id="medio">
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p><p>ihabbo</p><p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>

</div>

<div id="izquierda">
<p>ihabbo</p>
<p>ihabbo</p>
<p>ihabbo</p>
</div>
<div id="pie"><p>ihabboihabboihabbo</p></div>
</div>

</body>
</html>
Aun no tiene contenido esos ihabbo son bultos

Última edición por RufioStill; 26/11/2008 a las 13:22
  #2 (permalink)  
Antiguo 25/11/2008, 01:02
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: El contenido se mueve al achicar el navegador, ayuda.

un enlace.... es mejor con un enlace.
  #3 (permalink)  
Antiguo 25/11/2008, 01:11
Avatar de RufioStill  
Fecha de Ingreso: agosto-2008
Mensajes: 24
Antigüedad: 9 años, 3 meses
Puntos: 0
De acuerdo Respuesta: El contenido se mueve al achicar el navegador, ayuda.

Cita:
Iniciado por buzu Ver Mensaje
un enlace.... es mejor con un enlace.
Un enlace con la web? Aquí: http://mybbtest.webspacemania.com/ihotel3.html
  #4 (permalink)  
Antiguo 25/11/2008, 10:56
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: El contenido se mueve al achicar el navegador, ayuda.

Es porla forma en que estas aplicando los estilos. Estas flotando unos elementos y al no estar contenidos dentro de un contenedor global se mueven cuando ya no caben en la pantalla. Lo que puedes hacer es poner un contenedor que te contenga (mmm... no suena muy bien eso jaja) todo el sitio.


Código HTML:
<body>
   <div id="contenedorGeneral">
      <!-- Aqui va el contenido que ya tienes -->
   </div>
</body> 
A ese contenedor general le das un ancho determinado y listo. Por cierto, deberías trabajar en limpiar tu código, esta un poco lleno de código basura. Podrías lograr lo mismo que estas haciendo con mucho menos código. Ademas lee algo sobre los ids y las clases, específicamente algunos concejos para nombrarles.

Saludos
  #5 (permalink)  
Antiguo 25/11/2008, 12:12
Avatar de RufioStill  
Fecha de Ingreso: agosto-2008
Mensajes: 24
Antigüedad: 9 años, 3 meses
Puntos: 0
De acuerdo Respuesta: El contenido se mueve al achicar el navegador, ayuda.

Gracias voy a probar lo que me dijiste :), si hay mucho código basura xD tengo la costumbre de a la hora de terminar todo organizar y limpiar pero creo que mejor comenzar organizado.

PD: Eso también arreglara el problema de las resoluciones de pantalla?

Última edición por RufioStill; 25/11/2008 a las 12:38 Razón: Gracias por toda la ayuda :)
  #6 (permalink)  
Antiguo 25/11/2008, 15:34
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: El contenido se mueve al achicar el navegador, ayuda.

si, es mejor comenzar organizado. Te ahorras mucho trabajo. Ademas puede ser que tu pagina funcione bien con la basura y al limpiarlo ya no funcione. Eso te crearía más problemas.
  #7 (permalink)  
Antiguo 25/11/2008, 16:03
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: El contenido se mueve al achicar el navegador, ayuda.

Para lograr adaptar tu página a la resolución de la ventana del navegador, se logra con estilos "líquidos" (definitivamente no me gusta esa expresión), mejor, se maqueta en % ( o em) en lugar de en px.
Se aloja toda la págiana en un contenedor al que se le da la anchura en X% (95%, 80%, 100%), todo depende del margen que quieras dejar lateralmente.
Y a los elementos interiores todo depende del diseño de tu página, vamos, de las columnas que tenga.
Creo que sería bueno buscases algo más de información sobre ello, y las dudas puntuales que te puedan surgir las comentas.
Hay cientos de páginas con plantillas de ese tipo, por ejemplo.

Por cierto, que en esos casos es, más que conveniente, necesario definir un max y un min-width
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 25/11/2008, 16:18
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: El contenido se mueve al achicar el navegador, ayuda.

por que repitió cual? No entiendo

Bueno, solo aclarar que para diseño liquido no se usan em. Eso te daría problemas.
  #9 (permalink)  
Antiguo 25/11/2008, 16:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: El contenido se mueve al achicar el navegador, ayuda.

Repetí el comentario. Lo publiqué dos veces. Pero ya lo reporté, Buzu.
Bueno, y sobre el uso o no de em, creo que sí, se usa. Pero como en todo, dependerá de la finalidad buscada y con qué elementos, el que lo facilite o complique.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 25/11/2008, 17:00
Avatar de RufioStill  
Fecha de Ingreso: agosto-2008
Mensajes: 24
Antigüedad: 9 años, 3 meses
Puntos: 0
De acuerdo Respuesta: El contenido se mueve al achicar el navegador, ayuda.

Cita:
Iniciado por kseso? Ver Mensaje
Para lograr adaptar tu página a la resolución de la ventana del navegador, se logra con estilos "líquidos" (definitivamente no me gusta esa expresión), mejor, se maqueta en % ( o em) en lugar de en px.
Se aloja toda la págiana en un contenedor al que se le da la anchura en X% (95%, 80%, 100%), todo depende del margen que quieras dejar lateralmente.
Y a los elementos interiores todo depende del diseño de tu página, vamos, de las columnas que tenga.
Creo que sería bueno buscases algo más de información sobre ello, y las dudas puntuales que te puedan surgir las comentas.
Hay cientos de páginas con plantillas de ese tipo,
Por cierto, que en esos casos es, más que conveniente, necesario definir un max y un min-width
me darías una idea de como comenzar eso con mi código? ya me hice bolas

PD: De verdad te agradecería mucho :( entube revisando el código pero me entrevero, no tengo mucha practica con CSS :\
  #11 (permalink)  
Antiguo 25/11/2008, 17:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: El contenido se mueve al achicar el navegador, ayuda.

10-4, Rufiostill. Te lo miro, pero dame un poquito de tiempo.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 25/11/2008, 17:34
Avatar de RufioStill  
Fecha de Ingreso: agosto-2008
Mensajes: 24
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: El contenido se mueve al achicar el navegador, ayuda.

Cita:
Iniciado por kseso? Ver Mensaje
10-4, Rufiostill. Te lo miro, pero dame un poquito de tiempo.
Un saludo
Muchísimas gracias!!!! :D! te pasaste, gracias
  #13 (permalink)  
Antiguo 25/11/2008, 20:52
Avatar de RufioStill  
Fecha de Ingreso: agosto-2008
Mensajes: 24
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: El contenido se mueve al achicar el navegador, ayuda.

Otra cosa ;D, si me pueden dejar tutoriales de CSS se les agradecería :D
  #14 (permalink)  
Antiguo 26/11/2008, 00:06
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: El contenido se mueve al achicar el navegador, ayuda.

http://www.forosdelweb.com/f91/manua...spanol-647863/
  #15 (permalink)  
Antiguo 26/11/2008, 12:51
Avatar de RufioStill  
Fecha de Ingreso: agosto-2008
Mensajes: 24
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: El contenido se mueve al achicar el navegador, ayuda.

Bueno aun necesito ayuda :(, ayer me quede todo el día tratando de resolver el porque se mueve todo el contenido al cambiar de dimensión el navegador, busque información pero nada me sirvió, toda ayuda es bienvenida :\
  #16 (permalink)  
Antiguo 26/11/2008, 15:22
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: El contenido se mueve al achicar el navegador, ayuda.

lo que ya te dije anteriormente funciona. Quizá no lo estás haciendo bien. Te sugiero que limpies primero el código y luego pasamos a lo del movimiento.

En cuanto tengas tu codigo limpio, que para lo que tienes no necesitas tanto, avisas.

Saludos.
  #17 (permalink)  
Antiguo 26/11/2008, 15:33
Avatar de RufioStill  
Fecha de Ingreso: agosto-2008
Mensajes: 24
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: El contenido se mueve al achicar el navegador, ayuda.

Cita:
Iniciado por buzu Ver Mensaje
lo que ya te dije anteriormente funciona. Quizá no lo estás haciendo bien. Te sugiero que limpies primero el código y luego pasamos a lo del movimiento.

En cuanto tengas tu codigo limpio, que para lo que tienes no necesitas tanto, avisas.

Saludos.
Ok , lo voy a limpiar lo mas que pueda :l y a ver que queda y que se puede hacer intente ponerlo en un contenedor todo el contenido pero igual me pasa lo mismo a lo mejor lo hago mal como dices (soy relativamente nuevo en CSS, o mejor dicho se pero no tengo practica)

PD: Voy a comenzar a limpiar el código y luego lo pongo editando, de verdad aprecio la ayuda de los 2 :D
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 09:38.