Mouseover und CSS

[B.SCHEUERT 0]

Hallo Community,

ich habe mal wieder ein für mich unlösbares Problem und weiß nicht ob hier der richtige Platz dafür ist, aber ich versuche es mal.

Ich bin dabei eine HP zu entwerfen, über eine CSS-Datei sollen die Mouseover-Button gesteuert werden. Das klappte bisher immer prima (habe nur einen Button-Typ verwendet), aber nun möchte ich gerne zwei verschiedene Button (versch. Styles) über die CSS-Datei steuern, leider produziere ich immer nur Müll (nicht akzeptables Ergebnis), so passiert es mir z.B., dass immer ein Listenpunkt erscheint/sichtbar ist.

habe mal eine Vorlage wie es sein soll hochgeladen, wer schauen möchte: hier

Gibt es da eine Möglichkeit eine CSS-Datei zu machen?

Linke Seite Links (A, A:HOVER, A:VISETED, A:ACTIVE)

Oben (A, A:HOVER, A:VISETED, A:ACTIVE)

und Textlinks (farblich) (A, A:HOVER, A:VISETED, A:ACTIVE)

Kann man mir helfen?

Bei Bedarf kann ich euch die Dateien als ZIP-Datei zusenden.

PS.: Bin blutiger Anfänger und arbeite mit MS FP 2002.

Edited January 23, 2005 by B.SCHEUERT

[finzer 0]

Hi,

deine Vorlage funktioniert leider nicht.

Ich würde es mal so versuchen:

.button1 a {......}	

.button1 a:link {......}	

.button1 a:visited {......}	

.button1 a:active {......}

.button1 a:hover {......}


.button2 a {......}	

.button2 a:link {......}	

.button2 a:visited {......}	

.button2 a:active {......}

.button2 a:hover {......}

Dann kannst du mit

<a href="http://www.yahoo.de" class="button1">Buttontext</a>

und

<a href="http://www.yahoo.de" class="button2">Buttontext</a>

einbinden.

Hoffe geholfen zu haben.

Gruss finzer

[B.SCHEUERT 0]

Hallo und danke erst mal, dass du dich meines Problems annimmst.

Ich werde versuchen die CSS-Datei wie von dir vorgeschlagen anzupassen und sollte es funzen bin ich überglücklich.

So wie du es beschrieben hast, kann ich ja auch die Button gleich beschriften, oder?

Ich bin wohl eher der Designer als der CSS-/HTML-Profi. :sick:

[GreyCrow 0]

Leider ist euer Link zur Demonstration nicht mehr online (oder möglicherweise auch falsch verlinkt), weswegen ich nicht genau nachvollziehen kann, was ihr wünscht.

Wollt ihr mit Hilfe von CSS eigene Buttons entwerfen oder grafische Buttons (fixe Bilder) nutzen? Mir kam eure Frage ob der Beschriftung der Buttons in diesem Kontext etwas merkwürdig vor, deshalb meine Nachfrage

Grey

[B.SCHEUERT 0]

Sorry, habe ich wohl versehentlich gelöscht, ist aber wieder oben.

Derzeit sind in der CSS-Datei nur Textlinks. Die grafischen Buttons der HP werden über javascript bzw. DHTML (FrontPage 202) gesteuert. Wenns fertig ist, sollen alle Links, grafische- und Textlinks, über CSS gesteuert werden (ist mein Wunsch/Ziel).

Ich habe fertig beschriftete Buttons und möchte diese über eine CSS-Datei steuern (Mousover, 3 Buttons pro Link (A/HOVER/ACTIVE)) * X.

Zusätlich möchte ich die Standardfunktion (Textlinks in verschiedenen Farben) nicht verlieren.

Passt das überhaupt in eine CSS-Datei, oder kann ich evtl. verschiedene CSS-Dateien für eine HTML-Seite ansprechen/definieren?

[B.SCHEUERT 0]

