Link con immagine a sinistra e di fianco testo su 2 righe

[lucavizzi]

Sarebbe bastato un overflow:hidden sul tag "a" per rendere l'intera area cliccabile
[parentesi]
il link aveva altezza pari a zero, in quanto gli elementi al suo interno erano floattati (pull-left) e questo non consentiva al link di "espandersi" verticalmente.
Per far espandere un elemento con "figli" floattati, bisogna applicare un overflow:hidden all'elemento "padre"
[/parentesi]
ma un elemento block-level (div) all'interno di un tag "a" non è semanticamente corretto...

[ResianTaxidrive]

ma un elemento block-level (div) all'interno di un tag "a" non è semanticamente corretto...

Però si può aggirare la questione mettendo uno span e dandogli un display:block

[lucavizzi]

Però si può aggirare la questione mettendo uno span e dandogli un display:block

Oltre alla questione del block-level, un buon layout table-less è ricco di contenuti e povero di formattazioni.


C'è una bella differenza tra:

        <a href="carrello" >
            <div class="pull-left">
                <img src='static/images/carrello.png' alt='cart image'/>
            </div>
            <div class="pull-left" style="margin-left: 5px">
                <div style="font-weight: bold;font-size: 1em;color:black;line-height: 16px">Carrello</div>
                <div style="font-size: 0.7em;color:black;line-height: 14px">Carrello vuoto</div>
            </div>
        </a>

e

<a href="carrello" class="cart">
    <img src="static/images/carrello.png" alt="icona carrello">
    <span>
        <strong>Carrello</strong>
        Carrello vuoto
    </span>
</a>

anche rimuovendo gli stili in linea.