 Menü so machen? |
Kimi.
Freak <3
Dabei seit: 05.07.2005
Beiträge: 7.811
Herkunft: Hannover
Name: Kim
 |
|
Hallöchen Leute 
Ich bin auch mal wieder am Bearbeiten meiner Homepage und will nun mal bisschen was schickeres haben 
Da bin ich auf diese Seite heir gestoßen:
http://www.visiblemiles.de
Ich würde mein menü auch gern in so einem Effekt haben
Weiß jemand von euch wie das zu schaffen ist
?
__________________
hinfallen . aufstehen . krone richten . weitergehen
|
|
25.08.2010 15:14 |
|
|
Golden Hope
Mitglied
Dabei seit: 08.02.2008
Beiträge: 2.374
|
|
Das sind 2 verschiedene Bilder, die sich beim berühren der maus einfach ersetzen. Dafür gibt es einen einfachen Javaskript. mal schauen ob cih den Code finde..
__________________
|
|
|
25.08.2010 15:25 |
|
|
Kimi.
Freak <3
Dabei seit: 05.07.2005
Beiträge: 7.811
Herkunft: Hannover
Name: Kim
Themenstarter 
|
|
Na das ging ja fix
Super dankeschön na dann werd ich das doch gleich mal ausprobiern
__________________
hinfallen . aufstehen . krone richten . weitergehen
|
|
|
25.08.2010 15:31 |
|
|
Kimi.
Freak <3
Dabei seit: 05.07.2005
Beiträge: 7.811
Herkunft: Hannover
Name: Kim
Themenstarter
|
|
Kann das sein das es im Internet Explorer nicht geht ? :s
__________________
hinfallen . aufstehen . krone richten . weitergehen
|
|
|
01.09.2010 13:04 |
|
|
Julia712
Mitglied
Dabei seit: 28.11.2006
Beiträge: 2.262
|
|
|
|
01.09.2010 13:51 |
|
|
Oli
Server-Administrator
Dabei seit: 13.06.2010
Beiträge: 1.540
|
|
| Zitat: |
Original von Medic Droid
Bau einfach eine Grafik, die "zweigeteilt ist" und lass beim hovern die Grafik um die jeweiligen Pixel nach oben "rutschen". Funktioniert per CSS. |
Das ist übrigens eine der besten Lösungen, da die Hover-Grafik in diesem Fall nicht erst beim Hovern geladen wird, was zu Verzögerungen führen könnte
Es empfiehlt sich jedoch das ansprechen mit da im Internet Explorer 6 noch nicht funktionierte.
LG
|
|
|
01.09.2010 14:46 |
|
|
Kimi.
Freak <3
Dabei seit: 05.07.2005
Beiträge: 7.811
Herkunft: Hannover
Name: Kim
Themenstarter
|
|
Okay danke. Und wie mach ich das das ich
für EINE bestimmte Grafik mache und die nächste dann auch wieder ? :x Bin da bisls überfragt.
__________________
hinfallen . aufstehen . krone richten . weitergehen
|
|
|
01.09.2010 15:43 |
|
|
Oli
Server-Administrator
Dabei seit: 13.06.2010
Beiträge: 1.540
|
|
| Zitat: |
Original von Blondi91
Okay danke. Und wie mach ich das das ich
für EINE bestimmte Grafik mache und die nächste dann auch wieder ? :x Bin da bisls überfragt. |
Meine hellseherischen Fähigkeiten sind gerade im Urlaub... Gibts dazu nen Link oder Code?
Gerenell betrachtet spricht "a:hover img" jedes Bild innerhalb eines <a> an.
Man könnte das z.B. so lösen:
Button hat eine Höhe von 20px (kann im Code natürlich angepasst werden).
Die entsprechende Grafik dazu hat beide Buttons direkt untereinander und damit das Doppelte - 40px.
Im CSS:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
|
#navi {
height: 20px;
padding: 0px;
overflow: hidden;
}
#navi a img {
height: 40px;
}
#navi a:hover img {
position: relative;
bottom: 20px;
} |
|
und im HTML:
| code: |
1:
2:
3:
4:
|
<div id="navi">
<a href="linkziel.html"><img src="buttongrafik.jpg"></a>
...
</div> |
|
Bei "normaler" Darstellung sieht man nun die oberen 20px, liegt die Maus drauf (hover) die unteren 20px der Grafik. Code ungetestet, aber sollte eigentlich funktionieren.
LG
|
|
|
01.09.2010 16:52 |
|
|
Kimi.
Freak <3
Dabei seit: 05.07.2005
Beiträge: 7.811
Herkunft: Hannover
Name: Kim
Themenstarter
|
|
Okay, soweit ganz gut verstanden. Aber... wie kann er die
| code: |
1:
2:
3:
4:
5:
|
#navi a:hover img {
position: relative;
bottom: 20px;
} |
|
auslesen im Link ? :x
__________________
hinfallen . aufstehen . krone richten . weitergehen
|
|
|
01.09.2010 19:10 |
|
|
Kimi.
Freak <3
Dabei seit: 05.07.2005
Beiträge: 7.811
Herkunft: Hannover
Name: Kim
Themenstarter
|
|
Also ....
ich hab in meinem style.css dies eingegeben:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
|
#navi {
height: 20px;
padding: 0px;
overflow: hidden;
}
#navi a img {
height: 40px;
}
#navi a:hover img {
position: relative;
bottom: 20px;
}
|
|
So und in meinem menue.html dies:
| code: |
1:
2:
3:
4:
5:
|
<div id="navi">
<a href="Startseite.html" target="main"><img src="Menue/Startseite.png" border="0"></a>
</div>
|
|
Aber wenn ich es dann hochlad mir die Seite anschauen will kommt kein hovereffekt wie gewünscht sondern es bleibt einfach die normale Grafik dort.
Deswegen war meine Frage ja ob ich noch IRGENDWO die Grafik für den Hovereffekt angeben muss
hoffe du versteht mich nun 
__________________
hinfallen . aufstehen . krone richten . weitergehen
|
|
|
01.09.2010 19:44 |
|
|
Oli
Server-Administrator
Dabei seit: 13.06.2010
Beiträge: 1.540
|
|
Musst du nicht, aber ich vermute da passt irgendwas anderes nicht. Poste doch bitte endlich mal entweder den ganzen Code oder (noch besser) einen Link zur Seite
.
|
|
|
01.09.2010 19:57 |
|
|
Kimi.
Freak <3
Dabei seit: 05.07.2005
Beiträge: 7.811
Herkunft: Hannover
Name: Kim
Themenstarter
|
|
PN
hoffe du kannst mir weiter helfen :s
__________________
hinfallen . aufstehen . krone richten . weitergehen
|
|
|
01.09.2010 20:07 |
|
|
Oli
Server-Administrator
Dabei seit: 13.06.2010
Beiträge: 1.540
|
|
Das Problem ist ganz einfach, dass du Frames verwendest.
Du musst das CSS natürlich im Frame der Navigation haben und nicht auf deiner Design-Seite, da CSS nicht Frameübergreifend wirkt.
Außerdem ist die Grafik nicht korrekt, du brauchst eine Grafik wie folgt:
| code: |
1:
2:
3:
4:
5:
|
,-------------------------,
| Button Normal, 20px |
`-------------------------´
| Button Hover, 20px |
`-------------------------´ |
|
Das ganze ist also eine Grafik, die beide Buttons untereinander beinhaltet.
|
|
|
01.09.2010 20:16 |
|
|
Kimi.
Freak <3
Dabei seit: 05.07.2005
Beiträge: 7.811
Herkunft: Hannover
Name: Kim
Themenstarter
|
|
Man jetzt tut sich wenigstens schonmal was auf der Seite x'D Gott bin ich doof :'D
Okay. das hab ich also schonmal hinbekomm x'D
Aber !! der Hover Effekt ist immernoch nciht da. und die Button Normal wie Hover sind alle 90x33 px groß. Oo
__________________
hinfallen . aufstehen . krone richten . weitergehen
|
|
|
01.09.2010 20:22 |
|
|
Oli
Server-Administrator
Dabei seit: 13.06.2010
Beiträge: 1.540
|
|
| Zitat: |
Original von Blondi91
Aber !! der Hover Effekt ist immernoch nciht da. und die Button Normal wie Hover sind alle 90x33 px groß. Oo |
Nunja, dann das selbe mit 33px
.
Außerdem sehe ich, du hast den Code modifiziert - das wird so aber nicht funktionieren. Ich schreib dir mal Kommentare dazu:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
|
#navi {
height: 33px; /* Buttongröße */
padding: 0px;
overflow: hidden;
}
#navi a img {
height: 66px; /* Grafikgröße, da Grafik 2 Buttons beinhaltet, doppelte Buttongröße */
}
#navi a:hover img {
position: relative;
bottom: 33px; /* Hier Buttongröße beibehalten, das ist die Verschiebung um die Hälfte... */
} |
|
Und die Grafik, wie gesagt, nach dem Prinzip von Oben.
Normal: Die obere Hälfte wird gezeigt.
Hover: Die untere Hälfte wird gezeigt.
|
|
|
01.09.2010 20:32 |
|
|
Kimi.
Freak <3
Dabei seit: 05.07.2005
Beiträge: 7.811
Herkunft: Hannover
Name: Kim
Themenstarter
|
|
Sag doch einfach das man eine Grafik braucht in "einem" wo der hovereffekt der untere Teil der Grafik ist mensch x'D
Mal sehen ob ich das nachher hinbekomme. Dankeschön schonmal. Ansonsten melde ich mich nochmal wenn ich mal wieder net zurechtkomm ._______. typisch kimi kriegt nix allein auf die reihe xD
__________________
hinfallen . aufstehen . krone richten . weitergehen
|
|
|
01.09.2010 20:37 |
|
|
kext 
»Ich bin ein HAL 9000 Supercomputer.«
Dabei seit: 28.11.2008
Beiträge: 119
Herkunft: Planet Erde
|
|
Hier ist eine Methode, die auch der Semantik deines Dokuments gerecht wird.
Style:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
|
#navi a
{
overflow: hidden;
height: 0px;
width: 90px;
padding: 33px 0 0 0;
background-position: 0px 0px;
display: block;
float: left;
}
#navi a:hover
{
background-position: -33px 0px;
} |
|
Und so bindest du dann deine Links ein:
| code: |
1:
|
<a href="#" style="background-image: url('deinbuttonbild.png');">Klick mich!</a> |
|
„Klick mich!“ ist hier im Link nicht zu sehen, aber so verrätst du auch Google und anderen Suchmaschinen (oder auch Blinden mit Screenreadern oder Braille-Zeilen) was auf dem Button steht.
__________________
|
|
|
01.09.2010 21:09 |
|
|
|
Impressum
|
