Cursor (Mauszeiger) ändern CSS - Wie einbinden?

Nightwish

Hallo,
ich habe folgenden Code gefunden:

--------------------------------------------------------

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>cursor</title>
</head>
<body>
<p style="cursor:crosshair;">Mauszeiger: Fadenkreuz</p>;
<p style="cursor:url(Grafik.gif), url(Grafik.ani), url(Grafik.cur), auto;">Mehrere Formate bei Grafiken (Fallback)</p>
</body>
</html>

--------------------------------------------------------

Er verändert den Mauszeiger, wenn die Maus auf ein Objekt zeigt.
Nur: Wo muß ich den Code eingeben, dass er für bestimmte html-Seiten angewendet wird? In der "layout.css" oder in der "default.html"?

synaptic

ajo des musste in dei einzelnen files reinstopfen, wo du des drin haben willst...
eben als separaten stylebereich...
oder du machst ne class mypointer und vergibst die dem body wenn ne bestimmte seite geöffnet wurde..

Thonixx

Du musst den Code bloss in der layout.css angeben.
Da musst du aber auch definieren auf welchen Elementen anweden.
Das machst du mit den normalen CSS Selektoren, wie man sich das gewohnt ist.

Bei jeder HTML Datei muss natürlich der Verweis auf die CSS Datei sein, ist ja klar.
Mehr dazu findest du auf selfhtml.org.

Nightwish

Uh weia...
Class Mypointer...separater Stylebereich...Elemente definieren...das is heavy für nen Laien und Neuling für mich.
Aber ich werd versuchen, mich einzulesen und es zu kapieren!

Ich hab übrigens mal Microsoft Expression Web probiert und als Frontpage User kommt man damit wohl am ehesten zurecht.

Und schaut mal hier:
http://cmsimple-styles.com/cmsimplestyles…3Bber__CMSimple

Hab ich das richtig verstanden - damit könnte man ohne viel Kenntnisse professionelle (CSS, XHTML) Websites erstellen?

Nightwish

Edit (Nachtrag):

Was für mich halt auch schwer zu verstehen ist:
Schaut Euch mal den Screenshot hier an (geladene fertige Vorlage aus MS Expression Web)
http://www.specimen-fishing-franken.de/temp/1.jpg

- da gibts im Ordner "styles" ne layout.css, ne style1, ne style2 und ne style 3. Wofür sind die im einzelnen?
Und wofür sind die master.dwt und die default.htm?
(Von Frontpage kenne ich ne index.html oder home.html als Datei, die auf dem Server als erstes gesucht wird)

Danke und viele Grüße,
Norbert

Thonixx

Ich würde sowieso davon absehen Programme wie Frontpage oder Expression Web zu benutzen.
Ein Editor mit Syntax Highlighting würde da doch reichen?
Dann wüsstest du auch, was dann generiert wird.
Warum das mit den verschiedenen Stylesheet-Dateien so ist, das kann dir nur Microsoft sagen.
Das erscheint mir unlogisch, verwundert mich aber nicht, aufgrund des Programmes.

Schau dir doch mal an:
http://notepad-plus.sourceforge.net/de/site.htm

Grevas

Hmm, ich dachte, dass custom cursors mitlerweile in den meisten Browsern nichtmehr unterstützt werden?
Ein workaround mit JS gibts, dass weiß ich. Habs vor paar wochen selbst getestet und mit CSS only zu keinem Ergebniss gekommen.

!Achtung! Ignorieren Sie bitte diesen Abschnitt. Dieser ist aus langeweile entstanden!
#########################################################

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>bla</title><style type="text/css"><!--html, body {    padding: 0;    margin: 0;    height: 100%;}#stupid {    min-height: 100%;    height: auto !important;    height: 100%;    display:block;    background-color: #aaa;    text-align: center;vertical-align: middle;}#stupid:hover {    background-color: #888;    cursor: none;}#stupid:hover #link {    color: white;    cursor: none;}#link {display: block;margin: auto;color: #aaa;width: 10px;font-size: 1.3em;}--></style><script type="text/javascript">function set_padding() {var height = document.getElementById("stupid").style.offsetheight;var height2 = window.innerHeight;document.getElementById("wrap").style.paddingTop = height2/2 + "px";}</script></head><body onload="set_padding();"><div id="stupid"><div id="wrap">        <a href="#" id="link">Klickmich.</a></div></div></body></html>

Kein Mausezeiger bei Hovereffekten und ohne Hover kein Link Sichtbar
#########################################################

Thonixx

Zitat von Grevas

Hmm, ich dachte, dass custom cursors mitlerweile in den meisten Browsern nichtmehr unterstützt werden?
Ein workaround mit JS gibts, dass weiß ich. Habs vor paar wochen selbst getestet und mit CSS only zu keinem Ergebniss gekommen.

Also Custom Cursors mit .ani oder .ico hab ich zwar noch nie getestet, doch CSS mit cursor: das ist vollständig unterstützt bei den meisten Browsern.

http://www.css4you.de/cursor.html

Ganz zuunterst sieht man die allgemeine Kompatibilität.
Mit .ico-Zeigern funktionierts in den meisten Browsern.

Grevas

Zitat von Thonixx

Also Custom Cursors mit .ani oder .ico hab ich zwar noch nie getestet, doch CSS mit cursor: das ist vollständig unterstützt bei den meisten Browsern.

http://www.css4you.de/cursor.html

Ganz zuunterst sieht man die allgemeine Kompatibilität.
Mit .ico-Zeigern funktionierts in den meisten Browsern.

Die Anmerkung dabei ist interessant, aber nicht Vollständig. Man kann den custom Mauszeiger nicht verwenden, wenn man keine Alternative mitangibt.

cursor: url(cursor.jpg);
nimmt er nicht, mit (weder IE, noch FF, könnte aber auch letztendlich am OS liegen...)
cursor: url(cursor.jpg), pointer;
Funktionierts

Thonixx

Ich gebe sowieso rein aus Prinzip immer Alternativen an, denn da schliesst man die meisten Fehler schon mal aus.
Die Kompatibilitätstabelle kann aber sehr hilfreich sein, bei Verwendung von anderen Mauszeigern.

Obwohl ich gerne noch anhängen möchte:
Für eine professionelle Website braucht kein Mensch andere Mauszeiger, es sei denn, es passt gut und sieht professionell aus.

Macrosdesign

Zitat von Thonixx

...
Für eine professionelle Website braucht kein Mensch andere Mauszeiger,...

Das sehe ich genauso. Ausserdem finde ich das gar nicht schön wenn irgendeine Website mir meinen geliebten System-Mauszeiger wegnimmt

Tags