Diseño Web /

Imposible de hacer con CSS?

Participa en el tema Imposible de hacer con CSS? en el foro Diseño Web.
Hola a todos! Estoy queriendo hacer esto hace mas de un dia. Quiero hacer un ...

Buscar en este tema:
 
  •  
    #1 Imposible de hacer con CSS?
    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!
    +
     
    0
    Me gusta
     
    http://www.psicofxp.com/forums/diseno-web.210/960139-imposible-de-hacer-con-css.html
    | Más
  • #2 Re: Imposible de hacer con CSS?

    Como queres hacer que se oculten las columnas? Tenes algo serverside? Por javascript?

    Como definís si una columna es visible o no? Si es una aplicacion web, no te conviene directamente no generar el HTML para esa columna?

    Saludos,
    Me gusta este mensaje
  • #3 Re: Imposible de hacer con CSS?

    claro, con php, si no quiero la columna no la imprimo. El problema es los CSS.
    Si fuera con tablas directamente no imprimo la celda, pero con CSS no se como hacer...
    Me gusta este mensaje
  • #4 Re: Imposible de hacer con CSS?

    Osea que vos queres ocultar una columna directamente con CSS y nada más? ni siqueira javascript?

    Si podes usar javascript, ponele a las columna que siempre van a estar width auto o un min-width, y dps ya sea a traves de getElementsByName (tendrias que setearle un name a las celdas de las columnas) o alguna otra funcion setearles el visibility: collapse a todas las celdas de la columna que queres ocultar.

    Saludos,
    Me gusta este mensaje
  • #5 Re: Imposible de hacer con CSS?

    Lo recomendable al empezar con CSS es usar un Framework, yo use varios, pero ninguno mejor que Bluetrip CSS Framework, que usa 960px de ancho y 24 columnas de 40px cada una con un intercolumnado de 10px (mas info en Blueprint CSS, en el cuerpo principal solo cuidas que los spans sumen 24, entonces la idea va asi:


    <div class="container">
    <div class="first column span-6 gris">
    columna izquierda
    </div>

    <div class="column span-12 gris">
    Centro
    </div>

    <div class="last column span-6 gris">
    columna derecha
    </div>

    <div class="clear"></div>
    </div>



    Si estan las 2 columnas (izq y derecha), la centro va con span-12, si alguna de ellas falta el centro va con span-18 y si el centro va solo sin las columnas va con span-24, siempre haciendo que la suma de las columnas de 24, todo eso lo podes hacer con php mediante un:

    <div class="column span-<?php echo $numCentro ?>">
    Contenido
    </div>


    el clear al final es solo para que ningun otro elemento se coloque al lado como columna adicional, no es necesario pero ayuda.
    Te dejo el demo descargable, el archivo default.css es donde van tus estilos, los demas son propios de Framework CSS

    Saludos
    Archivos adjuntos
    Tipo de archivo: rar 3cols.rar (4.6 KB, 0 vistas)
    Me gusta este mensaje
  • #6 Re: Imposible de hacer con CSS?

    buenisimo lo del framework css, no lo conocia! Lo voy a mirar

    gracias!
    Me gusta este mensaje
  • #7 Re: Imposible de hacer con CSS?

    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> 
    Me gusta este mensaje


Estadísticas del tema
  • 6 RESPUESTAS
  • 247 VISTAS
  • 3 USUARIOS RESPONDIERON
 
Ir arriba
Contacto | Acerca de | Ayuda | Términos Legales | privacidad | Pautas de convivencia | Mapa de los foros | TrabajÁ con nosotros
©2008 Psicofxp.com S.A. - Todos los derechos reservados
Certifica IAB