Home > Artikel > Designärger Netzblogger03

Designärger Netzblogger03

Wie wir ja wissen, ist das Netzblogger03-Design immer noch im Alphastadium. Es gibt hier immer noch so einiges zu tun was nicht passt.

Dazu zählen unter anderem auch die Smileys, wie beim letzten Beitrag wieder sichtbar wurde. Sie werden mit dem Rahmen der “eigentlichen” Bilder belegt, obwohl sie das nicht sollten. Hier scheint noch eine große Wissenslücke bzgl. CSS bei mir vorzuherrschen.
Aus Mangel einer speziellen Klassendefinition im image-Tag für die in Beiträge eingebundenen Bilder sieht der Spaß in CSS so aus:

.post img {
border: 1px solid #ddd;
padding: 3px;
background: #eee;
margin: 0 10px 0 10px;
}

Die Smileys allerdings werden im img-Tag mit class=”wp-smiley” deklariert und wurden von mir daher am Ende des Stylesheets mit folgender Klasse bedacht:

.wp-smiley {
padding: 0;
border: none;
background: none;
}

da das so aber nicht funktioniert habe ich auch schon “img .wp-smiley” und “.wp-smiley img” versucht - aber nichts wollte funktionieren. Langsam bin ich mit meinem Latein am Ende. Ist ja nicht so, dass ich mich nicht in jedem verf***** Blog damit rumgeärgert habe :(
any hints on that?

, , ,

  1. 7. Juli 2006, 16:21 | #1

    Hallo Netzblogger,

    bin mir nicht ganz sicher, aber probiere doch mal folgerndes.

    .wp-smiley {
    padding: 0px;
    border: 0px;
    background: #FFFFFF;
    }

    Bey
    Stephan

  2. 7. Juli 2006, 16:27 | #2

    Hi Stephan,

    danke! grad mal ausprobiert - scheint aber leider nix zu bringen. :(

  3. 7. Juli 2006, 21:30 | #3

    Schade, dann hätte ich noch eine Ideen.
    Versuche doch mal anstat .post img

    .postEntry img {
    padding: 0px;
    border: 0px;
    background: #FFF;
    }

    Den das ist die eigentliche Klasse, in der sich die Smileys befinden.

    Hoffentlich hilft dir das weiter.

    Bey
    Stephan

  4. 7. Juli 2006, 21:33 | #4

    danke nochmal, Stephan.

    Wenn ich das so 1:1 mache, dann haben aber auch die normalen Bilder keinen Rahmen mehr - was vermutlich die einfachste Lösung wäre :)

    Ich hab’s dennoch mal übernommen und hab nur die Werte von Dir ausgetauscht gegen meine Ursprünglichen - bringt leider auch nix :(

  5. 9. Juli 2006, 00:37 | #5

    Hm, und wen du es mal so probierst:

    .postEntry img .wp-smiley {
    padding: 0px;
    border: 0px;
    background: #FFF;
    }

    bzw.

    .post img .wp-smiley {
    padding: 0px;
    border: 0px;
    background: #FFF;
    }

    Hoffentlich klappt das so…

  6. 13. Juli 2006, 17:57 | #6

    Ok, meinen letzten Kommentar kannst du vergessen. Aber ich hab jetzt mal etwas rumprobiert, und folgende Lösung hat bei mir funktioniert.


    img.wp-smiley {
    padding: 0px;
    margin: 0px;
    border: 0px;
    background: none;
    }

    Wichtig dabei ist, dass KEIN Leerzeichen zwischen img und .wp-smiley ist.

    Und wen du sowieso schon Änderungen in der CSS machst, währe eine größere Schrift für das code Tag sehr nützlich.

    Bey
    Stephan

  1. Bisher keine Trackbacks