From 5f515eb5bcc17f0d5dc4ccb094e887dd6834540f Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Thu, 12 Sep 2013 15:21:54 +0200 Subject: [PATCH] [TASK] Seperate header and body from content-container. --- index.html | 66 ++++++++++++++++++++++++++++---------------------- js/main.js | 5 ++++ style/main.css | 36 ++++++++++++++++++--------- 3 files changed, 66 insertions(+), 41 deletions(-) diff --git a/index.html b/index.html index ca101d7..8ab020a 100644 --- a/index.html +++ b/index.html @@ -39,68 +39,76 @@
+
-
-

Col1

-

Hallo!
Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
Ein paar Sätze pro Absatz und gut ist! ;-)

Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

Achja: Ich grüße alle die mich kennen!
Macht's gut!

-
-
-
-
-

Irgendne Überschrift ...

+
+

Content Box Header

+
+

Hallo!
Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
Ein paar Sätze pro Absatz und gut ist! ;-)

Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

Achja: Ich grüße alle die mich kennen!
Macht's gut!

+
+
-
-

Col2

+
+

Content Box Header

+
+

Hallo!
Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
Ein paar Sätze pro Absatz und gut ist! ;-)

Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

Achja: Ich grüße alle die mich kennen!
Macht's gut!

-
-

Irgendne Überschrift ...

+
+

Content Box Header

+
+

Hallo!
Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
Ein paar Sätze pro Absatz und gut ist! ;-)

Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

Achja: Ich grüße alle die mich kennen!
Macht's gut!

-
-

Irgendne Überschrift ...

-

Hallo!
Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
Ein paar Sätze pro Absatz und gut ist! ;-)

Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

Achja: Ich grüße alle die mich kennen!
Macht's gut!

-
-
-
-
-

Irgendne Überschrift ...

+
+

Content Box Header

+
+

Hallo!
Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
Ein paar Sätze pro Absatz und gut ist! ;-)

Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

Achja: Ich grüße alle die mich kennen!
Macht's gut!

+
+
-
-

Col3

-

Hallo!
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.
Ein paar Sätze pro Absatz und gut ist! ;-)

Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

Achja: Ich grüße alle die mich kennen!
Macht's gut!

+
+

Content Box Header

-
-
-
-

Irgendne Überschrift ...

+

Hallo!
Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
Ein paar Sätze pro Absatz und gut ist! ;-)

Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

Achja: Ich grüße alle die mich kennen!
Macht's gut!

-
-

Irgendne Überschrift ...

+
+

Content Box Header

+
+

Hallo!
Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
Ein paar Sätze pro Absatz und gut ist! ;-)

Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

Achja: Ich grüße alle die mich kennen!
Macht's gut!

+
+
+

Content Box Header

+
+
+

Hallo!
Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
Ein paar Sätze pro Absatz und gut ist! ;-)

Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

Achja: Ich grüße alle die mich kennen!
Macht's gut!

+
+
+
diff --git a/js/main.js b/js/main.js index fec3205..238a25b 100644 --- a/js/main.js +++ b/js/main.js @@ -1,4 +1,9 @@ $(function() { + + $(".content-container-header").each(function() { + $(this).css("background-color", "hsla(" + Math.round(Math.random() * 360) + ", 100%, 50%, 1);"); + }); + //setup the draggable content containers $(".content-container-bounding-box").draggable({ "distance": 10, diff --git a/style/main.css b/style/main.css index f06025a..e3e34d6 100644 --- a/style/main.css +++ b/style/main.css @@ -80,27 +80,39 @@ h5 { font-size: 11pt; } padding-bottom: 4em; } -.content-container { - padding-top: 0.3em; - padding-bottom: 0.3em; +.content-container-header { + cursor: move; + padding-left: 0.75em; + padding-right: 0.75em; + padding-top: 5px; /* see border-radius */ + padding-bottom: 0em; color: hsla(0, 0%, 10%, 0.9); - background-color: hsla(0, 0%, 100%, 0.8); - border-radius: 5px; + background-color: hsla(0, 0%, 65%, 0.75); + border-radius: 5px 5px 0px 0px; } -.content-container h1 { - margin-top: 5px; /* see border-radius of .content-container */ - padding-left: 0.5em; - padding-right: 0.5em; - background-color: hsla(0, 100%, 100%, 0.3); +.content-container-header h1 { color: hsla(0, 0%, 25%, 1); } -.content-container p { - margin: 0.5em 0.75em 1em 0.75em; +.content-container-body { + padding: 0.5em 0.75em 1em 0.75em; + color: hsla(0, 0%, 10%, 0.9); + background-color: hsla(0, 0%, 100%, 0.8); + border-radius: 0px 0px 5px 5px; +} + +.content-container-body p { color: hsla(0, 0%, 5%, 1); } +.droppable-container-placeholder { + border-width: 2px 2px 2px 2px; + border-style: dashed; + border-color: hsla(0, 0%, 33%, 0.75); + margin-bottom: 2em; +} + #wallpaper { position: fixed; top: 0px;