entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Usando filas de una tabla para hacer bordes

Estoy usando esta tabla:

<table class="chat-message-message-target" style="border: none;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr class="chat-message-top-message-target">
<td class="col-1-top-left-message-target"></td>
<td class="col-1-top-center-message-target"></td>
<td class="col-1-top-right-message-target"></td>
</tr>
<tr class="chat-message-middle-message-target">
<td class="col-1-middle-left-message-target"></td>
<td class="col-1-middle-center-message-target">
<div class="chat-user message-target"></div>
<div class="chat-mensaje">¿QUÉ PUEDO HACER AQUÍ?</div></td>
<td class="col-1-middle-right-message-target"></td>
</tr>
<tr class="chat-message-down-message-target">
<td class="col-1-down-left-message-target"></td>
<td class="col-1-down-center-message-target"></td>
<td class="col-1-down-right-message-target"></td>
</tr>
</tbody>
</table>

Quiero ahora hacer con css que tenga unos bordes como comics, con unas imágenes ya creadas.

.col-1-middle-center-message-target {
    background: #8ED546;
    max-width: 400px;
    padding: 0;
}

.col-1-top-left-message-target {
    background: no-repeat url("./img/vb1.png") 0 3px;
    width: 5px;
}

.col-1-top-center-message-target {
    background: repeat-x url("./img/vbg-sup.png") 0 3px;
}

.col-1-top-right-message-target {
    background: no-repeat url("./img/vb3.png") 0 3px;
    width: 5px;
}

.col-1-middle-left-message-target {
    background: repeat-y url("./img/vbg-left.png") 0 0;
}

.col-1-middle-right-message-target {
    background: repeat-y url("./img/vbg-dch.png") 0 0;
}

.col-1-down-left-message-target {
    background: no-repeat url("./img/vb2.png") 0 -3px;
    width: 5px;
}

.col-1-down-center-message-target {
    background: repeat-x url("./img/vbg-inferior.png") 0 -3px;
}

.col-1-down-right-message-target {
    background: no-repeat url("./img/vb4.png") 0 -3px;
    width: 5px;
}

Pero no consigo que se me vea ningun borde (imagen). ¿Qué estoy haciendo mal?

0voto

Peter comentado

¿Lo tienes en alguna URL para verlo?

0voto

danielreales7 comentado

No, he intentado ponerlo en http://jsfiddle.net/ pero no sé como subir las imágenes.

0voto

Peter comentado

Tendrías que subirlas a tu servidor y poner las URLs de las mismas par que funcione ahí.

0voto

danielreales7 comentado

Un segundo, lo subo y te lo paso.

0voto

danielreales7 comentado

1 Respuesta

2votos

carlossevi Puntos63580

Los estilos se están cargando correctamente pero las filas y columnas no se están mostrando porque no tienen contenido. He probado a escribir dentro de tu HTML en las celdas que reservas a los bordes y tus imagenes aparecen.

Se debería solucionar con atributos del tipo min-width y min-height para esas filas y columnas, pero estos atributos no funcionan con elementos de tablas.

Tienes dos opciones:

  • Intentar reproducir el mismo funcionamiento con elementos div.
  • Insertar las imagenes como imágenes normales en lugar de imágenes de fondo.

0voto

danielreales7 comentado

Perfecto, entonces pongo las imágenes automáticamente dentro de las filas, pero por ejemplo, la imagen de la línea superior, queda un poco más abajo de la curva, como puedo arreglar eso?

Muchas gracias!

0voto

Leonardo-Tadei comentado

Una solución simple para los TD sin contenido es ponerles adentro un  

Igual, lo ideal sería pasar la diagramación de DIV, ya que el contenido de la tabla no se corresponde con lo que semánticamente se espera de ella: datos tabulados.

Saludos!

0voto

carlossevi comentado

Como dice @Leonardo-Tadei quizá sea mejor pasarlo a div, pero respondiendo a tu pregunta, te sobran los 3px de desplazamiento de col-1-top-center-message-target, quedaría así:

.col-1-top-center-message-target {
    background: url('./img/vbg-sup.png') repeat-x scroll 0px 0px transparent;
}

Ten en cuenta que en ese caso la imagen dentro de la tabla no tiene sentido ya que tiene 1px de ancho y no hace "repeat". En ese caso el background sí que funciona ya que el alto de la fila ya está fijado por la primera celda.

0voto

danielreales7 comentado

Entonces que dices de pasar todos los table, tr y td a div?

0voto

carlossevi comentado

Sería más correcto semánticamente como dice leonardo ya que el table está pensado para datos tabulados y no es precisamente lo que estás mostrando.

0voto

danielreales7 comentado

Vale, muchísimas gracias!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta