Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] 2 divs fijos alineados horizontalmente, que no se muevan al redimensionar la ventana

Estas en el tema de 2 divs fijos alineados horizontalmente, que no se muevan al redimensionar la ventana en el foro de CSS en Foros del Web. Hola!, llevo un poco un descontrol porque estoy aprendiendo a marchas forzadas, hace un par de mese me hice una web y ahora la estoy ...
  #1 (permalink)  
Antiguo 16/01/2013, 22:20
 
Fecha de Ingreso: enero-2013
Ubicación: Zaragoza
Mensajes: 24
Antigüedad: 11 años, 2 meses
Puntos: 0
2 divs fijos alineados horizontalmente, que no se muevan al redimensionar la ventana

Hola!, llevo un poco un descontrol porque estoy aprendiendo a marchas forzadas, hace un par de mese me hice una web y ahora la estoy modificando para poder integrar mi blog en ella y asi hacerla mas dinamica.

La he rediseñado en photoshop y tengo 2 cajas, 1 al lado de la otra horizontalmente alineadas en el cuerpo.

Tengo el codigo aqui:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body bgcolor="000000">
<style type="text/css">
body {background-position: center top; background-image: url(img/wall.png);background-repeat:no-repeat;background-attachment:fixed;}
#cabecera {width: 1152px; height: 340px; position: absolute; left:50%; margin-left: -576px;background-image: url(img/header.png);}
#contenido {width: 70%; height: 70%; position: absolute; left: 50%; margin-left: -35%; top: 345px;}
#menubar {position: relative;background-image: url(img/bar_menu.png); width: 1020px; height: 70px; left: 50%; margin-left: -510px;}
#portada {float: left; position: relative; background-image: url(img/box_portada.png); width: 762px; height: 355px; left: 50%; margin-left: -580px;}
#destacado {float: right; position: relative; background-image: url(img/box_destacado.png); width: 348px; height: 368px;}
#blog {}
</style>
<header>
</header>
<div id="cabecera"></div>
<div id="contenido">
<div id="menubar"></div>
<div id="portada"></div>
<div id="destacado"></div>
<div id="blog"></div>
</div>

</body>
</html>

Lo que quiero hacer es que al redimensionar la ventana del navegador, se quede todo fijo, estatico, que no se menee nada. Y en este codigo el div destacado al hacer mas delgada la pantalla del navegador se mueve hasta que se monta encima de portada, portada se queda fija, lo consegui al ponerle el margin-left... esta vez quiero hacerlo bien, no se si llevo buen camino o que... creo que podria hacerlo poniendo todos los divs sueltos y en posiciones absolutas, pero creo que no es la manera correcta.

Podeis echarme un cable para dejar las cosas fijas y que no se muevan.

Voy un poco al reves, todo el mundo busca diseños adaptativos y yo no... xD, GRACIAS!!
  #2 (permalink)  
Antiguo 17/01/2013, 02:11
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: 2 divs fijos alineados horizontalmente, que no se muevan al redimensionar

Lo de posicionar las cosas de forma absoluta, como bien dices no es la manera. Yo iría un poco más allá y diría que es un error bastante grave.

Lo más normal, es que la estructura así te vaya haciendo cosas extrañas. Yo te diría que vuelvas a rehacerlo todo desde cero. Porque ahora lo que vas a hacer, es ir parcheando de forma cíclica cada vez que surge algún problema.

Ahora te descuadrarán las cosas porque tu capa #contenido lo tienes con medidas relativas; 70%. Dale un ancho fijo.

Pero más importante que eso, es que aprendas a centrar un elemento sin usar las pirulas de posicionar de forma absoluta, que en realidad es muy fácil y ocupa menos código del que tienes hecho.

Por ejemplo:
Código CSS:
Ver original
  1. div#cabecera {
  2.   width: 960px;
  3.   margin: 0 auto;
  4. }

Empieza por ahí.

Lo de aprender a marchas forzadas, supongo que significa que no te has leído bien ningún manual y/o tutorial; http://librosweb.es
  #3 (permalink)  
Antiguo 17/01/2013, 04:51
 
Fecha de Ingreso: enero-2013
Ubicación: Zaragoza
Mensajes: 24
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: 2 divs fijos alineados horizontalmente, que no se muevan al redimensionar

gracias Bonez por el apunte. Ahora lo que haré sera mirarme el manual tranquilamente, porque si es verdad, a ver, leer, he leído, pero no lo suficiente, siempre con el; "quiero hacer esto, pues busco voy directo a la parte esa"

Ahora cacharreare con el margin: 0 auto; que ya había leído algo por ahi ;) gracias!

Etiquetas: divs, horizontalmente, html, redimensionar
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 07:00.