mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 10.12.2016 00:34 Benutzername: Passwort: Auto-Login

Thema: [css] Navigation mit schrift und Bild roll over vom 25.11.2004


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Tipps & Tricks für Nonprint -> [css] Navigation mit schrift und Bild roll over
Seite: 1, 2, 3  Weiter
Autor Nachricht
GSM_Wolli
Threadersteller

Dabei seit: 07.11.2004
Ort: -
Alter: 28
Geschlecht: Männlich
Verfasst Do 25.11.2004 19:32
Titel

[css] Navigation mit schrift und Bild roll over

Antworten mit Zitat Zum Seitenanfang

Hallo erstmal,

ich bin ganz neu hier...

also meine frage ist es, wie mach ich es mit css, dass ich in meiner navigation einen link habe und vor dem link ist ein bild. und wenn man dan auf den link geht, sollte das bild sich verändern und die farbe des linkes (der text).

weiß nicht ob ihr jetzt versteht was ich meine...

wäre nett wenn ihr mir helfen könntet.

Gruß Wolli
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Doger

Dabei seit: 25.02.2004
Ort: Köln
Alter: 35
Geschlecht: Männlich
Verfasst Do 25.11.2004 20:21
Titel

Antworten mit Zitat Zum Seitenanfang

http://www.css4you.de

Das sollte dir eigentlich weiterhelfen.
Wenn nicht such da mal nach a:hover bzw links allgemein.
Wegen dem Bild musst du einfach das alte bild ausblenden und das neue bild einblendenblenden. das ganze funktioniert per Javascript stichwort "onmouseout / onmouseover" und da sollte dir folgender Link weiterhelfen:

http://de.selfhtml.org/
  View user's profile Private Nachricht senden
Anzeige
Anzeige
graphicsandunity

Dabei seit: 22.11.2004
Ort: Berlin
Alter: 33
Geschlecht: Männlich
Verfasst Do 25.11.2004 20:27
Titel

Antworten mit Zitat Zum Seitenanfang

text-eigenschaften änderst du mit css

aber das mit dem bildchen davor geht wohl nicht ganz so einfach.
vielleicht wirst du um javascript nich drum kommen.

das beste ist erstmal, die menüleiste über eine html-liste zu definieren.

dafür bastelst du in HTML folgendes:

Code:


<ul id="menu">
   <li>Menü 1</li>
   <li>Menü 2</li>
   <li>Menü 3</li>
   <li>Menü 4</li>
</ul>




und in css definierst du:

Code:


ul#menu {
   list-style-image: url(pfad/bild.gif);
}

ul#menu li a:link, ul#menu li a:visited {   
   text-decoration: none;
   font: bold 120% Arial, sans-serif;
   color: #FFF;
}

ul#menu li a:hover {

   color: #000;
}
   



mit dem ersten selektor legst du die eigenschaften für das ul-element fest, dass "menu" als id hat und gibst dort den pfad für das listen-bildchen an.

der zweite selektor setzt eigenschaften für alle links, die unmittelbar auf einen li-tag folgen, der wiederum unmittelbar auf den ul-tag mit der id "menu" folgt. in diesem fall gelten die gesetzten eigenschaften für den link im normal-zustand und für den zustand, wenn schon mal jemand drauf geklickt hat.

der dritte selektor definiert den zustand des links, wenn man drüber geht.
hier wird eben nur die schriftfarbe geändert.

ist ein simples beispiel. und für deine zwecke abwandelbar.

Das ändern des bildchens denke ich geht nicht mit css.
glaube, dass du dafür dann doch javascript benutzen musst.

aber ich denke, die links meines vorredners sind schon sehr hilfreich.

wenn noch fragen sind immer her damit. Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
GSM_Wolli
Threadersteller

Dabei seit: 07.11.2004
Ort: -
Alter: 28
Geschlecht: Männlich
Verfasst Fr 26.11.2004 23:41
Titel

Antworten mit Zitat Zum Seitenanfang

Vielen Dank für diese Antworten.

Aber mit momentan habe ich es ja schon mit Javascript. Aber ich dachte vll. gibt es eine möglichkeit über css. Scheint ja nicht so der fall zu sein! Trotzdem Danke!

Gruß Wolli
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
graphicsandunity

Dabei seit: 22.11.2004
Ort: Berlin
Alter: 33
Geschlecht: Männlich
Verfasst Sa 27.11.2004 02:22
Titel

Antworten mit Zitat Zum Seitenanfang

GSM_Wolli hat geschrieben:
...momentan habe ich es ja schon mit Javascript. Aber ich dachte vll. gibt es eine möglichkeit über css. Scheint ja nicht so der fall zu sein! ...


Vielleicht gibt es ja auch eine Möglichkeit es mit CSS zu machen.
Nur weil mir keine eingefallen ist, muss es ja nicht bedeuten, dass es keine Lösung mit CSS dafür gibt.

Eventuell unterliegt ein Lösungsweg auch nicht meinem derzeitigen Kenntnisstand.
Falls du doch auf eine Lösung stoßen solltest, wäre ich sehr erfreut, davon zu erfahren. Lächel

Immer am Ball bleiben! *zwinker*

GaU
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Sa 27.11.2004 02:39
Titel

Antworten mit Zitat Zum Seitenanfang

such mal bei google nach css navigation matrix.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
joESmither

Dabei seit: 09.05.2003
Ort: berlin
Alter: -
Geschlecht: Männlich
Verfasst Sa 27.11.2004 10:29
Titel

Antworten mit Zitat Zum Seitenanfang

http://wellstyled.com/css-nopreload-rollovers.html

da hast du das konventionelle beispiel mit css (die backgrounds werden getauscht) und das beispiel eines css-rollovers für das keine grafiken preloaded werden müssen, da man pro rollover nicht zwei oder drei grafiken sondern nur eine nutzt die man per "background-position:" verschiebt.
  View user's profile Private Nachricht senden
lechuza

Dabei seit: 23.09.2003
Ort: Hamburg
Alter: 37
Geschlecht: Männlich
Verfasst Sa 27.11.2004 11:23
Titel

Antworten mit Zitat Zum Seitenanfang

und das soll in jedem browser pixelgenau funktionieren!?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Navigation mit Bild-Over-Effekt in Dreamweaver CS6
CSS Mouse over
css > roll-over > bei bilder ..
css menue problem -> mouse over
Textinfo bei „Mouse over“ bei einem verlinken Bild anzeigen
[CSS] Probleme mit CSS-Navigation und Rolloverbildern
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Tipps & Tricks für Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.