Navigationsleiste mit Dropdown ausstatten - Hilfe :/

[hmn]

Hallo,

habe gestern Nacht vergeblich versucht, die Navigationsleiste unserer zukünftigen Unternehmenswebseite mit einem schicken Drop-Down Menü zu versehen. Ich habe viele Forenbeiträge und Anleitungen im Netz gelesen, das Bearbeiten meiner nav sektion in der style.css führte allerdings nie zum gewünschten Erfolg.

Zunächst einmal habe ich testweise versucht, zwei Objekte dem Listenelement "Services" zuzuordnen. So soll es laut diverser Internetanleitungen funktionieren.

<nav>
                <ul>
                    <li class="active"><a href="index.html">HOME</a></li>
                    <li><a href="index-1.html">SERVICES</a><ul>
            <li><a href=”#”>TEST</a></li>
            <li><a href=”#”>TEST</a></li></ul></li>
                    <li><a href="index-2.html">SOLUTIONS</a></li>
                    <li><a href="index-3.html">NEWS</a></li>
                    <li><a href="index-4.html">PARTNERS</a></li>
                    <li><a href="index-5.html">CAREERS</a></li>
                    <li><a href="index-6.html">CONTACT US</a></li>
                </ul>
            </nav>

Resultat:



Anordnung an sich stimmt soweit, die Schrift ist allerdings zu groß, außerdem erscheint links eine nach unten durchgezogene Linie :(?

Meine konkrete Frage:

Wie statte ich die nav Sektion meines Stylesheets nun sauber mit einer Dropdown-Funktion aus? Ich habe einige Versuche gemacht, bin aber wieder immer wieder daran gescheitert, Anleitungen aus dem Netz sauber in mein Sheet zu integrieren.

nav {
    background:url(../images/nav-li-bg.gif) right 0px no-repeat;
}
    nav ul {
        width:100%;
        overflow:hidden;
    }
        nav li {
            float:left;
            background:url(../images/nav-li-bg.gif) left 0px no-repeat;
            font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
            font-size:1.5em;
            line-height:1.2307em;
        }
            nav li a {
                display:inline-block;
                padding:11px 34px 16px 33px;
                text-decoration:none;
                text-transform:uppercase;
                color:#ece7dc;
            }
                nav li a:hover, nav .active a {
                    color:#828079;
                }

Ich bedanke mich vorab für Eure Hilfe und entschuldige mich für meine Unwissenheit

Gruß,

HMN

 

[roddy]

Mit dem unvollständigen Quelltext kann man natürlich nicht sagen woran es liegt.
Versuche doch mal die Navi auszubauen, so dass du auf der Seite nichts anderes hast, dann siehst du immerhin schon einmal ob in deinen CSS Eigenschaften die nur die Navi betreffen alles stimmt, wenn nicht musst du bei den anderen Eigenschaften auf die Suche gehen.

 

[mermshaus]

Wie wäre es denn, eine fertige Lösung zu nehmen (die existieren tatsächlich) und anzupassen, statt zu versuchen, deinen Ansatz so weit zu verbessern, dass er qualitativ doch nicht an eine bestehende, erprobte Lösung herankommt?

 

[hmn]

Wie wäre es denn, eine fertige Lösung zu nehmen (die existieren tatsächlich) und anzupassen, statt zu versuchen, deinen Ansatz so weit zu verbessern, dass er qualitativ doch nicht an eine bestehende, erprobte Lösung herankommt?

Lieber mermshaus,

vielen Dank, dass Sie sich immer so "konstruktiv" mit meinen Fragen auseinandersetzen. Totzdem entgeht mir Ihr leicht arroganter und mich eher befremdender Unterton nicht. Ich kann diesen allerdings nicht wirklich nachvollziehen. In einem Anfängerforum, -als dieses stellt sich html.de nach außen hin dar-, kann man doch in irgendeiner Form Hilfe erwarten, die nicht gleich suggeriert, dass man den anderen Usern zur Last fällt.

Der von Ihnen als qualitativ schlecht beurteilte Ansatz stammt direkt aus einem Template von templatemonster.com Da dieses Template von einem fähigen Webdesigner entworfen wurde, dachte ich, dass es einfacher sei, dieses anzupassen.

Sich verneigend vor dem allwissenden HTML Guru,

HMN

 

[mermshaus]

Fragen nach Dropdown-Menüs kommen ständig und es ist nicht trivial, die Dinger – je nach erwarteter Funktionalität – browserübergreifend ordentlich umzusetzen (und Sie haben in Ihrem Code zum Beispiel HTML5-Tags stehen, die derzeit erst recht nicht browserübergreifend sind). Deshalb stehe ich prinzipiell auf dem im letzten Post dargelegten Standpunkt: Es ist nicht notwendig, das Rad an dieser Stelle neu zu erfinden, weil es (a) in allen möglichen Ausformungen vorliegt und weil es (b) wie gesagt nicht ganz einfach ist, es „rund“ hinzubekommen.

Dass bereits andere Leute vor ähnlichen Problem standen und Lösungen gefunden und veröffentlicht haben, wird leider ständig vergessen, ist aber nun mal eine Tatsache. Mein Hinweis – der eigentlich nur ein mit einem Argument versehener Vorschlag war… – darauf war knapp, aber ob er als arrogant aufgefasst werden muss, soll jeder Leser mit sich selbst ausmachen.

Der von Ihnen als qualitativ schlecht beurteilte Ansatz stammt direkt aus einem Template von templatemonster.com Da dieses Template von einem fähigen Webdesigner entworfen wurde, dachte ich, dass es einfacher sei, dieses anzupassen.

Ich kann nur beurteilen, was Sie schreiben. Sie können gerne eine zweite Meinung einholen, ob der Code im Ausgangsbeitrag mehr nach einem fast funktionstüchtigen Dropdown-Menü aussieht oder mehr nach einem ersten Gerüst.

Von „qualitativ schlecht“ habe ich nichts gesagt. Ich habe bezweifelt, dass es Ihnen beziehungsweise uns gelingen wird, die Qualität einer bestehenden Lösung zu erreichen (vor allem ohne diese eins zu eins zu reproduzieren…), und deshalb die Möglichkeit der Nutzung einer solchen erwähnt.

Dass es sich dabei um ein fertiges Template handelt, kann ich nicht wissen. Ich gehe immer davon aus, dass hier vorgestellter Code komplett selbst geschrieben ist, wenn keine entsprechenden Anmerkungen dabei stehen. Anders gesagt: Ich habe vermutet, dass Sie eine Navigation mit Dropdown-Funktionalität von Grund auf selbst konzipieren. Auf Grundlage dieser Annahme habe ich geantwortet.

Ich entschuldige mich, wenn ich Ihnen mit meinem Beitrag vor den Kopf gestoßen haben sollte. Ich möchte aber empfehlen, Prägnanz nicht mit Arroganz zu verwechseln.



PS: Für die Titel unter den Nicknames können wir nichts. Die erzeugt die Forensoftware.



Edit:

Okay, wo ich jetzt alle Ihre Beiträge noch mal durchgegangen bin: Ich habe keinen Zusammenhang zwischen diesem Thread und dem vorherigen hergestellt. Und ja, ich hätte dort vermutlich „netter“ formulieren können als: „PS: Der Webdesigner wird sich wahrscheinlich auch bedanken, wenn du mit gefährlichem Halbwissen den Code verschlimmbesserst.“ Zu der Kernaussage stehe ich aber. Das ist nicht zuletzt einfach ein Erfahrungswert.[1] Ich hätte auch schreiben können: „Wenn du dich mit der Sache ohnehin noch an einen Webdesigner wendest, könntest du ihm oder ihr auch diese Aufgabe übertragen, denn möglicherweise nimmst du Änderungen vor, die nicht unbedingt – in Ermangelung eines besseren Ausdrucks – ‚geschickt‘ sind. Das kann dann unter Umständen nachträglich zu doppelter Arbeit führen, auch wenn es als Erleichterung gedacht war.“

Das Web ist nun mal in erster Linie ein anonymes, schriftliches Medium. Ich kenne Sie nicht und weiß – ganz neutral gemeint – nicht, wie groß Ihre Fähigkeiten im Umgang mit HTML, Grafikbearbeitung und Co. sind. Ich versuche deshalb einfach vor dem Hintergrund der vorhandenen Informationen und meiner eigenen Erfahrungen die bestmögliche, effizienteste Empfehlung zu geben, ohne zu sehr zu relativieren.[2]

Darüber hinaus wissen Sie nicht, wie ich meine Antworten meine. (Ich setze mitunter wenige Smileys.) Im Kontext der beiden Threads wird mir aber klarer, woran Sie Anstoß nehmen. Ich habe auch kein Problem damit, für meine joviale Ausdrucksweise um Entschuldigung zu bitten, kann aber versichern, dass meine Aussagen weder dort noch – im Zweifel – hier in irgendeiner Weise arrogant gemeint waren.

Entschuldigung, das wurde jetzt doch ziemlich lang.



[1] Ich nenne das mal spontan den „Ich schick dir Grafiken und Texte schon passend formatiert als Word-Dokument“-Effekt.
[2] „Du kannst es so machen, aber es ist nicht geschickt.“ wird gerne als „Ich kann es so machen.“ interpretiert, dabei ist es häufig wirklich nicht geschickt.

 

[hokage555]

Ich verstehe diese ganze Diskussion hier gerade nicht...
Ein Drop-Down Menü in reinem CSS zu erstellen ist wahrlich keine Kunst. Das ganze dann noch "schön" hinzubekommen, hat mehr mit Photoshop und Hintergrundgrafiken zu tun, als mit CSS.

Was genau ist denn dein Problem bei der Erstellung eines Drop-Down Menüs? Klappt das mit dem Drop-Down nicht?

Anordnung an sich stimmt soweit, die Schrift ist allerdings zu groß, außerdem erscheint links eine nach unten durchgezogene Linie

?

Damit kann ich nicht viel anfangen und imho hat das auch nichts mit dem Drop-Down an sich, sondern viel mehr irgendwelchen anderen Fehlern im CSS zu tun. Verlinke doch einmal auf eine Seite wo man deine bisherigen Versuche sieht und poste dann noch z.B. ein Bild, das zeigt, was du hinbekommen möchtest. Dann kann man dir auch helfen.

Ansonsten wird das nichts...