2009-08-07 20 views
9

Necesito ayuda con mi diseño. Quiero mostrar tres de igual altura cajas junto a la otra, al igual que este arte ASCI:Esquinas redondeadas en un diseño de celda de tabla css?

+------+ +------+ +------+ 
|  | |  | |  | 
|  | |  | |  | 
|  | |  | |  | 
+------+ +------+ +------+ 

También tengo an example online (with all the CSS).

El contenido de los cuadros varía en altura. Lo difícil es que estos cuadros también deben tener esquinas redondeadas. Para eso estoy usando la técnica de "puertas correderas" . Básicamente, el margen de beneficio de un cuadro es algo así:

<div class="box"> 
    <div class="box-header"> 
    <h4>header</h4> 
    </div> 
    <div class="box-body"> 
    <p>Contents</p> 
    </div> 
</div> 

Cuatro elementos de bloque por lo que pueden hacer esquinas redondeadas y bordes con imágenes de fondo. La esquina superior derecha va en la h4. La esquina superior izquierda va en el encabezado de la caja. La esquina inferior derecha va en la casilla div exterior y la esquina inferior izquierda va en el cuerpo de la caja.

Estoy usando la pantalla CSS: table-cell para hacer que los tres cuadros tengan la misma altura , pero aquí comienza mi problema. Todos los elementos de caja son ahora de de igual altura, pero los elementos de caja no son de igual altura porque el contenido no es de la misma altura. Resultado: las esquinas inferiores a la derecha no están en la posición correcta. Ver también el enlace que publiqué.

¿Cómo puedo solucionar eso? Todas las divisiones de caja son iguales en altura ahora. Me gustaría como box-body para ampliar para usar toda la altura disponible, incluso cuando el contenido es corto. Probé la altura: 100% pero eso no funciona. ¿Cómo puedo hacer que funcione?

¿O existe una forma alternativa de lograr lo que quiero? No puedo usar algo así como faux-columns porque defino el ancho de los cuadros en ems. Eso significa que no puedo darle a la caja div una sola imagen de fondo que proporciona en ambas esquinas inferiores.

Google está siendo absolutamente inútil aquí. Cualquier consulta que implique "esquinas" y "tabla" simplemente me da un montón de enlaces a los tutoriales de 1990 que usan una tabla de 3x3 para esquinas redondeadas.

En cuanto a la compatibilidad del navegador, sería bueno si IE7/8 puede manejarlo también, pero no es necesario (puedo reemplazarlo con flotadores de altura desigual en ese caso). Para el sitio web que estoy desarrollando, estimo que la cuota de mercado de IE es del 20% o menos. No me importa IE6 en absoluto.

¡Todos los consejos son muy apreciados!

+6

+1 por no preocuparse por IE6 – Jason

Respuesta

4

Según mi comentario anterior, he decidido usar CSS3 border-radius para resolver mi problema. Usando las declaraciones a continuación, mostrará bordes redondeados en cada navegador excepto Internet Explorer. No me importa mucho IE, así que los usuarios de IE simplemente pueden mirar las esquinas.

.box { 
    display: table-cell; 
    width: 16em; 
    padding: 1em 2em; 
    background: #f6c75d url(gradient.png) repeat-x scroll top left; 
    border: 3px solid #de9542; 
    border-radius: 25px; /* Standard */ 
    -o-border-radius: 25px; /* Opera 10.x */ 
    -moz-border-radius: 25px; /* Mozilla/Firefox */ 
    -icab-border-radius: 25px; /* iCab */ 
    -khtml-border-radius: 25px; /* KHTML/Konqueror */ 
    -webkit-border-radius: 25px; /* Webkit/Safari/Chrome/etcetera */ 
} 

En lo anterior, gradient.png es una pequeña imagen tileable que proporciona el gradiente en la parte superior de una caja.

Funciona perfectamente. También simplifica el marcado y el CSS, y reduce la cantidad y el tamaño de las imágenes de fondo que necesito.

0

Si no le importa agregar un poco de marcado adicional, puede lograr este efecto. Por supuesto, no defiendo realmente la hinchazón de código, pero si debe hacerlo, puede doblar la caja y tener las esquinas inferiores en uno de los envoltorios. Establezca la altura de su envoltorio interior con display: table-cell y debe ser dorado.

+0

No puedo obtener su sugerencia para trabajar. Cuando configuro la visualización de la celda de tabla en la envoltura interna, la envoltura externa se rompe. ¿Podría darnos un ejemplo, tal vez? –

+0

¿Qué tan importante es que su ancho esté en em? si pudieras establecer un ancho fijo, esto sería simple – Jason