@finzer

Danke, Du hast Recht.

Ich habe in der CSS-Datei die Text-Hover-Links als "A/A:HOVER/A:VISETED" definiert

und die grafischen Butten nach ihren Namen "A.UEBER/A:HOVER.UEBER/A:VISETED.UEBER" usw.

In die HTML-Seite habe ich

<a href="#" class="UEBER">&nbsp;</a>

eingefügt

Klappt alles bombig.

Danke für die Hilfe!!!! :w00t:

[finzer 0]

Kein Problem und noch viel Glück bei deinem "Projekt"

Gruss finzer

[GreyCrow 0]

Wie bitte steuert ihr grafische Buttons (IMG) über eine CSS Datei? In meiner Erinnerung wird das per Javascript mit onmouseover und onmouseout erledigt mit einem kleinen Javascript im Kopfe der Datei. Die Textlinks natürlich CSS. Aber Grafiken? *grübelnd*

Grey

[B.SCHEUERT 0]

Ganz genau, ich spiele mal den Entwurf meines Projekts hoch, Mousover - Textlinks - Schriftformatierung ist da über CSS gesteuert.

Da ich viel Zeit in die Erstellung von Grafiken stecke, möchte ich nicht dass gleich jeder Besucher meint, die kann ich gebrauchen. Die Button sind mit dem Mausrechtsklick nicht zu haben, die Ladezeiten verkürzen sich usw., usw.!

Hier der Link.

Da ich schon mal schreibe,

AN ALLE:

Ist es möglich den Besuchern der Seite einen verwendeten Font anzudrehen, sofern der Besucher diesen nicht in seinem Font-Ordner hat.

Kennt jemand eine Lösung?

[MacTV 0]

Da ich viel Zeit in die Erstellung von Grafiken stecke, möchte ich nicht dass gleich jeder Besucher meint, die kann ich gebrauchen. Die Button sind mit dem Mausrechtsklick nicht zu haben, die Ladezeiten verkürzen sich usw., usw.!

Du kannst zwar

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

in den Header setzen, und bei IE kommt dann kein Downloadsymbol

oder dazu noch ein | No right mouse click script | setzen.

Man kann aber jede Datei, z.B. via Cachespeicher, holen

AN ALLE:

Ist es möglich den Besuchern der Seite einen verwendeten Font anzudrehen, sofern der Besucher diesen nicht in seinem Font-Ordner hat.

Kennt jemand eine Lösung?

Möglich schon ... via Download.... oder Popup Download

99 % werden aber dann die Seite ganz schnell wieder verlassen...

Also würde ich die Buttons aus Grafik machen....

Edited January 26, 2005 by MacTV

[B.SCHEUERT 0]

geht so etwas nicht, dass der Besucher das Quasi gar nicht mitbekommt?

Wenn ich einen Hinweisauf den Font mache, ist es fraglich ob der Besucher überhaupt alles liest.

Die Button grafisch gestalten ist null Prob., aber die Schreiberei in der CSS-Datei ist mir zu wieder.

Aber wenn es sich nicht anders lösen lässt, dann mache ich das.

Wenn jemand die Grafiken unbedingt haben will, bekommt er sie so oder so.

Aber muss ich es den Leuten so leicht machen?

Edited January 26, 2005 by B.SCHEUERT

[MacTV 0]

Das wäre ja noch schöner

Ne ne das geht nicht... im Viren und Trojanerzeitalter läßt das keiner mehr zu :D

[MacTV 0]

Mouseover

Hier gibts ne feine Anleitung -> http://home.arcor.de/struebig/js/mouse_over/

Beispiele:

• www.planet-eyeq.com
  
• www.tegclan.de
  
• http://www.unheilig.org
  

[B.SCHEUERT 0]

Sehr schöne Seiten, gefallen mir gut!

Aber dann mach ich mich mal an die Arbeit die Button zu beschriften.

Danke für die Hilfe!

