YourWBB


yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » Mouse Over mit CSS, wie ? » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag 3.285 Views | | Thema zu Favoriten hinzufügen

Neues Thema erstellen Antwort erstellen
Zum Ende der Seite springen Mouse Over mit CSS, wie ?
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
DeGoly
Mitglied


Dabei seit: 16.05.07
Beiträge: 235
 Mouse Over mit CSS, wie ? Antworten Zitieren Editieren Melden       UP
Hi,

ich möchte in meiner Navigation Mouse Over verwenden, der wie folgt klappen soll.

Ich habe das Image "start.png" und "startH.png".

Nun soll beim drüberfahren ein anderes Images kommen, logisch.

Aber weiterhin habe ich das Image "news.png" und "newsH.png".

Das heißt, dass ich für jedes Image ne andere Class anlegen muss, aber wie lautet dann der Code zum einbinden ?

LG
03.12.07 16:59 DeGoly ist offline E-Mail Finden Als Freund hinzufügen
Dizzy.w3 Dizzy.w3 ist männlich
Brain Damage


images/avatars/avatar-5617.jpg

Dabei seit: 18.07.07
Beiträge: 1.431
Herkunft: Österreich
Forenversion: 3.0
Antworten Zitieren Editieren Melden       UP
Hi,

also, ich halte das nicht für sonderlich sinnvoll. Erzeugt eine ordentliche Redundanz, und der CSS-Vorteil wird nicht effizient genutzt. (Bei deinem Vorschlag - jedem eine eigene Klasse zuzuweisen - sollte man zudem eher IDs nehmen, die sind für solche Zwecke gedacht.

Optimaler wäre es eine background.png und eine backgroundHover.png zu haben, und der jeweilige Text wird als Text niedergeschrieben. Das wäre beispielsweise so lösbar:

code: 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:

.topNaviElement
{
	background: url(images/background.png);
	display: inline;
	padding-left: 3px;
	padding-right: 3px;
}

.topNaviElement:hover
{
	background: url(images/backgroundHover.png);
	display: inline;
}
und in deinem HTML-Dokument (wo die CSS-Deklarierungen inkludiert sein müssen(!)) kann das zB so aussehen:
code: 
1:
2:
3:
4:
5:

<ul style="display: inline;">
	<li class="topNaviElement">asdf</li>
	<li class="topNaviElement">asdf</li>
	<li class="topNaviElement">asdf</li>
</ul>


Sieht am Ende dann so aus, dass deine Elemente in einer Reihe stehen, mit einem Abstand insgesamt 6px zu nächsten Element.

Gruß
Dizzy

__________________
Gruß Dizzy

the rest is silence
03.12.07 18:40 Dizzy.w3 ist offline E-Mail Finden Als Freund hinzufügen Füge Dizzy.w3 in deine Kontaktliste ein MSN Passport-Profil von Dizzy.w3 anzeigen
DeGoly
Mitglied


Dabei seit: 16.05.07
Beiträge: 235

Themenstarter Thema begonnen von DeGoly
Antworten Zitieren Editieren Melden       UP
Hi,

ja id´s meinte ich, bin noch net so bewandert mit CSS.

Ich möchte es ja mit Images haben. Augenzwinkern
Das würde heißen, dass jede class (?) 2 Images hat.

Ist eh nur meine private Page, da ist das net so schlimm. großes Grinsen

Danke
03.12.07 18:51 DeGoly ist offline E-Mail Finden Als Freund hinzufügen
Dizzy.w3 Dizzy.w3 ist männlich
Brain Damage


images/avatars/avatar-5617.jpg

Dabei seit: 18.07.07
Beiträge: 1.431
Herkunft: Österreich
Forenversion: 3.0
Antworten Zitieren Editieren Melden       UP
IDs sind für eine eindeutige und meist einmalige Zuweisung gedacht. Klassen hingegen für einen allgemeinen und häufigeren Gebrauch.

Schau mal hier vorbei: http://www.drweb.de/csstechnik/css_id_class.shtml

__________________
Gruß Dizzy

the rest is silence
03.12.07 18:57 Dizzy.w3 ist offline E-Mail Finden Als Freund hinzufügen Füge Dizzy.w3 in deine Kontaktliste ein MSN Passport-Profil von Dizzy.w3 anzeigen
Maverick38
unregistriert
Antworten Zitieren Editieren Melden       UP
Das würde ich nicht mit Css machen, mach das mit Jvascript bzw. Java, das ist leichter und da gibt es einen festen Code!
30.12.07 20:22
Häfner Häfner ist männlich
Sarkast³


images/avatars/avatar-5612.gif

Dabei seit: 24.07.04
Beiträge: 1.047
Fähigkeiten: WBB2 Fortgeschritten
Herkunft: Gelnhausen, DE.
Forenversion: 2.3
Antworten Zitieren Editieren Melden       UP
Allerdings muss JS ewig vorladen.
Würde CSS empfehlen - ist schneller und einfacher!

__________________
Ich geb mir nochn Becks auf die Milch von meinen Kelloggs Smacks.
Ja, meine Festplatte hat den Laufwerksbuchstaben W!
24.07.2004 - 24.07.2009 = 5 Jahre y******
30.12.07 20:34 Häfner ist offline E-Mail WWW Finden Als Freund hinzufügen Füge Häfner in deine Kontaktliste ein
ayaz47
Mitglied


Dabei seit: 12.01.08
Beiträge: 16
Forenversion: 2.3
Antworten Zitieren Editieren Melden       UP
thanks you
13.01.08 11:38 ayaz47 ist offline Finden Als Freund hinzufügen
Baumstruktur | Brettstruktur
Gehe zu:

Neues Thema erstellen Antwort erstellen
yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » Mouse Over mit CSS, wie ?