3 xmlns="http://www.w3.org/1999/xhtml"
4 xmlns:layout="http://www.thymeleaf.org"
5 xmlns:th="http://www.thymeleaf.org"
6 layout:decorator="templates/layout"
9 <title>HTML-Experimente</title>
10 <link rel="stylesheet/less" type="text/css" href="../../../less/all.less" th:remove="all"/>
11 <script src="../../../js/less-1.5.1.js" th:remove="all"></script>
14 <ol layout:fragment="breadcrumb">
15 <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
16 <li class="b"><a class="b" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
17 <li class="b"><strong class="b">HTML-Experimente</strong></li>
19 <nav layout:fragment="navigation" th:fragment="navigation (page)">
21 <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
22 <h1 class="nav">Navigation</h1>
23 <h2 class="nav menu">Section-Menu</h2>
24 <ul id="menu" class="cf">
25 <li class="m blog"><a href="../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
26 <li class="m projects"><a href="../projects.html" th:href="@{/projects.html}" class="m selected">Projects</a></li>
27 <li class="m about"><a href="../about.html" th:href="@{/about.html}" class="m">About</a></li>
29 <h2 class="nav submenu">
30 <span class="s">Submenu for section</span>
31 <a class="s selected" href="../projects.html" th:href="@{/projects.html}">Projects</a>
33 <ul id="submenu" class="s active">
34 <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
35 <li class="s sub off"><a href="../projects/fix-swf.html" th:href="@{/projects/fix-swf.html}" class="s">fix-swf</a></li>
36 <li class="s off"><a href="#" class="s">jquery.openx</a></li>
38 <span th:switch="${page}" th:remove="tag">
39 <a th:case="${page}" href="#" th:href="@{/projects/html-experimente.html}" class="s selected">HTML-Experimente</a>
40 <strong th:case="*" class="s">HTML-Experimente</strong>
43 <li class="s" th:switch="${page}">
44 <strong th:case="'formulare'" class="s">Formulare</strong>
45 <a th:case="*" class="s" href="formulare.html" th:href="@{/projects/html-experimente/formulare.html}">Formulare</a>
47 <li class="s" th:switch="${page}">
48 <strong th:case="'symbole'" class="s">Symbol-Font</strong>
49 <a th:case="*" class="s" href="symbole.html" th:href="@{/projects/html-experimente/symbole.html}">Symbol-Font</a>
52 <a class="s" href="../../404.html" th:href="@{/404.html}">404-Template</a>
55 <a class="s" href="gibts-ja-gar-nicht.html" th:href="@{/projects/html-experimente/gibts-ja-gar-nicht.html}">404-Fehlerseite</a>
58 <a class="s" href="../../error.html" th:href="@{/error.html}">5xx-Template</a>
61 <a class="s" href="error.html" th:href="@{/projects/html-experimente/error.html}">5xx-Fehlerseite</a>
63 <li class="s" th:switch="${page}">
64 <strong th:case="'fast-leer-kein-menü'" class="s">Leer ohne Menü</strong>
65 <a th:case="*" class="s" href="fast-leer-kein-menü.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü.html}">Leer ohne Menü</a>
67 <li class="s" th:switch="${page}">
68 <strong th:case="'fast-leer-kein-menü-aber-marginalinhalt'" class="s">Leer, ohne Menü, mit Marginal</strong>
69 <a th:case="*" class="s" href="fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Leer, ohne Menü, mit Marginal</a>
71 <li class="s" th:switch="${page}">
72 <strong th:case="'fast-leer-mit-menü'" class="s">Leer, mit Menü</strong>
73 <a th:case="*" class="s" href="fast-leer-mit-menü.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü.html}">Leer, mit Menü</a>
75 <li class="s" th:switch="${page}">
76 <strong th:case="'fast-leer-mit-menü-und-marginalinhalt'" class="s">Leer, mit Menü, mit Marginal</strong>
77 <a th:case="*" class="s" href="fast-leer-mit-menü-und-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html}">Leer, mit Menü, mit Marginal</a>
79 <li class="s" th:switch="${page}">
80 <strong th:case="'fast-leer-einspaltig'" class="s">Leer, einspaltig</strong>
81 <a th:case="*" class="s" href="fast-leer-einspaltig.html" th:href="@{/projects/html-experimente/fast-leer-einspaltig.html}">Leer, einspaltig</a>
83 <li class="s" th:switch="${page}">
84 <strong th:case="'fast-leer-einspaltig-mit-marginalinhalt'" class="s">Leer, einspaltig, mit Marginal</strong>
85 <a th:case="*" class="s" href="fast-leer-einspaltig-mit-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html}">Leer, einspaltig, mit Marginal</a>
87 <li class="s" th:switch="${page}">
88 <strong th:case="'breadcrumb'" class="s">Langer Breadcrumb</strong>
89 <a th:case="*" class="s" href="breadcrumb.html" th:href="@{/projects/html-experimente/breadcrumb.html}">Langer Breadcrumb</a>
91 <li class="s" th:switch="${page}">
92 <strong th:case="'kein-layout'" class="s">Alle Stylings deaktiviert</strong>
93 <a th:case="*" class="s" href="kein-layout.html" th:href="@{/projects/html-experimente/kein-layout.html}">Alle Stylings deaktiviert</a>
95 <li class="s" th:switch="${page}">
96 <strong th:case="'basis-layout'" class="s">Nur das Basis-Layout</strong>
97 <a th:case="*" class="s" href="basis-layout.html" th:href="@{/projects/html-experimente/basis-layout.html}">Nur das Basis-Layout</a>
99 <li class="s" th:switch="${page}">
100 <strong th:case="'druck-layout'" class="s">Druck-Layout</strong>
101 <a th:case="*" class="s" href="druck-layout.html" th:href="@{/projects/html-experimente/druck-layout.html}">Druck-Layout</a>
103 <li class="s" th:switch="${page}">
104 <strong th:case="'tiny'" class="s">Layout TINY</strong>
105 <a th:case="*" class="s" href="tiny.html" th:href="@{/projects/html-experimente/tiny.html}">Layout TINY</a>
107 <li class="s" th:switch="${page}">
108 <strong th:case="'phone'" class="s">Layout PHONE</strong>
109 <a th:case="*" class="s" href="phone.html" th:href="@{/projects/html-experimente/phone.html}">Layout PHONE</a>
111 <li class="s" th:switch="${page}">
112 <strong th:case="'tablet'" class="s">Layout Tablet</strong>
113 <a th:case="*" class="s" href="tablet.html" th:href="@{/projects/html-experimente/tablet.html}">Layout TABLET</a>
115 <li class="s" th:switch="${page}">
116 <strong th:case="'seitenaufteilung'" class="s">Basis-Layout & Seitenaufteilung</strong>
117 <a th:case="*" class="s" href="seitenaufteilung.html" th:href="@{/projects/html-experimente/seitenaufteilung.html}">Basis-Layout & Seitenaufteilung</a>
119 <li class="s" th:switch="${page}">
120 <strong th:case="'seitenkopf'" class="s">Basis-Layout & Seitenkopf</strong>
121 <a th:case="*" class="s" href="seitenkopf.html" th:href="@{/projects/html-experimente/seitenkopf.html}">Basis-Layout & Seitenkopf</a>
123 <li class="s" th:switch="${page}">
124 <strong th:case="'media-query'" class="s">Media-Query-Test (Beispiel)</strong>
125 <a th:case="*" class="s" href="testlab.html" th:href="@{/projects/html-experimente/testlab.html}">Media-Query-Test (Beispiel)</a>
129 <li class="s sub off"><a href="#" class="s">accelerator</a></li>
130 <li class="s off"><a href="../projects/typo.html" th:href="@{/projects/typo.html}" class="s">Typography</a></li>
133 <article class="main" layout:fragment="maincontent">
134 <header><h1>HTML-Elemente / spezielle Seiten</h1></header>
136 <li><a href="html-experimente/formulare.html" th:href="@{/projects/html-experimente/formulare.html}">Formulare</a></li>
137 <li><a href="html-experimente/symbole.html" th:href="@{/projects/html-experimente/symbole.html}">Symbol-Font</a></li>
138 <li><a href="../404.html" th:href="@{/404.html}">404-Template</a></li>
139 <li><a href="html-experimente/gibts-ja-gar-nicht.html" th:href="@{/projects/html-experimente/gibts-ja-gar-nicht.html}">404-Fehlerseite</a></li>
140 <li><a href="../error.html" th:href="@{/error.html}">Template für andere Fehler</a></li>
141 <li><a href="html-experimente/error.html" th:href="@{/projects/html-experimente/error.html}">Fehlerseite für andere Fehler</a></li>
143 <h2>Layout-Grenzfälle</h2>
145 <li><a href="html-experimente/fast-leer-kein-menü.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü.html}">Fast leere Seite ohne Menü</a></li>
146 <li><a href="html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Fast leere Seite ohne Menü aber mit Marginal-Inhalt</a></li>
147 <li><a href="html-experimente/fast-leer-mit-menü.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü.html}">Fast leere Seite mit Menü</a></li>
148 <li><a href="html-experimente/fast-leer-mit-menü-und-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html}">Fast leere Seite mit Menü und Marginal-Inhalt</a></li>
149 <li><a href="html-experimente/fast-leer-einspaltig.html" th:href="@{/projects/html-experimente/fast-leer-einspaltig.html}">Fast leere einspaltige Seite</a></li>
150 <li><a href="html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html}">Fast leere einspaltige Seite mit Marginal-Inhalt</a></li>
151 <li><a href="html-experimente/breadcrumb.html" th:href="@{/projects/html-experimente/breadcrumb.html}">Seite mit sehr langem Breadcrumb</a></li>
153 <h2>Layout-Variationen</h2>
155 <li><a href="html-experimente/kein-layout.html" th:href="@{/projects/html-experimente/kein-layout.html}">Alle Stylings deaktiviert</a></li>
156 <li><a href="html-experimente/basis-layout.html" th:href="@{/projects/html-experimente/basis-layout.html}">Nur das Basis-Layout</a></li>
157 <li><a href="html-experimente/druck-layout.html" th:href="@{/projects/html-experimente/druck-layout.html}">Die für den Ausdruck angepasste Ansicht</a></li>
158 <li><a href="html-experimente/tiny.html" th:href="@{/projects/html-experimente/tiny.html}">Layout für sehr kleine Bildschirmgrößen</a></li>
159 <li><a href="html-experimente/phone.html" th:href="@{/projects/html-experimente/phone.html}">Layout für Smartphones</a></li>
160 <li><a href="html-experimente/tablet.html" th:href="@{/projects/html-experimente/tablet.html}">Layout für Tablets</a></li>
162 <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
164 <li><a href="html-experimente/seitenaufteilung.html" th:href="@{/projects/html-experimente/seitenaufteilung.html}">Nur das Basis-Layout und die Seitenaufteilung</a></li>
165 <li><a href="html-experimente/seitenkopf.html" th:href="@{/projects/html-experimente/seitenkopf.html}">Nur das Basis-Layout und der Seitenkopf</a></li>
167 <h2>Anderer Krams...</h2>
169 <li><a href="html-experimente/testlab.html" th:href="@{/projects/html-experimente/testlab.html}">Seite mit Breiten-Markierungen für den Tests von Media-Queries (Beispiel)</a></li>