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