Rahmen um Bilder

Hallo!

Ich habe bereits die Suche benutzt und kann dennoch mein Problem nicht lösen. :-(

Wenn ich in Artikel Grafiken einfüge, dann haben die überhaupt keine Rahmen. Dies stört ein wenig den Lesefluss.

Eingebunden werden Die Grafiken in einen Artikel wie folgt (mit ganz normalen html):

<a href="http://www.dunkelangst.org/wp-content/uploads/2009/10/farbe_hoch.png"><img class="size-thumbnail wp-image-1746 alignleft" title="farbe_hoch" src="http://www.dunkelangst.org/wp-content/uploads/2009/10/farbe_hoch-150x150.png" alt="farbe_hoch" width="90" height="150" /></a>

Dies sieht dann in der Praxis so aus. In der style.css finde ich bezüglich Bilder den folgenden Code:

img {
        border: 0px;
}

Wenn ich hier breitere Pixelzahlen eingebe, dann bleibt das Ergebnis jedoch unverändert. :-(

Kann mir jemand einen Tipp geben, dass die Grafiken einen Rand bekommen? Hierzu möchte ich auch gleich anmerken, dass Grafiken, die ich mit dem NextGEN Galery Plugin einfüge einen sehr hübschen Rand bekommen. Siehe diesen Artikel unten. Jedoch hat das Plugin mehrere css Dateien, so dass ich nicht weiß, wie das realisiert worden ist. Ich steige da buchstäblich nicht durch.

Ich danke für jedwede Hilfe!!

Vielen Dank!!

Das hat schon einmal geklappt. Jetzt habe ich wenigstens schon einmal überhaupt einen Rahmen... :D Leider gibt es nun auch einen Rahmen um die Smilies... :-? Ich habe daher den Rahmen auch wieder entfernt... :(

Doch wenn ich ehrlich bin, würde ich gerne den Rahmen aus dem Plugin "NextGEN Galery" in mein theme integrieren. Das schöne an diesem Rahmen ist der Mouse Over Effekt. Wenn die Maus über die Grafik fährt wird der Rahmen auf einmal Grau - ansonsten bleibt er weiß... Einfach nur schön. Diesen Effekt kannst man sehen, wenn man diesen Artikel anschaut und weit nach unten scrollt... *träum*

Weiß jemand wie ich diesen Effekt in mein Theme übernehmen kann?

Vielen Dank für Deine Antwort koslowski!!

Ich habe nun den folgenden Code der style.css hinzugefügt.

#content a img.rahmenoderwatt  {
  border:1px solid #000;
  padding:4px;
}


#content a:hover img.rahmenoderwatt  {
  border:5px solid #dcdcdc;
  padding:0;
}

Das Resultat sieht nun so aus:

http://www.bilder-hochladen-kostenlos.de/files/imagecac…00/grafik_0.jpg

Es gibt hierbei weder einen Abstand zwischen dem Bild und dem Text , was ja das primäre Ziel ist, und auch keinen Hoverstatus. :-(

Aber hey, das ist schon wesentlich besser als vorher, da die Smilies nun schon einmal keinen Rahmen haben... :D

Also gelöst ist mein Problem noch nicht, aber ich denke ich bin ein Stück näher an der Lösung...

Hab mein Problem jetzt gelöst. Mir ging es ja hauptsächlich nur darum mehr Abstand zwischen Text und Bildern zu bekommen. Meine Lösung sieht wie folgt aus:

img {
    border: 0px;
}


img.alignleft {
    border: #ddd FY;
    float: left;
    display: inline;
    padding: 5px;
    margin: 0px 7px 2px 0px;
}


img.alignright {
    display: inline;
    margin: 0px 0px 2px 7px;
    padding: 5px;
    float: right;
}

Danke für eure Hilfe!!