[CSS] Horizontale Menubar

Dieses Thema im Forum "Webdesign" wurde erstellt von generals007, 15. Oktober 2010 .

Schlagworte:
  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
     
  2. 15. Oktober 2010
    AW: Horizontale Menubar

    1. Nein, soweit ich weiß nicht.. Da brauchste JavaScript..
    2. 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
    3. 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!
    4. Das versteh ich sowieso nicht?^^ Copy & Paste und evtl nen bissl anpassen..

    MfG
     
  3. 15. Oktober 2010
    AW: Horizontale Menubar

    1. 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.
    2. das geht nur, wenn die menübar eine feste breite hat. margin: 0 auto;
    3. entweder du beendest "float" mit "clear" oder du gibtst der menübar ne feste größe.
     
  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
     
  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
     
  6. 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
     
  7. 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}
     
  8. 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
     
  9. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.