nicht angemeldet
Rolf bnav 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
Matthias Apsel
JürgenB
Camping_RIDER