horizontales ausklappbares CSS Menü
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aufgehen
befinden
beispiel
benutzen
code
element
erstellen
fehler
helfen
http
jemand
kunde
liste
listen
navigation
paar
relative vergessen
schrift
stehen
url
-
Hallo,
ich bin neu hier und ein totaler Anfänger was CSS betrifft. Wollte mit CSS und HTML ein horizontales ausklappbares Menü erstellen ( Menü, Submenü nach unten ausklappbar, Sub-Submenü nach rechts und nach unten aufklappbar). Ich häng da schon seit Wochen dran und bekomme es nicht richtig hin. Mittlerweilen bin ich schon so wirr im Kopf das ich garnicht mehr durchblicke.
Das Submenü mit nem kleinen Rahmen drumherum und zwischen den sich darin zentriert stehenden Schriftlinks soll mittig unter den Schriftlinks im Menü aufgehen.
Beim Überfahren der Submenü-Schriftlinks soll sich der jeweilige Hintergrund über die Breite des Submenüs ( und nicht nur die Breite des Wortes / der Schrift ) und die Schrift farblich verändern.
Das gleiche soll mit dem Sub-Submenü passieren, welches nach rechts und dann nach unten aufgehen soll.
Hoffe ich konnte mein Problem einigermaßen verständlich rüberbringen.
Hier mal der Link zur Seite mit dem Menü worum es geht: http://kunden.square7.ch/htmlseite.html
und hier zur CSS: http://kunden.square7.ch/stylesheet.css
Vielleicht kann mir hier jemand helfen
Sanne -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Auf deiner Webseite herrscht ein bisschen durcheinander. Die Formatierungen der unterschiedlichen Menüs ändern sich bspw., weil manche Untermenüs einen Link und manche eine <h5> enthalten, weshalb du kein einheitliches Ergebnis erhältst. Räume doch zuerst einmal deinen HTML-Code ein bisschen auf.
Den CSS-Code habe ich mir mal kurz angeschaut und ein paar Fehler gefunden, die du direkt verbessern kannst. Wenn alles nichts hilft, kann ich dir nur empfehlen, den Großteil des Codes zu löschen, dir nochmal ein paar Tutorials etc. anzuschauen/durchzulesen und von vorne zu beginnen. Ich denke, das nutzt dir selbst auch mehr, als einfach eine fertige Lösung von mir abzuschreiben.
Aber zu dem, was ich auf die Schnelle gefunden habe:
#menu ul li { position: relativ; }
Du hast das e bei relative vergessen. Außerdem wählt dein Selektor wahrscheinlich mehr, als du beabsichtigst, nämlich alle "li"-Elemente, die in irgendeinem "ul"-Element im menü stehen, also auch die Listen der Submenüs. Um das zu ändern, solltest du
#menu > ul > li
benutzen.
mfg
Jonas -
Mal abgesehen davon, dass so ein Webdesign mit iframe wirklich gaaaanz schlechte Technik ist zwei echte Fehler:
</STYLE> </style> </head>
Das 2. </style> ist falsch. Und ganz am Ende
</htmll>
ist richtig
</html>
-
jonas-bayer schrieb:
Auf deiner Webseite herrscht ein bisschen durcheinander. Die Formatierungen der unterschiedlichen Menüs ändern sich bspw., weil manche Untermenüs einen Link und manche eine <h5> enthalten, weshalb du kein einheitliches Ergebnis erhältst. Räume doch zuerst einmal deinen HTML-Code ein bisschen auf.
Das ist von mir beabsichtigt, weil einige Links nicht auf eine Seite verweisen sollen. Stattdessen soll das Submenü aufgehen. Sie sollen aber beim Hovern die Farbe wechseln
Den CSS-Code habe ich mir mal kurz angeschaut und ein paar Fehler gefunden, die du direkt verbessern kannst.
Gerne, aber welche wären das denn ??????????
Wenn alles nichts hilft, kann ich dir nur empfehlen, den Großteil des Codes zu löschen, dir nochmal ein paar Tutorials etc. anzuschauen/durchzulesen und von vorne zu beginnen. Ich denke, das nutzt dir selbst auch mehr, als einfach eine fertige Lösung von mir abzuschreiben.
Hab das Menü schon wie oft von vorne angefangen, aber ich bekomm es einfach nicht hin. Ich verzweifel ja schon. Hab es mir extra mit Kommentaren aufgeteilt ( Menu, /*Submenu*/, /*Sub-Submenu*/ )
Aber zu dem, was ich auf die Schnelle gefunden habe:
#menu ul li { position: relativ; }
Du hast das e bei relative vergessen.
Hab ich korrigiert. Jetzt liegen die Submenüs beim hovern noch mehr übereinander.
Außerdem wählt dein Selektor wahrscheinlich mehr, als du beabsichtigst, nämlich alle "li"-Elemente, die in irgendeinem "ul"-Element im menü stehen, also auch die Listen der Submenüs. Um das zu ändern, solltest du
#menu > ul > li
benutzen.
[/quote]
Mein was? Selector? Wo genau soll ich den Code wenn einsetzen?
Wie ich ja schon sagte, ich bin totaler Anfänger was CSS betrifft. Es würde mir schon verdammt viel helfen, wenn jemand den CSS Code von mir korrigiert. Am besten farblich abgesetzt, damit ich das kapier und nachvollziehen kann.
@mein-wunschname
so gut wie alle solche Seiten von Züchtern sind mit iframes gearbeitet. Auf den einzelnen Seiten befindet sich am Ende immer ein Link mit Link zur kompletten HP.
Hab die 2 Fehler korrigiert. ( style und html )
Beitrag zuletzt geändert: 28.7.2015 20:59:34 von meintibi -
Sofern ich dich korrekt verstanden habe, könnt dir dieses Video möglicherweise weiterhelfen:
-
Außerdem wählt dein Selektor wahrscheinlich mehr, als du beabsichtigst, nämlich alle "li"-Elemente, die in irgendeinem "ul"-Element im menü stehen, also auch die Listen der Submenüs. Um das zu ändern, solltest du
#menu > ul > li
benutzen.
Mein was? Selector? Wo genau soll ich den Code wenn einsetzen?
Wie ich ja schon sagte, ich bin totaler Anfänger was CSS betrifft. Es würde mir schon verdammt viel helfen, wenn jemand den CSS Code von mir korrigiert. Am besten farblich abgesetzt, damit ich das kapier und nachvollziehen kann.
Der Selektor ist bei CSS immer der Teil des Codes, der bestimmte HTML-Elemente auswählt ('selektiert'), also zum Beispiel div für alle "div"-Elemente oder #navigation für das Element mit der ID "navigation".
Bei deinem Code sieht das konkret so aus: Du hast den Selektor
#menu ul li
benutzt. Dieser ist im Wesentlichen leicht zu erklären: Er selektiert alle Elemente, die vom Typ li, also Listenaufzählungselemente sind, welche sich innerhalb eines ul-Elements befinden. Diese muss sich allerdings im Element mit der ID menu befinden.
Dabei ist es im HTML-Code egal, ob sich die <ul> direkt im #menu befindet, oder ob der Code bspw. so aussieht:
... <div id="menu"> <span>Irgendwas, das nicht wichtig ist</span> <div class="ich-steh-hier-mal-rum"> <ul id="ich-bin-die-ungeordnete-liste-um-die-es-die-ganze-zeit-geht"> <div id="schwachsinn"> <li>Ich bin das Element, das selektiert wird</li> </div> </ul> </div> </div> ...
Obwohl noch ein div dazwischen ist, wird die ul bzw. deren li-Element selektiert. Würde sich in dieser Liste noch einmal eine weitere Liste befinden, dann würden auch deren li-Elemente alle mit selektiert! Somit formatierst du ungewollt dein Submenü genauso, wie deine Obermenüs.
Jetzt zu meinem Vorschlag: Ersetze #menu ul li durch
#menu > ul > li
Das führt nämlich dazu, dass keine Elemente dazwischen stehen dürfen, damit selektiert wird. Im obigen Beispiel wäre also das "li" nicht selektiert, weil der div mit ID schwachsinn dazwischen steht [Kleine Anmerkung: Der sollte in einer Liste eigentlich sowieso nicht stehen, mir fiel nur kein anderes Beispiel ein.]
Dieser Fehler erklärt beispielsweise, warum "Welpenstube" zu weit links außerhalb des Rahmens angezeigt wird, da es wie auch die Listenelemente des Hauptmenüs nach rechts einen Abstand von 20px halten soll, was eigentlich keinen Sinn ergibt.
s.a. http://wiki.selfhtml.org/wiki/CSS/Selektoren
mfg
Jonas
Beitrag zuletzt geändert: 28.7.2015 22:33:22 von jonas-bayer -
meintibi schrieb:
@ marvinkleinmusic
Nein, leider hilft mir das nicht weiter. Es ist keine reine CSS
Warum eigentlich? Ich denke, dass man zumindest momentan solche Menüs besser mit jQuery / JavaScript erstellen kann, als mit CSS. Natürlich, eine simple Navigation ist auch mit CSS möglich, wenn man aber noch Animationen etc. einfügen möchte, lohnt sich der Ärger mit CSS nicht - vor allem, weil die neuen CSS3-Funktionen auch nur in den neusten Browsern funktionieren...
Trotzdem: Hast du vielleicht irgendeine konkrete Frage meintibi? Ich denke, so wäre es leichter dir zu helfen.7
mfg
Jonas -
@ jonas
mit jQuery / JavaScript habe ich versucht mich auch auseinander zu setzen, aber da kam ich überhaupt nicht mit klar. Das neue CSS3 muß es auch garnicht sein, da das Menü relativ einfach, nüchtern und ohne großartige Animation sein soll
marvinkleinmusic hilft mir schon bei meinem Menü und wir, eher gesagt er, ist schon verdammt nah an meiner Vorstellung dran, wie das Menü aussehen soll. Es ging ja mehr um die Submenüs und die darin befindlichen Links die widerrum ein Submenü öffnen sollen. Das das alles richtig angeordnet ist und die CSS so aufgegliedert ist, das ich mich jederzeit ( auch wenn ich mich wochenlang nicht damit befasse, denn dann bin ich wieder raus ) zurecht finde und weiß, wo und wofür welcher Befehl steht. -
jonas-bayer schrieb:
Ich denke, dass man zumindest momentan solche Menüs besser mit jQuery / JavaScript erstellen kann, als mit CSS.
Das ist Blödsinn! Alles, was man für ein Menü braucht, geht mit CSS. Und wenn in irgendeinem Uraltbrowser die "Effekte" nicht funktionieren, ist das Menü trotzdem nutzbar. Notfalls nutzt man noch eine Browserweiche. Javascript dafür zu verwenden, bedeutet nur, daß die Navigation nicht mehr barrierefrei ist.
Als Beispiel schaue man sich einfach nur die CSS-Menüs von Stu Nicholls an: http://www.cssplay.co.uk/menus/
Beitrag zuletzt geändert: 1.8.2015 15:24:56 von fatfreddy -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
