Problem: img[title]:after { content:attr(title); }

[SWFP]

Hi,

wie kann ich für eine korrekte Anzeige sorgen, da

img[title]:after {
content:attr(title);
}

img ja ein leeres Element ist?

SWFP

 

[cythux]

AW: Problem: img[title]:after { content:attr(title); }

wozu soll das gut sein?

Falls du ein Image Replacement machen willst der geht so

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

 

[SWFP]

AW: Problem: img[title]:after { content:attr(title); }

Nein, ich möchte den Text aus title als Bildtitel auf dem Bild anzeigen lassen.

 

[cythux]

AW: Problem: img[title]:after { content:attr(title); }

das dürfte mit figcaption oder dem alt="" ...
gehen

 

[SWFP]

AW: Problem: img[title]:after { content:attr(title); }

Wieso mit alt? Das wäre ja das gleiche in Grün ôO.

Edit: Aber mit figcaption geht es. Vielen Dank

 

[Curanai]

AW: Problem: img[title]:after { content:attr(title); }

Ich stehe gerade ein wenig auf dem Schlauch ... reicht mir bitte jmd. ein Muster? Denn wenn es das ist, was ich gerade in der Theorie im Kopf habe, ist das doch eigentlich ein "no go" (Stichwort Performance; gleicht einer zu vermeidenden CSS Expression)?! Genau da würd ich gern mal ansetzen ...

 

[SWFP]

AW: Problem: img[title]:after { content:attr(title); }

Könntest du bitte deine Aussage etwas konkretisieren?

 

[Curanai]

AW: Problem: img[title]:after { content:attr(title); }

Gern: Ich hätte gern ein Beispiel, da ich den Eindruck habe, dass die Verwendung wie oben geschildert einer CSS Expression ähnelt, von denen in so ziemlich jedem Fachbuch (bspw. von Nicholas Zakas oder Steve Souders) aufgrund Performance-Verlust abgeraten wird. Da ich so eine Verwendung bislang noch nicht gesehen habe, bat ich um ein funktionsfähiges Muster ... alles klar?

 

[SWFP]

AW: Problem: img[title]:after { content:attr(title); }

Ah, okay. Schau dir mal das Ergebnis an:
Anders außer mit viel Scripting wäre das nicht so lösbar.

 

[Curanai]

AW: Problem: img[title]:after { content:attr(title); }

Also bevor ich mich mit der CSS-Weise weiter auseinander setze, habe ich ein paar Tipps für Dich, die Du bitte für diese Webseite, welche Du mir per Link gegeben hast, vielleicht berücksichtigen magst:

- Doctype überdenken (den gibt es nicht!)
- es gibt kein "onMouseover" (etc.) (= "onmouseover"; alles klein!)
- viel zu viel Inline-CSS
- viel zu viel Inline-JavaScript
- SEO-Regeln missachtet (bspw. hierarchische Reihenfolge des H[x]-Tags)
- fehlerhaft geschlossene Tags (bspw. "Partner" -> da fehlt das </ul> vorm </div>); validator.w3c.org hilft - mindestens aber Code-Einrückung in Deinem Editor, denn dann würdest Du es sofort selbst sehen.
- ul im p? Nope ...
- Kodierung der Seite ist Windows-1252 ...
- und Dinge wie Leerschritte in der URL sind eine echte Pest (bspw. )

Da ich das "footer"-Tag sehe, soll es wohl HTML5 sein ... von daher sieht der Doctype entsprechend anders aus.

Das nur als Anregung "auf den ersten Blick" ...

Das Tag "figcaption" hingegen ist unter IE9 nicht zu gebrauchen - was passiert mit einem IE8 User - was sieht der davon noch?

Ok ... jedenfalls hat der Einsatz von dem Tag "figcaption" nix mit meinem Einwand bezüglich CSS-Expression zu tun (der galt dem img[title] etc. im Opener).

 

[SWFP]

AW: Problem: img[title]:after { content:attr(title); }

Moment mal,

