Meter varios DIVS en un Div

santunvel · #1 (**permalink**) 25/04/2013, 13:10

Bueno, esto lo quiero hacer por que tengo un navegador que le he llamado header este es horizontal y esta en la parte superior, otro navegador que se llama lefter este es un navegador vertical del lado izquierdo y el footer, es el pie de pagina, lo que pasa es que a la hora de hacer pequeñita la pantalla cada uno gana para su lado, solo se centra el header por que le puse que se centrara, así que a ese no le afecta, pero el lefter se va hasta la izquierda, dejando el cuerpo de la pagina al centro y el se va hasta el tope de la izuierda, investigue que poner un div centrado y meter todos allí, y tengo ejemplos que así lo arreglan, pero no se que pasa con el mio que no quiere

Código CSS:

Ver original<style>
#contenido
{
    margin: 0 auto;
    width: 1000px;
    min-height: 700px;
    border:1px solid #99CC66;
}
/*IMAGEN*/
/*background: #000 url(../images/main-bg.jpg) no-repeat top center;*/
body#corpus {
background: #000 url(fondo.jpg) no-repeat top center; /*se incluye la imagen de fondo.jpg
/*background-position: top center;*/
 
 
background-repeat:no-repeat;
 
}
</style>
<div id="contenido">
<?php   //pagina de inicio compuesta por otas hojas de codigo 
require_once("../mod_configuracion/conexion.php");?>  <!--se incluye conexion.php-->
<div style="float:left"><?php require_once("../theme/header_inicio.php");?> </div> <!--se incluye header_inicio.php--->
<div style="float:left"><?php  require_once("../theme/lefter.php");?></div> <!--se incluye lefter.php que es el navegador de lado izquierdo de la pagina de inicio--->
 <!-- Content Center -->
<h>INICIO</h>
 
<br /><br /><br />
<body id="corpus">
</body>
<!-- end content center -->
<div ><?php
require_once("../theme/footer_inicio.php");?></div> <!--se incluye footer_inicio.php que es pie de la pagina de inicio--->
</div><!--contenido-->

C2am · #2 (**permalink**) 25/04/2013, 22:10

La estructura html de una página es:

Código HTML:

Ver original<html>
<head>
 
<style>
</style>
 
</head>
 
<body>
<div>
Contenido
</div>
 
</body>
</html>

Y no:

Código HTML:

Ver original<html>
<head>
 
<style>
</style>
 
</head>
 
<div>
<body></body>
</div>
 
</html>

Te presto el manual: www.librosweb.es
Comienza por este: http://www.librosweb.es/xhtml/

Saludos

santunvel · #3 (**permalink**) 26/04/2013, 11:20

Cita:

Iniciado por C2am

La estructura html de una página es:

Código HTML:

Ver original<html>
<head>
 
<style>
</style>
 
</head>
 
<body>
<div>
Contenido
</div>
 
</body>
</html>

Y no:

Código HTML:

Ver original<html>
<head>
 
<style>
</style>
 
</head>
 
<div>
<body></body>
</div>
 
</html>

Te presto el manual: [url]www.librosweb.es[/url]
Comienza por este: [url]http://www.librosweb.es/xhtml/[/url]

Saludos

Sigue perdido el navegador man, mmm no se si se pueda acomodar según resolución de la pantalla, había oído que existe algo así

al_limon · #4 (**permalink**) 29/04/2013, 09:14

Hellooo!!!

Tienes un lio importante en ese código... :S
Para lo que quieres hacer, necesitas posicionar el contenedor padre, si no, todo andará por ahí flotando y después anidar los estilos (por separado) de lefter y footer dentro del padre.

Como te indican, en el html también tienes incoherencias importantes...

En fin, de todos modos, te adjunto un código, que creo que es lo que necesitas... :)

Cita:

<html>
<head>
<style type="text/css">
#contenido
{
position:absolute;
left:50%;
margin-left:-500px;
width: 1000px;
min-height: 700px; /*con esto, no se qué pretendes..*/
border:1px solid #99CC66;
}
#corpus {
background: #000 url(fondo.jpg) no-repeat top center;
background-repeat:no-repeat;
}
#contenido .header {
position:absolute;
top:0;
left:0;
width:1000px;
height:200px;
background-color: #CCC; /*le pongo color de fondo para que lo distingas*/
}
#contenido .lefter {
position:absolute;
top:200px;
left:0;
width:230px;
height:400px;
background-color: #999; /*le pongo color de fondo para que lo distingas*/
}
#contenido .footer {
position:absolute;
bottom:0;
height: 100px;
width: 1000px;
background-color: #CCC; /*le pongo color de fondo para que lo distingas*/
}
</style>
</head>

<body id="corpus">
<div id="contenido">
<div class="header">

</div>

<div class="lefter">
inserta el contenido
</div>

<div class="footer">
inserta el contenido
</div>
</div>
</body>
</html>

#5 (**permalink**) 29/04/2013, 17:36

Cita:

Iniciado por C2am

La estructura html de una página es:

Código HTML:

Ver original<html>
<head>
 
<style>
</style>
 
</head>
 
<body>
<div>
Contenido
</div>
 
</body>
</html>

Y no:

Código HTML:

Ver original<html>
<head>
 
<style>
</style>
 
</head>
 
<div>
<body></body>
</div>
 
</html>

Te presto el manual: [url]www.librosweb.es[/url]
Comienza por este: [url]http://www.librosweb.es/xhtml/[/url]

Saludos

C2am esta en lo correcto la web que tienes hay no tiene ningún tipo de estructura, intenta reconstruir la web de nuevo siguiendo los pasos que C2am ha proporcionado.

En cuanto a lo de la resolución, el navegador es capas de capturar las dimensiones del explorador pero no su resolución no se si me explico la manera de tomar estas dimensiones son

Código:


	Código HTML:
	@media only screen and (min-width: 480px) and (max-width: 767px) {

//clases, id,tags...etc a modificar

	}

En donde lo que esta encerrado en corchetes son las comprobaciones para que se dispare ese conjunto de eventos.

Espero haber sido claro, mi primer ayuda en FdW. Salu2.

Edito: Si aun sigues con dudas intenta adjuntar la web o el trozo de web e intentare corregirla.