Niños y niñas, hoy vamos a ver como maquetar una conversación con HTML y CSS. Como no tengo ganas de escribir, vamos al grano .

dl, dt y dd

• dl se usa para definir una lista de definiciones o, en este caso, define el inicio y término de una conversación.
• dt define un ítem en una lista de definiciones… para nosotros define a la persona que habla.
• dd es la descripción del ítem y hace las veces del diálogo.

Manos al código!

Entonces, lo primero que tenemos que hacer es definir la conversación de este modo (en mi caso voy a asignar una clase a dl):

<dl class="conversation">
	<dt>Yo</dt>
	<dd>Este es mi diálogo... lindo, no?</dd>
	<dt>Vos</dt>
	<dd>Si, muy lindo... pero cuando me vas a enseñar el truco?!</dd>
	<dt>Yo</dt>
	<dd>Paráaaaaa, desesperate y no te muestro ni mierda.</dd>
</dl>

Así es como se ve éste código. Queda muy copado, no?

Ahora, veamos como darle un poco de onda! aunque siempre pueden dejarlo así, no sé… depende de ustedes y su gusto .

dl.conversation {
	font-family: "Segoe UI", Arial, sans-serif;
	background: #ccc; /* fondo de la conversacion */
	padding: 10px; /* espacio entre el borde del fondo y el texto */
	margin: 10px 0 20px 0; /* espaciar un poco arriba y abajo de la conversacion*/
	width: 700px;
}

dl.conversation dt {
	/*clear:left;*/
	float:left; /* hacemos que el texto "flote" a la izquierda */
	text-align:left;
	line-height:1.8em;
	font-weight:bold;
}

dl.conversation dd {
	margin:0;
	padding:0 0 0 70px; /* insertamos espacio a la izquierda entre la persona y el dialogo */
	vertical-align:top;
	line-height:1.8em;
}

dl dd.emphasis {
	font-style:italic; /* si queremos que un dialogo este en cursiva (p.e.) le asignamos esta clase*/
}

Pueden ver el ejemplo terminado, les doy permiso .

Por supuesto, pueden cambiar las propiedades a su gusto y/o necesidad… pero dudo que tengan mejor gusto que yo (?) .

Esto es todo, les dije que no tenía ganas de escribir… se la bancan eh! .