[MichaelA]

Hallo,

ich bin neu in der Webentwicklung und habe folgendes Mini-Problem. Es soll ein Bild angezeigt werden, welches nicht angeklickt bzw heruntergeladen werden können, aber ein Title besitzen soll.

Ich habe es zwar schon gelöst, jedoch bin ich mit der Lösung nicht so zufrieden.

        <style>
            .cellinvalid {
                background: url(content/images/ValidationError_16x16.png) no-repeat;
                width: 18px;
                display: inline-block;
            }
        </style>

<div class="cellinvalid" title="Hier kommt der Grund">&nbsp;</div> IrgendEinZellInhalt

Jetzt stören mich jedoch zwei Dinge. Zum einen muss ich ein Div einfügen, um das Bild zu erhalten. Zum anderen muss ich ein   einfügen, damit das Div überhaupt dargestellt wird.

Gibt es für eine Problemstellung bessere Lösungen? Ich wäre überrascht, wenn nicht.

Danke schon mal im voraus.

Michael

[cloned]

Zitat von MichaelA

welches nicht angeklickt bzw heruntergeladen werden können,

Das wird dir nicht gelingen.
Bilder, die nicht heruntergeladen werden sollen stellt man nicht ins Internet.
Ansonsten, wenn du der Urheber des Bildes bist: Versehe das Bild mit einem Copyright und mache deine Besucher mit einem Text darauf aufmerksam, dass es nicht erwünscht ist, die Bilder zu speichern.
Deine Methode funktioniert zwar, aber es ist trotzdem nur ein paar Klicks mehraufwand das Bild zu bekommen.
Beispiel für firefox: Rechtsklick und Q drücken, dann erhält man alle Infos (inklusive des direkten Links) die man braucht um dein Bild herunterzuladen.
Alternativ kann man auf Extras -> Seiteninformation alle Bilder anzeigen lassen, die die Seite verwenden.

Auch hat bei deiner Lösung technisch gesehen dein Bild keinen Titel sondern lediglich das div drumherum, ein Bild existiert so gesehen nicht im semantischen Sinne. Das kann auch ein Problem für Screenreader darstellen (Aber wer so paranoid ist, seine Bilder so schützen zu wollen, wird sich um so etwas wohl keine Gedanken machen)

[MichaelA]

Danke für die Antwort. Ich habe mich ein wenig ungeschickt ausgedrückt. Mir geht es dabei nicht um einen Kopierschutz. Es gibt genug Möglichkeiten über die Entwicklerkonsole an das Bild zu kommen, auch wenn es ein Hintergrundbild ist. Mir gehts darum, dass die Zelle nicht durch andere Elemente (in dem Fall das Bild) unterbrochen wird.

Screenreader ist in diesem Projekt kein Thema.

Eben festgestellt, dass wenn die Row ein größeres Height bekommt, z.B. 30px, das Hintergrundbild natürlich nicht mehr vertikal zentriert dargestellt wird. Ist das überhaupt dann noch möglich?

[cloned]

Erstellst du Webseiten noch mit Tabellenlayouts?

[MichaelA]

Erstmal, ich beschäftige mich erst seit ein paar Tagen mit Web Entwicklung. Daher bin ich sicherlich blutiger Anfänger .

Dann zum besseren Verständnis. Es wird eine Web-Anwendung in der ein Grid dargestellt wird. Das Grid verwendet keine Table Tags, sondern Divs. Der eine oder andere kennt vielleicht das Slick Grid.

Hier geht es jetzt um den Inhalt einer "Zelle" bzw dessen Validierung. Bei falscher Eingabe wird die Klasse Cellinvalid gesetzt. Per CSS möchte ich dann am Anfang der Zelle ein Bild, für die bessere Kenntlichmachung der Fehleingabe, anzeigen lassen. Dieses Bild soll ein Tooltip haben, was ich derzeit über Title löse.

Damit das Bild nicht den Inhalt der Zelle "unterbricht", dachte ich mir, dass ich es als Hintergrund Bild verwende.

[cloned]

Slick Grid kenne ich nicht, nein. Und wenn du von Zellen redest darfst du nicht davon ausgehen dass jeder weiß, dass du genau dieses Framework meinst.

Bezüglich deines Problems mit dem zentriert: Das geht bestimmt aber da ich das Framework nicht kenne und du auch kein anschauliches Beispiel geliefert hast kann ich dir leider nicht helfen.

[MitjaStachowiak]

Also dass das DIV nicht angezeigt wird, wenn es leer ist, stimmt so nicht. Es hängt halt vom jeweilligen Stylesheet ab - ich vermute, du möchtest das DIV inline anzeigen lassen. Dann ist es natürlich erstmal unsichtbar, wenn es keinen Inhalt hat (Breite 0px). Mit der Padding-Eigenschaft kannst du also dein   ersetzen... Probier' mal folgende Elemente aus:

  <DIV style="background-color : red; padding : 5px; "></DIV>
  <BR><BR>
  <SPAN style="background-color : red; padding : 5px; "></SPAN>
  <BR><BR>
  <DIV style="background-color : red; padding : 5px; display : inline; "></DIV>
  <BR><BR>
  <DIV style="background-color : red; display : inline-block; width : 30px; height : 30px; "></DIV>

Dann siehst du auch den Unterschied zwischen Block- und Inline-Elementen. Um ein <IMG>-Element zu ersetzen, würde ich mit display:inline-block; arbeiten. Aber ob du DIV oder doch lieber SPAN als Element benutzt... Das hängt halt von der restlichen Seite ab. In HTML dürfen Inline-Elemente keine Block-Elemente enthalten. Die display-Eigenschaft ändert dabei nichts an der Art des Elementes. Wenn du in einen <P>-Absatz, o.ä. ein DIV einfügst, werden Validatoren das kritisieren.

[Shiaso]

Den Zelleninhalt kannst du per margin:auto; zentrieren.
Beachte dabei, dass das Objekt selbst, sowie das umgebende DiV per CSS eine definierte Breite (width) benötigen.
Die vertikale Positionierung kannst du dann über position: relative; lösen. Nimm dazu deine DIV-Höhe, die Höhe deines Objektes und berechne die Mitte.