laerik
Neues Mitglied
Moin,
ich bin momentan dabei mir ein Design für Drupal zu basteln, und zwar soll es vom Prinzip her dem Holy Grail Layout entsprechen.
So ungefähr stelle ich mir das ganze vor:
weiß == freie Flächen
So ungefähr habe ich das auch schon hinbekommen, und zwar ungefähr (vereinfacht) so:
<body>
<header>
<div class="wrapper">
</div>
</header>
<div id="page-content">
<aside id="sidebar-left" class="column sidebar">
<!-- Ausgabe durch Drupal -->
</aside>
<div id="main-content" class="column">
<section id="articles">
<!-- Ausgabe durch Drupal -->
</section>
</div>
<aside id="sidebar-right" class="column sidebar">
<!-- Ausgabe durch Drupal -->
</aside>
</div>
<footer>
<div class="wrapper">
</div>
</footer>
Aktuell weise ich dem Header (bzw. dem Wrapper) eine Breite von 900px zu und zentriere diese via margin: 0 auto.
Der page-content div enthält die sidebars und artikel und hat eine Breite von 1500px, ich zentriere diesen ebenfalls mit margin: 0 auto;
Beim Footer gilt das gleiche wie beim Header.
Problem ist nun, dass die Breite von Header und Footer nicht mit der des page-content Containers übereinstimmen und somit anders zentriert wird (siehe folgendes Bild)
Ein weiteres Problem ist, dass wenn ich via Drupal eine Sidebar deaktiviere, die fixe Breite von 1500px bleibt, also eine freie Fläche entsteht, die das Design noch mehr "verrutschen" lässt.
Hat jemand vielleicht einen Ansatz für mich?
div#page-content {
max-width: 1500px;
width: auto;
margin: 0 auto;
padding: 10px 0px 10px 0px;
background-color: green;
}
section#articles {
max-width: 900px;
background-color: red;
}
div#page-content .column { float: left; }
div#page-content aside.sidebar {
background-color: yellow;
width: 200px;
border-radius: 5px;
font-size: .8rem;
background-color: #F6F6F2;
}
div#page-content #sidebar-left { margin-right: 10px; }
div#page-content #sidebar-right { margin-left: 10px; }
ich bin momentan dabei mir ein Design für Drupal zu basteln, und zwar soll es vom Prinzip her dem Holy Grail Layout entsprechen.
So ungefähr stelle ich mir das ganze vor:
weiß == freie Flächen
So ungefähr habe ich das auch schon hinbekommen, und zwar ungefähr (vereinfacht) so:
<body>
<header>
<div class="wrapper">
</div>
</header>
<div id="page-content">
<aside id="sidebar-left" class="column sidebar">
<!-- Ausgabe durch Drupal -->
</aside>
<div id="main-content" class="column">
<section id="articles">
<!-- Ausgabe durch Drupal -->
</section>
</div>
<aside id="sidebar-right" class="column sidebar">
<!-- Ausgabe durch Drupal -->
</aside>
</div>
<footer>
<div class="wrapper">
</div>
</footer>
Aktuell weise ich dem Header (bzw. dem Wrapper) eine Breite von 900px zu und zentriere diese via margin: 0 auto.
Der page-content div enthält die sidebars und artikel und hat eine Breite von 1500px, ich zentriere diesen ebenfalls mit margin: 0 auto;
Beim Footer gilt das gleiche wie beim Header.
Problem ist nun, dass die Breite von Header und Footer nicht mit der des page-content Containers übereinstimmen und somit anders zentriert wird (siehe folgendes Bild)
Ein weiteres Problem ist, dass wenn ich via Drupal eine Sidebar deaktiviere, die fixe Breite von 1500px bleibt, also eine freie Fläche entsteht, die das Design noch mehr "verrutschen" lässt.
Hat jemand vielleicht einen Ansatz für mich?
div#page-content {
max-width: 1500px;
width: auto;
margin: 0 auto;
padding: 10px 0px 10px 0px;
background-color: green;
}
section#articles {
max-width: 900px;
background-color: red;
}
div#page-content .column { float: left; }
div#page-content aside.sidebar {
background-color: yellow;
width: 200px;
border-radius: 5px;
font-size: .8rem;
background-color: #F6F6F2;
}
div#page-content #sidebar-left { margin-right: 10px; }
div#page-content #sidebar-right { margin-left: 10px; }