Hover-Effekt und horizontale Ausrichtung (CSS)

VHS

Hey,

ich versuche derzeit einige Links, die via CSS mit einem Hover-Effekt unterlegt sind, ganz einfach auf eine horizontale Linie zu kriegen, aber es will nicht klappen.

Online gibt es die Seite hier: http://whackslack.wh.funpic.de/wordpress/ (s. Navi.)

Der entsprechende Teil im Header sieht einfach so aus:

Code

<a href="x" class="nav-work" ></a>...
<a href="x" class="nav-about"></a>
<a href="x" class="nav-contact"></a>

Der entsprechende Teil in der externen CSS-File so:

Code

.nav-work {width: 102px; height: 50px; display: block; margin: 0 auto; background-image: url(images/nav-work.jpg);}
.nav-work:hover {background-position: 0 -50px;}


.nav-about {width: 110px; height: 50px; display: block; margin: 0 auto; background-image: url(images/nav-about.jpg);} 
.nav-about:hover {background-position: 0 -50px;}


.nav-contact {width: 148px; height: 50px; display: block; margin: 0 auto; background-image: url(images/nav-contact.jpg);}
.nav-contact:hover {background-position: 0 -50px;}

Grundsätzlich verstehe ich schon nicht, weshalb die Links nicht EINFACH SO in Reihe angezeigt werden, Platz genug wäre ja da. "Float:left;" hilft auch nicht.

Ich hatte das ganze auch schon als Liste probiert - mit demselben Ergebnis. Außerdem schien mir der "display:inline;"-DIV-Tag der Liste mit dem "display:block;"-CLASS-Tag der Bilder zu kollidieren?!

Help!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

bgeissler

Setze die Menüpunkte in eine Liste und formatier die Listpunkte

Beispiel-Code:

Zitat

#navcontainer li {
display: inline;
float:right;
padding:0px;
width: 86px;
}

VHS

Mh, Ergebnis siehe http://whackslack.wh.funpic.de/wordpress/. Bei "float:right;" dieses Ergebnis, bei "float:left;" haut er sie mir an die rechte Seite. Eigentlich müsste doch der header-Befehl ziehen:

Code

#header {width: 640px; height: auto; text-align: center; border: 5px solid #ccc;}

also der Text zentral ausgerichtet. Jetzt sind Links natürlich kein Text?! Aber "#header a / nav li / nav li a {text-align: center;}" funzt auch nicht. Äh, was tun...?

Domino5702

Bisschen was tun musste schon noch

Code

/* Theme Name: Tutorial Theme URI: x Description: x Author: x Author URI: http://www.xxx.com */    body {color: #000; background: #fff; border: 5px solid #ccc;}  #wrapper {width: 640px; margin: auto; text-align: left; background: #fff; 5px solid #ccc;}  #header {width: 640px; height: auto; text-align: center; border: 5px solid #ccc;} #header a img {border : 0;}  #main {width: 640px; float: left; border: 5px solid #ccc;}  #sidebar {width: 0px; float: left;}  #footer {clear: both; height: 100px;}  #nav {border: 5px solid #ccc; text-align:center;} #nav li {list-style-type: none; list-style-image: none;display: inline; float:right;}  .nav-work {width: 102px; height: 50px; display: block; margin: 0 auto; background-image: url(images/nav-work.jpg);} .nav-work:hover {background-position: 0 -50px;}  .nav-about {width: 110px; height: 50px; display: block; margin: 0 auto; background-image: url(images/nav-about.jpg);}  .nav-about:hover {background-position: 0 -50px;}  .nav-contact {width: 148px; height: 50px; display: block; margin: 0 auto; background-image: url(images/nav-contact.jpg);} .nav-contact:hover {background-position: 0 -50px;}

Laut Quellcode ist das Dein Stylesheet - da ist vom Menü noch nicht viel vorhanden, würde ich sagen.

Was es braucht, kannste zB hier recht anschaulich nachlesen.

formateins

Grundsätzlich ist fehlen noch zu viele Dinge. Bspw. hast Du den UL-Tag nicht formatiert, den float packt man auf das a, uvm.

Ich hab mal fix ein paar Sachen umgestellt - siehe Screenshot. Weiß aber nicht, wie Du das haben willst. Such Dir eine Seite im Netz, die Deinen Vorstellungen entspricht und studiere den Quellcode. :)

[ATTACH=CONFIG]5793[/ATTACH]

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Hover-Effekt und horizontale Ausrichtung (CSS)

Jetzt mitmachen!