Wie baue ich das Layout?

10110010

Mitglied
Hallöle,

wie baue ich sowas mit Div's. Habe zuerst an display: flex; gedacht, aber ich weis nicht wie.

Hoffe mir kann einer helfen.

Layout.png

Gruß
10110010
 
Hallo

Ohne den Inhalt zu kennen und ohne zu wissen wie sich das Layout bei schmalen Fenstern verhalten soll kann dir niemand die Frage beantworten.

Für die Darstellung ist grundsätzlich erst einmal float geeignet.

Gruss

MrMurphy
 
Vom Grundprinzip her so, um den oberen Abschnitt in zwei Felder einzuteilen:
HTML:
<div class="flex-container">
  <div class="flex-item item1">
      <p>leftCol</p>
  </div>
  <div class="flex-item item2">
      <p>rightCol</p>
      <p>rightCol</p>
      <p>rightCol</p>
      <p>rightCol</p>
      <p>rightCol</p>
  </div>
</div>
CSS:
.flex-container {
    display:flex;
}
.flex-item {
    margin:10px;
    border:1px solid #000;
}
.item1 {
    flex:1;
}
.item2 {
    flex:3;
}
 
Hallo,

es soll so eine Art Profil werden.
Der Große Bereich links ist ein Bild.
Rechts daneben sollen Stammdaten zum User stehen.
Darunter kommen dynamische Daten.
Stammdaten und dynamische daten sind immer im Format
Label: Value
angezeigt. Aber dabei soll Label so groß wie dass größte Label sein.
 
So wie es SpiceLab dir es geschickt hat ist es richtig nur muss du selberbestimmen was für ein Margin, Padding und border du haben willst.
 
Hallo 10110010

Nach deinen erweiterten Angaben ist Flexbox besser geeignet. Ich habe mal einen Beispielquelltext erstellt:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
         min-width: 0;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         width: 96%;
         margin: 1rem auto;
         /*margin: 0;*/
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0;
      }
      img {
         /*text-align: bottom;*/
         min-width: 0;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

   /*Listen*/
   @media all {
      ul,
      ol {
         padding: 0;
      }
      li {
         list-style-type: none;
      }
      li::before {
         content: "\21d2" " ";
         color: green;
         /*font-size: 0.8rem;*/
      }
      dl {
         margin: 0.3rem 0;
      }
      dt,
      dd {
         margin: 0;
      }
   }

   /*Spezielle Einstellungen*/
   @media all {
      .stammdaten {
         display: flex;
      }
      .stammdaten figure {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 300px;
      }
      .stammdaten dl {
         margin-left: 2rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: calc(100% - 300px);
         display: flex;
         flex-wrap: wrap;
      }
      .stammdaten dl dt {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 150px;
      }
      .stammdaten dl dd {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: calc(100% - 150px);
      }
   }

   /*Flexbox für IE*/
         /*-ms-flex-preferred-size: calc(50% - 1rem);*/
   /*Vorlage für das gesamte CSS*/
   @media all {
   }
   /*Vorlage zum Kopieren für Media Queries - Mobile first*/
   @media only screen and (min-width: 0px) {
   }
   /*Vorlage zum Kopieren für Media Queries - Desktop first*/
   @media only screen and (max-width: 0px) {
   }

   </style>
</head>
<body>
   <header>
      <h1>Profil von Gundula Gause</h1>
   </header>
   <nav>
   </nav>
   <main>
      <h2>Stammdaten</h2>
      <section class="stammdaten">
         <figure>
            <img src="http://lorempixel.com/250/400/cats/8">
            <figcaption>Gundula Gause</figcaption>
         </figure>
         <div>
            <dl>
               <dt>Name:</dt>
               <dd>Gundula Gause</dd>
               <dt>Geburtsort:</dt>
               <dd>Schnurrhausen</dd>
               <dt>Größe:</dt>
               <dd>17,3 cm</dd>
               <dt>Augenfarbe:</dt>
               <dd>grün</dd>
               <dt>Hobbys:</dt>
               <dd>Mäuse jagen</dd>
            </dl>
         </div>
      </section>
      <h2>Dynamische Daten</h2>
      <section class="dynamischedaten">
         <p>Hier folgen die dynamischen Daten, entweder auch in Listenform wie bei den Stammdaten oder auf andere Weise. Es macht keinen  Spaß sich selbst Daten auszudenken.</p>
         <p>Es ist natürlich problemlos möglich diese Datei responsive zu gestalten.</p>
         <p>Hinweis: Der Quelltext enthält einige CSS-Angaben, die nicht unbedingt erforderlich sind, die ich aber immer wieder verwende und entsprechend "griffbereit" haben möchte.</p>
      </section>
   </main>
   <footer>
   </footer>
</body>
</html>

Gruss

MrMurphy
 
Zurück