Tabelle in Div-Bereich einsetzen

Philip · 11. August 2015

Hallo Zusammen

Bin ganz neu auf dem Board, bitte seit etwas liebe zu mir

Folgende Frage habe ich und zwar:

Ich habe ein Div Container erstellt wo ich ein Foto und daneben eine Auflistung der Eigenschaften der Person schreiben möchte. Diese Eigenschaften sollten aber untereinander stehen, also wie in einer Tabelle. Habe bereits versucht eine Tabelle einzufügen, aber irgendwie ohne Erfolg. Die Tabelle kommt zwar, aber nicht im Div Bereich. Ich weiss nicht ob es an der "relative" Anweisung des Div liegt.

Hier der Quellcode und CSS:

Code

.box10 {
  background-color: #ffdead;
  position: relative;
  float: left;
  width: 48%;
  height: 200px;
  margin-right: 2%;




}
.box11 {
  background-color: #ffdead;
  position: relative;
  float: right;
  width: 50%;
  height: 200px;




}
.test {
	float:left;
	width:133px;
	height:200px;
	margin-right: 20px;
	border:0px solid red;
}

Alles anzeigen

html:

Code

<p class="box10">
<img class="test" src="fotos/irina.jpg" />
Name: Irina <br>
Geburtstag: 14.01.2015 <br>
Fuktion: Geschäftsführer <br>
</class>
 
	<p class="box11">
<img class="test" src="fotos/irina.jpg" />
Name: Irina <br>
Geburtstag: 14.01.2015 <br>
Fuktion: Geschäftsführer <br>
</class>

Alles anzeigen

Die Aufzählung von Name, Geburtstag etc. sollte genau untereinander sein.

Würde mich freuen wenn mir jemand weiter helfen könnte.

Grüsse

Philip

JR Cologne · 11. August 2015

Wo ist bitte dein div-Container? Ich sehe nur p-Tags.

Und was soll bitte das sein?

HTML

</class>

Jage deinen Code bitte erstmal durch den w3c-Validator und dann wird sich vielleicht schon einiges erklären...

wolf · 11. August 2015

Wir sind immer lieb
Am besten fängst du erst mal ganz ohne CSS an .. reines HTML (mit klassennamen für das Styling später)

HTML

<div class="list">
  <div class="l-item">
    <img class="l-image" src="https://goo.gl/oiY70c">
    <div class="l-data">
      <h3 class="l-name">John Doe</h3>
      <span class="l-date">14.09.1986</span>
      <h4 class="l-job">CEO</4>
    </div>
  </div>
  <div class="l-item">
    <img class="l-image" src="http://goo.gl/L6Tvr2">
    <div class="l-data">
      <h3 class="l-name">Max Mustermann</h3>
      <span class="l-date">03.12.1981</span>
      <h4 class="l-job">Geschäftsführer</4>
    </div>
  </div>
</div>

Alles anzeigen

Dann mit Styles

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400,300);
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-color: rgb(238,238,238);
  font-family: 'Lato';
}
.list{
  width: 400px;
  margin: 100px auto;
}
.l-item{
  overflow: hidden;
  border-radius: 3px;
  background-color: rgb(255,255,255);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.l-item + .l-item{
  margin-top: 15px;
}
.l-image{
  display: block;
  width: 100px;
  height: 100px;
  padding: 10px;
  border-radius: 50%;
}
.l-data{
  padding: 10px;
  width: calc(100% - 100px);
}
.l-wrap-topline{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.l-name{
  font-weight: 300;
  font-size: 20px;
}
.l-date{
  font-weight: 300;
  font-size: 12px;
  color: rgb(100,100,100);
}
.l-job{
  font-weight: 300;
  color: rgb(70,70,70);
  margin-top: 3px;
}

Alles anzeigen

Und alles sieht top aus c:

Philip · 26. August 2015

Hallo Wolf

Entschuldigung das ich mich erst jetzt melde, ware beruflich sehr beschäftigt.
Danke für deine detaillierte Erklärung, habe mir denn Code bereits ein wenig angeschaut. Dann machst Du eigentlich für jede geschriebenen Linie z.B. Geschäftsführer, eine neue Klasse und definierst die, sehe ich das richtig?

Ich werde mir am Abend nochmals alles etwas genauer anschauen, mein Problem ist jetzt nur, wie kriege ich zwei Blocks nebeneinander?

So bis zum Abend.

Gruss Philip

MrMurphy · 26. August 2015

Hallo

Meinst du so:

HTML

<!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">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      main {
         width: 1200px;
         padding: 0;
         display: flex;
      }
      section {
         width: 600px;
         padding: 0.5rem;
         border: 1px solid silver;
         margin: 0.5rem;
         display: flex;
      }
      section img {
         display: block;
      }
      section>:nth-child(1) {
         flex: 0 0 200px;
      }
      section>:nth-child(2) {
         margin-left: 1rem;
         flex: 1 0 1%;
      }
      dl {
         overflow: hidden;
         padding: 0;
         margin: 0;
      }
      dt,
      dd {
         float: left;
         margin: 0 0 0.3rem 0;
      }
      dt {
         width: 40%;
         clear: both;
      }
      dd {
         width: 60%;
      }
   }
   /* Vorlage zum Kopieren für Media-Query */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <main>
      <section>
         <img src="http://lorempixel.com/130/150/people" alt="Name der Person">
         <dl>
            <dt>Name:</dt>
            <dd>Irina von Meuchtewitz-Zitzewitz zu Hallersleben</dd>
            <dt>Geburtstag:</dt>
            <dd>14.01.2015</dd>
            <dt>Funktion:</dt>
            <dd>Geschäftsführerin</dd>
         </dl>
      </section>
      <section>
         <img src="http://lorempixel.com/130/150/sports" alt="Name der Person">
         <dl>
            <dt>Name:</dt>
            <dd>Max Meier</dd>
            <dt>Geburtstag und Sternzeichen:</dt>
            <dd>19.02.2013 / Löwe</dd>
            <dt>Funktion:</dt>
            <dd>Hilfsarbeiter</dd>
         </dl>
      </section>
   </main>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

Tabelle in Div-Bereich einsetzen

Jetzt mitmachen!

Teilen