Testseite für Media-Queries

[website] / src / main / webapp / WEB-INF / templates / testlab.jsp
diff --git a/src/main/webapp/WEB-INF/templates/testlab.jsp b/src/main/webapp/WEB-INF/templates/testlab.jsp

new file mode 100644 (file)

index 0000000..8f3df40
--- /dev/null
+++ b/src/main/webapp/WEB-INF/templates/testlab.jsp
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<%@page contentType="text/html;charset=UTF-8"%>
+<%@page pageEncoding="UTF-8"%>
+<%@page session="false" %>
+<%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
+<html>
+  <head>
+    <title>juplo - <t:getAsString name="title"/></title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <t:insertAttribute name="htmlhead"/>
+    <style type="text/css">
+
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      .testlab
+      {
+        width: 100%;
+        text-indent: 0;
+        margin: 0 0 20px -320px;
+        background-color: #fff;
+      }
+      .testlab:after
+      {
+        content:"";
+        display:table;
+      }
+      .tl970
+      {
+        margin-left: 0px;
+        border-left: 970px solid green;
+        text-indent: -970px;
+        background-color: transparent;
+      }
+      .tl670
+      {
+        margin-left: -970px;
+        border-left: 670px solid yellow;
+        text-indent: -670px;
+        background-color: transparent;
+      }
+      .tl480
+      {
+        margin-left: -670px;
+        border-left: 480px solid orange;
+        text-indent: -480px;
+        background-color: transparent;
+      }
+      .tl320
+      {
+        margin-left: -480px;
+        border-left: 320px solid red;
+        text-indent: -320px;
+        background-color: transparent;
+      }
+    </style>
+  </head>
+  <body>
+    <h1><t:getAsString name="title"/></h1>
+    <div class="testlab tl970">970px
+      <div class="testlab tl670">670px
+        <div class="testlab tl480">480px
+          <div class="testlab tl320">320px
+
+            <t:insertAttribute name="content"/>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>