Css Flexbox Layout?

Hallo ich möchte folgendes Layout mit Flexboxen umsetzen.

Bild zum Beitrag

Nun zu meinem Problem!

Wie kann ich es schaffen das neben dem Content container der Sidebar container steht? Ich bekomme es einfach nicht hin. Beim mir stehen sie immer untereinander.

Schon einmal danke für euer Antworten!

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

phiLue

25.10.2019, 12:06

Grob zusammengeschrieben, aber passt in etwa wohl so wie du es möchtest.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header style="margin: 1rem; padding: 1rem; border: solid 1px black;">
	<p>Header</p>
</header>
<div style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between;">
  <div style="margin: 1rem; padding: 1rem; border: solid 1px black; flex-basis: 2; flex-grow: 2;">
    <p>Content</p>
  </div>
  <div style="margin: 1rem; padding: 1rem; border: solid 1px black;  flex-basis: 1">
    <p>Sidebar</p>
  </div>
</div>
<footer style="margin: 1rem; padding: 1rem; border: solid 1px black;">
	<p>Footer</p>
</footer>
</body>
</html>

Woher ich das weiß:Berufserfahrung

01Basti21

Fragesteller

25.10.2019, 12:20

Vielen Dank funktioniert super

verreisterNutzer

25.10.2019, 13:16

Heutzutage gibt es sowohl CSS Grid* als auch Flexbox*, wobei Ersteres eher für solch fixe Layouts geeignet ist.

In Zukunft wäre es empfehlenswert, deine bisherigen Versuche vorzuzeigen.

* Verlinkung der bestes Guides zum Thema.

Woher ich das weiß:Berufserfahrung

Jerrry230602

25.10.2019, 12:10

Habe sowas früher mit der CSS Float-Eigenschaft realisiert.

Woher ich das weiß:Berufserfahrung – Anwendungsentwickler (vorwiegend .NET)

MrStef

25.10.2019, 12:24

float ist tod , es lebe grid und flex ^^ ;-)

TheQ86

25.10.2019, 13:00

@MrStef

tot als Adjektiv wird mit t geschrieben. Tod als Substantiv mit d.

MrStef

25.10.2019, 15:07

@TheQ86

stimmt ;-)

Ähnliche Fragen

CSS Flex Box 2x2 Layout erzeugen?

Wie bekomme ich mit CSS Flexbox so ein Layout:

...zur Frage

CSS div container neben img in der selben Zeile?

Ich wollte ein Bild neben einem Div-container in der obersten Zeile platzieren, habe jedoch keinen Weg gefunden, kann mir jmd helfen? Danke! :^)

...zur Frage

HTML - div verschwinden lassen nach Zeit?

Hallo,

ich habe eine einfache Webanwendung mit HTML, CSS und JavaScript programmiert. Mit CSS habe ich eine einfache Lade-Animation erstellt.

Diese Animation ist in einem .div -Container gespeichert.

Diese Animation soll nach 5 Sekunden automatisch verschwinden, da der Content meiner Webanwendung bis dahin richtig geladen hat und sonst der Bildschirm mit den verschiedenen Elementen überflutet wäre...

Durch Google bin ich leider nicht schlauer geworden.

Kann mir jemand den Code als Antwort auf diese Frage geben oder einen Link zum Code geben?

Danke im Voraus!

...zur Frage

CSS Hintergrund von Text separat bewegen?

Ich gestalte eine Webseite mit Elementen, die sich überlappen. Das setze ich mit Flexbox um. Ich habe zwei Texte, die nebeneinander liegen. Die Texte haben jeweils einen farbigen Kreis als Hintergrund. Die Kreise sollen sich an den Kanten überlappen, der Text jedoch nicht.

Kann ich es irgendwie umsetzen, dass der Text auf den Kreisen liegt und ich die Kreise darunter separat bewegen kann, ohne dass der Text sich mit bewegt? Und ohne position:absolute zu nutzen?

...zur Frage

text neben bild in css?

Guten Tag,

