Imposible de hacer con CSS?

quebien · #1 (**permalink**) 11/09/2009, 11:47

Hola a todos!

Estoy queriendo hacer esto hace mas de un dia. Quiero hacer un clasico diseño de tres columnas pero que yo pueda omitir alguna de las columnas (o las dos) y el contenido siempre se ajuste al ancho.

Esta tabla hace exactamente lo que quiero:

Código HTML:

<table width=780 height=100% border=1>
<tr>
	<td width=180 valign=top>col izq</td> <!--columna opcional-->
	<td valign=top>contenido</td>
	<td width=180 valign=top>col der</td> <!--columna opcional-->
</tr>
</table>

Pero con CSS no lo puedo hacer

Ayudita?

gracias!

Daniel Ulczyk · #2 (**permalink**) 11/09/2009, 12:06

Tal vez si asignases IDs, podrías controlarlo mejor (según voluntad) y así aplicar CSS

Código HTML:

Ver original<html>
<head>
    <title></title>
    <style>
    #sinizquierda #izquierda {
        display: none;
    }
    #derecha {
/*      display: none;*/
    }
    #contenido {
        background: #F5F5F5;
    }
    </style>
</head>
 
<body id="sinizquierda">
<table width=780 height=100% border=1>
<tr>
    <td id="izquierda" width=180 valign=top>col izq</td> <!--columna opcional-->
    <td id="contenido" valign=top>contenido</td>
    <td id="derecha" width=180 valign=top>col der</td> <!--columna opcional-->
</tr>
</table>
</body>
</html>

En mi ejemplo, como el BODY tiene un ID="sinizquierda" se aplica el CSS

Código html:

Ver original#sinizquierda #izquierda {
        display: none;
    }

Con esa idea podrías escribir el CSS que necesites para las diferentes combinaciones

Suerte!

#3 (**permalink**) 11/09/2009, 16:58

mmm

pues por que no intentas hacerlo con capas (div's) en lugar de tablas?

es mas cencillo valida mas facil

puedes utilizar float's en los div para que nunca cambien su posicion

quebien · #4 (**permalink**) 11/09/2009, 17:01

eso es justamente lo que intento hacer. La tabla es solo a modo de ejemplo. Yo lo quiero hacer con divs pero es imposible

alexk · #5 (**permalink**) 11/09/2009, 19:13

mmmm...

Cita:

con divs pero es imposible

imposible no... "incompatible" Si...

Código css:

Ver original.all{width:750px;margin-top:20px;display:table;}
.izk, .cen, .der{display:table-cell;}
.izk, .der{width:180px;}

Código html:

Ver original<div class="all">
    <div class="izk">columnizq</div>
    <div class="cen">contenido</div>
    <div class="der">columnder</div>
</div>

kseso? · #6 (**permalink**) 12/09/2009, 06:54

Esta estructura (dos columnas laterales de anchura fina y una central ocupando el resto del espacio disponible) es la clásica de los layouts de tres columnas.

Mira a ver si el siguiente código te sirve como base para lograr lo que necesitas.

Código html:

Ver original<!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" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
body {font-size:99%; font-family:sans-serif; background:#f5f5f5;}
 
#header {background:#521E39;}
 
#izquierda {float:left; width:280px; padding:10px; background:#91D0D0;}
#derecha{float:right; width:280px; padding:10px; background:#65684A}
#centro {background:#e0e0e0; margin-top:10px;}
 
#izquierda, #centro, #derecha {padding-bottom:500px; margin-bottom:-500px;}
 
#contenedor {overflow:hidden; background:#e0e0e0;display:inline-block; min-width:970px;}
 
 
#footer {clear:both; background:#191919; margin-top:-3px;}
 
.caja-top {padding:10px;}
.caja-top img {float: left; display: inline; border: 1px solid #f5f5f5;}
h1 {font-size:3em; margin:0; padding:10px 0; color:#fff; font-family: monospace;}
h2, h3 {font-size:1.8em; margin:0; padding:8px 0; font-family: serif;}
p {font-size:1em; line-height:1.5em; margin:0; padding:5px;}
#footer p, #header p, #derecha p {color:#fff;}
.monospace {font-family: monospace; font-size: 1.2em; background: #FF6600;}
.codigo {font-family: monospace; font-size:1em; letter-spacing: .1em; border: 1px solid #f5f5f5; color: #f5f5f5; background:#191919;}
</style>
 
<!--[if lte IE 7]>
<style type="text/css">
#centro {float:left; display:inline; margin-left:10px; margin-right:10px;}
 
#contenedor {display:inline-block; width: expression(document.body.clientWidth < 971? "970px": "auto" );}
</style>
<![endif]-->
 
</head>
 
<body>
        <div id="header">
            <div class="caja-top">
               <img src="http://www.forosdelweb.com/customavatars/avatar184738_13.gif" />
                <h1>- KSESO? Jugando con CSS -</h1>
                <p>Layout de tres columnas, las laterales fijas y la central ocupando el resto de espacio. Si suprimes una de las laterales, su espacio es ocupado por la central.</p>
            </div>
        </div>
 
        <div id="contenedor">
            <div id="izquierda">
                    <h3>Izquierda 300px</h3>
                    <p class="codigo">Para ocultar esta columna o la derecha sólo hay que añadir a su css "display: none;"</p>
                    <p>Lorem ipsum dolor sit amet consectetuer velit semper elit volutpat mollis. Ligula Curabitur euismod at ut auctor porta enim vel neque consequat. Massa tempus libero dui ac elit platea tincidunt Vivamus Morbi ipsum. Dui mauris ac consectetuer id in congue sem Quisque dictumst metus. Hendrerit suscipit massa rhoncus risus Vestibulum vitae tortor cursus lorem Quisque. Sagittis Pellentesque interdum ipsum et ut dolor ipsum.</p>
          <p>Cursus eget nulla libero fringilla tellus In elit et at felis. Vitae id in et risus elit Sed enim Nunc ac adipiscing. Ut massa leo nec leo accumsan est justo enim Morbi lorem. Ante dolor ante tincidunt interdum Pellentesque consectetuer Curabitur In interdum nibh. Diam congue tellus enim magna adipiscing risus metus dignissim Nam justo. Laoreet platea ut.</p>
          <p>Felis ac mus Nam ante tortor Donec Aliquam nunc pulvinar pellentesque. Metus massa elit Fusce feugiat vel wisi enim neque Nulla est. Nulla Phasellus Lorem faucibus semper est vitae orci vel tristique nibh. Vitae tristique rhoncus felis Maecenas ligula dignissim justo ipsum orci orci. Velit id ante aliquam congue Nulla vitae gravida sapien elit sagittis. Mattis ac risus.</p>
                </div>
 
            <div id="derecha">
                    <h3>Derecha 300px</h3>
                    <p class="monospace">Puedes cambiar el valor de la anchura de las columnas laterales. <br/>
          Admiten valores en px, % o en em. Es indiferente.</p>
                    <p>Lorem ipsum dolor sit amet consectetuer velit semper elit volutpat mollis. Ligula Curabitur euismod at ut auctor porta enim vel neque consequat. Massa tempus libero dui ac elit platea tincidunt Vivamus Morbi ipsum. Dui mauris ac consectetuer id in congue sem Quisque dictumst metus. Hendrerit suscipit massa rhoncus risus Vestibulum vitae tortor cursus lorem Quisque. Sagittis Pellentesque interdum ipsum et ut dolor ipsum.</p>
          <p>Cursus eget nulla libero fringilla tellus In elit et at felis. Vitae id in et risus elit Sed enim Nunc ac adipiscing. Ut massa leo nec leo accumsan est justo enim Morbi lorem. Ante dolor ante tincidunt interdum Pellentesque consectetuer Curabitur In interdum nibh. Diam congue tellus enim magna adipiscing risus metus dignissim Nam justo. Laoreet platea ut.</p>
             </div>
 
            <div id="centro">
                    <h2>Centro variable</h2>
                    <p class="monospace">Esta caja ocupa el espacio restante que dejan las columnas laterales. Si se oculta una de ellas, se expande para rellenar el espacio liberado por ella.</p>
                    <p>Lorem ipsum dolor sit amet consectetuer velit semper elit volutpat mollis. Ligula Curabitur euismod at ut auctor porta enim vel neque consequat. Massa tempus libero dui ac elit platea tincidunt Vivamus Morbi ipsum. Dui mauris ac consectetuer id in congue sem Quisque dictumst metus. Hendrerit suscipit massa rhoncus risus Vestibulum vitae tortor cursus lorem Quisque. Sagittis Pellentesque interdum ipsum et ut dolor ipsum.</p>
          <p>Cursus eget nulla libero fringilla tellus In elit et at felis. Vitae id in et risus elit Sed enim Nunc ac adipiscing. Ut massa leo nec leo accumsan est justo enim Morbi lorem. Ante dolor ante tincidunt interdum Pellentesque consectetuer Curabitur In interdum nibh. Diam congue tellus enim magna adipiscing risus metus dignissim Nam justo. Laoreet platea ut.</p>
          <p>Felis ac mus Nam ante tortor Donec Aliquam nunc pulvinar pellentesque. Metus massa elit Fusce feugiat vel wisi enim neque Nulla est. Nulla Phasellus Lorem faucibus semper est vitae orci vel tristique nibh. Vitae tristique rhoncus felis Maecenas ligula dignissim justo ipsum orci orci. Velit id ante aliquam congue Nulla vitae gravida sapien elit sagittis. Mattis ac risus.</p>
                </div>
 
 
        </div>
 
        <div id="footer">
            <div class="content">
                <p>Este layout no es 100% elaboración propia. Siento no haber dejado constancia del original en el que está basado.</p>
                <p>Tanto la cabecera como el pie pueden ser suprimidos. No influyen en el comportamiento de la caja central.</p>
            </div>
        </div>
 
</body>
</html>

Los detalles está puestos en la página.

Un saludo

quebien · #7 (**permalink**) 12/09/2009, 10:27

Gracias por los mensajes! lo pude solucionar usando el codigo de kseso.

Yo ponia los tags asi:

<div id="izquierdo">Izquierda</div>
<div id="contenido">Contenido</div>
<div id="derecho">Derecha</div>

Que me parece lo más razonable. Es el orden que estarian en una tabla y es el orden que uno lo ve en la página.

Pero no funcionaba de esta manera. En el codigo de kseso es asi:

<div id="izquierdo">Izquierda</div>
<div id="derecho">Derecha</div>
<div id="contenido">Contenido</div>

De esta manera "magicamente" anda bien!!! Gracias! :)

Pero eso me hace pensar...
Es una de esas cosas que tiene el CSS que para mi no tiene sentido. El tener que armar el HTML "al revez" porque los CSS te obliga a hacerlo asi. ¿Izquierda, derecha, centro? ¿tiene sentido?

Entonces yo me pregunto, ¿porque todo el mundo dice que no hay que usar tablas y en cambio hay que usar divs y css? dicen que es para poder cambiar el diseño solo cambiando los css, ¿no? En este caso vemos claramente que no es asi.!

Ademas, si los estilos por algun problema de internet no cargan uno veria un desastre la pagina web! Si estuviera hecho con tablas al menos se veria ordenado pero sin estilos.

¿Alguien más se hizo este cuestionamiendo respecto a los DIVs+CSS?

Gracias nuevamente por la ayuda!
Saludos!

alexk · #8 (**permalink**) 12/09/2009, 14:53

quebien mmm en primera... segun mi "estupida" manera de entender... lo veo inecesario...
si tenemos un sitio estatico... (HTML) tansolo le sobreescribimos los estilos... en "dicha seccion" y ya...
ok ahora tenemos un sitio dinamico (php) ok... una variable que de igual manera cambie los estilos...
o con JS lo que sea... no lo veo necesario... vamos en los sitios que eh implementado... no le eh visto necesidad... tampoco con objetos dinamicos... en ajax y otras tecnologias.

ahora en cuando al "orden" en este caso... si es necesario llevarlo asi... que como veras la "columna" del centro no tiene un tamaño y mucho menos esta flotada... y ocupa el "espacio vacio" que hay entre las 2 columnas, (una o ninguna, columna) bien flotadas...

pero como te digo con css puedes ordenar cualquier objeto donde quieras.... (visualmente)... pero bueno hay de gustos... cada quien hace las cosas como puede... y como quiere... pero hay que seguir los "estandares" para no tener problemas chao y suerte...

kseso? buena esa... ya la conocia... pero si no tenemos cuidado con los elementos flotados se puede colapsar el "centro"... tambien no podemos jugar con los width, margin y padding, ya que el "width" de "centro" siempre es el 100%... aunque lo visual sea lo justo y adaptable. una solucion seria agregar a "centro" un margin de izquierda y derecha relativo al ancho de estos, es decir, margin:0 300px; y listo ya podremos flotar y jugar con margin y padding de los elementos hijo de esta columna.... pero ya no sera ajustable si una de las columnas falta... y regresamos con el problema

kseso? · #9 (**permalink**) 12/09/2009, 17:46

Quebien:
No hay magia. El flujo en el html y los estilos aplicados mediante css están diréctamente relacionado con las premisas iniciales (con el comportamiento inicial que dices tienen que tener las cajas centrales).
Primero tenemos una estructura de 3 columnas: vale, necesitamos flotar las cajas para que se posiciones en la misma línea. Podríamos haber puesto en el html: #izquierda - #centro - #derecha. Pero -->
La columna central debe crecer para ocupar el espacio libre en función de la ventana y de si existe o no alguna de las laterales: ok, ya no podemos darle un tamaño, porque si hiciésemos eso no variaría junto a la ventana. El no tener tamaño definido ocupa el espacio que le queda, lo que fuerza a colocarla en el flujo del html después de la caja derecha, si no lo hacemos así, ocurre lo que ya has descubierto ocupa toda la horizontal dejada libre por #izquierda y desplaza a #derecha a la línea siguiente (cuanto ella termine).
¿Por qué no se pueden utilizar márgenes en #centro? Porque como bien dices, Alexk, otra condición a cumplir era que ocupase el espacio que deje libre una de las laterales.
En este caso no hay peligro de colapso, pues si te fijas, hay definido un min-width de #contenedor (que contiene a las tres columnas centrales) fijado en 970px, con su equivalente para ie en el c.c.
Añadir que sería conveniente fijar un max-width para esa caja con vistas a las "super pantallas de cine en casa"

Quebien, si utilizas webdeveloper junto a FF puedes tú mismo desactivar el css y ver qué ocurre.

Pero un tirón de orejas deberíais haberme dado

Hay un mal uso de cierta etiqueta.
Os dejo unas horas a ver si alguien lo descubre.

Un saludo.

P.D.: perdón por el rOOOOOOOllOOOOOOO que acabo de soltar.

alexk · #10 (**permalink**) 12/09/2009, 19:23

tranki mientras mas letras mejor... si decimos "No, nose puede" o un "Si claro, intentalo" pues nos jod**mos todos es mejor decir los "porques"...

lo de tu etiqueta mal empleada psss no veo nada raro nose mucho de codigos jeje... solo me incomoda cierto "<br/>" pero nose...

kseso? · #11 (**permalink**) 14/09/2009, 07:16

El error que he advertido es el uso de <h3> sin que haya ningún <h2> en el documento.
Corregido.

alexk · #12 (**permalink**) 14/09/2009, 11:55

wow.... ni idea... jeje no sabia eso... gracias <br/>
chao

quebien · #13 (**permalink**) 17/09/2009, 17:58

Lo pude solucionar!

Se puede omitir cualquier columna en el codigo HTML y el contenido se ajusta a la perfeccion.

Acá dejo el codigo por si le sirve a alguien:

Código HTML:

<html>
<head>
<style>
#contenedor{
	width: 760px;
}
#encabezado{
	height: 80px;
	background: #CCCCCC;
}
#contenido{
	overflow: hidden; /*esta la clave!*/
}
#col_izq{
	float: left;
	width: 150px;
	height: 400px;
	background: #dddddd;
}
#col_der{
	float: right;
	width: 150px;
	height: 400px;
	background: #dddddd;
}
#pie{
	clear: both;
	background: #dddddd;
}
</style>
</head>
<body>
	<div id=contenedor>
		<div id=encabezado>encabezado</div>
		<div id=col_izq>col izq</div>
		<div id=col_der>col der</div>
		<div id=contenido>contenido</div>
		
		<div id=pie>pie</div>
	</div>
</body>
</html>