Zitat von
Spooky
Hier gibt es auch noch eine Lösung mit Flexboxen:
http://philipwalton.github.io/solved...os/holy-grail/ Ist zwar mit fixen Breiten der seitlichen Spalten, aber ich denke die Flexbox Lösung funktioniert auch ohne viel Umwege mit relativen Spalten, habe es mir aber nicht im Detail angesehen. Wird halt auch nicht ohne weiteres in jedem (alten) Browser funktionieren.
Hallo,
das ist eine Lösung für die Zukunft. Leider funktioniert das nicht mit älteren IE < 11. Grad vor kurzem auf dem Schirm gehabt ...
PHP-Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Flexbox Examples - Contao Holy Grail</title>
<meta name="description" content="Some flexbox examples.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<style>
#wrapper, #container {
-webkit-box-direction: normal
}
#wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
#container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
#left .inside, #right .inside {
padding: 12px;
background-color: #e7e7e7
}
#left {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1
}
#right {
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3
}
#main {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
padding: 12px
}
@media all and (min-width:720px) {
#container {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
}
#left, #right {
-webkit-box-flex: 0;
-webkit-flex: 0 0 180px;
-ms-flex: 0 0 180px;
flex: 0 0 180px
}
#main {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
}
@media all and (min-width:960px) {
#left, #right {
-webkit-box-flex: 0;
-webkit-flex: 0 0 240px;
-ms-flex: 0 0 240px;
flex: 0 0 240px
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
<div class="" id="wrapper">
<header id="header">
<div class="inside">
<h1>HEADER</h1>
</div>
</header>
<div class="" id="container" style="max-width: 90%; margin: 0 auto;">
<div class="" id="main">
<div class="inside">
<h2>This is the main content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum sequi nisi aliquam, ipsum tempore illo recusandae. Odit consectetur totam hic eius, commodi molestiae voluptates porro vel laboriosam, tempore, nostrum quis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos mollitia vero facilis, deserunt omnis, fugit quod nam, neque iusto reprehenderit tempora. Atque fuga inventore perferendis harum et culpa repudiandae, laudantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum ea at nobis dolores doloremque incidunt voluptate, dignissimos, veniam soluta temporibus sint error odit nesciunt ducimus excepturi quam, itaque eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, molestiae, delectus nemo quibusdam odit fugiat velit facilis soluta odio ipsam ullam alias repellat. Ipsam porro voluptate adipisci nihil assumenda, ab.</p>
</div></div>
<div class="" id="left">
<div class="inside">
<h4>Sidebar 1</h4>
<p>Atque fuga inventore perferendis harum et culpa repudiandae, laudantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum ea at nobis dolores doloremque incidunt voluptate, dignissimos, veniam soluta temporibus sint error odit nesciunt ducimus excepturi quam, itaque eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div></div>
<div class="" id="right">
<div class="inside">
<h4>Sidebar 2</h4>
<p>Atque fuga inventore perferendis harum et culpa repudiandae, laudantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum ea at nobis dolores doloremque incidunt voluptate, dignissimos, veniam soluta temporibus sint error odit nesciunt ducimus excepturi quam, itaque eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div></div>
</div>
<footer class="" id="footer">
<div class="inside">
<h3>FOOTER</h3>
</div>
</footer>
</div>
</body>
</html>
[Gelöst] Responsive-Grid (reine Prozentangaben) mit dreispaltigem Layout kombinieren
Zitieren
. Die erwähnten Lösungen decken nicht alle Eigenschaften des ursprünglichen "Holy Grail" Layouts ab, soweit ich mich erinnere.
Gibt es denn da keine schönere Möglichkeit? Könnten die Navigations-Module nicht direkt selbst mit Grid-Klassen versehen werden, um nicht jede Spalten-Navigation als einzelnen Artikel auf jeder einzelnen Unterseite separat einfügen zu müssen?
Lesezeichen