JPT/dashboard
0
0
Fork 0
Code Issues Pull Requests Activity

[TASK] Add a column bounding box to allow padding within columns.

Browse Source
This commit is contained in:
Jan Philipp Timme 2013-09-11 15:53:33 +02:00
parent 61df99ca7b
commit ec85bee1ac
2 changed files with 63 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
index.html
View File

@ -37,66 +37,72 @@
</div> </div>
<div style="clear: both;"></div> <div style="clear: both;"></div>
<div id="content-grid-container"> <div id="content-grid-container">
<div id="content-column-1" class="content-column"> <div class="content-column-bounding-box">
<div class="content-container-bounding-box"> <div id="content-column-1" class="content-column">
<div class="content-container"> <div class="content-container-bounding-box">
<h1>Col1</h1> <div class="content-container">
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p> <h1>Col1</h1>
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
</div>
</div> </div>
</div> <div class="content-container-bounding-box">
<div class="content-container-bounding-box"> <div class="content-container">
<div class="content-container"> <h1>Irgendne Überschrift ...</h1>
<h1>Irgendne Überschrift ...</h1> <p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p> </div>
</div> </div>
</div> </div><!-- content-column-1 -->
</div><!-- content-column-1 --> </div><!-- content-column-bounding-box -->
<div id="content-column-2" class="content-column"> <div class="content-column-bounding-box">
<div class="content-container-bounding-box"> <div id="content-column-2" class="content-column">
<div class="content-container"> <div class="content-container-bounding-box">
<h1>Col2</h1> <div class="content-container">
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p> <h1>Col2</h1>
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
</div>
</div> </div>
</div> <div class="content-container-bounding-box">
<div class="content-container-bounding-box"> <div class="content-container">
<div class="content-container"> <h1>Irgendne Überschrift ...</h1>
<h1>Irgendne Überschrift ...</h1> <p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p> </div>
</div> </div>
</div> <div class="content-container-bounding-box">
<div class="content-container-bounding-box"> <div class="content-container">
<div class="content-container"> <h1>Irgendne Überschrift ...</h1>
<h1>Irgendne Überschrift ...</h1> <p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p> </div>
</div> </div>
</div> <div class="content-container-bounding-box">
<div class="content-container-bounding-box"> <div class="content-container">
<div class="content-container"> <h1>Irgendne Überschrift ...</h1>
<h1>Irgendne Überschrift ...</h1> <p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p> </div>
</div> </div>
</div> </div><!-- content-column-2 -->
</div><!-- content-column-2 --> </div><!-- content-column-bounding-box -->
<div id="content-column-3" class="content-column"> <div class="content-column-bounding-box">
<div class="content-container-bounding-box"> <div id="content-column-3" class="content-column">
<div class="content-container"> <div class="content-container-bounding-box">
<h1>Col3</h1> <div class="content-container">
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird. Desoxyribonukleinsäure ist ein wichtiger Bestandteil der Altpapierverwertungszellulosemaschine. Meine Absätze machen Sinn, denn anders geht es eh nicht.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p> <h1>Col3</h1>
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird. Desoxyribonukleinsäure ist ein wichtiger Bestandteil der Altpapierverwertungszellulosemaschine. Meine Absätze machen Sinn, denn anders geht es eh nicht.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
</div>
</div> </div>
</div> <div class="content-container-bounding-box">
<div class="content-container-bounding-box"> <div class="content-container">
<div class="content-container"> <h1>Irgendne Überschrift ...</h1>
<h1>Irgendne Überschrift ...</h1> <p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p> </div>
</div> </div>
</div> <div class="content-container-bounding-box">
<div class="content-container-bounding-box"> <div class="content-container">
<div class="content-container"> <h1>Irgendne Überschrift ...</h1>
<h1>Irgendne Überschrift ...</h1> <p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p> </div>
</div> </div>
</div> </div><!-- content-column-3 -->
</div><!-- content-column-3 --> </div><!-- content-column-bounding-box -->
<div class="clear-both"></div> <div class="clear-both"></div>
</div> <!-- content-grid-container --> </div> <!-- content-grid-container -->
</div> <!-- nonfooter-content-container --> </div> <!-- nonfooter-content-container -->

10
style/main.css
View File

@ -63,15 +63,17 @@ h5 { font-size: 11pt; }
color: hsla(0, 0%, 100%, 0.95); color: hsla(0, 0%, 100%, 0.95);
} }
.content-column { .content-column-bounding-box {
float: left; float: left;
width: 33.3%; width: 33.3%;
margin-top: 1em; }
margin-bottom: 0em;
.content-column {
padding: 2em 1em 2em 1em;
} }
.content-container-bounding-box { .content-container-bounding-box {
padding: 1em 1em 2em 1em; padding-bottom: 2em;
} }
.content-container { .content-container {