Foros del Web » Creando para Internet » CSS »

Problema con div al maquetar

Estas en el tema de Problema con div al maquetar en el foro de CSS en Foros del Web. Hola, aqui va la descripción de mi problema: Tengo un encabezado superior horizontal con un ancho del 100% y un alto en pixeles, debajo de ...
  #1 (permalink)  
Antiguo 06/01/2006, 14:41
 
Fecha de Ingreso: noviembre-2003
Ubicación: Ciudad de México
Mensajes: 28
Antigüedad: 14 años, 1 mes
Puntos: 0
Problema con div al maquetar

Hola, aqui va la descripción de mi problema:

Tengo un encabezado superior horizontal con un ancho del 100% y un alto en pixeles, debajo de el se coloca otras dos secciones la del menu y la del contenido en forma de columnas verticales.

El problema esta en que estas dos columnas (sección 2 y 3) no logro que abarque el resto de la pantalla a lo alto sin importar la resolución de pantalla o tamaño de la venta del navegador. Use la propiedad height al 100% pero se sale de pantalla las columnas. Porque toma como referencia la cordenada 0,0 del body.

Alguna solución?? para que estas dos columnas ocupen el resto del espacio a lo alto relativamente.

Aquí esta el código

Código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Maquetacion</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#Content {
width: 100%;
height: 100%;
}
#seccion1 {
height: 69px;
width: 100%;
background-color: #FFCC00;
}
#seccion2 {
width: 235px;
background-color: #009933;
float: left;
height: 100%;
}
#seccion3 {
margin-left: 235px;
background-color: #0033CC;
}
-->
</style>
</head>
<body>
<div id="Content">
<div id="seccion1">Encabezado</div>
<div id="seccion2">Menu</div>
<div id="seccion3">Base Contenido</div>
</div>
</body>
</html>
 
Desde ya gracias
__________________
Los estándares Web siempre causaran polémica
http://mxgaribay.com
  #2 (permalink)  
Antiguo 06/01/2006, 22:00
 
Fecha de Ingreso: diciembre-2001
Ubicación: Asuncion
Mensajes: 143
Antigüedad: 16 años
Puntos: 1
Le agregue un poco de JS para acomodar los DIVs. También fijate en tu CSS le agregue, en el body padding: 0, esto es para que en Opera no se quden unos espacios alrededor del cuadro.

Código HTML:
 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 <title>Maquetacion</title> 
 <style type="text/css"> 
 <!-- 
 body { 
   margin-left: 0px; 
   margin-top: 0px; 
   margin-right: 0px; 
   margin-bottom: 0px;
   padding: 0; /* Opera */
} 
#Content { 
  width: 100%; 
  height: 100%; 
} 
#seccion1 { 
  height: 69px; 
  width: 100%; 
  background-color: #FFCC00; 
} 
#seccion2 { 
  width: 235px; 
  background-color: #009933; 
  float: left; 
} 
#seccion3 { 
  margin-left: 235px; 
  background-color: #0033CC; 
} 
--> 
</style>
<script language = "javascript" type="text/javascript">
    matchHeight = function() {
        divContent = document.getElementById('Content');
        if(divContent.offsetHeight){
            altura_divContent = document.getElementById('Content').offsetHeight;
            altura_seccion1 = document.getElementById('seccion1').offsetHeight;
        } else {
            altura_divContent = document.getElementById('Content').style.pixelHeight;
            altura_seccion1 = document.getElementById('seccion1').style.pixelHeight;
        }
        document.getElementById('seccion2').style.height = altura_divContent - altura_seccion1 + 'px';
		document.getElementById('seccion3').style.height = altura_divContent - altura_seccion1 + 'px';
    }
    window.onresize = function() {
		matchHeight();
    }
    window.onload = function() {
        matchHeight();
    }
	var appName = navigator.userAgent.toLowerCase();
	if( appName.indexOf("opera") > 0 && String(parseFloat(appName.substr(appName.indexOf("opera") + 6 ))) < 8 ) {  
		setInterval("matchHeight()",500);
	} 
</script>

 </head> 
 <body> 
 <div id="Content"> 
 	<div id="seccion1">Encabezado</div> 
	 <div id="seccion2">Menu</div> 
	 <div id="seccion3">Base Contenido</div> 
</div>
</body>
</html> 
  #3 (permalink)  
Antiguo 09/01/2006, 10:46
 
Fecha de Ingreso: noviembre-2003
Ubicación: Ciudad de México
Mensajes: 28
Antigüedad: 14 años, 1 mes
Puntos: 0
Gracias taar !!!!!! ahora mismo lo estoy ya probando.
__________________
Los estándares Web siempre causaran polémica
http://mxgaribay.com
  #4 (permalink)  
Antiguo 09/06/2008, 02:58
 
Fecha de Ingreso: octubre-2007
Mensajes: 3
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Problema con div al maquetar

no hay una manera más elegante de hacer eso?
no se como conseguir esto:

|div 9px| div 100% |div 9px|


tres columans, las dos laterales con un ancho fijo y la central que ocupe el resto
es posible usando solo css?
  #5 (permalink)  
Antiguo 09/06/2008, 04:16
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Problema con div al maquetar

si que es posible, has de ahcer un div que será donde irá todo, luego yo haría otro div con float left y otro con right y ahí pondría uno de los bordes y el central, y en el otro el toro borde.

Si te sirve mriate esto: http://www.cristalab.com/tutoriales/...en-xhtml-y-css
__________________
No diseñes usando tablas.
  #6 (permalink)  
Antiguo 09/06/2008, 12:26
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
Respuesta: Problema con div al maquetar

Cita:
Iniciado por gruu Ver Mensaje
no hay una manera más elegante de hacer eso?
no se como conseguir esto:

|div 9px| div 100% |div 9px|


tres columans, las dos laterales con un ancho fijo y la central que ocupe el resto
es posible usando solo css?
Hay una manera muy muy simple de hacerlo:

HTML:

<div id="derecha"></div>
<div id="izquierda"></div>
<div id="centro"></div>

CSS:

#derecha {width: 9px; float: right;}
#izquierda {width: 9px; float: left;}
#centro {margin: 0 9px;}

Mikel.
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 04:46.