Bordo immagine cliccabile? [era: Alle prime armi con il CSS]

[sara94]

Buonasera sono nuova del forum perciò non so se questa sia la sezione giusta per la mia domanda.
Ho iniziato da poco a usare il CSS e ho un problema ...ho creato un logo e l ho inserito nel codice html (il logo è cliccabile e riporta alla home del sito)
In CSS l ho spostato facendolo arrivare nel punto che mi interessava attraverso la modifica di margin .
Però mi sono resa conto che nell' anteprima del sito appare la manina per cliccare sul logo anche dove non c'è il logo ma il margin.
Ecco un'immagineCAM00075.jpg
Come posso risolvere questo problema ?
Inoltre ho provato a spostare dal margine in alto il logo ma non so perchè , quandosposto il logo si sposta anche tutto il resto.
Aiutoo

[KillerWorm]

Ciao e benvenuta

La sezione potrebbe essere giusta ma il titolo della discussione è decisamente "discutibile" in quanto generico (vedi regolamento di sezione al punto 3). Per il momento ho segnalato il messaggio ma chiaramente, se in futuro apri altre discussioni, sarebbe opportuno usare titoli adeguati.

Riguardo la tua richiesta chiariamo subito che normalmente l'area occupata dal margin, di qualsiasi elemento html, non è sensibile agli eventi mouse. In altre parole il margin non è cliccabile e non dovrebbe comparire la manina.
Evidentemente c'è qualcos'altro che influisce su questo.

Se posti la parte html in questione, e relativo css, sarà più semplice poterti dare aiuto.

[sara94]

Scusami per l'errore del titolo ...la prossima volta starò piu attenta.
Questo è quello che ho scritto nell'html :

<div id="container">
<nav id="Home">
<a id="logo" href="/" title="Home page">
<img src="cooltool-logo.png" alt="Logo cool tool"/></a>
</nav>
</div>


E questo è quello che ho scritto nel css:

#logo{
margin:0;
padding:0;
}

#logo img{
margin-left:8.8em;
margin-top:2.4em;
width:100px;
border-width:0;
}

[KillerWorm]

Bene. Il punto del discorso è l'elemento <a>.
Nota che l'elemento <img> e relativi margin sono, di fatto, il contenuto dell'elemento <a>, il quale si estende per far stare quel contenuto.
Chiaramente tutto ciò che sta dentro <a> risulta essere sensibile agli eventi mouse. Per tale motivo vedi la manina anche nello spazio occupato dal margine dell'immagine, perché è comunque parte dell'elemento <a>.

Per risolvere potresti impostare quei margini al tag <a> anziché ad <img>.
Una cosa del genere:

#logo{
  margin-left:8.8em;
  margin-top:2.4em;
  padding:0;
}

#logo img{
  width:100px;
  margin:0;
  border:0;
}

PS: un ulteriore consiglio, quando posti del codice sul forum è buono usare gli appositi tag di formattazione (vedi in fondo allo stesso regolamento).

[sara94]

Grazie mille ...ha funzionato
La prossima volta starò più attenta al regolamento