[GreyCrow 0]

Um darauf kurz nochmal einzugehen:

So wie die Buttons momentan gelöst sind, sind sie wohl als Hintergrund definiert. Prinzipiell eine schöne Methode, die einige Kniffe zulässt und die Beschriftung in die eigentliche HTML Datei auslagert (sehr schön). Aber schwer ist es dadurch nicht an die Buttons zu kommen, da das CSS klartext lesbar ist (sowohl für den Browser als auch den Besucher). JavascriptSpiele, die das Kontextmenü verändern, blockiert mein verwendeter Browser und damit ziehen diese auch nicht. Darauf Energie zu "vergeuden" lohnt sich nicht. Wer die Buttons möchte, bekommt sie.

Von eigenen Fonts würde ich strikt abraten. Zumal oft die Lesbarkeit darunter leidet. Wenn es denn aber sein "muss", würde ich diese auch auf die Buttons direkt aufzeichnen. Das wäre aber im Extremfall bspw. auch mittels PHP und GD möglich um Code zu sparen (schwierig aber machbar).

Die Ladezeiten verkürzen sich noch etwas weiter, wenn die verwendeten Grafiken bspw. in einem unsichtbaren DIV auf der Seite irgendwo alle schon beim öffnen der Seite geladen werden. Bei einem dann folgenden onmouseover hat der Browser das Bild bereits im Speicher und muss es nicht nachladen. Bei CSS ist das Verhalten nicht ganz festgelegt.

Grüße

Grey

[B.SCHEUERT 0]

Na ja, das mit den Grafiken "KLAUEN" und dem Problem nicht vorhandener Fonts ist halbsowild, ich werde die Grafiken via UPI beschriften und als jpg speichern.

Was mich noch interessiert und sich interessant anhört, wie lade ich die Grafiken vor? Damit habe ich mich noch nicht so beschäftigt.

Ich arbeite erst so ca 3 - 5 Mon. mit HTML & Co, habe als AL genügend Zeit.

Bin aber absolut lernwillig.

Für Hilfe und gute Tipps bin ich immer zu haben. Denn auch bei Selfhtml finde ich nicht immer auf Anhib was ich suche oder brauche, und hinterher wiederfinden ist auch nicht drin. Bei mir herscht immer CHAOS! :bag:

[finzer 0]

Hi,

wegen der Schrift. Du kannst ja einfach eine Schrift deiner Wahl verwenden und falls diese dann jemand nicht haben sollte nimmt er einfach die alternativschrift (CSS).

So sollte das dochgehen:

.button1 a { font-family: deineschrift, arial, sans-serif; }

Also als erste deine Schrift, wenn diese nicht vorhanden ist wechselt der automatisch zur nächsten usw ...

edit: seh gerade du willst eine selbst entwickelte Schrift verwenden die garantiert keiner hat. Das wird dann wohl eher nicht so gehen. In diesem Falle würde ich die Schrift wie von GreyCrow auch schon gesagt auf die Buttons aufmalen (Pixelgrafik).

Gruss finzer

Edited January 26, 2005 by finzer

[B.SCHEUERT 0]

Habe mich der einfachheit halber für "Tahoma, Arial, Verdana" entschieden, sollte fast jeder haben.

Ich bin nicht so wild aus Schreiben!!!

War gerade dein Board besuchen und muss sagen, es gefällt mir gut. Du kannst schon recht bald mit einem neuen Member rechnen.

Greetz

[finzer 0]

War gerade dein Board besuchen und muss sagen, es gefällt mir gut. Du kannst schon recht bald mit einem neuen Member rechnen.

Fein das freut mich

Dort gibts auch noch eine Tutorials-Sektion und ein Paar Member die von Grafiken und dem Zeugs Ahnung haben ...

Gruss finzer

[GreyCrow 0]

Habe mich der einfachheit halber für "Tahoma, Arial, Verdana" entschieden, sollte fast jeder haben.

