/* =============== Layout Anzeige =======================
2008-03-11 neuer Anfang (Vorläufer zimt.css/schr.css)
+ Denken in Containern
+ dort: Attribute systematisch sortiert halten!
* Ausgabeart
* Positionen & Ränder
* Schriftart, -größe, -ausrichtung
* Wortabstände
* Farben
* Sonst.
+ body mit sans-serif als Unterlassung
+ erinnere
alt: file:/dos/e:/lin/ht/birk/test/schr/schr.css
2005-10-00 cursor url mit einfachen Hochkommas
2005-10-14 Geht alles sinnvoll nur bei CSS2-Standart
Hochkommas um url weggelassen, = Validator mockierte.
2005-11-13 Anführungszeichen statt Hochkommas! Laut w3org! Münz war ungenau.
2006-01-17 Problem 3. "a img", da geht bei NS, aber nicht bei IE!
2006-09-29 font-face abgeschaltet wegen 404-Meldungen
2007-08-10 Seitenplaungsdirektiven in Dokumetation eingeführt FARBEN
2007-10-26 doch wieder Teufel-Cursor
2007-12-06 ja ja, aber doch bitte überall auch den vollen (absoluten) Pfad (wegen 404)
2008-01-13 Problem Tabellenzentrierung gelöst, text-align:center ging ja nicht
2008-02-20 Eingabe Monatsziffer nicht linksbündig, sondern zentriert
*/
/* =============== Geltungshierarchien, Übersicht =========
a) es gilt das DOM = in Containern denken
b) es gilt die Hierarchie der Angabenorte
c) es gilt die Hierarchie der Angabenarten
alles in Mischung! Wer blickt's perfekt? Diverse Buchauthoren/Buchautoren
jedenfalls nicht.
a) DOM = Welche tags dürfen innerhalb welcher tags vorkommen?
z.B. Obertag h Untertag i, oder Obertag p Untertag img
b) Angabenorte
0. wenn nichts definiert ist, dann gilt Vorgabe durch HTML
1. es gilt was extern via CSS-Datei definiert ist
2. aber Vorrang haben Formatdefinitionen im Header
Dies gilt für zentrale Formate
Innerhalb von 1.und 2./3. gilt dann:
c) Angabenarten
1. zentrale Formate (body, ...)
2. Verschachtelungs-Formate
= DOM-orientiert, also wenn ein Unter-tag
NUR DANN ein bestimmtes Format haben soll,
wenn es innerhalb einem bestimmten Obertag
vorkommt. Schwieriger in der Nachvollziehbarkeit als
Unterklassenformate.OHNE Zwischenpunkt schreiben.
z.B. Obertag a, dann sollen alle Bilder rechts sein
a img text-align:right
3. Unterklassen-Formate, tag-spezifisch = class
+ Hierarchie innerhalb
4. unabhängige Formate = id
= Verwendung auf beliebige tags, nicht tagspezifisch
Formatangaben addieren sich zu bereits vorhandenen Vorgaben,
im Konfliktfall haben sie Priorität
5. Pseudo-Formate
= ähnlich unabhängige Formate, aber eingeschränkt
5.1. doch tag-zugeordnet, mit Doppelpunkt
z.B. für
a:link {color:#bbddff;background-color:#000000;}
a:visited {color:#bbddff;background-color:#000000;}
a:active {color:#ee0000;background-color:#000000;}
a:hover {
color: #ff0000;
background-color:#000000;
text-decoration: underline;
cursor:url("teufel.cur"),default;
}
5.2. ziemlich tag-unabhängig
.achtung {DISPLAY:none;}
.printonly {VISIBILITY:visible;}
.screenonly {VISIBILITY:hidden;}
6. Schnellformatierung im HTML-Text
auch inline-Formatierung genannt = höchste Priorität
tag-Parameter style="xyz;"
=========================================================== */
/* ===== 0. Planungsdokumentation ==== WICHTIG
FARBEN
text=" "
link=" " default
vlink=" " dito
alink=" " default
bgcolor=" " schwarz
aber in Menümatrix invers!
*/
/* ===== 1. zentrale Formate ===== */
body {
font-family:Helvetica,sans-serif;
color:#ffffff;
background-color:#000000;
/* restliche Farben bei Pseudoformate 5.1. */
/* text-align:center; */
}
h1
{
text-align:center;
}
table {
/* Zentrierung einer Tabelle (nur?) mit
width + margin-left + margin-right ZUSAMMEN
text-align:center; zentriert den Text in der Tabelle innen!
width:580px; ist kontraproduktiv, da absolut. Bei Rechnung
nie ganz auf 100% gehen wegen Browser Rundungsreserve */
width:70%;
margin-left:14%;
margin-right:14%;
/* border:solid;
border-width:1px; */
border-collapse:collapse;
color:#330033;
background-color:#ffffff;
}
th,td {
border:solid;
border-width:1px;
border-collapse:collapse;
/* text-align:justify; sieht manchmal zu bescheuert aus */
}
hr {
border-width:1px;
}
input
{
font-size:+100%;
}
textarea
{
font-family:Helvetica,sans-serif;
border:solid;
border-width:1px;
/* background-color:#ffffdf; Achtung mach Textcursor fast unsichtbar daher*/
background-color:#ffffef; /* auch wenn Feld dann gelegentlich weiß statt gelblich ist */
/* das Problem liegt aber ansich beim dünnen blassen Helevtia-Cursor */
/* cursor:default; bringt nix */
/* color:#000000; bringt nix */
/* padding:3% 3% 3% 3%; macht nur scheinbar breiter ...*/
}
/* ===== 2. Verschachtelungs-Formate ===== */
/* = DOM-orientiert, also wenn ein Unter-tag
NUR DANN ein bestimmtes Format haben soll,
wenn es innerhalb einem bestimmten Obertag
vorkommt. HNE Zwischenpunkt schreiben.
td ul {
text-align:left;
}
table img
{
text-align:right;
}
/* h3-Überschriften in einer Tabelle zenteriert dort */
table h3
{
text-align:center;
}
/* Verweisknopf im Formular, soll aussehen wie input-submit */
form a
{
text-decoration:none;
/* display:block; machte auch neue Zeile! */
/* width:160; nur für block */
/* border:1px solid #333333; */
border:2px outset #A9A9A9;
padding:2px;
margin:1px;
/* font-family:verdana,arial,helvetica,sans-serif; ohne war besser */
font-size:16px;
/* font-weight:bold; */
/* text-align:center; */
color:#000000;
background-color:#B9B9B9;
vertical-align:+4px;
}
/* ========== 3. Unterklassen-Formate = class ========== */
/* tag-spezifisch mit class="..." auszuweisen */
/* 2007-12-06 stillgelegt, da nirgends verwendet
hr.center {background-position:center;} */
/* Textblock zentral ausgerichtet, kam vor 2007-12-06 bei
/home/ht/mp/mp.shtml:170:
/home/ht/mp/mp.shtml:176:
/home/ht/mp/foto06/zg06.htm:88:
/home/ht/mp/mplnk.shtml:27:
/home/ht/mp/ton/frei/mptonf.html:32:
/home/ht/mp/ton/mpton.html:28:
/home/ht/mp/ton/gema/geheim.html:30:
/home/ht/mp/ton/gema/mptong.html:43:
/home/ht/mp/int/mpint.html:39:
/home/ht/mp/int/geheim.html:27:
/home/ht/mp/mpkon.html:24:
/home/ht/mp/mpemail.html:26:
p.zentral {
background-position:center;
text-align:center;
}
*/
form.Menue,ul.Menue /* nur für die Formular-Texteingabe linksbündig */
{
text-align:left;
width:70%;
margin-left:14%;
margin-right:14%;
}
/*
a.validator
{
background-position:right;
text-align:right;
}
*/
/* 2007-12-06 stillgelegt, war ursprünglich für technische Bildchen
unten rechts vorgesehen
p.rechts {
background-position:right;
text-align:right;
}
*/
/* ========== 4. unabhängige Formate = id ========== */
/* Verwendung auf beliebige tags, nicht tagspezifisch */
/* Formatangaben addieren sich zu bereits vorhandenen Vorgaben,
im Konfliktfall haben sie Priorität */
#validator
{
/* background-position:right; 2008-02-27 weg */
text-align:right;
float:left;
/* margin-left:85%; */
}
#zaehl {
color:#660000;
background-color:#000000;
font-family:Impact,sans-serif;
letter-spacing:2pt;
word-spacing:4pt;
font-variant:small-caps;
font-style:normal;
font-size:20px
}
/* ===== 5. Pseudo-Formate ===== */
/* ähnlich unabhängige Formate, aber eingeschränkt, */
/* ===== 5.1. doch tag-zugeordnet ===== */
/* mit Doppelpunkt */
/* ----- für ----- */
/* 2008-01-11 mal alles stillgelegt */
/*
a:link {color:#bbddff;background-color:#000000;}
a:visited {color:#bbddff;background-color:#000000;}
a:active {color:#ee0000;background-color:#000000;}
a:hover {
color: #ff0000;
background-color:#000000;
text-decoration: underline;
cursor:url("teufel.cur"),default; bis 2007-12-06
cursor:url("http://www.megapolis.name/gem/teufel.cur"),default;
}
*/
/* ===== 5.2. ziemlich tag-unabhängig =====
* Ausgabeart
* Positionen & Ränder
* Schriftart, -größe, -ausrichtung
* Wortabstände
* Farben
* Sonst.
----- 5.2.1. für Ausgabearten ----- */
.achtung {DISPLAY:none;}
.printonly {VISIBILITY:visible;}
.screenonly {VISIBILITY:hidden;}
/* ----- 5.2.2. Positionen & Ränder ----- */
/* ----- 5.2.3. Schriftart, -größe, -ausrichtung ---- */
/* ---------- 5.2.3.0. browserintegrierte Schriftartnamen-typen ---------- */
/* Vorgabe = Voreinstellung des jeweilgen Browsers */
/*
.Vorgabe {color:#ffffff;}
.Geneva {font-family:Geneva;color:#ffffff;}
.Impact {font-family:Impact;color:#ffffff;}
.Helvetica{font-family:Helvetica;color:#ffffff;}
.Courier {font-family:Courier;color:#ffffff;}
*/
/* eher allgemeine Schfttypen
.ncsb {font-family:"new century schoolbook";color:#ffffff;}
.csb {font-family:"century schoolbook";color:#ffffff;}
.Times {font-family:Times;color:#ffffff;}
*/
/* ---------- 5.2.3.1. generische Schrifttypen ---------- */
/* ---------- 5.2.3.1.1. definiert via generischer Klasse ---------- */
.monospace
{
font-family:monospace;
color:#ffffff;
background-color:#000000;
}
.sans-serif
{
font-family:sans-serif;
color:#ffffff;
background-color:#000000;
}
/*
.serif {font-family:serif;color:#ffffff;background-color:#000000;}
.cursive {font-family:cursive;color:#ffffff;background-color:#000000;}
.fantasy {font-family:fantasy;color:#ffffff;background-color:#000000;}
*/
/* ---------- 5.2.3.2. Schriftvariante = font-variant ----------
Kapitälchen 2007-12-10 ersatzlos weggefallen, da optisch Bockmist */
/* ---------- 5.2.3.3. Schriftgröße ----------
.grel150{font-size:150%;color:#ffffff;background-color:#000000;}
.gabs20{font-size:20pt;color:#ffffff;background-color:#000000;}
---------- 5.2.3.4. Schriftgewicht ----------
.fett{font-weight:bold;color:#ffffff;background-color:#000000;}
*/
/* ---------- 5.2.3.4. geladene Schrifttypen ---------- */
/* ----- ZUNÄCHST generischer Schrifttyp als Ersatzlösung für IE ----- */
/*
.Impacttest
{
font-family:Impact,sans-serif;
color:#ffffff;
background-color:#000000;
letter-spacing:4pt;
word-spacing:4pt
}
*/
/* ---------- 5.2.3.4.1. aus eigenem Webspace ---------- */
/*
@font-face
{
font-family:sfsq-ttf;
src:url("sfsq.ttf")format("truetype");
}
.sfsq-ttf
{
font-family:sfsq-ttf,sans-serif;
color:#ffffff;
background-color:#000000;
}
*/
/* ----- 5.2.4. Abstände ---- */
/* ---------- 5.2.4.1. Wortabstand ---------- */
.wab1em
{
word-spacing:1em;
color:#ffffff;
background-color:#000000;
}
.wab4pt
{
word-spacing:4pt;
color:#ffffff;
background-color:#000000;
}
.wab3pt
{word-spacing:3pt;
color:#ffffff;
background-color:#000000;
}
/* ---------- 5.2.4.2.Zeichenabstand ---------- */
.zab1em
{
letter-spacing:1em;
color:#ffffff;
background-color:#000000;
}
.zab4pt
{
letter-spacing:4pt;
color:#ffffff;
background-color:#000000;
}
/* ----- 5.2.5. Farben ----- */
/* ----- 5.2.6. Sonst. ----- */
/* ===== 6. Schnellformatierung im HTML-Text ===== */
/* auch inline-Formatierung genannt = höchste Priorität */
/* tag-Parameter style="xyz;" */