Formattare i post di un blog con i CSS è un compito che richiede una fase di preparazione in un ambiente statico. Occorre infatti creare un template delle nostre pagine e applicare gli stili CSS per vedere l'effetto finale e prevenire potenziali problemi. In questo articolo vedremo una semplice implementazione di un layout per blog in cui per ciascun post viene creata una colonna laterale per i metadati e i social bookmark oltre ai contenuti effettivi del post.
La nostra struttura HTML di base è la seguente:
<div class="post">
<h2>Titolo</h2>
<div class="contents">
<!--contenuti del post-->
</div>
<ul class="info">
<!-- metadati e social bookmark -->
</ul>
</div>
Il titolo del post dovrà avere un bordo inferiore che abbraccia sia i metadati che i contenuti del post. Inoltre il testo dovrà essere allineato a sinistra con il testo dei contenuti del post:
body {
margin: 2em;
padding: 0;
font: 100.01%/1.5 Helvetica, Arial, sans-serif;
}
.post {
width: 45%;
margin: 1em auto;
font-size: 80%;
}
.post:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.post h2 {
line-height: normal;
margin: 0;
padding-bottom: 2px;
border-bottom: 1px solid #ccc;
color: #323232;
padding-left: 25%;
font-size: 1.4em;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.contents {
float: right;
width: 75%;
margin: 0;
padding-top: 1em;
}
.contents p {
margin: 0 0 1em 0;
}
.info {
float: left;
margin: 1em 0 0 0;
width: 25%;
padding: 0;
list-style: none;
}
.info li.social {
height: 32px;
margin-top: 0.5em;
}
.twitter, .facebook {
display: block;
width: 32px;
height: 32px;
background-repeat: no-repeat;
text-indent: -1000em;
margin-right: 5px;
float: left;
}
.twitter {
background-image: url(twitter.png);
}
.facebook {
background-image: url(facebook.png);
}
L'intero layout si regge su misure fluide espresse in percentuale, compreso il padding sinistro del titolo che serve ad allineare il testo dell'elemento h2 con i contenuti del post. Per creare le due colonne abbiamo utilizzato il floating. I social bookmark sono stati creati utilizzando due immagini di sfondo su altrettanti link posti nella lista dei metadati.
Potete visionare l'esempio finale in questa pagina.