From: Kai Moritz Date: Tue, 11 Mar 2014 10:01:44 +0000 (+0100) Subject: Seite ohne Menü doch mit Marginalspalte (nur andere Farbe) X-Git-Tag: thymeroot-2.0.0~106 X-Git-Url: https://juplo.de/gitweb/?p=website;a=commitdiff_plain;h=742e9e70700208183bd2bf94cc639b288e5e05c9 Seite ohne Menü doch mit Marginalspalte (nur andere Farbe) --- 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 00000000..13a03b12 Binary files /dev/null and b/src/main/webapp/img/wip.gif differ 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 {