|
|||
Bild als Hintergrundbild einfügen
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. HTML-Code:
<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"> </div> IrgendEinZellInhalt Gibt es für eine Problemstellung bessere Lösungen? Ich wäre überrascht, wenn nicht. Danke schon mal im voraus. Michael |
Sponsored Links |
|
|||
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) |
Sponsored Links |
|
|||
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? |
|
|||
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. |
|
|||
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. |
|
|||
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:
Code:
<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> Geändert von MitjaStachowiak (25.05.2014 um 12:38 Uhr) |
|
|||
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. Geändert von Shiaso (26.05.2014 um 11:45 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Im Bild Anmerkungen/Kommentare einfügen | helloworld | CSS | 4 | 14.03.2012 08:17 |
Bild in Zeile einfügen - feste Formatierung | MK70 | CSS | 14 | 09.10.2011 20:01 |
In einen bestehenden Text ein Bild im Vordergrund einfügen.... | eBase2009 | (X)HTML | 1 | 28.06.2009 22:53 |
container mit hintergrundbild + bild mit overflow hidden | berndw | CSS | 7 | 14.12.2006 17:46 |
in border ein bild einfügen | superbobbes | CSS | 1 | 13.12.2006 13:41 |