dreamweaver
 

hallo zusammen.

seit geraumer Zeit quält mich die Frage: wie machen die das eigentlich?

Also einen Link über einen Text zu erstellen (z.B. "projekte") und wenn die Maus drüber fährt ändert sich Farbe, manchmal auch Schrift und Größe. Es scheint mir nicht dass dies alles Images mit Mouseover-Effekt sind.

Wie macht man das mit Dreamweaver?

danke fürs Wissen und Können mit mir teilen! grüße, christina

Hi Christina,
Für das was du erreichen möchtest, wäre es auch nicht nötig.
Beschäftige dich mal mit CSS, und da speziell mit den Pseudoklassen <i>:link</i>, <i>:visited</i>, <i>:hover</i> und <i>:active</i> in Verbindung mit dem <i>a</i>-Element.
Der Dreamweaver kann dir da auch nur weiterhelfen, wenn Du die Grundlagen kennst.

Gruß

Max

Danke für den Tipp.

Das habe ich jetzt ausprobiert und gefunden. Im Dreamweaver kann man CSS Styles zuweisen, nachdem man sie selbst angefertigt hat. Außerdem habe ich einen Code reinkopiert, den ich auf der Seite http://de.selfhtml.org/css/eigenscha...udoformate.htm gefunden habe um die Farbänderung beim Mouseover hinzubekommen.

Das habe ich getan und in der Vorschau klappt es auch.
Dann habe ich mir das hochgeladen und muss leider feststellen, dass wieder nur die Hälfte klappt: die Schriftfarbe ändert sich zwar, aber die anderen Dinge, die ich zugewiesen habe (z.B. Kapitälchen, kein Unterstrich) die werden "normal" (mit unterstrichen und in normalem Text) gezeigt.

Was für eine Lösung kann es dafür geben?

Kapitälchen mit der Angabe "font-variant:small-caps"? Entweder ein Syntax-Fehler oder der Zeichensatz dieses Fonts hat auf Deinem System gar keine Kapitälchen oder das Attribut wird von Deinem Browser nicht unterstützt.

hmm... und warum sind alle verlinkten Wörter unterstrichen, wo doch bei der Vorschau (F12) im selben Browser alles so funktioniert, wie es soll. Die Kapitälchen werden da übrigen auch in der Vorschau angezeigt, aber wenn ich über das Internet auf die Seite gehe nicht!?

Was bedeutet Sytanx-Fehler? Und wie behebt man diesen?

Syntax=Schreibfehler - und beheben tut man ihn durch Richtig-Schreiben :D ...

Dass in der Vorschau alles klappt, hatte ich übersehen. Ich habe den Dreamweaver momentan nicht installiert. Mit welchem Browser läuft denn die Vorschau? Bei GoLive unter Windows verwendet die interne Vorschau ja einfach das Internet-Explorer-Modul.

Mit welchem Browser schaust Du Dir dann die Seite im Netz an unter welchem Betriebssystem? Hast Du die Style-Angaben in die HTML-Datei geschrieben oder verlinkst Du sie als externes Style-Sheet und an dem Link ist was faul?

Also das Betriebssystem ist XP.
In der Vorschau funktioniert es sowohl im IE als auch im Mozilla.
Im Internet kommen bekannte Fehler mit dem IE und im Mozilla kommt nur Quelltext....

Ich habe die Styleangaben im Style-Sheet gemacht.

Spricht ja für einen echten Bock, der da drin ist. Kannst Du mal die URL posten, oder ist das nicht genehm? Dann hätte man mal die Sache auf dem Schirm. Oder Du lädtst die Dateien hier hoch. Die URL hier kannst Du auch später wieder entfernen.

www.christinabockhorn.de

dann auf referenzen klicken, da sieht man das mit den unterstrichenen Links die nicht unterstrichen sein sollen am besten.

Also das, was ich sofort sehe ist, dass Du die Style-Information mitten in den "Body"-Abschnitt gepastet hast - wo er nicht hingehört (steht irgendwo im Quelltext bei Zeile 61-66). Er sollte in den oberen "Head"-Abschnitt. Es darf auch nicht mehr als einen Head- oder Body-Tag in einem HTML-Dokument geben.

Außerdem klappt es nicht, weil Du den Links unten die Klasse "mainlinks" zuweist - das überschreibt die vorhergehende Style-Angabe. Du müsstest die 2 Zeilen zu a:hover und a:link in das Style-Sheet x.css in die Klasse "mainlinks" reinschreiben.

