From 742e9e70700208183bd2bf94cc639b288e5e05c9 Mon Sep 17 00:00:00 2001 From: Kai Moritz Date: Tue, 11 Mar 2014 11:01:44 +0100 Subject: [PATCH] =?utf8?q?Seite=20ohne=20Men=C3=BC=20doch=20mit=20Marginal?= =?utf8?q?spalte=20(nur=20andere=20Farbe)?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- src/main/webapp/WEB-INF/views/index.jsp | 160 +++++++++++-------- src/main/webapp/img/wip.gif | Bin 0 -> 4438 bytes src/main/webapp/less/base/packs.less | 1 - src/main/webapp/less/screen/faux-column.less | 15 +- src/main/webapp/less/screen/layout.less | 53 ++---- src/main/webapp/less/screen/marginal.less | 23 --- src/main/webapp/less/tablet/layout.less | 63 +++++--- 7 files changed, 147 insertions(+), 168 deletions(-) create mode 100644 src/main/webapp/img/wip.gif diff --git a/src/main/webapp/WEB-INF/views/index.jsp b/src/main/webapp/WEB-INF/views/index.jsp index 89f9c87f..1c6a95ed 100644 --- a/src/main/webapp/WEB-INF/views/index.jsp +++ b/src/main/webapp/WEB-INF/views/index.jsp @@ -11,78 +11,98 @@
  • Home
    • -

    Welcome on board!

    -
    -
    -
    -

    Projects

    -
    -
    -

    hibernate4-maven-plugin

    -

    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.

    -
    -
    -

    fix-swf

    -

    - 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. -

    -
    -
    -
    -

    accelerator

    -

    - 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. -

    -
    -
    -
    -

    jquery.openx

    -

    - 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. -

    -
    -
    -

    Regex-Lab

    -

    - Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    -
    -
    -

    jquery.openx

    -

    - 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. -

    -
    -
    -

    Regex-Lab

    -

    - Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    +
    +
    +

    hibernate4-maven-plugin

    +

    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.

    -
    -

    Recent Blog-Entries

    -

    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.

    +
    +

    fix-swf

    +

    + 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. +

    -

    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.

    +
    +

    accelerator

    +

    + 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. +

    +
    +
    +
    +

    jquery.openx

    +

    + 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. +

    +
    +
    +

    Regex-Lab

    +

    + Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    +
    +

    jquery.openx

    +

    + 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. +

    +
    +
    +

    Regex-Lab

    +

    + Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    + + + diff --git a/src/main/webapp/img/wip.gif b/src/main/webapp/img/wip.gif new file mode 100644 index 0000000000000000000000000000000000000000..13a03b123d4c11440237a4d4a811fa77cd261b6e GIT binary patch literal 4438 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 RVhD>M^Q+56ije@I@*nH-QX&8V literal 0 HcmV?d00001 diff --git a/src/main/webapp/less/base/packs.less b/src/main/webapp/less/base/packs.less index 5d335bbc..30cceacd 100644 --- a/src/main/webapp/less/base/packs.less +++ b/src/main/webapp/less/base/packs.less @@ -1,6 +1,5 @@ .pack { - margin: 3% 0; overflow: hidden; } .pack > .left, diff --git a/src/main/webapp/less/screen/faux-column.less b/src/main/webapp/less/screen/faux-column.less index 44915589..fdf5ec02 100644 --- a/src/main/webapp/less/screen/faux-column.less +++ b/src/main/webapp/less/screen/faux-column.less @@ -1,28 +1,29 @@ /** Faux-Column-Hack-Eigengewächs für die Marginalspalte */ -.menu #page +#page { max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */ border-right: 24.375em solid @heller; } -.menu .content +.nomenu #page +{ + border-right-color: @sehrhell; +} +.content { margin-right: -24.375em; } #header { padding-top: 1em; -} -.menu #header -{ margin-right: -24.375em; background-color: @hintergrund; } -.menu #breadcrumb +#breadcrumb { right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */ } -.menu #footer +#footer { margin-right: -24.375em; background-color: @hintergrund; diff --git a/src/main/webapp/less/screen/layout.less b/src/main/webapp/less/screen/layout.less index 9e962735..97d0fbb0 100644 --- a/src/main/webapp/less/screen/layout.less +++ b/src/main/webapp/less/screen/layout.less @@ -13,23 +13,23 @@ body /** Seitenaufteilung mit Menü (Zweispaltig) */ -body.menu +body { padding: 0 3em 0 5em; } -.menu .content +.content { position: relative; padding: 0 27em 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */ } -.menu .content > .main +.content > .main { float: left; min-height: 1em; position: relative; width: 100%; } -.menu .content > .marginal +.content > .marginal { float: left; margin: 0 -27em 0 2.625em; @@ -41,20 +41,10 @@ body.menu /** Anpassungen für Seiten ohne Menü (Einspaltig) */ -.nomenu #page -{ - max-width: 62.375em; - padding: 0 3em 0 5em; - overflow: hidden; -} -.nomenu .content -{ - position: relative; - padding: 0 0 7.1875em 0; /** 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */ -} -.nomenu .content > .main +.nomenu .content > .marginal { - margin-bottom: 7em; + padding-top: 2em; + background-color: @sehrhell; } @@ -72,18 +62,11 @@ body.menu /** Bereichsauswahl positionieren und stylen */ -#nav -{ - position: absolute; - top: 0; - right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */ - width: 100%; -} #nav > hr.n { display: none; } -.menu #nav +#nav { position: relative; top: auto; @@ -102,6 +85,10 @@ body.menu padding: 0; border-style: none; } +.nomenu #menu +{ + top: -9em; /** 2em mehr wegen 2em margin-top der Marginalspalte auf .nomenu-Seiten */ +} #menu > li.m { display: inline-block; @@ -141,14 +128,6 @@ body.menu margin-left: -.92em; } -/** Anpassungen der Bereichsauswahl für Seiten ohne Menü */ - -.nomenu #menu -{ - position: absolute; - right: 0; -} - /** Breadcrump positionieren */ @@ -159,10 +138,6 @@ body.menu left: 6.9em; z-index: 3; } -.nomenu #breadcrumb -{ - left: 11.9em; -} #breadcrumb > a.hide { position: absolute; @@ -179,10 +154,6 @@ body.menu { padding: 2em 0; } -.nomenu #footer -{ - padding: 0 3em 2em 5em; -} #footer > hr.f { display: none; diff --git a/src/main/webapp/less/screen/marginal.less b/src/main/webapp/less/screen/marginal.less index d8e812d1..e69de29b 100644 --- a/src/main/webapp/less/screen/marginal.less +++ b/src/main/webapp/less/screen/marginal.less @@ -1,23 +0,0 @@ -/** Faux-Column-Hack für Marginalinhalte auf Seiten ohne Menü */ - -.nomenu .content > .marginal aside.m -{ - margin: 3.5em 0 -999em 0; - padding: 2em 2em 995em 2em; - background-color: @sehrhell; - position: relative; - top: -4.5em; -} -.nomenu .content > .marginal h1, -.nomenu .content > .marginal h2, -.nomenu .content > .marginal h3, -.nomenu .content > .marginal h4 -{ - color: @normal; -} -.nomenu #footer -{ - /** Hintergrund des Faux-Column-Hack für Marginal-Inhalte überlagern */ - border-top: 1.5em solid @hintergrund; - background-color: @hintergrund; -} diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less index 3d9787fa..9e5c2df3 100644 --- a/src/main/webapp/less/tablet/layout.less +++ b/src/main/webapp/less/tablet/layout.less @@ -1,7 +1,6 @@ /** Seite gesamt (Abmessungen, Aussenabstände etc.) */ -body.menu, -body.nomenu +body { padding: 0; } @@ -23,7 +22,7 @@ body.nomenu } .nomenu .content { - padding-bottom: 5em; + padding: 0 0 5em 0; @media (max-width: @maxsmalltablet) { padding-bottom: 4em; @@ -33,22 +32,21 @@ body.nomenu padding-bottom: 3.25em; } } -.menu .content.cf:before, -.menu .content.cf:after +.content.cf:before, +.content.cf:after { clear: none; content: none; display: inline; } -.menu .content > .main, -.nomenu .content > .main +.content > .main { float: none; width: auto; padding: 0 3em 0 5em; @media (max-width: @maxsmalltablet) { - padding: 0 2em 0 3.5em; + padding: 0 2em 0 3em; } @media (max-width: @maxsmallertablet) { @@ -60,27 +58,21 @@ body.nomenu border-top: 1px solid @hintergrund; border-bottom: 1px solid @hintergrund; } +.content > .marginal +{ + position: static; + width: 100%; +} .menu .content > .marginal { margin: 3em 0 -994em -15em; padding: 2em 0 999em 0; - width: 100%; - position: static; } .nomenu .content > .marginal { - margin: 3em 0 -999em 0; - padding: 0 3em 999em 5em; - @media (max-width: @maxsmalltablet) - { - padding-left: 3.5em; - padding-right: 2em; - } - @media (max-width: @maxsmallertablet) - { - padding-left: 2.5em; - padding-right: 1em; - } + margin: 3em 0 -994em 0; + padding: 0 0 999em 0; + background-color: transparent; } @@ -92,7 +84,7 @@ body.nomenu @media (max-width: @maxsmalltablet) { margin-left: -1.5em; - padding: .5em 2em 0 3.5em; + padding: .5em 2em 0 3em; } @media (max-width: @maxsmallertablet) { @@ -104,7 +96,7 @@ body.nomenu /** Bereichsauswahl positionieren */ -.menu .content > .marginal > #nav +.menu #nav { position: static; border-right: .125em solid @hintergrund; @@ -123,11 +115,20 @@ body.nomenu } width: auto; } +.nomenu #nav +{ + position: absolute; + top: 0; + right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */ + width: 100%; +} + .nomenu #menu, .menu #menu { position: absolute; width: auto; + top: -7em; right: 3em; @media (max-width: @maxsmalltablet) { @@ -219,7 +220,7 @@ body.nomenu { font-size: 87.5%; /* 14px */ top: 7.2em; - left: 10.3em; + left: 9.8em; } @media (max-width: @maxsmallertablet) { @@ -233,11 +234,21 @@ body.nomenu .nomenu .content > .marginal aside.m { - margin: 3.5em -3em -999em -5em; + margin: 3.5em 0 -999em 0; padding: 2em 3em 995em 5em; background-color: @heller; position: relative; top: -4.5em; + @media (max-width: @maxsmalltablet) + { + padding-left: 3em; + padding-right: 2em; + } + @media (max-width: @maxsmallertablet) + { + padding-left: 2.5em; + padding-right: 1em; + } } .menu .content > .marginal > aside.m { -- 2.20.1