• wer setzt denn schon ein Doctype?
• Ob ich jetzt "onMouseover" oder "onmouseover" schreibe, ist so lange egal, wie es funktioniert.:hmpf:
• Mit dem Inline, ist der Hinweis zwar nett, aber nicht immer unbedingt nötig. Aber ich werde mich noch, sofern möglich darum kümmern.
• Ich weiß, nicht, wo du das angeschaut hast, aber bei mir fehlt es nicht. Es kann allerdings sein, dass du dich auf Validatoren verlässt, die wie ich selbst bemerkt habe, alle diesen Fehler ausspucken, wo keiner ist. Mein Tipp an dich: das sind nur Maschinen, die können nicht alles wissen. Letztendlich muss der Mensch selbstständig denken. Außerdem solltest du es vermeiden, außer bei dir selbst, da ist das egal, HTML strict anzugeben, denn das macht so gut wie keiner.
• Wie ich codiere, ist ebenfalls meine Sache, und dem Nutzer ist es meist ebenfalls egal.
• IE8 ist mist, das wissen alle, und die Programmierer und Entwickler müssen sich damit herumärgern. Ich kann ja auch eine Ausweichmöglichkeit anbieten. und bis dahin empfehle ich allen IE-Freunden, wechselt bitte zum IE9 oder noch besser: gleich zu Chrome oder Firefox- Bei denen läuft das ja alles!

Mein Eindruck von dir (tut mir leid, es ist aber leider so): Du bist ein ziemlicher Besserwisser und wirst dir damit keine Freunde machen. Nimm das Leben doch mal etwas lockerer

Und was wolltest du mir denn mit dem figcaption bezüglich der CSS-Expression sagen?

 

[cythux]

AW: Problem: img[title]:after { content:attr(title); }

Also ich nutze den doctype

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
  <meta name="description" content="<?php bloginfo('description'); ?>"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
  <?php wp_head(); ?>
</head>

 

[SWFP]

AW: Problem: img[title]:after { content:attr(title); }

Kannst du ja auch, aber es ändert nichts, wenn du ihn weglässt.

 

[Curanai]

AW: Problem: img[title]:after { content:attr(title); }

Mein lieber SWFP,

ich stelle mich hier keineswegs als "Besserwisser" hin - ebenfalls steht in meinem "ersten Blick" keine Silbe von "boah, Du Depp ... mach das gefälligst anders!" (dann hätte ich definitiv dafür Verständnis, dass Du mich derart betitelst).

Ich habe mir "erlaubt" das zu dokumentieren, was ich sehe, um Dich auf typische Anfängerfehler hinzuweisen - denn genau diesen Mist bekommt man später nur wieder schlecht raus (= Gewohnheit). Das dient daher nicht der Bloßstellung, sondern für Dich als Hinweis, dass Du Dich bspw. auf der Fehlertoleranz von Browsern (für "onMouseover") ausruhst.

Kein Fehler und alle lügen? Schau mal ... Ich rücke es Dir mal ein ... aber einen Validator habe ich auf die Seite gar nicht losgelassen - ich lese Quellcode lieber selbst (übrigens im Firefox).

<div id="right">
  <b>Partner</b>
  <ul>
    <li>SWFP</li>
    <li>Hedi Pictures</li>
    <li>DSP</li>
</div>

Natürlich musst Du nicht auf Dein Inline-CSS verzichten!!! Ich schrieb "viel zu viel" - nicht "muss weg". Gleiches beim JavaScript-Teil ... und natürlich darfst Du gern Deine Seite im Schriftsatz für bspw. kyrillisch machen.

Alle anderen unnötigen Bemerkungen Deinerseits sind weder zutreffend, noch für Deine "Bunte Ecke" hilfreich. So gesehen kannst Du diesen meinen Schubs für Dich zu Herzen nehmen (was Deinen Source langfristig betrachtet besser machen kann) oder es einfach lassen ...

Es war als Hilfe gedacht - ich kann es nur nochmals betonen.

Viel Erfolg - wie auch immer Du Dich entscheidest.

 

[SWFP]

AW: Problem: img[title]:after { content:attr(title); }

Aber du sagst mir, was alles deiner Meinung nach falsch ist und ich habe dich erstens in keiner Weise nach all dem gefragt und zweitens meinst du es wohl alles besser zu wissen und davon ist bei vielem relativ egal, wie man es macht. Und das sind keine Anfängerfehler sondern freie Entscheidungen.
Bei mir wird aber folgendes angezeigt:

