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
Lexi Help
Schnelle
Hilfe
Klicke Hier
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