+0

Sé que sería simple usar ancho fijo. –

0

¿Se puede utilizar la propiedad min-height en el elemento del cuerpo de caja?

+0

Eso no funciona desafortunadamente. No puedo configurarlo en la caja porque no sé cuánto tiempo serán. Además, es el cuerpo de la caja y no la caja lo que necesito estirar. También he intentado configurar min-height: 100% en box-body, pero eso no tiene ningún efecto. Supongo que la altura mínima no funciona bien con la visualización de tabla CSS. –

-1

intente configurar el cuerpo de la caja a pantalla: table-cell? eso podría forzarlo a hacer que los tres cuerpos de caja tengan la misma altura y forzar los bordes redondeados hacia el fondo también.

1

Hay solución, que trabaja en Safari, Firefox y Chrome. No funciona en IE ni en Opera (por lo que lo he probado, ni siquiera en 10.0b). Utiliza la propiedad CSS3 border-image. Ya que aún se Característica incluida en el proyecto, no la recomendación de trabajo, los navegadores implementan sólo con sus prefijos específicos:

#boxes { 
    display: table; 
    border-spacing: 1em; 
} 
.box-row { display: table-row; } 
.box { 
    width: 16em; 
    display: table-cell; 
    padding-right: 2em; 
    border-image: url(box.png) 6 8 6 8 stretch; // this line actually does not influence rendering in any engine 
    -o-border-image: url(box.png) 6 8 6 8 stretch; 
    -khtml-border-image: url(box.png) 6 8 6 8 stretch; 
    -icab-border-image: url(box.png) 6 8 6 8 stretch; 
    -webkit-border-image: url(box.png) 6 8 6 8 stretch; 
} 

Usando sería realmente necesario que vuelva a crear la imagen de fondo, pero es un detalle.

+3

Gracias. Eso funcionará. Pero si voy a usar las propiedades de CSS3, probablemente usaré border-radius (con una imagen de fondo de degradado). Al menos eso funcionará también en Opera y se degrada relativamente bien en IE que obtendría una caja cuadrada. –

-2

Espero que esto te llegue (soy nuevo en estas cosas para publicar en el foro) Como diseñador gráfico, la "cuadratura" de HTML es horrible. Sé que esto no es realmente una solución para HTML o CSS, ya que es una solución gráfica simple. Pero funciona muy bien, y como es una imagen gif simple, no falla en todos los navegadores. El inconveniente es que toma tiempo debido a la prueba y error y si cambia la cantidad de contenido en su celda, es posible que tenga que cambiar la imagen utilizada como un fondo de rectángulo redondeado.

Así pues, con esta advertencia ...

Calcular el tamaño de la celda de la tabla que necesita añadiendo el texto y la medición de la célula, o mirar el tamaño de la imagen si es sólo una imagen, en píxeles.

En un programa de gráficos, cree un rectángulo de cualquier color (digamos negro si tiene texto blanco en el sitio web, etc.) Este rectángulo es la capa inferior.

Crea un rectángulo redondeado, por ejemplo, con un grosor de línea de 1 píxel y color de relleno NO (el color de línea puede ser del color que elijas, como el grosor ...) que está ARRIBA del rectángulo relleno básico. Lo que tendrá entonces es un cuadrado de color sólido con un contorno delgado con esquinas redondeadas.

Hago que el rectángulo REDONDO redondeado sea 10 píxeles más pequeño (x-y) y luego puedo colocarlo equilátero sobre el cuadrado.

Exporte esta imagen, por ejemplo, como GIF o JPEG.

En su sitio web, en la página, haga clic en la celda de la tabla en la que desea que esté el rectángulo redondeado y configúrela como la imagen de ANTECEDENTES de esa celda. Asegúrate de que la celda tenga el mismo tamaño que la imagen o no se ajustará o azulejo ... Entonces, como es un elemento de ANTECEDENTES de una celda, cualquier contenido, texto o imagen que pongas en la celda aparecerá encima del Imagen de fondo que hace que parezca que tiene una celda de tabla REDONDEADA.

Puede hacer que la imagen de fondo sea transparente exportando la imagen original como un gif con transparencia (puede usar PNG con transparencia Alhpa que tiene más colores, pero no estoy tan seguro del soporte completo del navegador para PNG imagen en páginas web todavía) Simplemente seleccione el color de fondo sólido básico, por ejemplo, Negro, y añádalo como un color transparente.

Puede desear la transparencia si tiene una imagen de fondo con CSS para toda la página, pero, tenga cuidado, dependiendo de la imagen en uso, puede dificultar la lectura del texto.

Espero que esto sea de ayuda.