Re: [Ovillo] Extender DIV hasta ocupar todo el contenido

2007-06-18 Por tema sn
salud reynier, precisamente éstos días he estado buscando algo parecido a lo
que comentas.
si buscas un hilo llamado diseño a 3 columnas verás las conclusiones a las
que allí se llegaron.
al final se utilizó javascript para estirar las columnas ya que parece que
es imposible hacerlo solamente con css.

un saludo y espero que te sirva.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Extender DIV hasta ocupar todo el contenido

2007-06-18 Por tema Reynier Perez Mira
Hola sn y demás listeros:
He probado lo que me dices y al parecer tengo algo mal y no logro encontrar que 
cosa es. Ahora hice algunos cambios porque mi plantilla (layout) no es igual al 
del ejemplo, sino que antes de las 3 columnas lleva una cabecera. Aquí les dejo 
el CSS y el HTML para que prueben y vean lo que me pasa.

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=sp lang=sp
head
titleProbando columnas/title
meta http-equiv=Content-Type content=text/html charset=iso-8859-1/
script type=text/javascript 
src=assets/script/simpro/fillheight.js/script
style type=text/css
body{
margin:0 auto;
}
#contenedor_principal{
overflow:hidden;
}
#contenido_central{
background-color:red;
width:20%;
float:left;
margin-bottom:-5000px;
padding-bottom:5000px;
 }
#columna_derecha{
background-color:blue;
width:60%;
float:left;
margin-bottom:-5000px;
padding-bottom:5000px;
 }
#pie_de_pagina{
height:40px;
clear:both;
float:none;
background-color:black;
color:white;
width:100%;
}
/style
/head
body onload=fillthescreen()
div id=contenedor_principal
div id=cabecera
div id=registroRegistro de usuarios/div
/div
div id=navegacionNavegacion/div
div id=contenido_centralalgo/div
div id=columna_derechacolumna derecha/div
div id=pie_de_paginapie de pagina/div
/div
/body
/html

El JS lo he modificado de la siguiente manera para adapatarlo a mis selectores:
function fillthescreen(){
winH = windowHeight(); //This returns the screen heigth
heightNeeded=winH-40; //We need to substract the footer height
if( typeof( window.innerWidth ) != 'number' ) { //Explorer doesn't 
recognize minHeight

document.getElementById('contenido_central').style.height=heightNeeded+'px'; 
//So, we use height (and explroer bug)
}

document.getElementById('contenido_central').style.minHeight=heightNeeded+'px'; 
//For every other browser, we use minHeight
}

function windowHeight(){
var alto= 0;
if( typeof( window.innerWidth ) == 'number' ) {
alto= window.innerHeight;
} else if( document.documentElement  ( 
document.documentElement.clientWidth || document.documentElement.clientHeight ) 
) {
alto= document.documentElement.clientHeight;
} else if( document.body  ( document.body.clientWidth || 
document.body.clientHeight ) ) {
alto= document.body.clientHeight;
}
return alto;
}

¿Qué estoy haciendo mal?
Salu2 y desde ya gracias
Reynier Pérez Mira
5to. año Ing. Informática
Universidad de las Ciencias Informáticas

 -Original Message-
 From: [EMAIL PROTECTED] [mailto:ovillo-
 [EMAIL PROTECTED] On Behalf Of sn
 Sent: Monday, June 18, 2007 3:35 AM
 To: Ovillo, la lista de CSS en castellano
 Subject: Re: [Ovillo] Extender DIV hasta ocupar todo el contenido
 
 salud reynier, precisamente éstos días he estado buscando algo parecido a
 lo
 que comentas.
 si buscas un hilo llamado diseño a 3 columnas verás las conclusiones a
 las
 que allí se llegaron.
 al final se utilizó javascript para estirar las columnas ya que parece que
 es imposible hacerlo solamente con css.
 
 un saludo y espero que te sirva.
 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección:
 http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


[Ovillo] Extender DIV hasta ocupar todo el contenido

2007-06-16 Por tema Reynier Perez Mira
Hola listeros:

Estoy usando la técnica footerStickAlt para mantener el pie(footer) pegado al 
borde inferior(bottom) de la ventana. Todo funciona a la perfección. También 
estoy usando Nifty [1] para redondear las esquinas de algún que otro DIV u otro 
elemento que así lo necesite. El código HTML (resumido) de la página generada 
es el siguiente:

div id=contenedor

div id=encabezado

  div id=registroFormulario/div !-- Fin registro --

   /div !-- Fin encabezado --

   div id=navegacionMenu de navegacion/div !-- Fin navegacion --

   div id=contenidoAqui va todo el contenido/div!-- Final DIV 
ID=contenido --

   div id=derechaColumna derecha/div !-- Fin columna derecha --

/div!-- Final DIV ID=contenedor --

div id=clearnbsp;/div !-- Para que footerStickAlt funcione bien con 
elementos flotados --

div id=pieAqui va todo lo del pie/div!-- Final DIV ID=pie --

 

Ahora el DIV con ID contenido y el DIV con ID columna derecha nunca se me 
expanden hasta ocuparme el 100% lo que me afea en un 90% el diseño de la 
página. La cuestión es saber si existe alguna forma de que estos dos elementos 
contenidos dentro del DIV con ID contenedor ocupen ese espacio en blanco.

 

Nota: FauxColumns no me sirve porque como dije hay esquinas redondeadas, además 
de separaciones mediante margin entre uno y otro DIV y me es imposible entonces 
hacer una imagen para ponerla de fondo.

 

[1] http://www.html.it/articoli/niftycube/index.html 

Salu2 y esperando por su ayuda

 

Reynier Pérez Mira

5to. año Ing. Informática

Universidad de las Ciencias Informáticas

 

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo