nicht angemeldet
Positionierung des Burgermenüs
Rolf b
Matthias Apsel
JürgenB
Camping_RIDERHallo zusammen,
ich schaffe es nicht mein Burgermenü inline mit meinem Logo "Grafikrose zu positionieren. Bei der Navileiste hat es geklappt, aber bei der mobilen Ansicht schaffe ich es nicht, bzw. habe wahrscheinlich irgendwo einen Fehler den ich nicht erkenne.
Gruß
Linde
-
Zunächst mal meckert Chrome über dein Meta viewport Tag:
Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.
Vielleicht bringt das ja schon was 😉
Rolf
-
So, und dann fällt mir auf, dass Du für html und body
position:absolutesetzt, das ist eher unüblich. Was soll das bezwecken?Dein Menü erscheint übrigens durchaus, es ist nur schwarz auf finsterblau und darum kaum zu erkennen.
Wenn Du vermeiden willst, dass das Aufklappen des Menüs das Grafikrose hinunterschiebt, musst Du dreierlei tun:
- position:relative für div#menu-btn
- das div.responsive-menu in das div#menu-btn hineinlegen
- dem div.responsive-menu ein position:absolute geben. Mit top und left die Position wie gewünscht einstellen.
Wenn's das nicht war - hm. Was meinst Du mit
Burgermenü inline mit meinem Logo "Grafikrose zu positionieren?Dann könntest Du Dir noch Gedanken über den Sinn und Zweck von div.mobile-nav und dem leeren Div im div.menu-btn machen. Die Spans für das Burgermenü kannst Du auch anders positionieren, und dass sie über den Rand des div.menu-btn hinaushängen liegt an der Kombi von margin und width. Das einschließende DIV ist 50 breit, die Burger-Balken inclusive Margin 70. Da der Klick nur auf dem div gilt, führt das zu Merkwürdigkeiten bei der Bedienung.
Schließlich solltest Du die Konstruktion deines "non-burger" Menüs wegwerfen und neu machen. Das macht man nicht mehr mit Table, das geht genau wie im Burger-Menü mit UL und LI und passenden Styles. Dein Logo bekommst Du, genau wie das Menü, mit position:fixed; top:0; right;0 oben rechts angenagelt, dafür brauchst Du auch keine Table.
Zum Schluss noch ein Hinweis auf unser Wiki: Navigation richtig erstellen, das deckt nicht alles ab, was Du brauchst, aber bestimmt findest Du da nützliche Tipps.
Rolf
-
Danke! Ich habe die besagten Positionsangaben angegeben und das div.responsive-menu in das div#menu-btn gelegt.
Das Grafikrose springt leider immer noch runter.
-
nav tr { display: inline-block; }Wenn Du es nicht mit solchen Merkwürdigkeiten probierst, wird es vielleicht besser.
Du hast zwei Betriebsvarianten: Vollmenü mit sichtbaren Punkten, und Hamburgermenü.
Das Vollmenü realisierst Du zur Zeit als eine table, deren Rows Du per display: inline-block nebeneinanderzwingst. Kein Wunder, dass das Layout ächzt und quietscht. Wenn schon Table-Layout, dann bitte alles in einer Zeile und mittels Zellen nebeneinander verteilt. Dazu kommt, dass das Hamburgermenü nicht Teil der Table ist, sondern außerhalb davon liegt. Deswegen rutscht die ganze Table nach unten, sobald Du das Hamburgermenü einblendest.
Aber Table-Layout ist out. Versuch's mal mit diesem Ansatz:
- Aufteilen des <body> in <header>, <main> und <footer>
- Das Hintergrundbild der blauen Rose klebst Du an den Body, nicht an das div#landing
- Per vertikaler Flexbox dafür sorgen, dass der Header oben ist, der Footer unten und sich Main dazwischen ausbreitet
- Alle Menüs und das Logo in einen <header> Bereich.
- Per horizontaler Flexbox dafür sorgen, dass das Burger-Menü und das Vollmenü links stehen, und das Logo rechts
- Ob es richtig ist, das Burger-Menü und das Vollmenü jeweils in ein eigenes <nav> Element zu setzen, weiß ich nicht so ganz genau; ich würde es tun. Ein nav für schmale Anzeige, ein nav für breite Anzeigen.
- Aktivieren von Burger- oder Vollmenü nav per Mediaquery
- Vollmenü nicht als Table, sondern als Liste
Und dann wird's auch was mit
<span class="headline">ERFOLG IST SO EINFACH!</span>😉
Rolf
-
Ich fand's interesant und habe ein wenig gebastelt, um meine Vorschläge zu validieren 😀
https://jsfiddle.net/Rolf_b/hnhrs0Lu
Auf Javascript hatte ich keine Lust und habe deswegen ein Hover-Menü gemacht, aber das kannst Du natürlich nach Bedarf ändern.
Rolf
-
Hallo Rolf b,
https://jsfiddle.net/Rolf_b/hnhrs0Lu
Auf Javascript hatte ich keine Lust
Und warum dann jsfiddle?
Bis demnächst
Matthias -
Hallo,
Auf Javascript hatte ich keine Lust und habe deswegen ein Hover-Menü gemacht,
auf Touch offensichtlich auch nicht.
Gruß
Jürgen
-
-
Bin deinen Anweisungen gefolgt...
Es funktioniert!
Vielen vielen vielen Dank!!
Gruß R.
-
Rechnung folgt. Ein Impressum ist ja vorhanden.... Hmmm.
Ich schick sie an Sönke. Der ist der einzige mit einem halbwegs validen Impressum, da habt ihr noch einiges zu tun mit eurer Seite. Und Ibrahim sollte ich wegen optischer Körperverletzung verklagen!
Scherz 😀
Rolf
-
😂😂😂 Ich kann dich beruhigen, die Seiten der anderen sind nicht aktuell soweit ich weiß. Müsste der Stand vor einem halben Jahr sein, teilweise sogar ohne CSS wie bei Ibrahim glaub ich!
-
-
-
-
Hallo grafikrose,
<meta name="viewport" content="width=device-width; initial-scale=1, maximum-scale=1, user-scalealbe=no">Es ist keine gute Idee, das Zoomen auf Mobilgeräten zu unterbinden.
Verwende
<meta name="viewport" content="width=device-width, initial-scale=1.0">und, wie schon agesprochen, mit Komma.Bis demnächst
Matthias-
@grafikrose
hallo Falls dein Link zur problematischen Seite auch relevant ist:
<table> <tr id="menu"> <td><a href="#projekte">PROJEKTE</td> <td><a href="#leistungen">LEISTUNGEN</td> <td><a href="#ueber mich">ÜBER MICH</td> <td><a href="#kontakt">KONTAKT</td> </tr> ERROR--><div class="mobile-nav"> -
Hallo Matthias!
Warum ist das keine gute Idee? Wir haben das im Kurs so gesagt bekommen, kann mich aber nicht mehr an die Begründung erinnern, wenn ich ehrlich bin - wäre sehr interessant zu wissen warum du diese Meinung hast!
Gruß
Grafikrose
-
Aloha ;)
Warum ist das keine gute Idee? Wir haben das im Kurs so gesagt bekommen, kann mich aber nicht mehr an die Begründung erinnern, wenn ich ehrlich bin - wäre sehr interessant zu wissen warum du diese Meinung hast!
Zoomen ist vor allem eine Nutzer-Präferenz. Wenn mir als Benutzer beispielsweise die Schrift zu klein erscheint (vielleicht auch nur vorübergehend) kann ich da mit einem einfachen Zoomen nachhelfen.
Oder wenn ich glaube, dass meine Wurstfinger auf dem kleinen Smartphone den Button sowieso nicht treffen, auch dann möchte ich als Benutzer reinzoomen können.
Wenn mir die Seite das zoomen verbietet / verbieten will schränkt sie damit meine User Experience massiv ein.
Grüße,
RIDER
-
Hallo grafikrose,
Warum ist das keine gute Idee?
Eine Seite, die ich nicht lesen kann, besuche ich kein zweites mal.
Bis demnächst
Matthias-
hallo
Eine Seite, die ich nicht lesen kann, besuche ich kein zweites mal.
Korrektur: eine Seite → eine Website
Eine Seite, die ich gelesen habe, besuche ich in der Regel auch kein zweites mal.
-
-
-