Float center con pseudo elementi

Tra grafica e codice Nel web nulla è impossibile da realizzare, spero che in molti condividiate la mia idea, soprattutto […]
Float center con pseudo elementi

Tra grafica e codice

Nel web nulla è impossibile da realizzare, spero che in molti condividiate la mia idea, soprattutto quando si tratta di riportare un layout grafico nel suo corrispondente codice html e css. L’abilità di un web designer sta anche in questo, trovare la miglior soluzione strutturale ad una specifica situazione grafica.

Leggendo tra i vari feed rss mi è saltato all’occhio questo articolo di csstrick che parla di un certo float center fittizio con pseudo-elementi. Dall’immagine in basso noterete una situazione grafica abbastanza rara da ritrovarsi e nemmeno tanto semplice da realizzare.

layout

Come realizzarlo?

Il concetto si basa sulla proprietà content introdotta con l’articolo clearfix, prima di proseguire con lo stile css impostiamo il codice html della pagina: un contenitore (layout), un’immagine (image) e due paragrafi (left e right).

<div id="layout">
    <img id="image" src="http://www.laboratoriocss.it/blog/wp-content/uploads/2011/05/float_center.jpg" alt="you are the css to my html">
    <p id="left">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor.</p>
    <p id="right">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor.</p>
</div>

Il CSS di base

Passiamo ora al codice css, la prima cosa da fare è impostare una larghezza al div contenitore “layout” e associargli la proprietà positon:relative che lo afferma come riferimento per lo spostamento dell’immagine al suo interno, dopodichè la proprietà margin per centrarlo e overflow come metodo per l’annullamento del float :

#layout{
    width:60%;
    position:relative;
    margin:80px auto;
    overflow:hidden;
}

Ora dobbiamo intervenire sui paragrafi “left” e “right”, gli diamo una larghezza fissa e li flottiamo rispettivamente con float:left e float:right:

#left, #right{
    width:47%;
    text-align:justify;
}

#left{
    float:left;
}

#right{
    float:right;
}

Generiamo il contenuto

Eccoci giunti alla parte più interessante, sfruttando la proprietà content e gli pseudo-elementi generiamo un contenuto vuoto prima di ogni paragrafo e ne specifichiamo larghezza ed altezza, identiche per entrambi. Non dimentichiamo quest’ultimo passaggio fondamentale: ogni contenuto vuoto generato nei paragrafi deve flottare a destra per il paragrafo left e a sinistra per quello “right“.

#left:before, #right:before{
    content:"";
    width:125px;
    height:270px;
}

#left:before{
    float:right;
}

#right:before{
    float:left;
}

Così facendo creiamo una sorta di alloggio per l’immagine che andremo a posizionare:

layout2

Nello step finale, come appena detto sopra,  non ci resta che posizionare l’immagine all’interno della gabbia creata spostandola con la modalità position:absolute e infine decorarla con bordi e padding:

#image{
    position:absolute;
    top:5px;
    left:35%;
    border:1px solid #ccc;
    padding:3px;
}

Attenzione! come al solito il tutto è incompatibile con internet explorer 6  :(

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github