Frage von FlugzeugAUT, 13

Folgenschweres Problem mit horizontaler Navigation?

Ich habe einfach keine Lust mehr ._.

Ich wollte einfach eine horizontale Navigation haben, wo man verschiedene Elemente anlicken kann und bin auch mehrmals diesem Ziel ganz nahe gekommen.

Heute, nach insgesamt 5 Stunden Arbeit und einer Antwort von hier dann die Lösung in Reichweite.. Mit JQuery gut...

Zuerst einmal habe ich es so probiert das Problem zu lösen, wobei das Programm nicht erkennt, oder erkennen will, dass es eine Navigationsleiste ist und daher Objekte, die eigentlich ein normaler Text sein sollen quasi gleich mit der Navigationsliste gestuft werden (aus diesem Grund kann man auch kein margin an einem body div Element anwenden, und es muss dieses Element ganz am Boden gesetzt werden, damit es höher gestuft wird....

Gut, als hätte ich mich nicht schon genug geärgert, Nummer zwei des heutigen Tages.. diesmal mit Navigationsleiste gearbeitet, damit es höher gestuft wird alles super... Dann habe ich hinuntergescrollt und auf das Element geklickt.. Geil wird auf dem früheren Platz angezeigt, bzw bleibt (nein geht nicht mit relative etc.), anstatt dass das aufklappbare Menü wie beim vorigen Modell dableibt, wo es ist.. Hier der Link (leider in einem) dazu:

http://pastebin.com/1fqrgYHt Ich wäre so dankbar, wenn mir wer helfen könnte, ich bin zeitlich und nervlich einfach nur am Ende... Danke schonmal im Voraus..

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von abbrechen, 11

Wenn ich deine Frage so durchlese und mir dein html anschaue, soll es nur eine normale horizontale Navigation sein, oder?
Du gibst dem ul display:inline oder halt inline-block, damit ist es horizontal. Wenn du der Navi eine bestimmte Breite geben möchtest, dann noch eine width.
Wenn du möchtest, dass die Navi keine Wörter (die Listenpunkte li) zum Anklicken hat, sondern Buttons, machen wir folgendes: Wieder ul mit display: inline und width und du gibst li noch eine Breite. Das ul muss dann natürlich die Breite der gesamten li's haben. Sprich zwei Listenpunkte mit width: 75px, dann braucht ul width: 150px. ul und li brauchen natürlich die selbe Höhe.
Nun zum Hover und der Verlinkung. Machen wir das wie sonst, sind nur die Wörter verlinkt und haben einen Hovereffekt, statt den gesamten Buttons. Alright, folgendes: Wir verlagern das Anchor tag (<a>) um das li rum, statt es rein zu packen und beim hover geben wir entsprechend li:hover an. Möchtest du zusätzlich noch, dass sie zum Button auch die Schrift beim Hovern ändert, kannst du das ganz bequem mit angeben, da die Schrift ja jetzt im li liegt.

Geht das so in die Richtung, was du versuchst?

Kommentar von abbrechen ,

Sry, du gibst dem li inline !

Antwort
von jufaclub, 10

Lager bitte erstmal deinen Style (CSS) in ne externe CSS aus. Das ist so unübersichtlich :S. Warum arbeitest du nicht mit <nav>?


Also in der Art:

<nav>
<ul>
<li><a href=Anker1> Link 1</a></li>
<li><a href=Anker2> Link 2</a></li>
<li><a href=Anker3> Link 3</a></li>
</ul>
</nav>


Ich weiß, ist jetzt nicht horizontal aber warum setzt du damit nicht einfach an? JQuery für ne Navigation. hab ich ja noch nie gesehen :D

Kommentar von FlugzeugAUT ,

Ja warum hab ich es nicht extern? :D Weil dort dauernd irgendwelche Elemente überschrieben werden. Erst am Schluss, wenn alles passt, dann kann ich es extern verlagern und nach Ausschlussverfahren dann wählen, was von was überschrieben wird und wiederrum extern ausgelagert werden muss..

Ja, hab ich mit Jquery gemacht, weil ich das eben mit dem Klick so will :)

Danke für deine Antwort :)

Kommentar von jufaclub ,

Hat sich ja jetzt erledigt, aber gerne :)

Antwort
von Seever, 6

Float: left
In deine li's einfügen

Keine passende Antwort gefunden?

Fragen Sie die Community