From 4cc74d8a9c7000af6edb8da42706a837b1501b0f Mon Sep 17 00:00:00 2001 From: Kai Moritz Date: Mon, 1 Jul 2013 23:52:13 +0200 Subject: [PATCH] Content-Layout (auf zweispaltiges Layout umgestellt) --- src/main/webapp/css/base.css | 4 + src/main/webapp/css/base/content.css | 0 src/main/webapp/css/base/layout.css | 48 ++++++ src/main/webapp/css/base/marginal.css | 14 ++ src/main/webapp/css/base/navigation.css | 14 +- src/main/webapp/css/base/util.css | 14 ++ src/main/webapp/index.jsp | 219 +++++++++++++----------- 7 files changed, 209 insertions(+), 104 deletions(-) create mode 100644 src/main/webapp/css/base/content.css create mode 100644 src/main/webapp/css/base/layout.css create mode 100644 src/main/webapp/css/base/marginal.css create mode 100644 src/main/webapp/css/base/util.css diff --git a/src/main/webapp/css/base.css b/src/main/webapp/css/base.css index 7b7d8b59..1b165a33 100644 --- a/src/main/webapp/css/base.css +++ b/src/main/webapp/css/base.css @@ -14,6 +14,10 @@ @import 'base/browserreset.css'; @import 'base/fonts.css'; @import 'base/typo.css'; +@import 'base/util.css'; @import 'base/head.css'; @import 'base/navigation.css'; +@import 'base/layout.css'; +@import 'base/content.css'; +@import 'base/marginal.css'; @import 'base/footer.css'; diff --git a/src/main/webapp/css/base/content.css b/src/main/webapp/css/base/content.css new file mode 100644 index 00000000..e69de29b diff --git a/src/main/webapp/css/base/layout.css b/src/main/webapp/css/base/layout.css new file mode 100644 index 00000000..d6959da9 --- /dev/null +++ b/src/main/webapp/css/base/layout.css @@ -0,0 +1,48 @@ +.content +{ + position: relative; +} +.content.cols_2 +{ + padding: 0 27em 0 0; +} +.content.cols_2 > .main +{ + float: left; + min-height: 1em; + position: relative; + width: 100%; +} +.content.cols_2 > .marginal +{ + float: left; + margin: 0 -27em 0 2.625em; + padding: 0 2em 1.0625em 2em; + position: relative; + width: 20.375em; + background-color: #6EE768; +} +.content #nav +{ + position: absolute; + top: 0; + width: 100%; +} +.content.cols_2 #nav +{ + position: relative; + top: auto; + right: auto; + width: 22.375em; /** 358px = 326px + 32px*/ +} +.content.cols_2 #nav > #menu +{ + margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */ +} +.content.cols_1 #nav > #menu +{ + position: absolute; + top: -7em; /** 112px */ + right: 0; + margin: 0; +} diff --git a/src/main/webapp/css/base/marginal.css b/src/main/webapp/css/base/marginal.css new file mode 100644 index 00000000..008c694f --- /dev/null +++ b/src/main/webapp/css/base/marginal.css @@ -0,0 +1,14 @@ +.marginal h1, +.marginal h2, +.marginal h3, +.marginal h4 +{ + color: #fff; +} +.marginal h1 +{ + font-size: 125%; /** 20 px */ + line-height: 1em; /** 20px */ + margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */ + padding: 0; +} diff --git a/src/main/webapp/css/base/navigation.css b/src/main/webapp/css/base/navigation.css index 478d5684..604ed84f 100644 --- a/src/main/webapp/css/base/navigation.css +++ b/src/main/webapp/css/base/navigation.css @@ -1,7 +1,3 @@ -#nav -{ - margin: 0 0 -1em 0; -} #menu { position: relative; @@ -49,3 +45,13 @@ content: '> '; margin-left: -.92em; } + +#nav > h1.nav, +#nav > h2.nav.menu +{ + display: none; +} +#nav > h2.nav.submenu +{ + font-size: 125%; /** 20px */ +} diff --git a/src/main/webapp/css/base/util.css b/src/main/webapp/css/base/util.css new file mode 100644 index 00000000..6ddf6c07 --- /dev/null +++ b/src/main/webapp/css/base/util.css @@ -0,0 +1,14 @@ +/** Allgemein nützliche Marker-Klassen */ + + +/** Micro Clearfix-Hack nach http://nicolasgallagher.com/micro-clearfix-hack/ */ + +.cf:before, +.cf:after { + content: ""; + display: table; +} +.cf:after { + clear:both; +} + diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp index dc9614f4..edad243c 100644 --- a/src/main/webapp/index.jsp +++ b/src/main/webapp/index.jsp @@ -14,106 +14,125 @@ Java bits from nerds for nerds
- -
-

Branding

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

-

H1:ÄäÖöÜüß@€¢Link

-

- ÄäÖöÜüß@€¢ -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

-

H2: Heading

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

-

H1: Heading

-

H2: Heading

-

H3: Heading

-

H4: Heading

-

H1: Heading

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

-

H2: Heading

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

-

H3: Heading

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

-

H4: Heading

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

- -
+
+
+

Branding

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

H1:ÄäÖöÜüß@€¢Link

+

+ ÄäÖöÜüß@€¢ +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

H2: Heading

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

H1: Heading

+

H2: Heading

+

H3: Heading

+

H4: Heading

+

H1: Heading

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

H2: Heading

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

H3: Heading

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

H4: Heading

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+
    +
  • normal
  • +
  • italic
  • +
  • bold
  • +
  • bold italic
  • +
+
+
+ +
+

Other nasty but marginal stuff

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+
+
+