Autor |
Nachricht |
-

modedesignerin
|
18.04.2011 um 08:55 (UTC) Titel: Hoverbutton verschieben? |
|
|
Hallo, mal wieder eine Frage.
Nachdem ich jetzt länger ein wenig rumprobiert habe will ich endlich eine vernünftige seite und beginne damit bei Null.
Nun ist meine Frage: Mein Button soll sich bei Hover ein Stückchen verschieben. Allerdings scheint nichts zu funktionieren! Hat jemand eine idee?
lg |
|
↑
|
|
 |
-

modedesignerin
|
18.04.2011 um 09:30 (UTC) Titel: |
|
|
Ich habs jetzt mal mit
Code: td#nav_Home a:hover, td#nav_News a:hover {color:#00007f; padding-left: 5px;}
probiert, aber dann verschiebt sich nur die schrift, ist zwar auch toll, ich will aber das die Button sich verschieben...
lg[/code] |
|
↑
|
|
 |
-

modedesignerin
|
04.05.2011 um 17:20 (UTC) Titel: |
|
|
Hallo?? |
|
↑
|
|
 |
|
04.05.2011 um 17:40 (UTC) Titel: |
|
|
du musst ein rahmen um die buttons direkt im code machen, damit kannst du den eindruck erwecken, dass sich der button verschiebt.
2E3839 ist die rahmenfarbe des hintergrundes, quasi wo die buttons drin liegen.
http://666kb.com/i/bt7b74npkge9yslbz.png ist dein button ohne rahmen.
Zitat:
td.nav{background-image: url(http://666kb.com/i/bt7b74npkge9yslbz.png);background-color:#XXXXXX;width:
185px;height: 33px;border-bottom: 1px solid #2E3839;border-top: 1px solid #2E3839; border-left: 1px solid #2E3839; border-right: 1px solid #2E3839; }
somit hättest du den button 4 verschiedene rahmen gegeben. wenn du nun mit dem maßen links und rechts spielst (hier wären es 1 pixel left und right) kannst du die rahmen an den stellen breiter machen und damit einen effekt erzielen, als ob der button wandert.
beim hoverbutton änderst du es dann dementsprechend.
wie gesagt, musst nur left und right anpassen.
gruss gringo ______________ Mein Youtube Kanal | Standard-Designs als Red Design ohne rechte Boxen | Tips zum Design Professionell
 |
|
↑
|
|
 |
-

modedesignerin
|
04.05.2011 um 17:42 (UTC) Titel: |
|
|
Danke für die Mühe! Hab schon was gefunden:
Code: td.nav:hover {
background-position: -19px -0px;
background-repeat: no-repeat;}
Danke nochmal
Ich hab aber noch ne Frage:
Kann ich es irgendwie machen dass der button von Zeichenschule eine Außnahme ist, weil es ja kein Link ist?
lg |
|
↑
|
|
 |
|
|
↑
|
|
 |
-

modedesignerin
|
04.05.2011 um 17:46 (UTC) Titel: |
|
|
ja ich meine dass es eine außnahme vom Hover ist, sonst denken die leute ja alle dass man es anklicken kann!  |
|
↑
|
|
 |
|
|
↑
|
|
 |
-

modedesignerin
|
05.05.2011 um 15:33 (UTC) Titel: |
|
|
Jaaaaaaaaaa, das weiß ich!
Es ist ja kein Link, es soll sich nur nicht wie die anderen Button beim hover verschieben!!  |
|
↑
|
|
 |
|
05.05.2011 um 16:30 (UTC) Titel: |
|
|
oops, mein fehler, dachte dann kommt kein hovereffekt.
schalte ihn aus, indem du auf der seite im quelltext den gleichen code für den hover schreibst wie den eigentlichen navicode:
Code: <style type="text/css">
<!--
td.nav:hover {background-image: url(http://img.webme.com/pic/m/modedesignerin/buttongrun.gif);}
-->
</style>
oder im designcode:
Code: td#nav_Zeichenschule:hover{background-image: url(http://img.webme.com/pic/m/modedesignerin/buttongrun.gif);}
Zuletzt bearbeitet von 6p-iceblue am 06.05.2011, 15:32, insgesamt 2-mal bearbeitet
|
|
↑
|
|
 |
-

modedesignerin
|
07.05.2011 um 16:13 (UTC) Titel: |
|
|
Vielen Dank
Mit dem Code hats nicht geklappt dafür aber:
Code: td#nav_Zeichenschule:hover{
background-position: 0px 0px;}
lg |
|
↑
|
|
 |
|