Salta al contenuto

Giochiamo con gli UL

Da pochi giorni, i campi e i valori relativi agli episodi sono tutti inseriti in parametri singoli del Template:BoxEpisodio : questo è semanticamente più corretto rispetto alla versione originale dove tutto era elencato in elenchi puntati.

MediaWiki però non ammette campi multipli nello stesso template, di conseguenza si verificava un problema nel caso, per esempio, di due sceneggiatori nello stesso episodio.
La soluzione è stata usare un elenco puntato all’interno dello stesso campo: in questa maniera con un campo solo è possibile visualizzare più di un dato in maniera strutturata.

L’estetica però lasciva a desiderare, guardate questo esempio tratto da Shadows of P’Jem

Avendo però usato un [cci lang=”css”]UL[/cci] è stato possibile facilmente creare una presentazione più gradevole tramite CSS.
Ecco come abbiamo fatto.

Per prima cosa tutto il Template:BoxEpisodio è stato racchiuso in un div con uno specifico [cci lang=”css”]ID[/cci], dopodiché tutti i campi sono stati inseriti in un ulteriore [cci lang=”css”]DIV[/cci] con una classe specifica.
Il relativo CSS è stato modificato così:

[cc lang=”css”]

.campi ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}

.campi li{
display: inline;
}

.campi li + li:before {
content: ” · “;
font-weight: bold;
}

[/cc]

Le proprietà [cci lang=”css”]list-style-type: none;[/cci] e [cci lang=”css”]display: inline;[/cci] fanno sì che le voci dell’elenco siano tutte sulla stessa riga e senza segno grafico.
Invece [cci lang=”css”]content: ” · “;[/cci] aggiunge un punto di separazione tra le voci dell’elenco.
Il risultato è un più gradevole

Sii il primo a commentare

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

%d blogger hanno fatto clic su Mi Piace per questo: