elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Problema al maquetar con 2 Divs
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Problema al maquetar con 2 Divs  (Leído 2,085 veces)
soru13

Desconectado Desconectado

Mensajes: 246



Ver Perfil
Problema al maquetar con 2 Divs
« en: 23 Febrero 2013, 18:50 pm »

Hola, llevo varias horas dándole vueltas a un problema que tengo al maquetar mi web, y la verdad, que me estoy volviendo loco.

El archivo Html contiene lo siguiente:

Código:
<div id="contenedor">    
      
      <div id="medio">
a
      </div>

</div>

Y el CSS lo siguiente:

Código:
#contenedor{
height:auto;
width:100%;
}

#medio{
height:auto;
padding:0;
width:990px;
margin:auto;
background-color:white;
        border-right: 1px solid rgb(204, 204, 204);
        border-left: 1px solid rgb(204, 204, 204);
border-bottom: 1px solid rgb(204, 204, 204);

}

Entonces, el problema está que cuando mi DIV con ID "medio" coje automáticamente ( al cargar contenido con PHP ) o poniéndole yo manualmente en el CSS una altura mayor a 900px, éste se desplaza unos 5 o 10 px a la izquierda, entonces a la hora de navegar, como en la principal el div es mayor a 900px y en las demás no, deja un efecto al navegar que parece que el diseño se mueve de un lado a otro, bastante feo.

El caso es que llevo bastante tiempo dándole vueltas y no se me ocurre nada, aver si me podéis ayudar.

Os dejo unas capturas de lo que hace:

Con 900px o menos: http://oi50.tinypic.com/rh4zcz.jpg

Con 1000px o más: http://oi46.tinypic.com/20p5xtw.jpg

Un saludo y gracias!


« Última modificación: 23 Febrero 2013, 19:25 pm por soru13 » En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Problema al maquetar con 2 Divs
« Respuesta #1 en: 23 Febrero 2013, 19:45 pm »

Si te fijas, cuando lo tienes con 900px o menos, el navegador no añade scrollbars. En cambio, con mas de 1000px si. Por eso se te mueve.

2 soluciones.

Activar el scrollbar vertical por defecto
Código
  1. html {overflow-y: scroll;}

O darle un position:absolute a #medio y centrarlo con porcentajes.

Código
  1. #medio {
  2.   padding:0;
  3.   width:990px;
  4.   background-color:white;
  5.   border-right: 1px solid rgb(204, 204, 204);
  6.   border-left: 1px solid rgb(204, 204, 204);
  7.   border-bottom: 1px solid rgb(204, 204, 204);
  8.   /* Por defecto el navegador ya aplica height:auto. Asi que no lo uses :P */
  9.   height:900px;
  10.   /* Posicion absoluta */
  11.   position:absolute;
  12.   /* Mover 50% a la izquierda */
  13.   left:50%;
  14.   /* Le quitamos la mitad del ancho del div a la izquierda. Así se centra. */
  15.   margin-left:-495px;
  16. }

Saludos


En línea

soru13

Desconectado Desconectado

Mensajes: 246



Ver Perfil
Re: Problema al maquetar con 2 Divs
« Respuesta #2 en: 23 Febrero 2013, 20:11 pm »

Muchas gracias, poniendo el div como absoluto y centrándolo lo solucioné. La verdad que no llegué a probarlo porque pensaba que con la posición relativa debería hacerlo bien.

Un saludo!
« Última modificación: 23 Febrero 2013, 20:14 pm por soru13 » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Ayuda con divs !!!!
Desarrollo Web
nobo 0 1,737 Último mensaje 14 Marzo 2012, 12:15 pm
por nobo
Software para maquetar DIVS - Slicemaker , conoces mas... compartelos
Desarrollo Web
Graphixx 0 1,620 Último mensaje 6 Diciembre 2014, 16:23 pm
por Graphixx
Problema al insertar iframes en DIVS
Desarrollo Web
genericobro 7 3,595 Último mensaje 10 Marzo 2015, 15:27 pm
por MinusFour
Problema con muestreo de DIVS con JQuery
Desarrollo Web
zikotik 0 2,012 Último mensaje 30 Noviembre 2016, 15:22 pm
por zikotik
¿Qué usa Facebook para maquetar su sitio web?
Dudas Generales
emperie 1 2,613 Último mensaje 14 Diciembre 2020, 01:53 am
por BloodSharp
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines