TeMPoRArYxJu: Divs neben- und übereinander

SELF-Forum

Divs neben- und übereinander

TeMPoRArYxJu
– Informationen zu den Bewertungsregeln

Hallo, bin neu hier und bitte deswegen um Verbesserungsvorschläge für meine Posts..

Also mein Problem ist folgendes: Ich möchte, wie auf dem Bild zu sehen ist, eine Website erstellen.

Website

Bisher habe ich die Divs erstellt und Header&Menu angeordnet. Nur der Wrapper ist jetzt UNTER den beiden Divs. Das sieht dan ungefähr so aus (bekomme hier nicht alles auf ein Bild):

Bildbeschreibung

Bisher habe ich nur den Wrapper mit "float: right;" angeordnet. Wenn ich den Header/das Menu mit "margin: left;" anordne sieht das ganze noch ein bisschen mehr bescheiden aus (z.B. ist alles nebeneinander und nicht mal Header&Menu sind üvereinander..

Bisher habe ich im Body nur dir Divs festgelegt:

<body>
<div id="header">
Header
</div>
<div id="menu">
Menu
</div>
<div id="wrapper">
Wrapper
</div>
</body>

Und der CSS-Text dazu sieht folgendermaßen aus:

#wrapper {
	background-color: #2E2E2E;
	width: 90%;
	height: 100%;
	float: right;
}


#menu {
	background-color: #FE2E2E;
	width: 10%;
	height: 93%;
}

#menu ul {
	background-color: #2F2F2F;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#header {
	height: 7%;
	width: 10%;
	background-color: #A1A1A1;
}

Danke schonmal im Vorraus für Antworten.

Liebe Grüße

Ju

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Divs neben- und übereinander

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo TeMPoRArYxJu,

    Hallo, bin neu hier und bitte deswegen um Verbesserungsvorschläge für meine Posts..

    Unabhängig von deinen Gestaltungswünschen solltest du semantisch passende Elemente verwenden.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Divs neben- und übereinander

    Gunnar Bittersmann Homepage des Autors (Versionen)
    – Informationen zu den Bewertungsregeln

    @@TeMPoRArYxJu

    Also mein Problem ist folgendes: Ich möchte, wie auf dem Bild zu sehen ist, eine Website erstellen.

    Website

    Das ist ein mögliches Layout für den eher unwahrscheinlichen Fall, dass sich jemand deine Seite auf einem großen Bildschirm ansieht. Wie soll sie auf Geräten aussehen, mit denen Menschen üblicherweise im Web unterwegs sind?

    Bisher habe ich die Divs erstellt

    Aus zwei Gründen problematisch: Zum einen kann es durchaus sinnvoll sein, beim Gestalten von innen nach außen zu gehen. Zum anderen sind div nicht richtig – Matthias sagte es schon.

    Für den Header gibt es das header-Element, für das Navigationsmenü das nav-Element, für den Hauptinhalt das main-Element. Wobei nav durchaus im header stehen darf.

    Bisher habe ich nur den Wrapper mit "float: right;" angeordnet.

    float wurde zum Layouten missbraucht, als noch nichts besseres zur Verfügung stand. Die Zeiten sind vorbei – es gibt Flexbox. (In nächster Zukunft auch CSS-Grid.)

    Mit Flexbox ist es dann ziemlich einfach, Boxen neben- oder übereinander anzuordnen, siehe Beispiel.

    Wenn du das Fenster schmal machst, siehst du, dass sich das Layout ändert. Das einzige, was dazu nötig ist: per media query flex-direction ändern.

    LLAP 🖖

    --
    „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Divs neben- und übereinander

      TeMPoRArYxJu
      – Informationen zu den Bewertungsregeln

      Okay, das hört sich logisch an. Werde mich morgen mal dran begeben. :) Vielen Dank für die schnelle Antwort.

      Guten Rutsch ins neue Jahr

      ~Ju

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln