Wie trenne ich das Logo im Header vom Menü und setze es darüber?

hast du einen Link? Ist immer etwas leichter …

parcel

Hallo

Unsinnige Bezeichnungen erschweren die Hilfe. Eine Klasse mit der Bezeichnung flexbox und dem Inhalt display:table mag zwar sachlich korrekt sein, in der Praxis erschweren sie jedoch die Übersicht.

Zum Verständnis: Es geht um diese Container?

<div class="flexbox">
   <div class="flexbox__item flexbox__item--logo">
   </div>
   <div class="flexbox__item flexbox__item--menus">
   </div>
</div>

Ich werde sie zur besseren Übersicht im Weiteren so bezeichnen:

<div class="flexbox">
   <div class="logo">
   </div>
   <div class="menus">
   </div>
</div>

Kurz: flexbox, logo und menus

Problem:

a) logo und menus sollen übereinander plaziert werden
b) der Inhalt von logo und menus soll zentriert werden

Das sind zwei Probleme, die nichts miteinander zu tun haben. b) bekommst du wahrscheinlich selber hin, ansonsten bitte noch einmal nachfragen. Ich beschäftige mich zunächst mit a).

Dazu sollten grundsätzlich Breitenangaben (width, max-width, min-width) sowie äußere Abstände (margin) von flexbox, logo und menus entfernt werden.

Du hast es zunächst mit display-table ausprobiert. Das ist eine Möglichkeit. Statt display:table-cell für logo und menus müsstest du dann aber display: table-row verwenden.

Also

.flexbox {
         display: table;
      }
      .logo {
         display: table-row;
      }
      .menus {
         display: table-row;
      }

Diese Lösung verhält sich dann aber auch wie eine HTML-Tabelle - mit allen Nachteilen.

Mit Flexbox gibt es zwei Lösungsmöglichkeiten.

Zunächst

.flexbox {
         display: flex;
         flex-direction: column;
      }
      .logo {
      }
      .menus {
      }

Mehr braucht es nicht. Schöne neue Flexboxwelt.

logo und menus brauchen keine Angaben. Zur Erinnerung: Ich gehe davon aus dass alle Breiten- und Abstandsbeschränkungen gelöscht wurden.

Oder

.flexbox {
         display: flex;
         flex-wrap: wrap;
      }
      .logo {
         flex: 1 1 100%;
      }
      .menus {
         flex: 1 1 100%;
      }

Zum Schluß sollte noch darauf hingewiesen werden, das logo und menus Blockelemente sind, die von Haus aus untereinander stehen. Meine Lösungen korrigieren also nur eigentlich überflüssig oder falsch angewandte CSS-Anweisungen. Sauberer wäre es diese zu suchen und zu löschen. Dass das grade bei Fremdlayouts nicht immer möglich ist, ist mir bewußt. Meiner Ansicht nach gehört dieser Hinweis aber zu einer seriösen Antwort.

Gruss

MrMurphy