Auf Deiner Startseite werden den Links unten keine Klassen zugewiesen - das ist irgendwie noch reichlich inkonsistent.

P.S.: Das Style-Sheet x.css wird offenbar auch gar nicht gefunden - hast Du das Style-Sheet überhaupt auf den Server geladen?

Dann sehe ich oben in der Vita-Seite (Quelltext) einen Font-Tag mit Font Face="einblicke". Was ist das für eine Schriftart? Da müsste sowas wie "Arial, Helvetica, Verdana" stehen. Mache Dir auch bewusst, dass Du nur Fonts verwenden solltest, die auf jedem System mit 99%iger Sicherheit verfügbar sind ;) ...

EDIT: Ein grundsätzliches Problem besteht darin, dass Du sowohl mit Style-Sheets und CSS als auch mit den konventionellen Font-Tags und steinzeitl. Sachen wie "Strong"-Tags arbeitest. Auf diese Weise schaffst Du Dir 24 verschachtelte, konkurrierende Stil-Definitionen, die nicht mehr zu durchblicken sind.

Bei mir werden auch manche Links unterstrichen angezeigt und manche nicht - obwohl sie im Code absolut identisch formuliert sind. Und die Vorschau (bei mir in Adobe GoLive, mit dem IE-Modul) weicht auch von der Vorschau im IE unter Deiner Internet-Adresse ab. Das muss grundsätzlich bereinigt werden /d.h. auf reine CSS-Formatierung umgestellt werden), erst dann kann man anfangen, diese Details zu lösen. Momentan gibt es dafür 100 mögliche Gründe.

Für CSS braucht man etwas Erfahrung; das kann auf Anhieb nicht 100% klappen.

Folgende Zeilen im css bringen Dir den moseover Effekt:

Damit werden alle Links so behandelt. Wenn du dies nur für bestimmte Links haben möchtest, müsstest Du dem Bereich im html Quelltext definieren.
Z.B.:
[PHP]
<div class="andererlink">
<a href="linkurl">
Linktext
</a>
</div>[/PHP]

und im CSS

Ich empfehle dir folgendes Buch:Cascading Stylesheets.

In Deinem Quelltext fehlt übrigens entweder das eingebettete CSS oder der Verweis auf eine CSS Datei:
[PHP]<link rel="StyleSheet" href="/pfad/zum/style.css" type="text/css"/>[/PHP] im header Bereich.
Eine Datei mit allen CSS Anweisungen ist die sinnvollere Methode, da dann nicht für jede Seite unnötig Quelltext geladen werden muss.

Florian: Der Link zu dem Stylesheet ist schon da.

Deine Detail-Angaben zu Links sind natürlich richtig, aber wenn man sie grundsätzlich nicht unterstrichen haben will, musst man im Style-Sheet einfach für den A-Tag allgemein "text-decoration:none" festlegen, nicht für die Pseudo-Klassen a:hover, etc.:

a { color: blue; text-decoration: none }

Wenn Du das änderst, kann es schon klappen (trotz der Stil-Verschachtelungen und anderer Ungereimtheiten). Die Browser sind ja schon verdammt gutmütig - lesen über Sinnloses hinweg und denken sich zu Unvollständigem den Rest dazu. HTML ist ja eigentlich so fehlerverzeilich, dass es aus jedem Einkaufszettel eine Website macht.

danke, Jungs für Eure Tips.

Ich bin halt a blutiger Anfänger und hab das alles erst gestern mal ausprobiert. Deswegen ist mein Layout zur Zeit auch noch "reichlich inkonsistent" bzw inkonsequent. Das will ich aber ändern, aber ich ändere doch nicht alle Seiten, wenn ich sehe, dass es noch nicht ganz richtig ist...

Ich versuche mal mit den Tips klarzukommen, die ihr mir gegeben habt.
Wenn ich das nicht schaffe meld ich mich wieder hier.... gelle?!

;)

Gott schütze Dich auf all Deinen Wegen ;) ...

Edit: Wenn Du oben in der Style-Definition (oder in dem externen Style-Sheet) diese zwei Zeilen hinschreibst, müsste es so funktionieren, wie Du möchtest:

[PHP]
<style type="text/css">
a { font-weight:regular; color:#99CC99; text-decoration:none; }
a:hover { color:#99FF00; }
</style>
[/PHP]