Verlinktes Bild in CSS rahmenlos machen

[ldb]

Hallo Liebe Community, das ist mein erster Post in diesem Formum, bitte habt etwas Nachsicht, wenn ich etwas falsch machen sollte :)
Ich bin ein ziemlicher HTML-Anfänger und bin daran, meine erste eigene Homepage aufzubauen. Jetzt habe ich folgendes Problem:

Ich habe in HTML ein Bild eingebunden, dass verlinkt sein soll. Der HTML-Code sieht wie folgt aus:

<div id="icon_home">
<a href="home.html"><img src="icon_home.png" alt=""></a>
<h1>Home</h1>
</div>

Ich habe ein CSS-Stylesheet, welches das Aussehen der div's und des Bildes ändern sollen:


#icon_home { /* Home-Icon */
width:85px;
height:85px; /* Grösse Icon */
background-color: rgba(255, 255, 255, 0);
margin-top:8px;
margin-left:32.5px;
}

#icon_home img{ /* Home-Bild */
max-height:61px;
margin-left:12.5px;
margin-top:9.5px;
}


#icon_home h1{ /* Home-Text */
font-size:13px;
color:white;
font-family:arial;
font-weight:lighter;
text-align: center
}



Das Ganze funktioniert soweit (ja, ich weiss, dass das Ganze einfacher gelöst werden könnte...)
Mein Problem ist jetzt: Wenn ich auf das verlinkte Bild klicke, erscheint beim Zurückkehren auf die Seite ein blauer Rahmen um das Bild.
Ich habe bereits Gegooglet und mehrere Lösungen mit

border:0;

gesehen. Ich habe allerdings nirgends herausgefunden, wie ich das verlinkte Bild anspreche. Wenn ich das
border:0
in
#icon_home img
integriere, ändert sich gar nichts. Ich muss wohl den a href zusätzlich ansprechen. Wie geht das? Hat jemand von euch den entscheidenden Tipp?

Ich freue mich auf Antworten und wünsche euch einen schönen Abend :)

Gruss LDB

 

[bodil]

Hallo ldb,
willkommen bei html.de!

Probiers mal mit

#icon_home img {
    border:0px none;
    ...
}

oder ganz generell mit einer zusätzlichen Definition

a img {
    border:0px none;
}

die dann für deinen gesamte Site gilt.
Viel Erfolg!
Bodil

 

[ldb]

Hallo bodil,
Danke für deine schnelle Antwort!
Leider hat weder das Eine, noch das Andere funktioniert. Ich nutze den Firefox, der zeigt immer noch den blauen Rahmen an, nachdem ich das Bild angeklickt habe... Ich hänge mal ein Bild an, vielleicht nützt das was... :(



Hoffe mal, dass ihr (du) mir nochmals helfen könnt und danke dir für den Beitrag!

Gruss LDB

 

[Banana_Jones]

Das sieht nicht nach klassischer Border aus, sondern eher nach einer Outline. Probiers mal damit:

a:active
{
outline: none;
}

a:focus
{
-moz-outline-style: none;
}

 

[ldb]

Hallo Banana Jones,
Danke für den Tipp. leider ändert sich gar nichts...
Habe ich es richtig verstanden, dass ich deinen Code 1:1 in mein CSS ganz am Anfang integrieren sollte? Oder muss ich da noch die Namen ändern? Tut mir leid, wenn die Frage jetzt ziemlich blöd ist, aber ich bin halt ein Anfänger...

 

[bodil]

ergänze doch mal was im Link:

<a href="home.html" onfocus="blur()"><img src="icon_home.png" alt=""></a>

Gibts deine Seite schon irgendwo online? Würde es vereinfachen ...

 

[ldb]

Hallo bodil,
Danke für deinen zweiten Tipp, der war Gold wert! Es funktioniert jetzt wunderbar und ich bin happy! :)
Die Seite gibt es momentan nicht online, vielleicht werde ich sie in den nächsten Tagen aber aufschalten...
Vielleicht ist die Frage etwas frech, aber gäbe es die Möglichkeit, dass ein erfahrener Benutzer den Code mal durchsehen würde und eventuelle Verbesserungen vorschlagen könnte? 8)
Ich habe die gesamte Seite zwar als "valid" angezeigt bekommen (validator.w3.org); aber ich bin mir nicht ganz sicher, ob ich überall die einfachsten Möglichkeiten gewählt habe... :)

Gruss und grosses Dankeschön!
LDB

PS: Das wird bestimmt nicht mein letzter Post in diesem Forum sein :)

 

[bodil]

Prima, dass das geklappt hat.
Es gibt hier im Forum unter »Community« den Bereich Websitecheck. Wenn die Seite online ist, kannst du sie hier zur Diskussion stellen. Vergiss nicht, zu ergänzen, was bewertet werden soll (Optik, Code, Usability, Notwendigkeit ...?)

 

[ldb]

[FONT=.Helvetica NeueUI]Hallo bodil,[/FONT][FONT=.Helvetica NeueUI]Danke für den Hinweis, ich werde mal dort reinschauen.[/FONT]
[FONT=.Helvetica NeueUI]Meine Seite ist allerdings momentan noch lange nicht fertig. Das Design und das Grundgerüst stehen zwar, aber die SuFu ist nur rein optisch eingebaut und der Inhalt nur ödes Lorem Ipsum-Gedöns...[/FONT]
[FONT=.Helvetica NeueUI]
[/FONT]
[FONT=.Helvetica NeueUI]Kann ich die Website trotzdem mal verlinken, um sie einfach mal auf den Code überprüfen zu lassen? Oder sollte ich sie zuerst fertig stellen?[/FONT]
[FONT=.Helvetica NeueUI]
[/FONT]
[FONT=.Helvetica NeueUI]Danke für die Antwort und gute Nacht![/FONT]
[FONT=.Helvetica NeueUI]
[/FONT]
[FONT=.Helvetica NeueUI]LDB[/FONT]

 

[bodil]

Geht jederzeit. Schreib halt dazu, um was es dir geht. Die Seite muss natürlich nicht fertig sein dafür. Der Sinn ist ja, die Seite zur Diskussion zu stellen, bevor sie fertig und online ist.

 

[ldb]

Vielen Dank! Ich werde mal sehen, wann ich die Seite auf den Server laden kann. Freue mich schon auf die Kritik :)

 

[ldb]

Blöde Frage, aber habe ich das Recht, meinen eigenen, gelösten Beitrag zu schliessen? Wo mache ich das?