Das Forum der Foren
Willkommen im offiziellen Supportforum von Forumieren!

Um alle Vorteile unseres Forums zu nutzen, melden Sie sich bitte an. Wenn Sie bereits Mitglied sind loggen Sie sich ein.


Erstellen Sie ein kostenloses Forum wie dieses hier.
Forenaustausch

Alle Anzeigen ansehen

Regeln und nützliche Hinweise
Lexi Help
Die neuesten Themen
» [phpBB2] Beitragsoptionen nicht sichtbar
von inde Gestern um 20:14

» [phpBB3] Als Admin den Avatar ändern
von inde Gestern um 14:33

» [#10397][phpBB3] Verschobene Werbung auf allen Seiten
von Bigtuber Do 20 Jul 2017 - 18:41

» Letzter Besuch nie
von Simo Mi 19 Jul 2017 - 17:00

» [ModernBB] Portal und Forum eine Seite
von Emily Stein Di 18 Jul 2017 - 22:40

» [phpBB2] Tooltip auf Avatar klappt nicht ganz
von Sei3009 Di 18 Jul 2017 - 18:26

» [#10378] Guthaben mit Paypal bezahlt und nach 2 Tagen nicht in der Guthabenverw
von inde Mo 17 Jul 2017 - 17:13

» kann nicht einloggen-möchte Forum löschen
von inde Sa 15 Jul 2017 - 18:54

» Missbrauchsmeldung
von inde Sa 15 Jul 2017 - 18:02

» Naruto - Shinobi no Monogatari
von Shiga Sa 15 Jul 2017 - 1:57

» Gleiche Avatare automatisch verbieten [phpBB3] 
von inde Sa 15 Jul 2017 - 0:29

» Account bei http://hilfe.forumieren.com löschen
von inde Fr 14 Jul 2017 - 22:42

» [phpBB2] Texteingabefeld Chatbox vergrößern
von inde Fr 14 Jul 2017 - 16:08

» [phpBB2] Benachrichtigung in der Toolbar funktioniert nicht
von inde Fr 14 Jul 2017 - 14:21

» Pokémon Competitive Forum
von Primory Fr 14 Jul 2017 - 10:49

» Smiley-Maximum?
von Emily Stein Fr 14 Jul 2017 - 10:41

www.forumieren.de

[CSS] Navibar jeden button einzeln hovern.

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

[CSS] Navibar jeden button einzeln hovern.

Beitrag von steive am Mo 11 Jan 2010 - 13:02

hoi.. ich bins mal wieder^^
ich war mit einen user hier aus dem forum (terra-outlaw) im meinen chat um ihm ein bissel bei seinen forum zu helfen und ihm ein paar fragen zubeantworten, da war ich bei ihm im forum und habe mir das css angeschaut da bin ich auf die idee gekommen das man die navi bar doch bestimmt einzeln hovern kann also machte ich mich (mit erkältung^^) an die arbeit.. und heute is es nun auch fertig geworden^^ Very Happy

also hier mal nen kleines tut wie man jeden button der navibar einzeln hover (bilderwegsel bei maus berührung) kann. ABER es ist nur möglich die standart buttons zu hovern und nicht die selber erstellten.. also das geht dann nich^^

so nun zum code und zum einbau^^

Code siehe unten!

ihr müsst nur noch ein paar große änderungen anstellen^^

ihr müsst die buttons aus der bilderverwaltung entfernen und diese dann im CSS nach diesem Muster einsetzen:

#i_icon_mini_gallery{
background-image:url(Hier die standard bilder der navi);
height:29px;
width:65px;
}

und dann die bilder die erscheinen sollen in:
#i_icon_mini_gallery:hover{
background-image:url(Hier die bilder die bei maus berührung wegseln solln);
height:29px;
width:65px;
}

und ihr müsst die höhe (height:29px;)
und die breite (width:65px;)
der bilder angeben wenn ihr die gleichen bilder nehmt also der hoberbild nicht größer oder kleiner ist dann nehmt ihr die gleiche größe...
am einfachsten geht das mit (soweit ich das testen konnte) http://abload.de/ (müsst ihr aber nich nehmen könnt ihr auch woanders hochladen^^) hier kann man ganz leicht gucken wie groß das bild ist:


damit sollte das ganze leichter gehen..^^

und ihr müsst dann die standard bilder die in der bilderverwaltung sind raus löschen und es dadurch: http://illiweb.com/fa/empty.gif ersetzen..

so ihr könnt euch das in meinen test forum nochmal genau angucken unter:
http://steive.forumieren.de

so nun noch der code und dann viel spaß beim einbauen..^^
sollte ich noch ein button vergessen haben bitte melden..

Code:
#i_icon_mini_gallery{
background-image:url(Standard bild-URL);
height:29px;
width:65px;
}
#i_icon_mini_gallery:hover{
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:65px;
}
#i_icon_mini_index{
background-image:url(Standard bild-URL);
height:29px;
width:110px;
}
#i_icon_mini_index:hover{
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:110px;
}
#i_icon_mini_portal {
background-image:url(Standard bild-URL);
height:29px;
width:110px;
}
#i_icon_mini_portal:hover {
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:110px;
}
#i_icon_mini_new_message {
background-image:url(Standard bild-URL);
height:29px;
width:93px;
}
#i_icon_mini_message:hover {
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:93px;
}
#i_icon_mini_message {
background-image:url(Standard bild-URL);
height:29px;
width:93px;
}
#i_icon_mini_register {
background-image:url(Standard bild-URL);
height:29px;
width:82px;
}
#i_icon_mini_register:hover {
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:82px;
}
#i_icon_mini_calendar{
background-image:url(Standard bild-URL);
height:29px;
width:110px;
}
#i_icon_mini_calendar:hover{
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:110px;
}
#i_icon_mini_members{
background-image:url(Standard bild-URL);
height:29px;
width:110px;
}
#i_icon_mini_members:hover{
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:110px;
}
#i_icon_mini_groups{
background-image:url(Standard bild-URL);
height:29px;
width:110px;
}
#i_icon_mini_groups:hover{
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:110px;
}
#i_icon_mini_faq{
background-image:url(Standard bild-URL);
height:29px;
width:62px;
}
#i_icon_mini_faq:hover{
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:62px;
}
#i_icon_mini_search{
background-image:url(Standard bild-URL);
height:29px;
width:70px;
}
#i_icon_mini_search:hover{
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:70px;
}
#i_icon_mini_profile {
background-image:url(Standard bild-URL);
height:29px;
width:62px;
}
#i_icon_mini_profile:hover {
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:62px;
}
#i_icon_mini_login:hover {
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:55px;
}
#i_icon_mini_login {
background-image:url(Standard bild-URL);
height:29px;
width:55px;
}
#i_icon_mini_logout {
background-image:url(Standard bild-URL);
height:29px;
width:61px;
}
#i_icon_mini_logout:hover {
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:61px;
}

liebe grüße.
steive

ps. wer schreibfehler findet darf sie behalten^^

Edit: firefox hat keine probleme mit der anzeige.
IE 8 hat leichte probleme..
avatar
steive
Kaiser
Kaiser

Männlich Beiträge : 1056
Hinweis : HTML, CSS, PHP
Anmeldedatum : 21.07.09
keine
phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten