source: t29-www/shared/css-v6/modules/13-footer.css @ 289

Last change on this file since 289 was 289, checked in by sven, 12 years ago

Viele Detailarbeiten:

  • Relationale Navigation (Vor/Zurück-Pfeile) im Footer aufgehübscht (sieht jetzt mehr wie auf alter Homepage aus)
  • Beam-Navigation (Punkte auf Strich) im Footer mal wieder repariert
  • Neuen Footer unterhalb des jetzigen Footers eingeführt, dort exemplarischen Inhalt hingeschrieben
  • Aktiv-Zustände werden in der horizontalen Navigation jetzt etwas angezeigt
  • Menü kann nun im Titel der Links anzeigen, was sie sind
  • messages.php kann nun serverseitig für Instanzen Nachrichten überschreiben, genutzt im template.php
  • Property svn:keywords set to Id
File size: 6.3 KB
Line 
1/**
2 * t29v6 Design footer.css
3 * $Id: 13-footer.css 289 2012-08-16 18:03:29Z sven $
4 * In dieser Datei:
5 *
6 *   footer = Container fuer alles im unteren Bereich (nav.guide, nav.rel, div.right)
7 *   nav.guide = Beam-Navigation
8 *   nav.rel = Relationale Navigation
9 *   footer .right = Copyright-Bereich
10 *
11 **/
12
13/* Footer innerhalb des Blattes, mit Navigationselementen */
14footer.in-sheet {
15        clear: both; padding-top: 1px; /* um margin innerer elemente an der oberkante beginnen zu lassen */
16        height: 104px; width: 100%;
17        /* temp. um Navi-Kram zu uebermalen: */
18        position: relative; z-index: 20;
19       
20        /*border-top: 1px solid #5d5c58;*/
21        background: #f1f1f1 url("/shared/img-v6/line.header-footer.png") top left repeat-x;
22}
23
24/* "Beam Navigation" nav.guide */
25nav.guide {
26        position: absolute;
27        z-index: 5; /* ueber nav.rel */
28        top: -5px; left: -5px; /* damit bullets rausschauen */
29        width: 870px; margin: 0 40px; /* wie #content, in breite ein paar px mehr wegen ueberstehenden bullets */
30        /* width:900px, aber 10px Toleranz damit der Beam nicht umbricht wenn
31       eine ungerade Anzahl an Items vorhanden ist (1px Toleranz wuerde schon reichen) */
32}
33nav.guide ul, nav.guide li { display: inline; }
34nav.guide a {
35        float: left;
36        position: relative;
37}
38
39nav.guide a:hover, nav.guide a:focus {
40        background-color: inherit; /* Overwrite nav a:hover bg white */
41}
42
43nav.guide .text {
44        display: block;
45        /*font: 12px "Futura Std Book";*/
46        font-size: 12px; font-weight: bold;
47        text-transform: uppercase;
48        color: #5d5c58;
49        position: absolute;
50        top: -19px; left: 0;
51        white-space: nowrap;
52}
53
54nav.guide a.higher-text .text {
55        /* Labeltexte, die die default dargestellten Texte (.visible)
56           beim Hovern ueberpinseln und daher hoeher dargestellt werden */
57        top: -34px;
58}
59
60nav.guide .bullet {
61        width: 0; height: 0;
62        border: 2px solid #5d5c58;
63        padding: 4px;
64        margin: 1px;
65        display: inline-block;
66        border-radius: 6px;
67        position: relative;
68}
69
70nav.guide .visible > a > .bullet {
71        border-width: 6px;
72        padding: 0;
73}
74
75
76nav.guide a { opacity: 0; }
77nav.guide li.visible > a,
78nav.guide a:hover, nav.guide a:focus { opacity: 1; }
79
80/*
81nav.guide .bullet, nav.guide .text { visibility: hidden; }
82nav.guide li.visible > a > .bullet,
83nav.guide .visible > a > .text,
84nav.guide a:hover .bullet, nav.guide a:hover .text,
85nav.guide a:focus .bullet, nav.guide a:focus .text {
86        visibility:visible;
87}
88*/
89
90
91/*
92html.csstransitions nav.guide .bullet, html.csstransitions nav.guide .text {
93        visibility: visible; opacity: 0;
94        -webkit-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
95        -moz-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
96        -ms-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
97        -o-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
98        transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
99}
100html.csstransitions nav.guide li.visible > a > .bullet, html.csstransitions nav.guide .visible > a >  .text,
101html.csstransitions nav.guide a:hover .bullet, html.csstransitions nav.guide a:hover  .text,
102html.csstransitions nav.guide a:focus .bullet, html.csstransitions nav.guide a:focus .text {
103        opacity: 1;
104        -webkit-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
105        -moz-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
106        -ms-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
107        -o-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
108        transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
109}
110*/
111
112nav.guide a:hover .bullet, nav.guide a:focus .bullet {
113
114}
115
116/*nav.guide .current > a > .text { color: #40a8e2; }*/
117
118/* Relationale Navigation */
119nav.rel {
120        position: relative;
121        margin: 26px 70px 0;
122        width: 800px;
123}
124
125nav.rel li {
126        position: absolute;
127        top: 0;
128}
129
130nav.rel li.prev { left: 0; }
131nav.rel li.next { right: 0; }
132
133nav.rel a {
134        /*font: 12px "Futura Std Medium";*/
135        text-transform: uppercase;
136        display: inline-block;
137        padding: 10px;
138        line-height: 17px;
139        font-size: 14px;
140        color: rgba(65,111,124,.85); /*#416f7c;*/
141        /*background-color: #dfe9f0;*/
142       
143        font-weight: bold;
144       
145        position: relative;
146        /*height: 40px; *//* wegen arrow: height+2*padding=arrowheight */
147}
148
149nav.rel strong {
150        display: block;
151        font-weight: normal;
152        opacity: .7;
153}
154
155nav.rel li.prev a { text-align: right; padding-right: 16px; }
156nav.rel li.next a { text-align: left;  padding-left: 16px; }
157
158nav.rel a:after {
159        content: ""; width: 0;
160        display: block;
161        position: absolute;
162        top: 0;
163        border-top: 27px solid transparent;
164        border-bottom: 27px solid transparent;
165        border-left: 24px solid #dfe9f0;
166        border-right: 24px solid #dfe9f0;
167}
168
169nav.rel a:focus:after, nav.rel a:active:after {
170        border-left-color: #40a8e2;
171        border-right-color: #40a8e2;
172}
173
174nav.rel .next a:after {
175        right: -24px;
176        border-right: none;
177}
178
179nav.rel .prev a:after {
180        left: -24px;
181        border-left: none;
182}
183
184nav.rel a:hover {
185        background-color: #dfe9f0;
186}
187
188nav.rel a:active, nav.rel a:focus {
189        background-color: #40a8e2;
190        color: white;
191}
192
193/* Footer Icon-Sammlung und so */
194/*
195footer .right {
196        position: absolute;
197        top: 2px;
198        right: 0;
199        width: 230px;
200        padding: 15px;
201        text-align: right;
202}
203
204footer .right img.logo {
205        float: right;
206        width:30px;
207        padding-left: 10px;
208        padding-right: 11px;
209}
210
211footer .right div.icons {
212        clear: left;
213        padding-top: 8px;
214}
215
216footer .right .icons a { opacity: .5; }
217footer .right .icons a:hover, footer .right .icons a:focus { opacity: 1; }
218*/
219
220/* Post-Footer */
221footer.attached {
222        /* @embed */ background: #307588 url("/shared/img-v6/bg-v2.body-footer.png") top left repeat-x;
223        margin-top: -122px;
224        padding: 122px;
225       
226        color: white;
227        font-size: 14px;
228}
229
230footer.attached ul {
231        width: 1170px;
232        margin: 10px auto 20px;
233        /* padding: 0 20px; *//* ueberfluessig, Breite allein reguliert schon */
234}
235
236footer.attached li {
237        width: 370px;
238        margin-right: 10px;
239        float: left;
240}
241
242footer.attached a:link, footer.attached a:visited {
243        color: #BAF1FF;
244}
245
246footer.attached a:hover {
247        color: #3DD8FF;
248}
249
250footer.attached a.img {
251        display: block;
252        float: left;
253        text-indent: -999px;
254}
255
256footer.attached p {
257        margin-left: 80px;
258        margin-top: 0px;
259        line-height: 115%;
260}
261
262
263footer.attached li.logo a.img {
264        background-image: url("/shared/img-v6/logo.footer.png");
265        width: 46px; height: 59px;
266}
267footer.attached li.logo p { margin-left: 60px; }
268
269footer.attached li.copy a.img {
270        background-image: url("/shared/img-v6/cc-icon.png");
271        width: 90px; height: 30px;
272}
273footer.attached li.copy p { margin-left: 110px; }
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