wie kann ich das in css umsetzen das ich links ein bild hab un rechts daneben text hab(wie in dem bild).

...zur Frage

CSS Grid leere Zelle?

Hi,

bin gerade etwas Ratlos wie ich das mit css grid umsetzen kann.

Aktuelle habe ich folgenden Code

<div class="grid-container">
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <input type="text" class="grid-item">
  <div class="grid-item">Ein Text</div>
  <select class="grid-item"></select>
  <div class="grid-item">Ein Text</div>
</div>

CSS 
.grid-container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(4, 1fr);
}

https://jsfiddle.net/tb2e75L8/2/

Jetzt will ich jedoch alle Div's mit dem Inhalt "Ich soll leer sein" aus dem html entfernen ohne jedoch die nachfolgenden zu verschieben. Also sozusagen eine Leere Zelle. Ich habe schon über grid-template-areas nachgelesen, jedoch bräuchte ich da für jedes item eine eigene ID, oder sehe ich das falsch?

Für sonstige Vorschläge zum realisieren von diesem Layout (auch ohne Grid) bin ich grundsätzlich auch offen.

Vielen Dank im Voraus

whgoffline

...zur Frage

CSS transition mit JavaScript onclick ausfuehren?

Ich wuerde gerne in einer NavBar (oben fixiert), links einen Button erstellen, der mit onclick eine CSS ausfuehrt, die eine SideBar (von links) drauflegt.

Also, sobald links oben das Onclick geklickt wird -> Sidebar wird von links aus reingeschoben, indem eine CSS ausgefuehrt wird.

Das einzige was Ich nicht wuesste ist wie Ich das JS onclick dazu bringe, entweder eine CSS auszufuehren, oder gar zu erstellen/auszuwechseln (zu replacen). Bzw. alternativ, was mir noch in den Sinn kaeme, koennte das CSS in default ja in einem Kommentar stehen, und bei Ausfuehrung wird zwischen zwei CSS gewechselt (das eine wird in Kommentar gesetzt (default) und das andere, was normal in Kommentar steht, steht nun ohne Kommentar, und bei wegklicken wird das wieder zurueckgesetzt) - aber wie wuerde das gehen, Ich habe naemlich keinerlei Idee dazu..

...zur Frage

HTML CSS Website Footer wird im Container angezeigt, obwohl er nicht drin ist?

Hallo,

Ich "programmiere" gerade ein wenig mit HTML und CSS und baue eine Website mit einem Head, einer Main und einem Footer. Mein Problem ist, dass alle Elemente der Website nach der Main (bei mir heißt sie "Container") trotzdem noch innerhalb des Containers angezeigt werden. Somit ist bei mir der Footer im Container Main, obwohl der Container vorher schon geschlossen wurde.

-------------------------------------------------------------------------------------

HTML CODE:

<!DOCTYPE html>
<html>
 <head>
  <title>Aufgabe 1</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
  <header>
   <header1 class="item1">
    <h2>FeWos</h2>
   </header1>
  </header>
  <div" class="container">
   <div class="b1">
    <div>
     <h1>Item 1</h1>
    </div>
    <div class="bild1">
     <img src="pingu.png" width="50%" height="50%">
    </div>
   </div>
   <div class="b1"><br>Box 2</div>
   <div class="b1"><br>Box 3</div>
   <div class="b1"><br>Box 4</div>
   <div class="b1"><br>Box 5</div>
   <div class="b1"><br>Box 6</div>
  </div>
  <footer>
   <p>Hallo</p>
  </footer>
 </body>
</html>

----------------------------------------------------------------------------------------------------

CSS CODE:

