<put-attribute name="htmlhead" value="/WEB-INF/templates/html-head.jsp" type="template"/>
<put-attribute name="breadcrumb" value="BREADCRUMB IS MISSING" type="string"/>
<put-attribute name="maincontent" value="/WEB-INF/templates/maincontent.jsp" type="template"/>
- <put-attribute name="contentclass" value="cols_2" type="string"/>
+ <put-attribute name="contentclass" value="menu" type="string"/>
<put-attribute name="marginalcontent" value="/WEB-INF/templates/marginalcontent.jsp" type="template"/>
<put-attribute name="navigation" value="/WEB-INF/templates/navigation.jsp" type="template"/>
</definition>
- <definition name="ONECOLUMN" extends="BASEPAGE">
- <put-attribute name="contentclass" value="cols_1" type="string"/>
+ <definition name="NOMENU" extends="BASEPAGE">
+ <put-attribute name="contentclass" value="nomenu" type="string"/>
</definition>
<definition name="test" extends="BASEPAGE">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<t:insertAttribute name="htmlhead"/>
</head>
- <body onload="prettyPrint()">
- <div id="page" class="<t:getAsString name="contentclass"/> cf">
+ <body class="<t:getAsString name="contentclass"/>" onload="prettyPrint()">
+ <div id="page" class="cf">
<header id="header">
<h1 id="logo"><a href="${base}index.html" title="Home" class="l">juplo</a></h1>
<span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
<%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
<%@taglib uri="http://www.springframework.org/tags" prefix="s"%>
<s:url var="base" value="/" />
-<t:insertDefinition name="ONECOLUMN">
+<t:insertDefinition name="NOMENU">
<t:putAttribute name="title" value="Impressum" type="string"/>
<t:putAttribute name="breadcrumb">
<li class="b"><a class="b" href="${base}index.html">Home</a></li>
<%@page pageEncoding="UTF-8"%>
<%@page session="false" %>
<%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
-<t:insertDefinition name="ONECOLUMN">
+<t:insertDefinition name="NOMENU">
<t:putAttribute name="title" value="Branding" type="string"/>
<t:putAttribute name="breadcrumb">
<li class="b"><strong class="b">Home</strong></li>
<s:url var="base" value="/" />
<t:insertDefinition name="test">
<t:putAttribute name="title" value="Fast leere Seite ohne Menü, aber mit Marginalinhalt" type="string"/>
- <t:putAttribute name="contentclass" value="cols_1" type="string"/>
+ <t:putAttribute name="contentclass" value="nomenu" type="string"/>
<t:putAttribute name="navigation" type="string">
<h1 class="nav">Navigation</h1>
<h2 class="nav menu">Section-Menu</h2>
<s:url var="base" value="/" />
<t:insertDefinition name="test">
<t:putAttribute name="title" value="Fast leere Seite ohne Menü" type="string"/>
- <t:putAttribute name="contentclass" value="cols_1" type="string"/>
+ <t:putAttribute name="contentclass" value="nomenu" type="string"/>
<t:putAttribute name="navigation" type="string">
<h1 class="nav">Navigation</h1>
<h2 class="nav menu">Section-Menu</h2>
{
margin: 0 1em 0 2.5em;
}
-.cols_2 > .content > .main
+.menu .content > .main
{
border-top-style: none;
margin-top: -.4375em; /** -8px + 1px (für den entfernten Rahmen) -- nur damit es exakt so positioniert ist, wie im Tablet-Layout */
{
padding: 2em 0;
}
-.cols_1 > #footer
+.nomenu #footer
{
padding-top: 0;
}
height: 100%;
padding-bottom: 7.1875em; /** 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */
}
-.cols_2 > .content
+.menu .content
{
padding-right: 27em;
margin-right: -24.375em;
}
-.cols_2 > .content > .main
+.menu .content > .main
{
float: left;
min-height: 1em;
position: relative;
width: 100%;
}
-.cols_1 > .content > .main
+.nomenu .content > .main
{
margin-bottom: 7em;
}
-.cols_1 > .content > .marginal aside.m
+.nomenu .content > .marginal aside.m
{
margin: 3.5em 0 -999em 0;
padding: 2em 2em 995em 2em;
position: relative;
top: -4.5em;
}
-.cols_2 > .content > .marginal
+.menu .content > .marginal
{
float: left;
margin: 0 -27em 0 2.625em;
right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
width: 100%;
}
-.cols_2 #nav
+.menu #nav
{
position: relative;
top: auto;
right: auto;
width: 22.375em; /** 358px = 326px + 32px*/
}
-.cols_2 #menu
+.menu #menu
{
margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
}
-.cols_1 #menu
+.nomenu #menu
{
position: absolute;
top: -7em; /** 112px */
}
/** Faux-Column-Hack-Eigengewächs */
-#page.cols_2
+.menu #page
{
max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
border-right: 24.375em solid @heller;
{
padding-top: 1em;
}
-.cols_2 > #header
+.menu #header
{
margin-right: -24.375em;
background-color: @hintergrund;
}
-.cols_2 > #breadcrumb
+.menu #breadcrumb
{
right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */
}
-.cols_1 > #footer
+.nomenu #footer
{
border-top: 1.5em solid @hintergrund;
background-color: @hintergrund;
}
-.cols_2 > #footer
+.menu #footer
{
margin-right: -24.375em;
background-color: @hintergrund;
-.cols_1 > #footer
+.nomenu #footer
{
padding: 0 3em 1.5em 5em;
@media (max-width: @maxsmalltablet)
}
background-color: @heller;
}
-.cols_1 > #footer > #footerlinks
+.nomenu #footer > #footerlinks
{
position: static;
margin: -.125em;
}
border-top: .125em solid @hintergrund;
}
-.cols_1 > #footer > #footerlinks > li.f
+.nomenu #footer > #footerlinks > li.f
{
line-height: 1em;
margin: 0 1em 0 0;
padding: 0;
}
-.cols_1 > #footer > #footerlinks > li.f > a.f
+.nomenu #footer > #footerlinks > li.f > a.f
{
color: @hintergrund;
border-color: @hintergrund;
}
-.cols_1 > #footer > #footerlinks > li#copyright
+.nomenu #footer > #footerlinks > li#copyright
{
position: static;
float: right;
font-size: 137.5%;
margin: 0;
}
-.cols_2 > #footer > #footerlinks
+.menu #footer > #footerlinks
{
position: static;
border-style: none;
margin: 4em 0 0 2em;
}
-.cols_2 > #footer > #footerlinks > li.f
+.menu #footer > #footerlinks > li.f
{
line-height: 1em;
display: block;
margin: 0 0 .25em 0;
color: @hintergrund;
}
-.cols_2 > #footer > #footerlinks > li#copyright
+.menu #footer > #footerlinks > li#copyright
{
line-height: 1em;
font-size: 137.5%;
background-color: @heller;
text-align: right;
}
-.cols_2 > #footer > #footerlinks a.f
+.menu #footer > #footerlinks a.f
{
color: @hintergrund;
border-color: @hintergrund;
}
-.cols_2 > #footer > #footerlinks a.f:hover
+.menu #footer > #footerlinks a.f:hover
{
color: @hintergrund;
border-color: @hintergrund;
overflow: hidden;
}
-.cols_1 > .content
+.nomenu .content
{
padding-bottom: 5em;
@media (max-width: @maxsmalltablet)
padding-bottom: 3.25em;
}
}
-.cols_2 > .content.cf:before,
-.cols_2 > .content.cf:after
+.menu .content.cf:before,
+.menu .content.cf:after
{
clear: none;
content: none;
display: inline;
}
-.cols_1 > .content > .main,
-.cols_2 > .content > .main
+.nomenu .content > .main,
+.menu .content > .main
{
float: none;
width: auto;
border-top: 1px solid @hintergrund;
border-bottom: 1px solid @hintergrund;
}
-.cols_1 > .content > .marginal
+.nomenu .content > .marginal
{
margin: 3em 0 -999em 0;
padding: 0 3em 999em 5em;
padding-right: 1em;
}
}
-.cols_1 > .content > .marginal aside.m
+.nomenu .content > .marginal aside.m
{
margin: 3.5em -3em -999em -5em;
padding: 2em 3em 995em 5em;
border-style: none;
}
-.cols_2 > .content > .marginal
+.menu .content > .marginal
{
margin: 3em 0 -994em -15em;
padding: 2em 0 999em 0;
width: 100%;
position: static;
}
-.cols_1 > #footer
+.nomenu #footer
{
border-style: none;
}
-.cols_2 > .content > .marginal > aside.m
+.menu .content > .marginal > aside.m
{
margin: 0 -12em 1em 17.5em;
@media (max-width: @maxsmalltablet)
margin-right: -14em;
}
}
-.cols_2 > .content > .marginal > #nav
+.menu .content > .marginal > #nav
{
position: static;
border-right: .125em solid @hintergrund;
}
}
-#page.cols_2
+.menu #page
{
max-width: none;
border-right-style: none;
}
-.cols_2 > #header
+.menu #header
{
margin-right: 0;
border-right-style: none;
}
-.cols_2 > .content
+.menu .content
{
margin: 0;
padding: 0;
}
-.cols_2 > #footer
+.menu #footer
{
position: static;
float: right;
left: 11.9em;
right: 3em;
}
-.cols_1 #menu,
-.cols_2 #menu
+.nomenu #menu,
+.menu #menu
{
position: absolute;
width: auto;
@media (max-width: @maxsmalltablet)
{
- .cols_1 #menu,
- .cols_2 #menu
+ .nomenu #menu,
+ .menu #menu
{
top: -5.7em;
right: 2em;
@media (max-width: @maxsmallertablet)
{
- .cols_1 #menu,
- .cols_2 #menu
+ .nomenu #menu,
+ .menu #menu
{
top: -4.5em;
right: 1em;