Grundstruktur für eine Webseite selbst Designen funktioniert einfach nicht, warum?

chevy · 13. April 2016

Hallo zusammen,

ich versuche schon seit Tagen vergeblich das Design dieser einfachen Grundstruktur zu ändern.
Wie muss der Code verändert werden, dass ich oben auch drei gleich große Blöcke habe?
Wer kann helfen ? Vielen Dank schon mal

[Blockierte Grafik: http://www.bilder-upload.eu/upload/06ca49-1460570895.png]

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Happyweighters.de Abnehmen</title><link rel="stylesheet" href="style.css" type="text/css" /></head><body>




<div class="site">  <header>Kopf    </header>  <nav>navi</nav>  <article>mitte</article>  <aside>unten</aside>  <footer>fuß</footer></div>

CSS

.site {  width: 100%;  display: -ms-grid; /* Displaymodus festlegen */  -ms-grid-columns: 25% 50% 25%; /* Breite der Spalten */  -ms-grid-rows: auto auto auto; /* Höhe der Zeilen */}




header {  -ms-grid-column: 2; /* Spalte 1 definieren */  -ms-grid-row: 1; /* Zeile 1 definieren */
  height: 150px;  background: #b07e4a;}




nav {  -ms-grid-column: 1;  -ms-grid-row: 2;  height: 450px;  background: #94c11f;}
article {  -ms-grid-column: 2;  -ms-grid-row: 2;  height: 450px;  background: white;}
aside {  -ms-grid-column: 3;  -ms-grid-row: 2;  height: 450px;  background: #38aae1;}
footer {  -ms-grid-column: 1;  -ms-grid-row: 3;  -ms-grid-column-span: 3;  height: 100px;  background: #683c10;}

Alles anzeigen

wolf · 13. April 2016

Etwas Verwenden was auch Funktioniert..
das MS-GRID tut's nicht.
http://caniuse.com/#search=grid-row

Flexbox oder FLoating

Basi · 14. April 2016

Das MS-Grid ist Microsofts Auslegung des sich in der Entwicklung befindlichen Grid-Layouts des w3c. Anwendung findet es im Internet Explorer (was ziemlich egal ist) und vor Allem in Windows Store Apps die mit HTML5 entwickelt werden.

MrMurphy · 14. April 2016

Hallo

Zitat

Wie muss der Code verändert werden, dass ich oben auch drei gleich große Blöcke habe?

Ich sehe zwei Möglichkeiten:

Wenn die beiden äußeren Blöcke keinen Inhalt haben sollen kannst du die Hintergrundfarbe des body-Bereichs entsprechend anpassen.

Wenn die beiden äußeren Inhalt enthalten sollen musst du die beiden äußeren Blöcke auch anlegen. Ich habe für mein Beispiel zwei div-Container verwendet.

Außerdem solltest du HTML5 verwenden, da XHTML Elemente wie header, nav, aside und so weiter nicht kennt.

Auf unnötige Elemente wie das div.site sollte zudem verzichtet werden. Als grid-Container ist das body-Element besser geeignet.

Ich habe mal ein entsprechendes Beispiel erstellt:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Grid-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>
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
         display: -ms-grid;
         -ms-grid-columns: 25% 50% 25%;
         -ms-grid-rows: 150px 450px 100px;
      }
      .obenlinks {
         /*background: rot*/
         background: #ED1C24;
         -ms-grid-column: 1;
         -ms-grid-row: 1;
      }
      header {
         /*background: hellbraun*/
         background: #b07e4a;
         -ms-grid-column: 2;
         -ms-grid-row: 1;
      }
      .obenrechts {
         /*background: pink*/
         background: #FFAEC9;
         -ms-grid-column: 3;
         -ms-grid-row: 1;
      }
      nav {
         /*background: grün*/
         background: #94c11f;
         -ms-grid-column: 1;
         -ms-grid-row: 2;
      }
      article {
         /*background: weiß*/
         background: white;
         -ms-grid-column: 2;
         -ms-grid-row: 2;
      }
      aside {
         /*background: blau*/
         background: #38aae1;
         -ms-grid-column: 3;
         -ms-grid-row: 2;
      }
      footer {
         /*background: dunkelbraun*/
         background: #683c10;
         -ms-grid-column: 1;
         -ms-grid-row: 3;
         -ms-grid-column-span: 3;
      }
   }
   </style>
</head>
<body>
   <div class="obenlinks">
      <p>div.obenlinks rot</p>
   </div>
   <header>
      <p>header hellbraun</p>
   </header>
   <div class="obenrechts">
      <p>div.obenrechts pink</p>
   </div>
   <nav>
      <p>nav grün</p>
   </nav>
   <article>
      <p>article weiß</p>
      <p>Die Seite wurde mit dem grid-Layout ( display: grid; ) erstellt.</p>
      <p>Das funktioniert zur Zeit (April 2016) nur im IE11 und IE Edge.</p>
   </article>
   <aside>
      <p>aside blau</p>
   </aside>
   <footer>
      <p>footer dunkelbraun</p>
   </footer>
</body>
</html>

Alles anzeigen

Dass das Grid-Layout aktuell nur im IE funktioniert wird dir bekannt sein.

Gruss

MrMurphy

chevy · 19. April 2016

vielen Dank für die Antworten.

@MrMurphy
Gibt es auch eine Möglichkeit, dass für alle Browser zu machen?

MrMurphy · 19. April 2016

Hallo

Zitat

Gibt es auch eine Möglichkeit, dass für alle Browser zu machen?

Für die wichtigen - ja. Es gibt verschiedene Lösungen: display: table oder display: inline-block oder float oder display: flex

Wobei ich display: flex (das Flexbox-Modell) bevorzuge.

Dafür habe ich auch mal ein Beispiel erstellt:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Flexbox-Layout 02</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>
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
         display: flex;
         flex-wrap: wrap;
      }
      .obenlinks,
      .obenrechts,
      nav,
      aside {
         width: 25%;
      }
      header,
      article {
         width: 50%;
      }
      footer {
         width: 100%;
      }
      .obenlinks,
      header,
      .obenrechts {
         height: 120px;
      }
      nav,
      article,
      aside {
         height: 300px;
      }
      footer {
         height: 100px;
      }
      .obenlinks {
         /*background: rot*/
         background: #ED1C24;
      }
      header {
         /*background: hellbraun*/
         background: #b07e4a;
      }
      .obenrechts {
         /*background: pink*/
         background: #FFAEC9;
      }
      nav {
         /*background: grün*/
         background: #94c11f;
      }
      article {
         /*background: weiß*/
         background: white;
      }
      aside {
         /*background: blau*/
         background: #38aae1;
      }
      footer {
         /*background: dunkelbraun*/
         background: #683c10;
      }
   }
   </style>
</head>
<body>
   <div class="obenlinks">
      <p>div.obenlinks rot</p>
   </div>
   <header>
      <p>header hellbraun</p>
   </header>
   <div class="obenrechts">
      <p>div.obenrechts pink</p>
   </div>
   <nav>
      <p>nav grün</p>
   </nav>
   <article>
      <p>article weiß</p>
      <p>Die Seite wurde mit dem flexbox-Layout ( display: flex; ) erstellt.</p>
   </article>
   <aside>
      <p>aside blau</p>
   </aside>
   <footer>
      <p>footer dunkelbraun</p>
   </footer>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

Grundstruktur für eine Webseite selbst Designen funktioniert einfach nicht, warum?

Jetzt mitmachen!

Teilen