div que se superponer

gines86 · #1 (**permalink**) 22/02/2013, 12:28

Hola compañeros, tengo un problema que no consigo solucionar y he probado de mil maneras y no se que estoy haciendo mal. He probado con div en relative y absolute, con position y no hay manera y ya tengo tal lio que no se como solucionarlo...

Os explico con imagenes para que se me entienda más facil:

He marcado con colores para que os sea más fácil distinguir mi error.

En esta primera imagen se ve como está mi web a una resolución grande y es como me gustaría que permaneciera.
Para ello he creado 3 div verticales (encabezado, contenido y pie.)
Dentro del div encabezado es donde meto los otros div pero ya no se de que manera para que se queden en su sitio.

Al reducir el navegador o reducir la página se montan los menus, el logo y todo el texto del contenido y se hace un lio impresionante:

Lo que me gustaría es que todo quedara en su sitio y al reducir la pagina o minimizara solo se desplazara un poco el texto y luego salieran las barras de desplazamiento como en esta página:

Tamaño completo:

Minimizada:

¿Qué debo hacer para que el texto y los menús y demás no se amontonen?

Mil gracias!!

P.D: He leido mucho en el foro antes de postear pero como dije al principio lo ponga como lo ponga siempre se queda algo mal

pzin · #2 (**permalink**) 22/02/2013, 12:36

Si has leído mucho el foro seguro que no habrás tropezado con ningún mensaje mío advirtiendo de que usar posicionamiento absoluto es una cosa muy muy mala para la estructuración de un sitio. Y este post me valdrá como referencia para el futuro.

Flota los elementos en vez de usar posicionamiento absoluto —que sólo hay que usarlo para casos muy concretos. Porque lo que haces posicionando así, es precisamente sacar el elemento de su flujo natural y de toda su estructura y acaban volando unos encima de otros.

gines86 · #3 (**permalink**) 22/02/2013, 12:40

Gracias por la rapidez de respuesta, y creo que el tema lo debería haber puesto en el apartado de div pero estaba navegando y me lie...
Ya te digo que probe con los distintos position y con los float y aún asi se come el texto.
Ahora mismo los deje en position relative que es lo que mejor se ajustaba a lo que quería... Este es parte del código:

Código:

html, body {
	font-family:"Century Gothic", "book Antiqua", calibri, candara;
	font-size: 14px;
	margin: 0;  
	background-image:url(images/bg.jpg);
	color: #bbbbaa;}

.encabezado {min-height: 130px;
	position: relative;
	margin-top: 0px;}
	
.cuerpo {min-height: 450px;
	background-color: #333;
	position: relative;
	background-image:url(images/bg2.jpg);
	text-align: center;}

.contenido {width: 1024px;
	text-align: left;
	margin: auto;
	padding-top: 10px;}

.pie {min-height: 50px;
	width: 100%;
	margin: 20px auto auto auto;
	position: relative;
	text-align: center;}

.logo {min-width: 200px;
	min-height: 200px;
	height: auto;
	position:absolute;
 	top: 0px;
 	left: 0px;}

.menu {
	position:absolute;
 	top: 0px;
	right:0px;
	width: 700px;
}

.submenu {
	height: 60px;
	position: absolute;
	right: 10px;
	top: 70px;
	max-width: 650px;
	z-index: 3;
	}

P.D: Los div que van dentro del encabezado si los he dejado en absolute pero es que aunque los ponga en float: right se queda mal :S

pzin · #4 (**permalink**) 22/02/2013, 12:45

Claro, la posición relativa no saca al elemento del flujo natural del todo.

¿Puedes poner el HTML correspondiente? Para ver qué es cada cosa.

gines86 · #5 (**permalink**) 22/02/2013, 13:03

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Miscelánea</title>
<link href="../estilo.css" rel="stylesheet" type="text/css" />
<link href="../menu.css" rel="stylesheet" type="text/css" />
         
</head>


<!---------------------------------------------------------------------------------------->


<body>
<div class="encabezado">
  <div class="logo">
  <img src="../images/logo.png" / id="logo">
	</div>

<div class="menu">
	<ul class="nav">
		<script type="text/javascript" src="../menusup1.js"></script>
	</ul>
</div>

 		<div class="submenu">
			<script type="text/javascript" src="menu2.js"></script>
		  </div>
 		<p>&nbsp;</p>
  
</div>


<!---------------------------------------------------------------------------------------->


<div class="cuerpo">

<img src="portada/portada.png">

</div>


<!---------------------------------------------------------------------------------------->


<div class="pie">
Luis Arenas Copyright © Todos los derechos reservados.
<p><a href="https://www.facebook.com/LuisArenasFotografo" target="_blank"><img src="../images/face.png" alt="facebook" /></a>

</div>

</body>
</html>

pzin · #6 (**permalink**) 22/02/2013, 13:19

Dime pesado, pero casi mejor el código tal cual lo tienes. Quería hacer una prueba y verlo in situ, pero no hay nada.

O si lo tienes subido a algún sitio también vale.

gines86 · #7 (**permalink**) 22/02/2013, 13:23

Aún no lo tengo subido. Estoy rehaciendo una web que hice hace ya 2 o 3 años y se me ha olvidado casi todo lo que sabía.

Mira, este es el aspecto que tiene la web y es el que quiero que mantenga al reducirse, lo único que me falla es eso, que el menu al reducir se monta y que las letras en vez de comerselas la pantalla y que salgan las barras de desplazamiento se amontonan. Y importante es que:
- Los 3 div horizontales ocupen el 100% del ancho de la página.
- El div central varia según el contenido que se le meta.
- El 1 div encabezado también puede variar el alto si en la pestaña que entro hay muchos submenus

...No sé si estoy pidiendo demasiado...