Antworten auf deine Fragen:
Neues Thema erstellen

a:hover Frage

Zaolat

Aktives Mitglied

Moin Moin,

ich habe eine Navibar in html als UL aufgebaut

<div class="navi">
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>

Diese wird mit CSS als horizontale Navigation dargestellt.

Nun möchte ich den Effekt mit CSS beim Hovern erzielen, dass beim rüberfahren mit der Maus, der jeweilige Punkt (also in dem Fall das Wort "test") einige Pixel nach oben fährt und darunter ein farblicher Rahmen erfolgt.

Bisher sieht mein CSS Code so aus:

.navi a:hover {
text-decoration: none;
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: #33CC62;
}

Jetzt habe ich schon verschiedenes probiert, doch bekomme ich es nicht hin, dass das Wort einige Pixel nach oben fährt. Gehe ich das falsch an, oder was übersehe ich hier?

Schöne Grüße aus dem Hohen Norden
 

A

ADcosmos

Guest

AW: a:hover Frage

Hi,

wie wäre es mit:
Code:
position: relative;
top: -10px;

MFG ADcosmos
 

patrick_l

Hat es drauf

AW: a:hover Frage

Wenn ich das richtig sehe, muss du auch im CSS die Liste ansprechen.
Code:
.navi ul li a:hover {
    border-bottom: 10px #33CC62 solid;
    margin-bottom: 5px; 
}

Grüße Patrick

Edit:
Hab nicht an Position gedacht :D
 

Mereel

Aktives Mitglied

AW: a:hover Frage

Du könntest zum Beispiel folgendes versuchen:

HTML:
a {
padding-top:10px;
}

a:hover {
padding-top:0; 
}
Bei hover wandert der text dann 10px nach oben und unten erschienen die 10px border.
Keine Ahnung, ob es vielleicht noch elegantere Lösungen gibt, aber das ist mir gerade so spontan dazu eingefallen.

Viele grüße,

Mereel

Edit: Da war ich ja eh zu langsam :p
 

Zaolat

Aktives Mitglied

AW: a:hover Frage

Danke Dir ADcosmos
Funktioniert.
Hatte beim testen vergessen die Position relativ zu setzten.
 

Myhar

Hat es drauf

AW: a:hover Frage

Erstens @derOtto: Er hat schon korrekt die a Tags in der Navigation angesprochen.

Zweitens: position:relative ist doch der Standardwert. Wieso setzt du deine Navigation überhaupt auf position:absolute? In 99% der Fälle, wo position:absolute eingesetzt wird, ist dies nicht notwendig. Vor allem bei einer horizontalen Navigation verwundert mich das doch ein wenig.
 

Zaolat

Aktives Mitglied

AW: a:hover Frage

Hy Myhar,

ich nutze DW und habe den wert Position bisher selten eingestellt. Demnach war dieser nicht definiert. Ist es in dem Fall denn immer so, dass die Position Absolute entspricht?
 

Myhar

Hat es drauf

AW: a:hover Frage

position:relative ist doch der Standardwert.

Soviel zu deiner Frage, ob absolute der Initialwert für position ist.
Wenn du mit Firebug oder einem anderen Webdeveloper Tool (abgesehen dem vom IE) das Element untersuchst, siehst du, welchen Wert das Element für position hat. Wenn hier absolut als Wert angezeigt wird, frage ich mich, wieso das der Fall ist.
 

Myhar

Hat es drauf

AW: a:hover Frage

Ja, da hast du Recht. Verzeihung, wenn ich jemanden verwirrt habe :)
Irgendwie war ich der Meinung, dass es anders wäre.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.477
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben