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

royalz · #1 (**permalink**) 16/01/2013, 22:20

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!!

pzin · #2 (**permalink**) 17/01/2013, 02:11

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 originaldiv#cabecera {
  width: 960px;
  margin: 0 auto;
}

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

royalz · #3 (**permalink**) 17/01/2013, 04:51

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!