Foros del Web » Creando para Internet » CSS »

Problemas con maquetacion

Estas en el tema de Problemas con maquetacion en el foro de CSS en Foros del Web. Buenas! Saludos a todos. Estoy haciendo una maquetacion con CSS y se me presenta el siguiente inconveniente: - Quiero que el tamano de la pagina ...
  #1 (permalink)  
Antiguo 24/04/2008, 09:24
Avatar de messer  
Fecha de Ingreso: julio-2004
Mensajes: 467
Antigüedad: 13 años, 5 meses
Puntos: 5
Problemas con maquetacion

Buenas! Saludos a todos.

Estoy haciendo una maquetacion con CSS y se me presenta el siguiente inconveniente:

- Quiero que el tamano de la pagina se adapte al contenido pero se sale la capa de su contenedor.

Aca un ejemplo de como quiero que quede:

Aqui un ejemplo de como queda con position:absolute;

Este es el ejmplo de como queda con position:relative;

A ver en que me pueden ayudar.

Este es el codigo:

HTML
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>CSS</title>
<style type="text/CSS">
body{margin:0px; background:#336699; font: 12px Georgia, "Times New Roman", Times, serif;}

#MainFrame{position:relative;margin:20px auto 20px auto; text-align:center; width:904px;}
#Container{text-align:left; width:100%; background:transparent url(../images/sombra3.gif); padding:4px;}
#Content{width:100%;background:#FFF; /*overflow:hidden;  height:540px; border:1px solid #FFF;*/}


#Header{
	position:relative;
	width:100%;
	height:90px;
	background:#0099CC;
}

#NavMenu{width:892px; padding:6px; background:#336666;}

#WebContents{
	position:relative; padding:4px; /*height:600px;*/
}

#Div1{background:#EFEFEF; width:200px; height:400px;}
#Div2{left:2px; left:207px; background:#F4F4F4; width:540px; height:800px;}
#Div3{left:750px; background:#EFEFEF; width:150px; height:760px;}

#Footer{background:#999; border-top:1px solid #000;padding:10px 20px 10px 20px;}
</style>
</head>
<body>
<div id="MainFrame">
<div id="Container">
  <div id="Content">
 	<div id="Header">Content</div>
    <div id="NavMenu">&nbsp;</div>
    <div id="WebContents">
            <div id="Div1">&nbsp;</div>
            <div id="Div2">&nbsp;</div>
            <div id="Div3">&nbsp;</div>
      </div>
    <div id="Footer">Text
    </div> 
  </div>
</div>
</div>
</body>
</html>
Saludos!!
__________________
<script type="text/messerScript"><!--
window.onload=function(){ loadMesserRules(this.href) }
--></script>

Última edición por messer; 24/04/2008 a las 09:34
  #2 (permalink)  
Antiguo 24/04/2008, 10:46
Avatar de messer  
Fecha de Ingreso: julio-2004
Mensajes: 467
Antigüedad: 13 años, 5 meses
Puntos: 5
Re: Problemas con maquetacion

Le he puesto una tabla en la seccion intermedia (contenido) y obtengo el resultado que quiero, pero lo que busco es lograrlo sin utilizar tablas.

Saludos nuevamente.
__________________
<script type="text/messerScript"><!--
window.onload=function(){ loadMesserRules(this.href) }
--></script>
  #3 (permalink)  
Antiguo 24/04/2008, 11:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problemas con maquetacion

Creo que lo primero que necesitas es colocar esas 3 cajas flotadas. Después te hace falta darle un corte con clear: both; al contenedor de esas 3 cajas.

Prueba con esto a ver si va como tú quieres:

Cita:
<!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" lang="es-es">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>CSS</title>
<style type="text/CSS">
body{margin:0px; background:#336699; font: 12px Georgia, "Times New Roman", Times, serif;}
#MainFrame{position:relative;margin:20px auto 20px auto; text-align:center; width:904px;}
#Container{text-align:left; width:100%; background:transparent url(../images/sombra3.gif); padding:4px;}
#Content{width:100%;background:#FFF; /*overflow:hidden; height:540px; border:1px solid #FFF;*/}
#Header{
position:relative;
width:100%;
height:90px;
background:#0099CC;
}
#NavMenu{width:892px; padding:6px; background:#336666;}
#WebContents{
position:relative; padding:4px; /*height:600px;*/
}
#Div1{background:#EFEFEF; width:200px; height:400px; float: left;}
#Div2{background:#F4F4F4; width:540px; height:800px; float: left;;}
#Div3{background:#EFEFEF; width:150px; height:760px; float: left;}
#Footer{background:#999; border-top:1px solid #000;padding:10px 20px 10px 20px;}
.corte {clear: both;}
</style>
</head>
<body>
<div id="MainFrame">
<div id="Container">
<div id="Content">
<div id="Header">Content</div>
<div id="NavMenu">&nbsp;</div>
<div id="WebContents">
<div id="Div1">&nbsp;</div>
<div id="Div2">&nbsp;</div>
<div id="Div3">&nbsp;</div>
</div>
<div class="corte"></div>
<div id="Footer">Text </div>
</div>
</div>
</div>
</body>
</html>
Ya contarás.

Mikel.
  #4 (permalink)  
Antiguo 24/04/2008, 14:20
Avatar de messer  
Fecha de Ingreso: julio-2004
Mensajes: 467
Antigüedad: 13 años, 5 meses
Puntos: 5
Re: Problemas con maquetacion

Muy bien! muchas gracias me ha servido.. Investigare respecto a la propiedad clear, no la conocia.

Saludos!!
__________________
<script type="text/messerScript"><!--
window.onload=function(){ loadMesserRules(this.href) }
--></script>
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:47.