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

[Alhazred]

Sto provando a realizzare 2 pulsanti da mettere su un sito, il risultato finale dovrebbe essere il seguente



Riesco a riprodurre questo layout, il problema è che i link funizonano solo se passo sulle scritte o sulle immagini, vorrei invece che sia possibile cliccare ovunque all'interno dell'area che definisce i link.

Il codice che ho usato è il seguente (uso Bootstrap 3), mostro solo quello per il carrello, l'altro è equivalente

<ul class="nav navbar-nav">
    <li>
        <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>
    </li>
</ul>

Ho capito che ad impedirmi di avere tutta l'area cliccabile sono i div dentro il tag <a>, infatti rimuovendoli posso cliccare ovunque, non necessariamente sulle scritte o sull'immagine.
Togliendo quei div però mi perdo il layout voluto e non saprei come ottenerlo.

Come dovrei fare per mantenere quel layout e poter cliccare in qualsiasi punto dell'area che definisce quei 2 link?

[lucavizzi]

Ti propongo due diverse soluzioni:

Immagine di sfondo e padding al tag "a"

<a href="carrello" class="cart">
    <strong>Carrello</strong>
    Carrello vuoto
</a>

<style type="text/css">
.cart{
    display:inline-block;
    width:150px;
    height:45px;
    background:url('static/images/carrello.png') left center no-repeat;
    padding-left:60px; /*ipotizzando un'immagine larga 55px + 5px di margine*/
    box-sizing:border-box;/*senza questa regola il link sarebbe largo 150+60px*/
}
</style>

Usando le positions:

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

<style type="text/css">
.cart{
    display:inline-block;
    width:150px;
    height:45px;
    position:relative; /*riferimento per le position absolute*/
}
.cart img{
    position:absolute;
    top:0; left:0;
}
.cart span{
    position:absolute;
    top:0; left:60px;
}
</style>

entrambe possono essere inserite all'interno di un list-item della ul.nav

[Alhazred]

Grazie, ho risolto usando il sistema con le positions.

[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.