HTML img unselectable

  • Antworten:14
Marius 36
Marius
  • Forum-Beiträge: 424

09.04.2014, 21:42:54 via App

Hallo zusammen,
nur ganz kurz: hat jemand eine Lösung um Bilder in HTML komplett unmarkierbar zu machen? Ich hab ein Beispiel gefunden auf wunderlist.com . Die blauen Pfeile Links und Rechts, das sind bestimmt Bilder, und so will ich meine eigentlich auch haben.
Danke schon mal im Voraus.
Marius

Antworten
17
Fabian Simon
  • Forum-Beiträge: 359

10.04.2014, 09:51:16 via Website

Die Deklaration dieser Pfeile sieht wie folgt aus:

1<div class="arrow three animated"></div>

und dann das CSS :

1.arrow.three {
2 background-image: url("/img/arrows/arrow-1.png");
3 right: -50px;
4 top: 680px;
5}
Definiere ein Bild als Hintergrundbild eines Elements und es ist nich makierbar.
Bedenke Jedoch: Das das Bild trotzdem heruntergeldanen und gespeichert werden kann.

Installiere dir Firebug wenn du soche Sachen selber rausfinden möchtest

Antworten
Marius 36
Marius
  • Forum-Beiträge: 424

10.04.2014, 13:11:48 via App

Ahhh :D Gute Idee, werde es gleich mal ausprobieren. Das die Sachen immernoch kopiert werden können ist klar, Screenshot geht ja immer. Aber darum geht es mir gar nicht, ich will einfach nur ein aufgeräumteres Design.
Jedenfalls Danke, ich meld mich nochmal wenn es geklappt hat.

Update:

CSS:
1.line {
2 position: absolute;
3 z-index: 5;
4 left: 0px;
5}

HTML:
1<div class="line" style="top:1800px;background-image:url(line.png);"></div>

Warum funzt dass den nicht?

— geändert am 10.04.2014, 13:42:03

Antworten
Marius 36
Marius
  • Forum-Beiträge: 424

10.04.2014, 14:08:04 via App

Damit ich den CSS code für mehrere Linien nehmen kann. Das Problem ist es wird gar nichts angezeigt. Ich verstehe es nicht. Es funktioniert noch nicht mal, wenn ich den ganzen style in CSS schreib.

— geändert am 10.04.2014, 14:10:19

Antworten
17
Fabian Simon
  • Forum-Beiträge: 359

10.04.2014, 14:13:19 via Website

Ich vermute mal er findet das bild nicht....
Probiers als allererstes mit einem Absoluten Pfad.
Schau dann wie es relativ möglich ist

Antworten
Marius 36
Marius
  • Forum-Beiträge: 424

10.04.2014, 14:15:33 via App

Daran habe ich auch schon gedacht, aber der Pfad stimmt. Habe als Test das Bild über normalen img-Tag auch eingefügt und da gehts. Es ist mir echt ein Rätsel :D

Habe es jetzt mal ganz einfach gemacht.

<div class="rulerone"></div>

und

.rulerone {
background-image: url("line.png");
top: 100px;
}

Aber es will einfach nicht

— geändert am 10.04.2014, 14:20:25

Antworten
17
Fabian Simon
  • Forum-Beiträge: 359

10.04.2014, 14:16:55 via Website

CSS und HTML kann sich bei Pfaden unterschiedlich verhalten...

Und lerne mit Firebug zu arbeiten.
Das macht dem Webentwickler das leben leichter

— geändert am 10.04.2014, 14:17:46

Antworten
Marius 36
Marius
  • Forum-Beiträge: 424

10.04.2014, 17:30:05 via App

Alsooo es geht jetzt. Aus irgendeinem Grund, der mir nicht als logisch erscheint, muss man den div-Bereich mit Höhe und Breite (So groß, wie eben das Bild ist) definieren.
Ich verstehe es einfach nicht. Beim Beispiel von wunderlist ist im Code auch nichts definiert. Naja.
Danke für die Hilfe, genau so wollt ich es haben. :)

Antworten
9
Gelöschter Account
  • Forum-Beiträge: 86

10.04.2014, 17:38:46 via Website

Du solltest lieber mal selfhtml und css4you durcharbeiten.

impjor

Antworten
Marius 36
Marius
  • Forum-Beiträge: 424

10.04.2014, 18:02:58 via App

Neeee :D Ich will die Sachen durch Praxis lernen. Das ist meine erste Website und designtechnisch ist sie echt mega (hoffe, das sehe nicht nur ich so :D ) Was benutzt man so als Webentwickler für Programme? Ich mach grad alles mühselig mit dem Notepad und IE von Hand. Jaja ich weiß Internet Explorer ... Ich finde immer noch dass es der beste ist :)

SvenDD

Antworten
Pascal P. 64
Pascal P.
  • Admin
  • Forum-Beiträge: 11.286

10.04.2014, 18:33:25 via Website

installiere dir nen Notepad++, das hat auch noch nen nützlichen Syntax Highliter dabei.
zusätzlich formatiert es deinen Code, damit er lesbar ist.
Sonst kannst du natürlich irgend ein Html Editor nehmen, aber bedenke Html Editoren schreiben nie so guten Quellcode wie man selber von Hand.
(ist bei mir zumindest so).

LG Pascal //It's not a bug, it's a feature. :) ;)

Antworten
19
SvenDD
  • Forum-Beiträge: 272

10.04.2014, 18:42:22 via Website

Probiere doch mal PHPStorm http://www.jetbrains.com/phpstorm/

— geändert am 10.04.2014, 18:42:43

Antworten
9
Gelöschter Account
  • Forum-Beiträge: 86

10.04.2014, 20:17:22 via Website

Durch Praxis lernen ist ja ok, aber wenn man dann wegen jeder Eigenschaft hier nachfragen muss, dann ist das auch nicht toll. Ich habe mir damals auch 1 - 2 Tage Zeit genommen und css4you.de durchgearbeitet, dann einmal alles getestet und schon ging alles viel leichter.

Antworten
Marius 36
Marius
  • Forum-Beiträge: 424

10.04.2014, 21:01:10 via App

Ich frag ja nicht alles nach, man muss wissen, vor jeder meiner Fragen steht mindestens eine halbe Stunde Recherche und Ausprobieren, aber wenn ich dann einfach nichts finde frag ich eben nach.

Notepad++ sieht ganz gut aus. Mal ausprobieren wie es läuft. Danke für den Tipp

— geändert am 10.04.2014, 21:30:08

Antworten