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.
Regeln und nützliche Hinweise
Lexi Help
Die neuesten Themen
» kleine Hilfe Hintergrund
von inde Heute um 12:44

» [phpBB2] "Ihre Sitzung ist abgelaufen".
von inde Heute um 11:58

» [ModernBB] Avatar - Profil auf die linke Seite
von deafgopro Gestern um 21:52

» Benachrichtigungen
von inde Gestern um 18:59

» [ModernBB] Profil Informationen im Forum - Farbe nicht veränderbar
von inde Gestern um 15:54

» [#9712] Gründerwechsel nach Inaktivität des Gründers
von Bigtuber Gestern um 14:09

» Sailor Moon Forum SMF
von Rika So 23 Apr 2017 - 12:09

» Natur und Wildlife Forum
von Stephan68 Sa 22 Apr 2017 - 19:44

» Gründerwechsel nach Inaktivität des Gründers
von Checvx Sa 22 Apr 2017 - 1:25

» Update der Facebook-Verbindung
von inde Fr 21 Apr 2017 - 18:07

» SPAM
von inde Fr 21 Apr 2017 - 17:53

» [phpBB2] Style zerschießt sich
von Bigtuber Fr 21 Apr 2017 - 1:56

» [Invision] Neues Thema - Antworten verschieben
von inde Do 20 Apr 2017 - 21:05

» Möglichkeit Umfragen anonym/offen bei der Erstellung einzustellen
von LillNalle Mi 19 Apr 2017 - 17:01

» [#9632] Registrierung funktioniert nicht
von inde Di 18 Apr 2017 - 18:58

» [phpBB2] Indexmodul verschiebt Foren?
von inde Di 18 Apr 2017 - 15:45

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