Problem bei Umstellung eines Menüs auf responsiv

[Sempervivum]

Liebe CSS-Spezialisten,
ich versuche gerade, mein Menü auf ein mobile-taugliches Verhalten umzustellen und richte mich dabei nach dieser Anleitung:
http://www.menucool.com/ddmenu/create-m ... -menu.aspx
Leider funktioniert schon der Schritt 2 nicht richtig: Ich schaffe es nicht, ein zweispaltiges Layout hinzubekommen wie in der Anleitung.
Meine Seite:
http://ulrichbangert.de/indexnr.php
Dieses habe ich neu in die CSS-Datei (http://www.ulrichbangert.de/css/formate_r.css) eingetragen:

    /*styles for responsive menu*/
    @media only screen and (min-width: 534px) and (max-width: 768px)
    {  
        ul#Navigation {
           width: auto;
            margin: 0;
            padding: 0;
            width: 100%
       }

        #Navigation li {
            text-align:left;
           width: 50%; /*or 33%*/
            border-bottom: 1px dotted black;
            padding left: 0;
            padding right: 0
        }
    }

Verkleinert man das Browserfenster erfolgt zwar eine Umschaltung aber das Menü wird nur einspaltig bzw. bei Breite 33% des li zweispaltig angezeigt. Habe schon mit margin und padding experimentiert, aber ich bekomme es nicht hin.
Kann mir da jemand helfen?
Weil ich das ursprüngliche Layout meines Menüs beibehalten möchte, kann ich die Anleitung nicht 1:1 umsetzen.
Viele Grüße - Ulrich

 

[maria1]

#Navigation li {
text-align: left;
width: 30%;

Der Rest passt schon so.

Edit:
Begründung: Du vergisst dein margin-padding und der border dazuzurechnen.
Alles bis witdh: 48% funktioniert bei mir, danach wird die Navi nur mehr einzeilig dagestellt also ab width: 49%.

 

[Sempervivum]

Ja, damit ist es zwar zweispaltig, aber rechts ist ein breiter Zwischenraum und der Viewport ist nicht richtig ausgefüllt.
Nachdem ich es mir mit Firebug angesehen habe, verstehe ich es jetzt ein wenig besser: Das li hat auf allen Seiten paddings und diese werden anscheinend bei width nicht eingerechnet.
Gibt es dafür eine Lösung, so dass die Seite richtig ausgefüllt wird?
Edit: padding-left und padding right beim li hatte ich jedoch auf 0 gesetzt. Im Firebug ist diese Angabe durchgestrichen und nicht wirksam. Wieso?

 

[Sempervivum]

Habe jetzt die Lösung selber gefunden:
In das li ein span gelegt:

        <li><span>
                <a target="_top" href="/index.php" title="Startseite">Home</a>
            </span></li>

Das padding-left und padding-right in das span gelegt. Dann sind diese beiden beim li 0 und vergrößern die Breite nicht.

ul#Navigation li {
    list-style: none;
    background-color: white;
    float: left;
    padding-top: 0.2em;
    padding-bottom: 0.4em;
}
ul#Navigation li span {
    background-image: url(/quadrat8.png);
    background-repeat: no-repeat;
    background-position: 0px -5px;
    padding-left: 1.2em;
    padding-right: 0.4em;
    position: relative;
}

/*styles for responsive menu*/
@media only screen and (min-width: 534px) and (max-width: 768px)
{
ul#Navigation {
margin: 0;
padding: 0;
width: 100%
}

#Navigation li {
text-align: left;
width: 50%; /*or 33%*/
border-bottom: 1px dotted black;
}
}

Damit funktioniert es jetzt einwandfrei so wie in der Anleitung:
http://ulrichbangert.de/indexr3.php

 

[Sempervivum]

Weitere Frage: Ich bin jetzt beim Schritt 3 der Anleitung und bekomme es nicht hin, dass die zweite Stufe des Menüs im normalen Textfluss angezeigt wird, d. h. dass die Menübestandteile darunter nach unten verschoben werden, wenn man es aufklappt und nicht verdeckt werden. Habe das position von "absolute" auf "static" geändert, aber es funktioniert nicht.

@media only screen and (max-width: 401px)
{
  #Navigation li {
        text-align: left;
        width: 100%; /*or 33%*/
        border-bottom: 1px dotted black;
        position: static;
    }
}

#Navigation li ul {
position: static;
}

Hier das ganze CSS:
http://ulrichbangert.de/css/formate_r3.css
Die Testseite:
http://ulrichbangert.de/indexr3.php
(Habe es erstmal statisch aufgeklappt. Das mit den Buttons kommt später. Das Browserfenster so schmal machen, dass das Menü einspaltig wird.)

 

[Tronjer]

Wozu eigentlich? Bootstrap liefert ein responsives Menü, incl. collapsing für kleine Viewports,. Du brauchst nur die entsprechenden Klassen einzubinden. Diese zweizeilige Anordnung aus dem Tutorial sieht ohnehin hässlich aus

Wenn du es statt dessen lieber manuell schreiben willst, dann würde ich an deiner Stelle eine zweite Menüstruktur erstellen, die geladen wird, wenn der Viewport eine bestimmte Breite unterschreitet. Bsw:. Home -> Ich -> -> Planzen -> Orte

 

[Sempervivum]

Naja, ich möchte mich jetzt nicht noch mit einem weiteren Framework auseinandersetzen müssen. Außerdem möchte ich gern das Layout von meinem Menü beibehalten, sonst hätte ich es ja einfach aus dem Tutorial übernehmen können. Müsste doch möglich sein, mit Mediaqueries die Eigenschaften so zu ändern, dass es funktioniert. Die Anordnung aus dem Tutorial wird übrigens einzeilig, wenn man das Browserfenster weiter schmaler macht.

 

[Tronjer]

Es wird auch sicherlich gehen, aber um zu sehen woran es liegt, müsste ich das jetzt selber nachbauen. ;)

Trotzdem wäre es bei den vielen Menüpunkten zu überlegen, ob man nicht mit zweigleisig fährt. Je nach Größe des Viewports wird beim Laden der Seite Navigation_A oder Navigation_B eingebunden. Dazu ein resize() Event mit Ajax-Call um auf Skalieren zu reagieren, sowie Media Queries für die kleinere Navigation, damit bei Smartphones der Collapsing-Zustand gezeigt wird.

Als Tipp am Rande: Wenn du manuell responsive Elemente bauen willst, fange mit der kleinsten Auflösung an.

 

[Sempervivum]

So, ich habe jetzt selber die Lösung gefunden: Es scheint so zu sein, dass sich manche CSS-Eigenschaften nicht ändern lassen, wenn sie in einer verschachtelten Liste nicht auf der obersten Stufe liegen. So hier mit der Eigenschaft position: Ließ sich beim li auf der obersten Stufe ändern aber nicht in den Stufen darunter. Das selbe Problem hatte ich anschließend mit der Eigenschaft width:100%. Und vor einigen Jahren mit dem attribut height, das sich nach dem Setzen auf 0 nicht wieder auf auto ändern ließ sondern nur auf einen festen Wert.
Wie kann das sein? Ist das so gewollt oder ein Fehler in der Browser-Implementierung?
Jetzt funktioniert das Menü jedenfalls so wie ich es mir vorstellte - ohne Ajax und ohne resize(), mit mit Mediaqueries und wenigen Zeilen jQuery.