[risolto]Area cliccabile fuori dall'immagine

[massikk]

Ho uno strano problema sul mio sito..


Inserendo un link in un immagine l'area cliccabile non si limita all'immagine, ma anche alla sua destra e alla sua sinistra...


Non so se mi sono spiegato bene.. andando sul sito https://allevamentochihuahua.com in basso vedrete un immagine che ho centrato tramite classe css.. e come potete vedere si può cliccare anche alla sua destra e alla sua sinistra.. come potrei correggere questo problema?


Ho letto di inserire tramite css o style in html display:table-cell; .... e in effetti questo funziona, però in questo modo le immagini non sono più allineate come avevo impostato..


E' possibile risolvere il problema mantenendo l'allineamento dell'immagine?

[giusebos]

sostituisci

Codice: [Seleziona]

.kkcenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

con

Codice: [Seleziona]

.kkcenter {
    width: 100%;
}
nel file custom.css

[massikk]

inserendo width:100%; le immagini con quella classe diventano enormi.. non seguono più le dimensioni date all'interno di <img
inoltre non lo fa solo con quelle centrali, ma anche se ho un'immagine all'inizio di una riga la parte destra è tutta cliccabile..
https://allevamentochihuahua.com/i-nostri-chihuahua-con-i-vip.html qui un esempio

[giusebos]

ti ho dato quella soluzione perchè avere un immagine centrata più piccola del content è alquanto inusuale e strano, fuori da quelle che sono le best pratiche. il tuo template affibbia un non logico display: block a tutte le immagini....prova ad eliminarlo.

[massikk]

Penso di aver risolto.. per chi avesse il mio problema vi posto la soluzione!!


div#sp-component div img:not([class]):not([style]) {
   display:inline-block; }


Io ho inserito div#sp-component div img per selezionare solo le immagini all'interno dell'articolo, quindi questa riga può cambiare a seconda del template che usate, l'importante secondo me è usare :not([class]):not([style]) che in pratica prende solo le immagini senza una classe o uno stile inline specificato.

Penso non dia problemi nemmeno inserendo direttamente img:not([class]):not([style]) dato che non dovrebbe sconfusionare il template in quanto i loghi e le immagini dei template hanno tutti una classe o uno stile.