Sehr gute Wahl, damit hat man die wenigsten Probleme.

Grafiken kann man vor"schummeln" wie ich schon schrieb, indem man einen DIV Container erstellt und dort alle verwendeten IMGs hineinschreibt (<img ...) Dieser Container wird per CSS als unsichtbar gekennzeichnet und wird damit nicht angezeigt, da aber die Bilder dort verlinkt sind, werden sie auch vom Browser geladen, für den Fall, dass man den Container bspw. einmal sichtbar machen würde (geht mittels Javascript/DOM). Wenn man dann Buttons mit onmouseover gegen andere austauscht (eingedrückt, aktiv, markiert o.ä.), entsteht keine Ladezeit mehr, da sie bereits im aktiven Speicher geladen sind.

Grüße

Grey

[B.SCHEUERT 0]

DIV erstellen sollte kein Problem sein, wie verstecke ich den und muss ich Javascript verwenden, oder kann ich bei CSS bleiben?

Wäre toll wenn ich das am End so lassen kann und muss nur die Grafiken unbemerkt mit vorladen.

[GreyCrow 0]

Wir haben das meistens so gelöst, dass entweder zu Beginn oder Ende der Datei ein

<div style="visibility: hidden;">

<img ...>

<img ...>

...

</div>

Block stand, in dem alle Grafiken enthalten waren, die in den onmouseover Aweisungen als Hover oder Click Grafiken genutzt wurden.

Die Anweisung style="visibility: hidden;" versteckt den DIV Layer (blendet diesen aus), die Seite läd die Bilder jedoch trotzdem.

Grüße,

Grey

[B.SCHEUERT 0]

Werde ich gleich mal ausprobieren.

Habe es gerade hochgespielt, schau doch mal hier und sag mir deine Meinung ob es so gut ist bzw. gemeint war

ist nur auf der Indexseite, ich machs mal eben noch auf den anderen.

Sieht gut aus, wenn du nichts dagegen hast erwähne ich dich auch auf meiner Webseite unter "Dankesworte".

Edited January 28, 2005 by B.SCHEUERT

[GreyCrow 0]

Ich würde den DIV nach oben direkt nach dem BODY legen, ansonsten ist es so wie ich es gemeint hatte, ja

Um die Seite standardkonform(er) zu gestalten würde ich noch empfehlen die beiden METAs

<meta http-equiv="content-type" content=blendtrans(Duration=2)>

<meta http-equiv="page-enter" content=blendtrans(Duration=2)>

zu entfernen, sie sind ohnehin nur (wenn überhaupt) im Internet Explorer sichtbar.

Bilder sollten generell ein ALT Attribut tragen, welches knapp beschreibt, um was es sich handelt. Ein IFRAME hat kein BORDER Attribut, nur ein FRAMEBORDER welches auch definiert ist. Die Attribute bei BODY (TOPMARGIN und LEFTMARGIN) gehören nicht dem Standard an. Mit CSS kann hier der gleiche Effekt erreicht werden (border: 0px; margin: 0px; padding: 0px;) ohne vom Standard abzuweichen. Und schlußendlich: die Angabe HEIGHT ist in einem TABLE Tag nicht definiert und sollte unterlassen werden. Wenn ihr das alles korrigiert und eure Seite bei http://validator.w3.org gegenprüfen lasst, solltet ihr eine Standardkonforme HTML 4.01 Transitional validierende Seite haben, die auch in jedem Browser so aussehen sollte, wie ihr sie geschrieben habt. Viel Spaß dann damit

Eine nette Erwähnung ist natürlich immer gerne gesehen. Solltet ihr weitere Fragen haben, immer heraus damit.

Grey

Edited January 28, 2005 by GreyCrow

[B.SCHEUERT 0]

Werde deine Ratschläge beherzigen und die Angaben ändern.

Hast du auch eine HP die ich erwähnen sollte?