[Difficoltà in Html] Pagina Wordpress, creare riquadri in stile Html.it

[Wuston]

Salve,

Ho installato Wordpress in locale sul computer per studiarne tutte le caratteristiche, in modo da averne un confronto personale con Joomla per valutare "in quale caso è meglio utilizzare uno o l'altro" visto che nelle recensioni/manuali/feedback nessuno si sbilancia mai cosi tanto sulle scelte e sulle effettive motivazioni di queste ultime.

Trovo interessantissimo il sistema delle pagine super personalizzabili. Ci si può fare praticamente di tutto: form per farti contattare direttamente, stilare una lista o una classifica fissa.

Robetta statica spesso, ma forse lavorandoci su si potrebbe anche fare qualcosa di dinamico.

Chiusa la premessa, volevo riprodurre in parte quei riquadri che utilizza Html.it nelle Guide, magari farli più rettangolari e tondeggianti, inserire un iconcina al fianco e ghiri-gori vari!

Ho scritto una bozza di Html:

<div class="corsoGiapponese">

<h2 class="titoloCapitolo">Introduzione</h2>

<ol>

<li>
<dl>
<dt class="titoloRiquadro">1. <a id="lezione 1" href="bla bla bla">Alfabeto</a></dt>
<dd>bla bla bla bla bla bla bla bla bla</dd>
</dl>
</li>

<li>
<dl>
<dt class="titoloRiquadro">2. <a id="lezione 2" href="bla bla bla">Alfabeto</a></dt>
<dd>bla bla bla bla bla bla bla bla bla</dd>
</dl>
</li>

</ol>



<h2 class="titoloCapitolo">Tutto il resto</h2>

<ol>

<li>
<dl>
<dt class="titoloRiquadro">3. <a id="lezione 3" href="bla bla bla">Alfabeto</a></dt>
<dd>bla bla bla bla bla bla bla bla bla</dd>
</dl>
</li>

<li>
<dl>
<dt class="titoloRiquadro">4. <a id="lezione 4" href="bla bla bla">Alfabeto</a></dt>
<dd>bla bla bla bla bla bla bla bla bla</dd>
</dl>
</li>

<li>
<dl>
<dt class="titoloRiquadro">5. <a id="lezione 5" href="bla bla bla">Alfabeto</a></dt>
<dd>bla bla bla bla bla bla bla bla bla</dd>
</dl>
</li>

<li>
<dl>
<dt class="titoloRiquadro">6. <a id="lezione 6" href="bla bla bla">Alfabeto</a></dt>
<dd>bla bla bla bla bla bla bla bla bla</dd>
</dl>
</li>


</ol>
</div>

e ho elaborato un codice CSS base:

.corsoGiapponese ol, ul, dl, dd, nav ul, nav ol {
    margin: 0;
    padding: 0;
}

.corsoGiapponese ol {
    float: left;
    list-style:none;
    list-style-image: none;
    list-style-type: none;
    margin: 0;  
    overflow:auto;  
}

.corsoGiapponese li {
    width: 180px;
    height: 180px;
    background-color: silver;
    border: 1px groove #333;
    float:left;
    padding: 10px;
    margin-right: 20px;
}

.corsoGiapponese li a {
    color: black;        
}

.corsoGiapponese li a:hover {
    color: silver;        
}

Ma ho un problema di visualizzazione, che non riesco a risolvere.. Sono una frana con Html e CSS! Potete indirizzarmi e aiutarmi a risolvere questo difetto del codice che ahimè, è fatto da schifo :/

Grazie per la pazienza e per il tempo dedicato alla lettura, una buona giornata!


EDIT:
Immagine del problema di visualizzazione in allegato!

Non so come, i riquadri finito lo spazio vanno a capo magicamente, non per merito mio! Ma quando faccio un nuovo titolo Capitolo dovrebbe metterlo con una certa spaziatura e ricominciare i riquadri. Invece lui mi mette "Tutto il Resto" come fosse un riquadro sopra ://

Immagine.jpg