#1 15. Oktober 2010 Horizontale Menubar Hey, nach ein paar Monaten toter Internetleitung und einem Krankenhausbesuch bin ich wieder hier. Ich hätte eine Frage bzgl. der Erstellung einer horizontalen Top-Menubar mit XHTML/CSS. Ist es möglich, die Bar OHNE SCRIPTING so zu erstellen, dass sie die folgenden Punkte erfüllt?: - alle Blöcke in der Bar gleich groß, angepasst an den Link mit der größten Länge - die Bar zentriert in der Mitte der Webpage (sie muss nicht notwendigerweise die gesamte Webpage horizontal ausfüllen) - Umrandung um die gesamte Bar, maximal Trennstriche zwischen den Links/Blöcken (also keine border um jedes einzelne Item) - anwendbar auf mehrere Webpages mit verschiedenen Menüs Probleme die ich bisher hatte waren die folgenden: - wenn ich eine Pixelanzahl angebe passen sich die Items logischerweise nicht dem längsten Link an - ich bekomme die Bar nicht in die Mitte der Webpage - die Umrandung (border property) der gesamten Liste / des div-Elements Umrandet die Liste nicht, sondern befindet sich (doppelt) am oberen Rand, wie als hätte die Liste keine Ausmaße Ich verwende die float-property um das ganze zu bewerkstelligen. Ich verwende keine Tools, ich möchte das ganze selber lernen Für jede Hilfe wäre ich dankbar. Gruß, gen + Multi-Zitat Zitieren
#2 15. Oktober 2010 AW: Horizontale Menubar Nein, soweit ich weiß nicht.. Da brauchste JavaScript.. Ja, "margin:0 auto;" als CSS-Eigenschaft nutzen.. Bin mir grad nicht sicher, ob es mit einer Breite des Elements in % funzt.. glaube aber schon Was verstehst du kein Border um jedes einzelne Item? Du kannst einerseits nen Bild nutzen (background-image) und repeat auf none stellen oder du kannst einfach einen Border-Right setzen.. Dann ist der nur rechts und nicht oben unten und links! Das versteh ich sowieso nicht?^^ Copy & Paste und evtl nen bissl anpassen.. MfG + Multi-Zitat Zitieren
#3 15. Oktober 2010 AW: Horizontale Menubar wenn dir bekannt ist, welcher link der längste ist, dann kannst du die größe mit css anpassen, ansonsten musst du das mit einem script nachträglich regeln. das geht nur, wenn die menübar eine feste breite hat. margin: 0 auto; entweder du beendest "float" mit "clear" oder du gibtst der menübar ne feste größe. + Multi-Zitat Zitieren
#4 16. Oktober 2010 AW: Horizontale Menubar Danke für die Antworten. Werde noch ein bisschen herumexperimentieren und die genannten Sachen nochmal durchlesen um mir das ganze nachhaltig merken zu können. Schade, dass eine solche Menubar nicht ohne ein Skript auskommt... würde bei solch viel genutzten Sachen eigentlich erwarten, dass HTML und CSS das bieten ohne jedes mal die Länge mit einem Skript abmessen zu müssen. Gruß, gen + Multi-Zitat Zitieren
#5 16. Oktober 2010 AW: Horizontale Menubar So, habe noch eine weitere Frage. Die Frage hat sich wieder beim Versuch die Menubar zu machen ergeben, deswegen spare ich es mir einen neuen Thread zu posten. Habe die Listenitems die die horizontale Bar darstellen mit "float:left;" gestylt und dann die unnumbered list in ein div-element gepackt. Dieses habe ich dann center-aligned. Aber das div-Element (also die gesamte Bar) ist nicht in der Mitte der Page sondern weiterhin links. Das gleiche passiert wenn ich das ganze über "margin-left: auto; margin-right: auto;" oder "margin: 0 auto;" versuche ... keine Änderung. Murdoc schreibt dazu: Wie gebe ich einer solchen Bar eine feste Breite wenn ich nicht weiß wie viele Elemente sie haben soll? Das Stylesheet soll für alle möglichen Menubars die ich evtl. mal bauen könnte verwendbar sein und natürlich weiterhin funktionieren wenn ich einen Menupunkt hinzufüge oder lösche. ----- Der momentane (relevante) Code: CSS: div.navbarHor1 { align: center; } ul.navBarHor1 { list-style-type: none; margin: 0; padding: 0; } li.navBarHor1 { float: left; border-style: dotted; border-width: 1px; clear: right; } a.navBarHor1 { display: block; width: 200px; background-color: rgb(0,230,255); text-align: center; text-transform: uppercase; text-decoration: none; padding: 8px; } a.navBarHor1:hover, a.navBarHOr1:active {background-color: rgb(0,50,255); color: white; text-decoration: underline; } HTML: <div class="navBarHor1"> <ul class="navBarHor1"> <li class="navBarHor1"><a href="http://www.xkcd.com" class ="navBarHor1">Nummer eins</a></li> <li class="navBarHor1"><a href="http://www.xkcd.com" class ="navBarHor1">XKCD</a></li> <li class="navBarHor1"><a href="http://www.xkcd.com" class ="navBarHor1">Best Web Comic</a></li> </ul></div> bzw als alternatives CSS: div.navbarHor1 { margin: 0 auto; } oder div.navbarHor1 { margin-left: auto; margin-right: auto; } oder auch div.navbarHor1 { margin-left: auto; margin-right: auto; width: 80%; } ----- Es funktioniert mit keinem der CSSs. Verstehe nicht wie ich eine Länge flexibel angeben soll. Und noch eine: Habe leider absolut keine Ahnung wie du das mit "clear" meinst ... wo soll ich float verhindern damit der Rand sich an der richtigen Stelle zeigt? Sorry für langweilige Fragen, bin eben total neu auf dem Gebiet. Gruß, gen + Multi-Zitat Zitieren
#6 18. Oktober 2010 AW: Horizontale Menubar Keiner eine Antwort? Finde ich sehr schade. Gruß, gen + Multi-Zitat Zitieren
#7 18. Oktober 2010 AW: Horizontale Menubar Falls keiner eine (positive, sowie auch negative) Antwort postet kann der Thread geschlossen werden. Überrascht mich sehr, da ich das Board als sehr aktiv empfunden hatte und das ja sicher ein leicht zu beredendes Anfängerproblem ist. Gruß, gen + Multi-Zitat Zitieren
#8 28. Oktober 2010 AW: Horizontale Menubar aus div.navbarHor1 { align: center; } muss du div.navbarHor1 { text-align: center; } machen und aus ul.navBarHor1 { list-style-type: none; margin: 0; padding: 0; } musst du ul.navBarHor1 { list-style-type: none; margin: 0 auto; padding: 0; width:breite} + Multi-Zitat Zitieren
#9 29. Oktober 2010 AW: Horizontale Menubar Schau dir mal diese Seite an, da findest du alles was du suchst: Listamatic: ProjectSevens horizontal Uberlist da gibt´s über 30 horizontale Menüs über CSS + Multi-Zitat Zitieren