body {
  margin: 0;
}
header {
  height: 120px;
  background-color: rgb(43, 43, 43);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.container {
  border: 3px solid;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 90px;
  padding: 90px;
}
.b1 {
  display: flex;
  background-color: rgb(93, 161, 224);
  width: 30%;
  height: 500px;
  flex-grow: 1;
  transition: transform 0.2s ease-out;
  border-radius: 20px;
}
.b1:hover {
  transform: scale(1.05);
}
.bild1 {
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  width: auto;
  height: auto;
}
footer {
  background-color: rgb(43, 43, 43);
  width: 100%;
  height: 120px;
  padding: 0px;
}

----------------------------------------------------------------------------

Wie man sehen kann wird der "container" mit </div> abgeschlossen, aber der Footer ist trotzdem im Container. Hoffe mir kann jemand bei dem Problem helfen.

Auf dem Bild kann man das auch ganz gut sehen. Das anthrazit farbige soll der Footer sein und dieser liegt innerhalb des Containers, welcher zur Sichtbarkeit eine Umrandung hat.
Würde mich echt freuen, wenn mir jemand weiterhelfen kann. Hab auch Chat GBT schon gefragt, aber Chat GPT sagt, dass der Code ganz normal ist und, dass der Footer nicht im Container ist.

...zur Frage

Wie in CSS eine Sidebar erstellen, die den Content meiner Webseite verschiebt?

Hallo zusammen,

ja ich weiß, es klingt ziemlich kompliziert was ich suche, aber das ist es eigentlich gar nicht. Ich habe zwei Divs auf meiner Webseite. Div 1 ist ein Button und div 2 soll eine Sidebar werden. Wenn ich den Button drücke, dann soll Div 1 verschwinden und Div 2 auftauchen. Das klappt auch alles via JS wunderbar und ohne Probleme.

Nun würde ich jedoch gerne, dass der Content meiner Webseite (neben der Sidebar) nun zentriert wird (ist bereits der Fall), jedoch auch zentriert wird wenn die Sidebar eingeblendet wird. Also als ob man das Browser-Fenster verkleinert und dann die Sidebar anzeigt.

Ich hoffe ihr habt verstanden was ich will und könnt mir eventuell helfen.

Danke sehr!

...zur Frage

Wordpress-Theme - Sidebar entfernen

Hallo ihr Lieben, Ich habe leider ueberhaupt keine Ahnung von CSS und Co, aber vielleicht koennt ihr mir ja weiterhelfen. Und zwar moechte ich fuer meinen Blog gerne folgendes Theme verwenden:

https://selademo.wordpress.com/blog/

Allerdings wuerde ich gerne die rechte Sidebar komplett verschwinden lassen, was leider ueber die Anpassungsmoeglichkeiten, die gegeben sind, nicht funktioniert (dabei bleiben immer search, meta, categories etc. bestehen). Habt ihr vielleicht eine Idee, wie man das retten koennte - am besten auf einfach? :D

Hier der Link zum zip-Download: http : // design311 . com / wpthemes / theme / sela

Viele Gruesse

...zur Frage

HTML CSS - DIV Container wie iframe nutzen

Ich hab mal eine Frage, gibt es in CSS und HTML eine Möglichkeit einen DIV Container wie einen iFrame zu nutzen und in diesen Container Content von einer anderen Webseite hineinzuladen?

...zur Frage

WordPress Sidebar rechts neben Content?

Hallo Leute, ich möchte gerne meine Webseite im Boxed Layout betreiben, und ich suche ein Plugin, welches es mir ermöglicht die Widgets rechts vom Content anzeigen zu lassen.

Hier einmal ein Bild wie ich mir das vorstelle: http://prntscr.com/cir6t1

Super wäre es, wenn das Plugin mit Plugins welche es ermöglichen für jede Seite eine spezifische Sidebar einzustellen kombinierbar ist, und wenn es beim Scrollen auch mit kommt, wobei mir das mit den Scrollen nicht ganz so wichtig ist.

...zur Frage

Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

...zur Frage

Custom CSS Wordpress einzelne Seiten ausschließen?

Hallo, wie kann ich das Wordpress CSS nur für einzelne Seiten einstellen. Hab schon bisschen was zusammengebastelt. Danke für eure Hilfe!

@media only screen and (max-width: 359px) {

#primary .content-container {

padding-left: 10px !important;

padding-right: 10px !important;

}

{display:none}

.postid-3701,

.postid-3712,

.postid-3731,