5 2. Wie Sie am besten anfangen
6 2.1. Allgemeine Farbeinstellungen
8 ----- ----- ----- ----- -----
13 Ich moechte Ihnen hier zeigen, wie Sie das Design Schritt-Fuer-Schritt an
14 Ihre Wuensche angepasst bekommen.
16 Dann gebe ich Ihnen eine Referenz, wo Sie nachvollziehen koennen, wo fuer
17 welche CSS-Klasse gedacht ist.
19 Sie sollten allerdings beispielsweise wissen, was eine Klasse ist. Sollten
20 Sie dies nicht wissen, geben Sie einfach bei einer Suchmaschine Ihrer Wahl
21 das Suchwort "CSS-Klasse" ein. Sie finden dann genuegend Seiten, wo Sie
22 sich informieren koennen.
24 Oder rufen Sie auch die (wohl?) bekannteste HTML-Dokumentation im Netz auf:
26 http://www.selfhtml.org
28 ----- ----- ----- ----- -----
30 2. Wie Sie am besten anfangen
31 -----------------------------
33 Die Haupt-CSS-Datei general.css mag auf dem ersten Blick sehr gross und
34 komplex aussehen. Lassen Sie sich davon nicht abschrecken! Um diese wird es
35 sich jetzt permanent drehen.
37 Sie koennen diese also in einem zweiten Editor (WORDPAD.EXE oder WRITE.EXE
38 reicht voellig aus!) oeffnen und dann zwischen dieser Anleitung und der Datei
39 hin und her wechsel (Windows: ALT-TAB!).
41 ----- ----- ----- ----- -----
43 2.1. Allgemeine Farbeinstellungen
44 ---------------------------------
46 Fangen wir als erstes mit dem generellen Aussehen (Body, Rumpf) an. Diese
47 Angaben sitzen auch passenderweise am Anfang der Datei.
49 Auszug aus der orginalen general.css:
50 :----------------------------------:
53 background-color : #F4F9BE;
55 font-family : Arial, Geneva, Helvetica, sans-serif;
58 scrollbar-base-color : #E9E4AE;
59 scrollbar-face-color : #CDEFCD;
60 scrollbar-highlight-color : #F4F9BE;
61 scrollbar-shadow-color : #CDEFCD;
62 scrollbar-3dlight-color : #DDDDDD;
63 scrollbar-arrow-color : #000000;
64 scrollbar-track-color : #CCEFCC;
65 scrollbar-darkshadow-color : #999999;
74 :----------------------------------:
77 Die ersten 4 Zeilen (lassen Sie dabei "body {" und alle spaeteren Namen dabei
78 ausser acht) geben die Hintergrundfarbe, Textfarbe, Schriftfamilie und die
81 Der naechste Block widmet sich den Farben des Rollbalkes vom Browser.
83 Und der letzte 5-Zeilen-Block stellt den Abstand zwischen den Elementen ein.
84 Dies ist aber nur eine allgemeine Einstellung. Sie koennen spaeter auch
85 Feineinstellungen vornehmen, indem Sie solch Zeilen fuer die anderen Klassen
88 Nun geht es mit den allgemeinen Tabellen-Einstellungen weiter:
90 Auszug aus der originalen general.css:
91 :----------------------------------:
99 :----------------------------------:
101 Was diese Einstellungen bewirken, koennen Sie beispielsweise in der bekannten
102 Dokumentation "SelfHTML" (http://www.selfhtml.org) nachlesen.
104 Weiter geht es mit dem Aussehen der Links:
106 Auszug aus der originalen general.css:
107 :----------------------------------:
111 font-family : Arial, Geneva, Helvetica, sans-serif;
112 text-decoration : none;
125 background-color : transparent;
130 background-color : transparent;
131 text-decoration : underline overline;
134 :----------------------------------:
136 Hier habe ich gleich 5 Klassen auf einmal genommen, damit diese Dokumentation
139 In der ersten Klasse stellen Sie allgemeine Farbeinstellungen ein; die
140 naechsten Klassen stellen folgendes ein:
142 - Allgemeine Linkfarbe
143 - Linkfarbe fuer bereits besuchte Links
144 - Linkfarbe fuer angeklickte Links
145 - Linkfarbe fuer Hover (Maus schwebt ueber Link, es wurde aber noch nicht
148 Wir machen gleich weiter mit den allgemeinen Einstellungen um Formular-
149 Elemente. Hier habe ich gleich einiges zusammengefasst:
151 Auszug aus der originalen general.css:
152 :----------------------------------:
154 input, textarea, select, option {
156 background-color : #EEFFEE;
157 border-color : #BBBBBB;
158 text-decoration : none;
161 :----------------------------------:
163 Diese Klasse fasst - wie bereits gesagt - einige HTML-Elemente zusammen:
165 - Eingabefelder oder Buttons (input)
166 - Texteingabefelder (textarea)
167 - Auswahlmenues (select)
168 - Auswahloptionen (option)
170 Damit ist der erste Teile "Allgemeine Farbeinstellungen abgeschlossen! Laden
171 Sie jetzt mal die geaenderte general.css auf Ihren Webserver in das css-
174 Koennen Sie schon erahnen, wie Ihre Seite nun aussieht? Richtig! Etwas "bunt
175 durcheinander". Das macht erstmal soweit nichts, denn wir sind ja noch nicht
176 fertig mit Umdesignen.
178 Nun geht es um etwas feinere Einstellungen...
180 ----- ----- ----- ----- -----
182 2.2. Detailelemente: Buttons, Auflistungen usw.
183 -----------------------------------------------
185 Dieses Thema wird jetzt sehr lang, da alle weiteren Klassen behandelt werden.
186 Wir machen aber mal zwischendurch eine Pause, wo Sie sich dann Ihre Arbeit im
187 Browser ansehen koennen und nochmals nachkorregieren koennen.
189 Sie werden also - der Wahrscheinlickeit nach - nicht den Ueberblick verlieren.
190 Auch hier gehen wir wieder Schritt fuer Schritt vor, so dass Sie in der
191 general.css einfach weiter nach unten "wandern" brauchen.
193 Und los geht es mit den Absende- und Zuruecksetzen-Buttons:
195 Auszug aus der originalen general.css:
196 :----------------------------------:
198 .admin_reset, .guest_reset, .member_reset {
199 border-style : groove;
200 border : solid 1px #009900;
204 .admin_submit, .guest_submit, .member_submit {
206 border-color : #009900;
209 .admin_submit_reject {
210 border-style : groove;
212 border-color : #009900;
215 :----------------------------------:
217 Ich habe hier gleich 3 Klassen auf einmal genommen:
219 - Zuruecksetzen-Buttons (alle drei Menues gemeinsam)
220 - Absendebuttons in allen drei Menues
221 - Im Adminbereich: Button fuer Mailbuchung ablehnen
223 Und weiter geht's mit den Auflisten-Elementen:
225 Auszug aus der originalen general.css:
226 :----------------------------------:
233 :----------------------------------:
235 Nicht-nummerierte und nummerierte Listen werden hiermit eingestellt. Meine
236 Angaben stellen den Abstand zu anderen Objekten auf 0 Pixel ein.
238 Und weiter geht es mit Klassen fuer auftretende Laufzeitfehler:
240 Auszug aus der originalen general.css:
241 :----------------------------------:
245 background-color : #DDEEDD;
246 font-family : Arial, Geneva, Helvetica, sans-serif;
253 .runtime.fatalcontent {
257 :----------------------------------:
259 Die erste Klasse stellt allgemeine Dinge, wie Hintergrund- und Vordergrund-
260 farben, sowie die Schriftfamilie ein. Das letztere ist eigentlich nicht noetig.
262 Die naechste Klasse stellt die Farbeinstellung fuer Fehlermeldungen ein
263 (SQL-Fehler meistens) und letzte stellt die Schriftgroesse fuer alle uebrigen
264 Meldungen (Titel leider auch) ein.
266 Hier muss ich dringenst etwas aendern. Aber dieser Code-Teil ist auch sehr alt
267 und kommt aus meinen ersten Schritten mit diesem Mailtausch-Script.
269 Weiter geht es mit dem Admin-Bereich:
271 Auszug aus der originalen general.css:
272 :----------------------------------:
281 background-color : #DDEEDD;
282 font-family : Arial, Geneva, Helvetica, sans-serif;
290 .admin_edit, .member_confirm {
291 background-color : #eeffbc;
294 :----------------------------------:
296 Hier hat sich - wegen Farbgleichheit, koennen Sie also auch trennen - gleich
297 eine CSS-Klasse fuer den Mitgliederbereich eingeschlichen:
299 "member_confirm" stellt die Tabelle fuer das Zeitframe beim Bestaetigen von
300 Mails ein. Der Reset widmet sich ganz und alleine dem Admin-Bereich:
302 1.: Fehlermeldungen fuer den Admin (Modul gesperrt, etc.) und Fehlermeldungen im
303 Admin-Bereich beim Editieren von Gastmenue- und Adminmenue-Punkten
305 2.: Allgemeine Einstellungen, wie Farben und Schriftartfamilie
307 3.: Hinweise fuer den Admin ("Einstellungen gespeichert" beispielsweise)
309 4.: Farbeinstellung beim Editieren aller drei Menue-Systeme
311 Wieso auch immer, aber als naechstes hat sich eine Klasse fuer den Mitglieds-
312 bereich eingeschoben:
314 Auszug aus der originalen general.css:
315 :----------------------------------:
318 background-color : #eeffbc;
322 :----------------------------------:
324 Ahnen Sie schon, was diese Klasse soll? Ich schaetze mal, Sie haben auf die
325 Refbanner getippt. Hiemit werden aber die Einstellungen fuer Ihre Werbebanner
326 im Zeitframe beim Bestaetigen von Mails vorgenommen.
328 Nicht dass Sie dies jetzt missverstehen: Es werden nur Desgin-Angaben fuer die
329 Tabelle um den Banner eingestellt, nicht der Banner selber wird geaendert! ;-)
331 Und weiter geht es mit Admin-Klassen:
333 Auszug aus der originalen general.css:
334 :----------------------------------:
337 background-color : #eeffbc;
342 .admin_select, .guest_select, .member_select {
344 border-color : #009900;
345 background-color : #EEFFEE;
348 .admin.register, .admin_desc_header, .admin_done, .admin_title, .member_title2, .guest_title2 {
349 background-color : #ddeedd;
353 :----------------------------------:
355 .member_done, .guest_done {
360 background-color : #DDEEDD;
363 .admin_misc, .member_misc {
371 .admin_green, .admin_no {
376 background-color : #DDEEDD;
378 vertical-align : middle;
384 background-color : #eeffbc;
388 background-color : #DDEEDD;
394 background-color : #AAFFAA;
398 .admin_desc_cont, .admin_table, .member_table {
399 background-color : #eeffbc;
410 background-color : #eeffbc;
417 background-color : #eeffbc;
420 .admin_failed, .guest_failed, .member_failed, .member_note {
425 background-color : #eeffbc;
429 background-color : #eeffbc;
435 border-bottom : 1px solid #AA0044;
436 background-color : #ddeedd;
444 .admin_normal, .guest_normal, .member_normal {
445 border-style : solid;
447 border-color : #009900;
451 vertical-align : top;
457 background : #DDEEDD;
465 border-style : groove;
469 background-color : #DDEEDD;
472 .guest_title, .member_title {
474 vertical-align : middle;
475 background-color : #DDEEDD;
479 .guest_login_header {
481 vertical-align : middle;
482 background-color : #DDEEDD;
485 .guest_menu, .member_menu {
487 background-color : #DDEEDD;
490 .guest_menu_title, .member_menu_title {
491 background-color : #BDEFCD;
495 border : 1px solid #AA0044;
498 .guest_menu_whats, .member_menu_whats {
499 border : 1px dotted #AA0044;
501 background-color : #eeffbc;
505 .guest_menu_seperator, .member_menu_seperator {
509 .guest_content, .member_content {
510 background-color : #F4FFF4;
514 .guest_advert, .guest_login, .member_advert, .member_login {
515 background-color : #DDEEDD;
516 vertical-align : top;
528 vertical-align : bottom;
534 vertical-align : middle;
535 background-color : #E5EFE5;
541 border-color : #AA0044;
544 .switch_sw1, .switch_mem1 {
545 background-color : #b8efc1;
548 .switch_sw2, .switch_mem2 {
549 background-color : #b8fccb;
555 vertical-align : middle;
556 background-color : #E5EFE5;
561 background-color : #eeffbc;
564 .media_header, .impressum_header {
565 background-color : #b8fccb;
587 background-color : #DDEEDD;
592 background-color : #eeffbc;
596 .admin_footer, .member_refbanner, .member_update, .admin_del_link {
597 background-color : #DDEEDD;
602 background-color : #DDEEDD;
610 background-color : #DDEEDD;
612 vertical-align : middle;
625 .admin_delete, .admin_yes {
626 border-style : groove;
627 border : solid 1px #00AA00;
628 background-color : #AA0044;
633 background-color : #eeffbc;
639 vertical-align : middle;
640 background-color : #DDEEDD;
653 .guest_stats_r, .guest_stats_lr, .guest_stats_rr {
660 .guest_stats_ll, .guest_stats_rl {
665 .guest_stats_footer {
667 vertical-align : middle;
668 background-color : #DDEEDD;
677 margin-bottom : 10px;
681 background-color : #DDEEDD;
684 .guest_content_align, .member_content_align, .admin_content_align {
687 vertical-align : top;
691 background-color : #DDEEDD;
696 .list_categories, .admin_action_header, .admin_main, .admin_menu_main, .admin_menu_sub {
700 .member_unconfirmed {
701 background-color : #DDEEDD;
708 white-space : nowrap;
712 .tiny { font-size : 12px; }
713 .medium { font-size : 14px; }
714 .big { font-size : 20px; }
716 .top { border-top : 1px dotted #4400AA; }
717 .bottom { border-bottom : 1px dotted #4400AA; }
718 .left { border-left : 1px dotted #4400AA; }
719 .right { border-right : 1px dotted #4400AA; }
721 .top2 { border-top : 1px dotted #AA0044; }
722 .bottom2 { border-bottom : 1px dotted #AA0044; }
723 .left2 { border-left : 1px dotted #AA0044; }
724 .right2 { border-right : 1px dotted #AA0044; }
727 white-space : nowrap;
731 background-color : #eeffbc;