[CSS] a:hover - Navigation verschieben - HTML, AJAX & Co

[CSS] a:hover - Navigation verschieben

Dear visitor, welcome to Coder Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Pfeilei

Beginner

Posts: 5

Saturday, January 15th 2011, 3:03pm

[CSS] a:hover - Navigation verschieben

Guten Tag Community,

momentan arbeite ich an einer Website für meine Mutter.
Ich habe soeben die Navigation erstellt, jedoch bin ich ein Anfänger im Bereich Websiten-Erstellen, weshalb ich mich hier registriert habe.

In der Navigation habe ich Grafiken/Buttons eingefügt. Nun möchte ich, wenn man über einen Button mit der Maus drüberfährt, dass dieser Button dann etwa um 5px nach oben springt.
Dass er sich sozusagen nach oben verschiebt.

Über eine Hilfe würde ich mich sehr freuen.

Mfg
Pfeilei

/Edit: Sry für diese Störung, ich habe es ausversehen ins falsche Forum gepostet. Ich habe am im Untertitel von diesem Forum: "HTML, AJAX & Co (4)" das CSS überlesen, weshalb es hier gelandet ist.
Entschuldigung, dass ich euch so früh eine Arbeit einräume

Torben Brodt

Administrator

Posts: 8,454

Saturday, January 15th 2011, 4:36pm

Ich habe das Thema verschoben. Kein Problem!

Zu deinem CSS Problem. Probiere es mal mit der CSS Eigenschaft: margin-top:-5px

Lg

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Pfeilei

Beginner

Posts: 5

Saturday, January 15th 2011, 6:04pm

Quoted from "d0nut"

Ich habe das Thema verschoben. Kein Problem!

Zu deinem CSS Problem. Probiere es mal mit der CSS Eigenschaft: margin-top:-5px

Lg

Danke für diese Antwort. Doch anscheinend war dies nicht die richtige Lösung.

Hätte noch jemand eine Idee?

Torben Brodt

Administrator

Posts: 8,454

Saturday, January 15th 2011, 6:13pm

Hm.. "doch" es verschiebt das Element definitiv nach oben.
Beschreibe nochmal konkreter was du erreichen willst.
Jetzt wo ich mir ein Beispiel gebastelt habe, macht es vermutlich Sinn, dass die anderen Elemente sich nicht mitbewegen? Oder liege ich ganz falsch?

Cascading Style Sheets

.nav li {
    padding:10px;
}
.nav li a {
    display:block;
    border:1px solid grey;
    width:130px;
}
.nav li a:hover {
    margin-top:-5px;
    color:red;
}

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Pfeilei

Beginner

Posts: 5

Sunday, January 16th 2011, 11:38am

Ich schreibe dir eine PM mit der Internetseite und dem Quellcode.
Da ich die Seite nicht veröffentlichen will.

Torben Brodt

Administrator

Posts: 8,454

Sunday, January 16th 2011, 3:41pm

sorry, kein PM Support.

Die Unterschiede sind u.a., dass dein Element kein Blockelement ist. Außerdem solltest du die Regel nicht auf alle Links anwenden.

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Pfeilei

Beginner

Posts: 5

Sunday, January 16th 2011, 8:41pm

Quoted from "d0nut"

sorry, kein PM Support.

Die Unterschiede sind u.a., dass dein Element kein Blockelement ist. Außerdem solltest du die Regel nicht auf alle Links anwenden.

Würdest du mir bitte einen richtigen Quellcode posten?

Torben Brodt

Administrator

Posts: 8,454

Monday, January 17th 2011, 8:12am

Offensichtlich klappt es auf deiner Webseite nun. Mein Code oben ist ja vollständig.

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

n0x-f0x

Trainee

Posts: 50

Monday, January 17th 2011, 10:19am

würde auch noch margin-bottom:5px in den hover einfügen, damit nicht die gesamte navi springt

Pfeilei

Beginner

Posts: 5

Monday, January 17th 2011, 1:29pm

Jap, Dankeschön d0nut

, auf meine Seite springt die Navigation nun.
Ich habe aber jetzt ein anderes Problem

.

Ich will die Navigation mit
z.b.
left: 100px;
top: 100px;
verschieben.
Jedoch weiß ich nicht wo ich das einfügen soll ich hab schon viele Möglichkeiten versucht, bekomme es aber nicht hin.

Zum Code: Ich habe den obigen Code von d0nut drin.

Habs rausgefunden

In ICQ hats mir einer gesagt.

Ich musste "padding-left:" statt nur "left" verwenden.
Trozdem Dankee

This post has been edited 1 times, last edit by "Pfeilei" (Jan 17th 2011, 1:43pm)