Template specific styles
This page demonstrates some styles that are specifically available in “fhs-simple-2019”.
Template-spezifische Styles
Diese Seite demonstriert einige Formatierungen, wie sie speziell in „fhs-simple-2019“ verfügbar sind.
Responsive Tables
The following table has the CSS class respTable
. If the available space is not sufficient, the table can be scrolled horizontally.
Responsive Tabellen
Die folgende Tabelle hat die CSS-Klasse respTable
. Reicht der verfügbare Platz nicht aus, wird die Tabelle horizontal scrollbar.
Name | First name | Street | Postcode | Location |
---|---|---|---|---|
Shannon | Cheyenne | Ap #239-2170 Phasellus Av. | 94075 | Berlin |
Lindsey | Tanner | 511-635 Malesuada Rd. | 77791 | Beaconsfield |
Luna | Xanthus | 771-4058 Et Rd. | 61855 | Pontypridd |
Donaldson | Anika | 2821 Orci. Road | 71078 | Oosterhout |
Langley | Bruce | Ap #376-2978 Diam. Avenue | 05691 | Ravenstein |
Leon | Petra | 776-8330 Sem St. | 72540 | Cervinara |
Everett | Ulla | P.O. Box 786, 1462 Id, St. | 06815 | Banff |
Bishop | Wayne | Ap #619-6021 Aliquet, Road | 47719 | Saint-Mard |
Mccullough | Audra | 4758 Vel, St. | 22972 | Leipzig |
Nelson | Jillian | P.O. Box 548, 7968 Quis St. | 30075 | Vernole |
Unordered List / Ungeordnete Listen
CSS-Class: listUnordered
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum.
- Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit.
- Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus.
- Fusce pulvinar ante non sapien.
- Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor.
- Vivamus posuere.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum.
- Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus.
- Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit.
- Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor.
Ordered List / Geordnete Listen
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum.
- Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit.
- Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus.
- Fusce pulvinar ante non sapien.
- Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor.
- Vivamus posuere.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum.
- Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus.
- Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit.
- Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor.
Images / Bilder
DIV class "imgR"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit.
Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien.
Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. <span class="orange"> ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam. <span class="underline"> Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis.
DIV class "imgL"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien.
Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis.
Code / Blockquote / Quotes
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, <code>inline text</code>
nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit.
<p class="code">Hello World!</p>
Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor.
The following text is <blockquote>
.
Dumme Gedanken hat jeder, aber der Weise verschweigt sie.
— Wilhelm Busch
Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam.
Newsboxes
Newsboxes should normally start with an h2 header. The content then contains text and other headings as required. The first h2 heading in a newsbox is automatically formatted as an orange box.
Newsboxen
Die Newsboxen sollten normalerweise mit einer h2-Überschrift beginnen. Im Inhalt folgen dann je nach Bedarf Text und weitere Überschriften. Die jeweils erste h2-Überschrift in einer Newsbox wird automatisch als Orange-Kasten formatiert.