<div id="right">
<b>Partner</b>
<ul>
<li>SWFP</li>
<li>Hedi Pictures</li>
<li>DSP</li>
</ul>
</div>

Aber wie du es schreibst und ob du jetzt sagst, dass es weg soll oder nicht, du bist schon sehr sehr kritisch.

Du hast deine Ansicht, ich die meine und anscheinend stehen hinter beiden große Lager von Entwicklern und Programmierern.

Ich habe nichts gegen Hilfe, aber nicht auf diese Art. Ich wollte auch keinen angreifen, aber ich fand deine Herangehensweise einfach nicht okay.

 

[Curanai]

AW: Problem: img[title]:after { content:attr(title); }

Ich habe Dir nicht gesagt, was meiner Meinung nach alles falsch ist, sondern was nicht vorgegebener Standards (= W3C) entspricht. Dass der Browser es dennoch darstellt, liegt an der darin befindlichen Fehlertoleranz - schrieb ich bereits.

Und nein, Dein Quellcode zeigt dies (auch weiterhin) nicht ... ich erspare Dir jetzt gern einen Screenshot und eine Theorie zum Fehl, damit Du zum Besserwisser nicht noch "Korinthenkacker" ergänzt.

Korrekt, Du hast mich gar nicht drum gebeten - Deine Seite aber als Muster angegeben. Und Deine Seite produziert schlichtweg Fehler - ausgelöst durch fehlende Tags etc. Und wenn man genau hinschaut, sieht man die anderen Dinge zwangsläufig ...

Du verzichtest auf vorgebene Standards - ich rate Dir davon ab. Mehr ist es nicht ... und angegriffen fühle ich mich keineswegs - keine Bange. Dass eine direkte und konkrete Art nicht ankommt, ist nicht neu ... daher denke ich mal über die Entnahme von Enthusiasmus in der Öffentlichkeit nach.

Angenehme Woche wünsche ich.

 

[SWFP]

AW: Problem: img[title]:after { content:attr(title); }

Sag mal, du arbeitest nicht zufällig bei W3C oder machst gerade ein Praktikum im Bereich Webdesign?

Es liegt nicht an der Fehlertoleranz, sondern wie Martin Luther schon sagte, auch Konzilien können irren. Und es gibt, wie viele Programmierer wissen, auch einiges unsinniges, oder solche Dinge eben.

Warum siehst du das eine und ich das andere? Einer muss das richtige sehen oder der Fehler liegt woanders. Ich fände das mit dem Screenshot keine schlechte Idee, außer dass du mich dann der Fälschung bezichtigen könntest.

Als Muster für was? Nicht als Studienobjekt. Ich habe hiermit nur meine Frage belegt und den Bezug hergestellt. Nicht mehr und nicht weniger.

Das du dich nicht angegriffen fühlst, nehme ich dir nicht ganz ab. Deine Wortwahl klingt so teilweise gar nicht danach. Direkte und konkrete Art an richtiger Stelle kommt sehr wohl an. Sehr gut sogar, wenn man sie richtig einzusetzen weiß. Ja, du kannst mal darüber nachdenken. Vielleicht können wir den Disput ja in absehbarer Zeit beilegen...

Angenehme Woche dir auch.

 

[cythux]

AW: Problem: img[title]:after { content:attr(title); }

Bevor dies hier noch ausartet, schlage ich vor das hier

Back to Topic wieder angesagt ist

 

[Curanai]

AW: Problem: img[title]:after { content:attr(title); }

Danke, cythux. Lass Dich in der Hinsicht beruhigen: Es kann nicht ausarten.

@SWFP: Wie gewünscht ein ... und ein Disput ist das immer noch nicht - warum auch?! Und nein, Praktikum mache ich nicht und beim W3C arbeite ich noch weniger. Du wirst u. U. auch nicht drauf kommen, aber das ist hier auch gar nicht Thema (gewesen).

Solltest Du, SWFP, also einen "Tritt" in die richtige Richtung benötigen (oder weitere Auskünfte, woran es liegen könnte), erreichst mich mittels PN - damit der cythux seinen Ruhepuls wieder erreicht.

 

[SWFP]

AW: Problem: img[title]:after { content:attr(title); }

Ja, danke cythux

@Curanai: Und hier ein Screener von mir.
Gut, cythux zuliebe.

Und nun: Back to topic :