Navi - Buttons 2px nach Rechts verschieben?

[LastGen]

Hi,
ich habe gerade ein Problem. Ich will meine Navigationsleiste so aufbauen, dass sich beim Mouseover der entsprechende Button um 2px nach rechts verschiebt. Habe auch extra 2px breite Streifen angelegt...zudem soll beim Klicken auf den Button dieser die 2px Verschiebung beibehalten. Ich habe lediglich die Schriftfarbe verdunkelt.
Ich habe DreamWeaver, kenne mich damit aber nicht so gut aus, dass ich das blind machen könnte. Es ist das erste Mal, dass ich intensiv eine Homepage aufbauen will.
Könnte mir jemand erklären, wie sowas zu machen ist?

 

[stiller47]

AW: Navi - Buttons 2px nach Rechts verschieben?

Die Verschiebung ist mit CSS zu realisieren. Dazu schiebst du dein Menü in einen DIV-Container und weist diesem die Style-Veränderungen mit CSS zu.

Das könnte dann in etwa so aussehen:

#menu a{
padding-left: 0px;
}

#menu a:hover{
padding-left:2px;
}

#menu a:visited{
padding-left: 2px;
}

 

[lonelyhawk]

AW: Navi - Buttons 2px nach Rechts verschieben?

Die Verschiebung ist mit CSS zu realisieren. Dazu schiebst du dein Menü in einen DIV-Container und weist diesem die Style-Veränderungen mit CSS zu.

Das könnte dann in etwa so aussehen: ...

alternativ kannst du den div container auch weg lassen und die links im menü mit einer css-klasse versehen, die du dann per css definierst... klingt vielleicht kompliziert ist es aber nicht

<!-- class="name der klasse" - einfach so in den link einfügen -->
<a href="zieldatei.htm" class="mein_menue">menüpunkt</a>

im css dann:

a.mein_menue {
margin-left: 0px;
}

a:hover.mein_menue {
margin-left:2px;
}

usw....

 

[sokie]

AW: Navi - Buttons 2px nach Rechts verschieben?

mit dem padding kommt man nicht weit, wenn es um3 Zustände geht. Wenn ich den Eingangspost richtig verstanden habe, sollte der button normal an seiner Position sein, beim berühren mit der Maus 2 px nach rechst versetzen, und beim klick gegen eine Grafik mit dunklerer Schrift ersetzt werden ?!

 

[LastGen]

AW: Navi - Buttons 2px nach Rechts verschieben?

@ Sokie: genau so!

Beim Klick soll der Button weiterhin um 2px nach rechts vom Ursprung aus liegen. Also soll der Unterschied zwischen normal und mouseover die 2px Verschiebung sein und zwischen mouseover und klick die dunkle Schrift. Position bleibt beim Klick so wie beim mouseover

 

[sokie]

AW: Navi - Buttons 2px nach Rechts verschieben?

dann muss du (wenn du mit dem Buttontext als grafik arbeiten willst und das per css realisieren willst, das jeweilige Bild als Hintergrund nehmen und es entsprechend positionieren.
in etwas so für die unterschiedlichen zustände:

a.meinClassName{
  background: url(mein/button.png -2px 0 no-repeat;
  height: 20px;
  width: 20px;
}
a.meinClassName:hover{
  background: url(mein/button.png 0 0 no-repeat;
}
a.meinClassName:active{
  background: url(mein/darktextbutton.png 0 0 no-repeat;
}
a span{
display: none;
}

<a class="meinClassName"><span>buttontext</span></a>

wenn es irgend möglich ist, würde ich die Buttontexte aber nicht auf den Button(grafisch) setzen, sondern eher als html text. das ist zum einen besser zu administrieren, zum anderen brauchst du nur eine einzige buttongrafik.