CSS: formattare una chat

Per formattare una chat con i CSS occorre operare delle scelte precise a livello di semantica degli elementi. Una chat è un dialogo tra due o più persone in cui a ciascuna persona è associato un messaggio. Ciò significa che nella scelta degli elementi si dovranno privilegiare quegli elementi che hanno una relazione semantica tra di loro di tipo associativo. Scelte ideali sono le tabelle e le liste di definizione. Al contrario, le liste ordinate e non ordinate e le citazioni di blocco (blockquote) non mostrano questa relazione intrinseca. Vediamo i dettagli dell'esempio.

Scegliamo questa struttura HTML:


<dl id="chat">
	
	<dt class="trinity">Trinity</dt>
	<dd>Ciao Neo!</dd>
	
	<dt class="neo">Neo</dt>
	
	<dd>Ciao Trinity!</dd>
	
	<dt class="trinity">Trinity</dt>
	<dd>Come stai?</dd>
	
	<dt class="neo">Neo</dt>
	
	<dd>Bene.</dd>
	
</dl>

Useremo una classe diversa per assegnare una diversa icona (avatar) agli utenti. Generare questa classe con un linguaggio lato-server significa semplicemente usare il nickname dell'utente, che ovviamente sarà associato ad un avatar. Nel caso in cui l'utente non abbia un suo avatar, lo si lascerà scegliere tra una serie di avatar predefiniti, facendo in modo che a ciascun avatar sia associata una classe CSS.

Faremo in modo che l'avatar e il testo vengano visualizzati sulla stessa riga usando il floating. Useremo la larghezza di ciascun float e la dichiarazione clear: left per fare in modo che ci siano solo due elementi per riga:


	
body {
	
	margin: 0 auto;
	width: 50%;
	padding: 2em 0;
	background: gray;
	color: #333;
	font: 62.5% Arial, Helvetica, sans-serif;
	
}

#chat {
	
	margin: 0;
	padding: 1em;
	background: #fff;
	border: 2px solid silver;
	-moz-border-radius: 6px;
	border-radius: 6px;
	font-size: 1.3em;
	overflow: hidden;
	height: 100%;
}

#chat dt {
	
	float: left;
	width: 110px;
	height: 110px;
	margin-right: 2em;
	clear: left;
	padding-bottom: 0.5em;
	text-indent: -1000em;
	background-repeat: no-repeat;
	
}

#chat .neo {
	background-image: url(2.jpg);
}

#chat .trinity {
	background-image: url(1.jpg);
}


#chat dd {
	
	float: left;
	width: 70%;
	background: #eee;
	margin: 0;
	padding: 0.5em;
	border-radius: 6px;
}

Abbiamo fatto in modo che il testo dell'elemento dt venga sostituito dall'immagine di sfondo e reso invisibile tramite l'indentazione negativa. Potete visionare l'esempio finale in questa pagina.

Torna su