Diseño CSS para caja de comentarios

Name: Diseño CSS para caja de comentarios
Brand: Jose Aguilar
SKU: joseaguilarblog-665
Availability: InStock
Rating: 4 (30 reviews)

Hoy en día, la interacción Web con los usuarios está presente en prácticamente todas las Webs ya sea para participar en votaciones, enviar comentarios, dar opiniones, entre otras opciones.

En aplicaciones muy de moda tales como foros, redes sociales o comunidades, la libertad de expresión de los usuarios de dichas comunidades es esencial.

En este artículo vamos a mostrar un diseño algo antiguo pero eficaz para visualizar en pantalla una caja de comentarios que se podría utilizar en cualquier sistema de comentarios ya que personalizarlo es muy sencillo si estás familiarizado con las reglas CSS.

En la hoja de estilos CSS que estés utilizando en tu página web, agrega las siguientes reglas:

Source code

.titular-comentario {
    margin: 0.3em;
    padding-bottom: 4px;
    padding-left: 0.2em;
}
 
.titular-comentario {
    height: 60px;
    width: 500px;
    overflow: hidden;
    padding: 5px 5px 0 !important;
}
 
.esquinas {
    -moz-border-radius: 4px 4px 4px 4px;
}
 
.contenido-comentario {
    background: url("images/fondotitulo.png") repeat-x scroll 50% 50% #222222;
    border: 1px solid #191919;
    color: #EEEEEE;
    font-weight: bold;
}
 
.fondo_mensaje {
	background-color: #eeeeee;
    height: 100%;
    width: 520px;
    overflow: hidden;
    padding: 2px 2px 0 !important;
    margin-left: 100px;
}
 
.texto_mensaje {
	font-family: "Lucida Sans Unicode";
	font-size: 12px;
	text-align: justify;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}

Son reglas que nos sirven para darle el aspecto siguiente:

Diseño caja de comentarios con table

El código HTML para la maquetación es el siguiente:

Source code

<div class="fondo_mensaje esquinas">
	<div class="titular-comentario contenido-comentario esquinas">
		<table cellpadding="0" cellspacing=2">
			<tr>
				<td><img src="meme.jpg" width="40px" height="50px" border="0"></td>
				<td width="10px"></td>
				<td><b>Nombre Usuario</b> dice (26-02-2011 10:05:37): </td>
			</tr>
		</table>
	</div>
	<div class="texto_mensaje">Contenido del mensaje.</div>
</div>

Las imágenes que se usan se pueden descargar del código fuente.

Debes tener en cuenta que este post es una publicación de hace más de 10 años. Actualmente, CSS ha avanzado bastante para beneficio de los programadores y ahora hacer esta caja de comentarios es muy simple con Flexbox o CSS Grid evitando así el uso de table ya desfasado para la maquetación web.

Ver demo Descargar

Esta entrada ha sido editada el día 4 de Octubre del 2023 para ampliar la información.