source: t29-www/shared/css-v6/pagestyles/startseite.css @ 741

Last change on this file since 741 was 741, checked in by sven, 9 years ago

Darstellung bei schmalen Bildschirmen und Mobilgeräten erheblich
verbessert (viele kleine Detailverbesserungen bei Header und
Footer sowie der Startseite). Es fehlt noch ein ordentliches
Aufklappmenü, was nur im Deutschen testweise eingebunden wurde.

Da bei schmalen Monitoren nicht das Hauptmenü und das Seitenmenü
angezeigt werden können, sollte das verbleibende Menü (=Hauptmenü)
die wichtigen Links beinhalten. Das ist derzeit nicht der Fall,
sodass man auf Mobilgeräten kaum die Seiten erreicht, die man
sehen will. Um das zu korrigieren, sollte die relationale und
hierarchische Navigation erleichtert werden, also mittels
Breadcrumbs sowie dem Anzeigen der Vor/Zurück-Buttons ganz oben.

File size: 5.4 KB
Line 
1/**********************************************************************\
2| SPEZIAL STYLE                                                        |
3+----------------------------------------------------------------------+
4| Für:                 Neue Startseiten, (de|en)/index.shtml           |
5| In Benutzung seit:   v5.7 (Redesign)                                 |
6| Besonderheiten:      Zweispaltiges Design mit Boxen                  |
7| Zuletzt geändert:    v5.7                                            |
8|     08.04.2011: Startseitendesign noch mal geändert in so einen      |
9|                 grauen Hintergrund und so                            |
10|                                                                      |
11\**********************************************************************/
12
13
14#content div.startseiten-boxen,
15#content div.startseiten-boxen div,
16#content div.startseiten-boxen a.div {
17    padding: 1em;
18    margin: 0;
19    /*border: 1px solid blue;*/
20}
21
22#content div h2, /* id zur Bedeutungssteigerung */
23#content a.div span.h2 {
24    font-weight: bold;
25    font-size: 113%;
26    font-family: inherit; /* 04.01.10: Neue Header-Styles */
27    border: none;         /*           neutralisieren     */
28    color: #1A5160; /* gleiche Farbe wie Navilinks rechts */
29}
30
31#content div ul {
32    text-align: justify;
33    margin: 0;
34    padding-left: 1em;
35}
36
37#content div.termine, 
38#content a.div.termine {
39    display: block;
40    background-color: #EDF0F2;
41    border: 1px solid #B6B5B4;
42}
43
44#content a.div.termine {
45    margin-bottom: 1.5em !important;
46    margin-left: auto;
47    margin-right: auto;
48    width: 338px;
49}
50
51#content a.div.termine:hover {
52        background-color: #dfeaf0;
53        border-color: #a41c1c;
54}
55
56#content a.div.termine.oben img.kalender {
57        /* Icon oben */
58        margin: 0;
59        width: 85px;
60}
61
62#content a.div.termine.oben span.h2 {
63    display: block;
64    margin-left: 119px;
65    margin-top: 13px;
66}
67
68#content div div.foto,
69#startseitenfoto-en {
70    /* #startseitenfoto-en für /en, da gibts kein #content */
71    border: none;
72    padding: 0;
73    margin: 2em auto;
74    background: none;
75    width: 338px; height: 228px; /* Bildgrößen */
76    position: relative;
77       
78        /* Hoehengleich mit den Terminen sein */
79        margin-top: 0;
80}
81
82#content .foto p {
83    position: absolute;
84    bottom: 0; right: 0;
85    margin: 0 3px 2px 0; 
86    text-align: right;
87    color: #fff;
88    font-size: 90%;
89    font-weight: bold;
90}
91
92
93/* Termine-Bereich, ab 14.05.2013 */
94
95#termine {
96        /* Experiment: Helle Hintergrundbox */
97        background-color: #EDF0F2;
98        margin: 20px -40px -60px;
99        padding: 30px 40px 60px;
100}
101
102#content #termine h2 {
103        text-align: center;
104        font-size: 250%;
105        font-weight: normal;
106}
107
108#termine div.termin.box {
109        margin-top: 1em;
110        margin-bottom: 1em;
111}
112
113#termine div.termin, #termine div.termin p {
114        /* zu schmale spalte fuer blocktext */
115        text-align: left;
116}
117
118#termine div.termin h4 /* id zur Bedeutungssteigerung */ {
119    font-weight: bold;
120    font-size: 100%;
121    margin: 0;
122    font-family: inherit; /* 04.01.10: Neue Header-Styles */
123    border: none;         /*           neutralisieren     */
124    color: #1A5160; /* gleiche Farbe wie Navilinks rechts */
125}
126
127/* Details */
128#termine dl.daten {
129        font-size: 80%;
130}
131
132#termine dl.daten dt {
133        float: left; clear: left;
134        width: 70px;
135        text-align: left; font-weight: normal; color: #333333;
136        margin-top: 0;
137}
138
139#termine dl.daten dd {
140        margin: 0 0 0 80px;
141        padding: 0 0 0.5em 0;
142        text-align: left;
143}
144
145#termine dl.daten a.button {
146        padding: 0.1em;
147        font: inherit;
148        font-weight: bold;
149        text-transform: inherit;
150       
151        /* aus der nicht funktionierenden 25-buttons */
152        outline: none;
153        padding: 0.3em 1em 0.3em;
154        border-radius: .5em;
155        box-shadow: 0 1px 2px rgba(0,0,0,.2);
156}
157
158/* Q&D: im Archiv keine Anmeldung mehr anzeigen */
159#termine div.archiv dd.anmeldung { display: none; }
160
161/*#termine dl.daten.right {
162        float: right;
163        margin: 0 0 30px 30px;
164        background-color: #eee;
165        padding: 20px;
166        width: 14em;
167}*/
168
169/* Date Icon */
170#termine div.termin {
171        /* fuer p.date */
172        margin-left: 52px !important;
173}
174
175/* Date Icon-Formatierung jetzt in modules/18-content.css */
176
177#termine div.termin p.date.left,
178#termine div.termin div.left {
179        float: left;
180        margin-left: -72px;
181}
182
183/* Anmelden-Button links */
184#termine div.termin div.left a.anmeldung {
185    background-image: url("/shared/img-v6/register-icon.png");
186    background-position: 4px 5px;
187    background-repeat: no-repeat;
188    font-family: arial;
189    font-size: 10px;
190    font-weight: bold;
191    line-height: 10px;
192    margin: 0 -2px 0 -5px;
193    outline: medium none;
194    padding: 10px 11px 11px;
195    text-transform: inherit;
196}
197
198#termine div.termin div.left a.anmeldung:hover,
199#termine div.termin div.left a.anmeldung:focus {
200    color: black;
201}
202
203/* zu lange floats link */
204#termine div.termin dl dt { clear: none; }
205   
206/*
207 * Kleine Buttonleiste
208 **/
209
210#termine div.button-box {
211        /*opacity: 0.7;*/
212        margin-bottom: 20px;
213}
214
215/* Anmeldemaske, per AJAX eingebunden */
216
217#termine div.anmelde-maske {
218        background-color: #DFEAF0;
219        padding: 1em;
220}
221
222
223/* Button box */
224#termine a.button {
225        font-family: "Trebuchet MS",Verdana,Helvetica,Arial,sans-serif;
226        text-decoration: none;
227        display: inline-block;
228        cursor: pointer;
229        padding: 1em;
230
231        /*font: 14px "Myriad Pro Light";*/
232        font-size: 14px;
233        text-transform: uppercase;
234        color: #a07f60;
235        font-weight: bold;
236}
237
238#termine a.button:hover {
239        background-color: white;
240}
241
242#termine a.anmeldung-btn {
243        /* Soll auffallen */
244        background-color: #DBEBF7;
245       
246        outline: none;
247        padding: .5em 2em .55em;
248        border-radius: .5em;
249        box-shadow: 0 1px 2px rgba(0,0,0,.2);
250}
251
Note: See TracBrowser for help on using the repository browser.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License