Foros del Web » Creando para Internet » HTML »

DIVs con misma altura...

Estas en el tema de DIVs con misma altura... en el foro de HTML en Foros del Web. Hola buenas, Normalmente hago mis páginas con tablas y lo cierto es que quedan genial y las creo rápidamente. Pero como está tan "de moda" ...
  #1 (permalink)  
Antiguo 07/10/2006, 13:14
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
DIVs con misma altura...

Hola buenas,

Normalmente hago mis páginas con tablas y lo cierto es que quedan genial y las creo rápidamente.

Pero como está tan "de moda" hacerlo con DIVs (la verdad no entiendo por qué ha que con tablas se hacen rápidamente) he probado a hacer la siguiente de ese modo a ver qué tal.

Lo que quiero es hacer algo así:

http://glish.com/css/7.asp

... pero de forma que los tres DIVs verticales se adapten al alto de la pantalla según la resolución (con tablas se hace enseguida con porcentajes)... ¿cómo podría hacerse?

Lo que pretendo es crear una página con el típico encabezado y dos columnas, pero si pongo en % el encabezado, y aparte, que el DIV donde irá el contenido si redimensiono la página, éste queda por fuera del DIV, que no se estira... y no quiero configurarlo para que aparezcan las barras de desplazamiento

Gracias

Última edición por MikiBroki; 07/10/2006 a las 13:33
  #2 (permalink)  
Antiguo 07/10/2006, 13:41
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
De acuerdo

Código:
<HTML>

<HEAD>
<LINK TYPE="text/css" REL="styleSheet" HREF="./css/estilos.css" />
</HEAD>
		
<BODY>			

    <DIV ID="divGeneral">

        <DIV ID="divEncabezado" >
        </DIV>

        <DIV ID="divMenu" >
                <SPAN CLASS="menuSeccion">SECCIÓN 1</SPAN>		
                <UL CLASS="menu">
                    <LI CLASS="menuOpcion"><A HREF="#" CLASS="menuEnlace">Opción 1</A></LI>
                    <LI CLASS="menuOpcion"><A HREF="#" CLASS="menuEnlace">Opción 2</A></LI>
                    <LI CLASS="menuOpcion"><A HREF="#" CLASS="menuEnlace">Opción 3</A></LI>							
                    <LI CLASS="menuOpcion"><A HREF="#" CLASS="menuEnlace">Opción 4</A></LI>
                    <LI CLASS="menuOpcion"><A HREF="#" CLASS="menuEnlace">Opción 5</A></LI>
                </UL>			
		
         </DIV>

         <DIV ID="divCuerpo" >
             el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>
         </DIV>
				
    </DIV>
				
</BODY>
	
</HTML>
Los estilos:

Código:
body {
	margin:0px 0px 0px 0px;
}


#divGeneral {
	height:100%;
	width:778px;

	background-color:#0055AA;

	/*
	border-style:none;
	border-width:2px;
	*/
}


#divEncabezado {	
	height:120px ;
	width:778px;	
background-image:url("../imagenes/encabezado.png");
	/*background-color:#FF0000;*/
}


#divMenu {
	height:90%;
	position:absolute;
	top:100px;	
	width:170px;
	background-color:#00FF00;	
}


#divCuerpo {
	height:90%;
	position:absolute;
	top:100px;
	left:170px;
	width:608px;
	background-color:#0000FF;
	overflow:inherit;
}


.menu {
	list-style:none;
	border-style:solid;
	padding:2px;
	border-width:0px;
}


.menuSeccion {
	color:red;
	font-family:Arial;
	font-size:11pt;
	font-weight:bold;
	align:center;
	margin-left:10px;
}

.menuOpcion {
	color:red;
	height:20px;
		
	border-style:solid;
	border-width:1px;
	
	padding:0px;	
	margin:2px;

	background-color:yellow;
}


.menuEnlace {
	color:black;

	text-decoration:none;
	
	font-family:Arial;
	font-size:10pt;
	font-weight:bold;
}
  #3 (permalink)  
Antiguo 07/10/2006, 13:59
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Vámonos a CSS!...
__________________
_______
Jorge Rojas.
  #4 (permalink)  
Antiguo 07/10/2006, 16:24
Avatar de urgido  
Fecha de Ingreso: febrero-2005
Mensajes: 2.351
Antigüedad: 12 años, 9 meses
Puntos: 25
creo que lo de la altura sería asi:
Código HTML:
<div style="height:100%">Hola</div> 
__________________
Hospedaje Web al mejor costo!
  #5 (permalink)  
Antiguo 07/10/2006, 16:48
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Sí... eso lo sé... el tema es que tengo:

* Un div general al "height:100%", con otros tres dentro:

* uno para el encabezado al "height:10%"
* dos para cada una de las columnas al "height:90%"

Pero al redimensionar no queda bien, el div encabezado se reduce en proporción y no se ve entera la imagen que contiene... por lo que tengo que poner las dimensiones en px del div, pero luego los otros no se ajustan tampoco al alto del documento...

Alguien podría decirme al menos dónde consultar ejemplos en que se ajusten a la resolución, o esto sólo se puede hacer con tablas?
  #6 (permalink)  
Antiguo 07/10/2006, 16:58
Avatar de urgido  
Fecha de Ingreso: febrero-2005
Mensajes: 2.351
Antigüedad: 12 años, 9 meses
Puntos: 25
bueno a mi punto de vista creo que el post debería ir en CSS. Aquí te dejo una guía práctica: http://www.htmlpoint.com/css/css_10.htm

Espero y te sirva. Saludos ;)
__________________
Hospedaje Web al mejor costo!
  #7 (permalink)  
Antiguo 07/10/2006, 17:25
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
sí lo siento, me equivoqué al poner el post. El enlace está muy bien, pero no veo nada que solucione mi problema, pero gracias
  #8 (permalink)  
Antiguo 07/10/2006, 17:28
Avatar de urgido  
Fecha de Ingreso: febrero-2005
Mensajes: 2.351
Antigüedad: 12 años, 9 meses
Puntos: 25
ahí habla sobre la tag "position" eso sin duda soluciona tu problema ya que te da 4 opciones para respetar las dimensiones de tu imágen aunque las del div sean otras. Saludos y de nada ;)
__________________
Hospedaje Web al mejor costo!
  #9 (permalink)  
Antiguo 08/10/2006, 15:15
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Eso puede solucionar el tema con la imagen, pero no el problema que quiero que las columnas tengan ambas el mismo tamaño independientemente de su contenido y de la resolución, que se adapten a ella como se hace con las tablas.

Tras muuucho buscar la única forma de solucionar esto que he encontrado:

http://platea.pntic.mec.es/~jmas/man...scolumnas.html

Lo que se hace es poner imágenes de fondo para alargarlos... cosa que me parece una cutrez, y si alguien amablemente no me dice una forma mejor yo sigo con mis tablas.

Gracias ;)
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 23:48.