<!--{{{-->
<div class="toolbar" macro="toolbar +saveTiddler -cancelTiddler"></div>
<div class="title" macro="view title"></div>
<div class="editor" macro="edit title"></div>
<div class="editor" macro="edit text"></div>
<div class="editor" macro="edit tags">Tags: </div>
<div class="editor" macro="edit parenttitle">Parent:</div>
<div class="editorFooter"><span macro="message views.editor.tagHint"></span><span macro="tagChooser"></span></div>
<!--}}}-->
<!--{{{-->
<div id='navigationArea'>
<div id='navigationCollapser' macro='collapseArea navigationPanel'></div>
<div id='navigationPanel' refresh='content' force='true' tiddler='NavigationPanel'></div>
</div>
<div id='sidebar'>
<div id='sidebarCollapser' macro='collapseArea sidebarContent true "Side Bar" "»«"'></div>
<div id='sidebarContent'>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
</div>
<div id='displayArea'>
<div id='navAndSearch'>
<div id='navToolbar'>
<span id='navButtons' macro='navigate'></span>
<div id='treePath'></div>
</div>
<span id='search' macro='search'></span>
</div>
<div id='pageWrapper'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
</div>
<!--}}}-->
/*{{{*/
#contentWrapper .chkOptionInput {border:0;}
.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}
#contentWrapper {display:block;}
#splashScreen {display:none;}
.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0; font-size:.9em;}
.fieldsetFix {border:0; padding:0; margin:1px 0px;}
/*}}}*/
/*{{{*/
@media print {
#navigationPanel, #sidebar, #messageArea, .toolbar, #backstageButton, #backstageArea {display: none !important;}
noscript {display:none;} /* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
}
/*}}}*/
<!--{{{-->
<div class='toolbar'><span macro='toolbar editTiddler deleteTiddler > references <'></span></div>
<div class='title' macro='view title'></div>
<div class='articleContentContainer' macro='view text wikified'></div>
<!--}}}-->
!"Architektur" bedeutet hier hauptsächlich: Design von Abhängigkeiten.
!!Problembeschreibung
*HTML und CSS sind gegenseitig voneinander abhängig
**HTML kennt die CSS-Klassen: Im Attribut "class="
**CSS kennt die HTML-Struktur: Über CSS-Pfade im Selektor
**CSS kennt die IDs von HTML-Tags
*Diese Abhängigkeit gilt es zu minimieren
**Extrem 1: Direktes Styling im HTML
***Folge: Unlesbares HTML
***Folge: Keine Wiederverwendbarkeit / Zentralisierung
**Extrem 2: HTML komplett ohne CSS (keine Styles und keine Klassen)
***Kann realisiert werden durch komplexe CSS-Pfade in den Selektoren
***Bsp.: #StageUserControl div.StageContent div#KontodetailsAP div div#gAngezeigteKontodetails div#gVorsorgeplan.Zwischenueberschrift {font-weight:bold;}
***Folge: CSS ist 100% abhängig von HTML-Struktur und nicht wiedervberwendbar.
**Extrem 3: 100% wiederverwendbares CSS (nur Klassen, niemals IDs und/oder CSS-Pfade, sog. "Modifier Classes")
***Bsp.: .rotUndFett {color:red; font-weight:bold;}
***Folge: Im HTML wimmelt es nur so von CSS-Klassenzuweisungen
***Folge: Zentrales Styling von ähnlichen Komponenten (z.B. alle Menüpunkte) ist nicht möglich
**Extrem 4: Massen von (nicht-wiederverwendbaren) Klassen
***Die Idee: Man "erfindet" abstrakte Namen für Gruppen von HTML-Elementen und verwendet diese als CSS-Klassenname. Dadurch "kennt" CSS die HTML-Struktur nicht mehr direkt.
***Bsp.: .kontodetails-header-title {font-weight:bold;}
***Folge: Sehr viele CSS-Klassen, die nicht wiederverwendbar sind
***Folge: Zentrales Styling von ähnlichen Komponenten (z.B. alle Menüpunkte) ist nicht möglich
!!Lösungsansätze
*Die Balance halten zwischen den o.g. Extremen
*Namespaces für wiederverwendbare Komponenten verwenden
*CSS-Pfade mit IDs für nicht-wiederverwendbare Komponenten verwenden
*CSS-Pfade mit HTML-Tags nach Möglichkeit vermeiden
!Do
|Regel|Beispiel|Erklärung|Folgen der Missachtung|h
|Think Style-centric, not HTML-centric||Use selectors to style HTML-Tags, don't assign classes to HTML-Tags too much.|Decentral styling, losing the power of selectors.|
|Separate your concerns||Don't set too many properties in one class, e.g. color and layout|Class not reusable|
|Namespaces erfinden statt CSS-Path verwenden|.wizard-nav-button<br>.wizard-nav-label|Die Namen sollen den Verwendungszweck repräsentieren und nicht die Verschachtelung von HTML-Tags.|Zu starke Abhängigkeit des CSS von der HTML-Struktur.Unlesbare Styles.|
!Don't
|Regel|Beispiel|Erklärung|Folgen der Missachtung|h
|Keine Styles ins HTML|<div style="color:red;">|CSS-Eigenschaft wird direkt am Tag gesetzt.|Style ist nicht wiederverwendbar. Dezentrale Pflege der Styles. Überfrachtetes HTML.|
|Keine "Modifier Classes" verwenden!||Die Klasse ist lediglich ein Alias für ein Grüppchen von Styles, die direkt von HTML-Tags verwendet werden.|Classitis, dezentrales Styling, überfrachtetes HTML.|
|Keine zu komplexe Selektoren|{{nowrap{#main-nav ul li ul li div { }}}}|Sehr spezielle HTML-Elemente sollen gestyled werden, ohne dies direkt am Element zu tun.|Zu starke Abhängigkeit des CSS von der HTML-Struktur.|
*style cross-contamination
!See also
*[[CSS Architecture|Attachments/CSS Architecture _ Appfolio Engineering.mht]]
http://www.html5tutorial.info/html5-audio.php
http://www.position-absolute.com/articles/introduction-to-the-html5-audio-tag-javascript-manipulation/
http://msdn.microsoft.com/de-de/library/ie/gg589489%28v=vs.85%29.aspx
http://9elements.com/html5demos/audio/
!Siehe auch
[[CSS replaces HTML]]
!Weblinks
*[[CSS-Tricks|http://css-tricks.com/almanac]]
*[[HTML 5 and CSS 3 The Techniques You’ll Soon Be Using|HTML 5 and CSS 3 The Techniques You’ll Soon Be Using.mht]]
Quelle: [[CSS instead of HTML (Tables etc.)|./Html-Wiki Attachments/CSS instead of HTML (Tables etc.).mht]]
!Table
bgcolor|'background-color' on table
!Horizontal
!!Automatic Width
The trick is to use display:table in combination with margin left/right:auto
!!!Child is centering itself inside a parent
{{{
<div id="outer" style="width:100%">
<div id="inner" style="display: table;margin: 0 auto;">Foo foo</div>
</div>
}}}
!!!Parent is centering it's first child
{{{
<style type="text/css">
.CenteringPanel > div {display: table;margin:0 auto;}
</style>
<div class="CenteringPanel">
<div>This will be centered!</div>
</div>
}}}
!!Fixed Width
{{{
<div id="outer" style="width:100%">
<div id="inner" style="width:50%; margin: 0 auto;">Foo foo</div>
</div>
}}}
!!Absolute Positioned Elements
The trick is the combination of left:0; right:0; margin:0 auto;
{{{
<div id="outer" style="position:relative;">
<div id="inner" style="position:absolute; left:0; right:0; margin:0 auto;">Foo foo</div>
</div>
}}}
!Vertical
!!Running Text in a Div
''line-height'' fixes the height of the Div and the text is vertically centered
{{{
div {line-height:100px;}
}}}
!Background Image
position 50%: Fortunately, the pin pos of the picture is it's center (not upper left corner).
{{{
body {
background: url("img_tree.png") no-repeat scroll 50% top #FFFFFF;
}
}}}
!See also
*[[Vertical centering using CSS|Files/Vertical centering using CSS.maff]]
*[[CSS Baseline: The Good, The Bad And The Ugly|Files/css-baseline-the-good-t.pdf]]
!External Files
*[[A Detailed Introduction To Custom Elements|Files/A Detailed Introduction To Custom Elements.maff]]
!IE
Der IE (mal wieder) benötigt folgende Zeile im HTML-Code:
{{{
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
}}}
!Code
{{{
<style type="text/css">
.Papa:hover {position:relative;}
.Papa:hover .KinderContainer {display: block;}
.KinderContainer {display:none;background-color: Pink;position: absolute;}
</style>
<span class="Papa">
Papa1
<div class="KinderContainer">
<div class="Kind">Kind1</div>
<div class="Kind">Kind2</div>
<div class="Kind">Kind3</div>
</div>
</span>
<span class="Papa">
Papa2
<div class="KinderContainer">
<div class="Kind">Kind4</div>
<div class="Kind">Kind5</div>
<div class="Kind">Kind6</div>
</div>
</span>
}}}
!Demo
<html>
<style type="text/css">
.Papa:hover {position:relative;}
.Papa:hover .KinderContainer {display: block;}
.KinderContainer {display:none;background-color: Pink;position: absolute;}
</style>
<span class="Papa">
Papa1
<div class="KinderContainer">
<div class="Kind">Kind1</div>
<div class="Kind">Kind2</div>
<div class="Kind">Kind3</div>
</div>
</span>
<span class="Papa">
Papa2
<div class="KinderContainer">
<div class="Kind">Kind4</div>
<div class="Kind">Kind5</div>
<div class="Kind">Kind6</div>
</div>
</span>
</html>
!Explaination
*Papa beinhaltet die Überschrift (immer sichtbar) und den KinderContainer
*KinderContainer ist zunächst unsichtbar und wird durch den Hover-Zustand eingeblendet
*{{{.Papa:hover {position:relative;}}}}* deklariert den Papa als Bezugspunkt für den späteren Gebrauch von position: absolute;
*{{{.Papa:hover .KinderContainer {display: block;}}}}** reicht den Hover-Zustand von Papa an den KinderContainer durch, wodurch er sichtbar wird
*{{{.KinderContainer {position: absolute;}}}} positioniert den Container direkt unter dem Papa
"""*)""" {{{position:relative}}} darf nur im :hover gesetzt werden (warum auch immer)
"""**)""" Merkwürdigerweise funktioniert die Deklaration {{{.Papa:hover .Kinder:hover}}} nicht - was man aber nicht weiter verstehen muss.
!See also
*[[Dropdown-Menüs mit Submenüs|CSS/Dropdown-Menüs mit Submenüs]]
*[[position|CSS/position]]
<html>
<style type="text/css">
.Papa,.Papa2 {display:block;float:left;}
.Papa:hover {position:relative;}
.Papa:hover > .KinderContainer {display: block;}
.KinderContainer {display:none;background-color: Pink;position: absolute;}
.Papa .Papa .KinderContainer {background-color: Yellow;position: absolute;left:2.7em;top:0;}
</style>
<div>
<div class="Papa">
Papa1a
<div class="KinderContainer">
<div class="Kind">Kind1</div>
<div class="Papa">
Papa2
<div class="KinderContainer">
<div class="Kind">Kind4</div>
<div class="Kind">Kind5</div>
<div class="Kind">Kind6</div>
</div>
</div>
<div class="Kind">Kind3</div>
</div>
</div>
<div class="Papa">
Papa1b
<div class="KinderContainer">
<div class="Kind">Kind7</div>
<div class="Papa">
Papa2b
<div class="KinderContainer">
<div class="Kind">Kind10</div>
<div class="Kind">Kind11</div>
<div class="Kind">Kind12</div>
</div>
</div>
<div class="Kind">Kind9</div>
</div>
</div>
</div>
<div style="clear:both" />
Hier kommt weiterer Text.
</html>
Quelle:
http://www.htmlhelp.com/de/reference/html40/entities/special.html
Anführungszeichen " " " " " "
kommerzielles Und-Zeichen & & & & & &
Kleiner-Zeichen < < < < < <
Größer-Zeichen > > > > > >
OE-Ligatur; O mit legiertem E Œ Œ Œ Œ Œ Œ
oe-Ligatur; o mit legiertem e œ œ œ œ œ œ
Großes S mit Caron (Hatschek) Š Š Š Š Š Š
Kleines s mit Caron (Hatschek) š š š š š š
Großes Y mit Trema Ÿ Ÿ Ÿ Ÿ Ÿ Ÿ
Zirkumflex ˆ ˆ ˆ ˆ ˆ ˆ
Tilde ˜ ˜ ˜ ˜ ˜ ˜
kurzes (n-breites) Leerzeichen      
langes (m-breites) Leerzeichen      
schmales Leerzeichen      
nullbreiter Nichtverbinder ‌ ‌ ‌
nullbreiter Verbinder ‍ ‍ ‍
links-nach-rechts-Zeichen ‎ ‎ ‎
rechts-nach-links-Zeichen ‏ ‏ ‏
kurzer (n-breiter) Gedankestrich – – – – – –
langer (m-breiter) Gedankenstrich — — — — — —
einfaches Anführungszeichen links ‘ ‘ ‘ ‘ ‘ ‘
einfaches Anführungszeichen rechts ’ ’ ’ ’ ’ ’
einfaches Anführungszeichen unten (low-9) ‚ ‚ ‚ ‚ ‚ ‚
doppelte Anführungszeichen links “ “ “ “ “ “
doppelte Anführungszeichen rechts ” ” ” ” ” ”
doppelte Anführungszeichen unten (low-9) „ „ „ „ „ „
"Gestorben am .."; Kreuz † † † † † †
Doppelkreuz ‡ ‡ ‡ ‡ ‡ ‡
Promille-Zeichen ‰ ‰ ‰ ‰ ‰ ‰
angewinkeltes Anführungszeichen links ‹ ‹ ‹ ‹ ‹ ‹
angewinkeltes Anführungszeichen rechts › › › › › ›
Euro-Zeichen € € € € € €
{{{
@font-face {font-family: "trajan-pro-1";src: url('trajan-pro-1.otf')}
@font-face {
font-family: "Unit";
src:
url("fonts/UnitSlabWeb-Bold.eot?#iefix") format("embedded-opentype"),
url("fonts/UnitSlabWeb-Bold.woff") format("woff")
;
}
}}}
{{{
body {font-family:NimbusSanL;font-size:10pt;line-height:12pt;}
h1 {font-size:1.5em;}
h2 {font-size:1.2em;}
h3 {font-size:1em;}
h4 {font-size:1em;}
h1,h2,h3,h4,p,pre,ol,ul {margin:0 0 12pt 0}
}}}
*In order to have consistent baseline distances, you have to set the very same ''absolute'' line-height to any font sizes.
*You have to make a decision: Separating elemets by {{{<br>}}} vs. using a css margin.
**If you use margin, only use bottom margin!
**Use padding (of the containers) to implement other kinds of margins.
!See also
*[[CSS Baseline - The Good, The Bad And The Ugly|Files/CSS Baseline - The Good, The Bad And The Ugly.pdf]]
! Gestrichelte Focus-Linie unterdrücken
{{{
:active {outline:0;}
}}}
! Abstände vermeiden
!!Horizontal
!!!Als Inline-Element
*Kein Zeilenumbruch zwischen mehreren img-Tags!
*Workaround: Den Umbruch wie folgt auskommentieren:
{{{
<a href="photos.htm"><img id="BackImg" src="img/back.png"></a><!--
--><a href="photos/2012_01.jpg"><img src="photos/2012_01.t.jpg" width="100" height="100"></a>
}}}
!!!Als Block-Element
Float-Left
!!Vertikal
!!!Als Inline
Siehe [[Aligning inline images with the vertical-align property|.\Html-Wiki Attachments\IMG_Align.maff]]
!!!Als Block
*Umwandeln in block:
{{{
<img src="img/Header/03.jpg" style="display:block;">
}}}
!Einbetten
{{{
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
alt="Red dot"
>
}}}
{{{
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
alt="Red dot"
>
}}}
{{{
ul.checklist li.complete {
margin-left: 20px;
background: white url('data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')
no-repeat scroll left top
;
}
}}}
http://en.wikipedia.org/wiki/Data_URI_scheme
!Setzen
{{{
<p id="example">This is an example.</p>
<script>
document.getElementById('example').style.borderWidth = '4px';
</script>
}}}
oder
{{{
setAttribute("class", "foo");
}}}
!Auslesen
!!Deklaration
{{{
var s = window.getComputedStyle(element);
}}}
!!Verwendung am Element
{{{
if (kids[i].attributes["class"].value == "DivRotatorContent") count++;
}}}
!Calling Java from CSS
!!!!!!Quelle: http://lawrence.ecorp.net/inet/samples/css-ie-hover.shtml
{{{
<-- For IE -->
<!--[if lt IE 7]>
<script type="text/javascript">
function mOver() {
switch (this.nodeName.toLowerCase()) {
case "th":
this.style.backgroundColor='#00f';
this.style.color='#fff';
break;
case "td":
this.style.backgroundColor='#ff0';
this.style.color='#000'
break;
}
}
function mOut() {
switch (this.nodeName.toLowerCase()) {
case "th":
this.style.backgroundColor='';
this.style.color='';
break;
case "td":
this.style.backgroundColor='#666';
this.style.color='#fff';
break;
}
}
</script>
<style type="text/css">
td, th {
h: expression(onmouseover=mOver;);
m: expression(onmouseout=mOut;);
}
</style>
<![endif]-->
}}}
!Margins
*Legitim: Abstand zum Nachbarn definieren
*Fragwürdig: Abstand zum Parent definieren. Hierfür lieber Padding im Parent verwenden!
Die Angaben für oben, rechts, unten, links können durch Leerzeichen getrennt hintereinandergeschrieben werden.
Durch die Anzahl der Angaben verändert sich deren Interpretation wie folgt:
|Param#►<br>▼Anzahl|1|2|3|4|Wirkungsweise|
|1|┼||||Ein Parameter wirkt auf alle Seiten|
|2|↕|↔|||Zwei Paramter wirken auf oben+unten, links+rechts|
|3|↑|↔|↓||Drei Paramter wirken auf oben, links+rechts, unten|
|4|↑|→|↓|←|Vier Paramter wirken auf oben, rechts, unten, links|
!!Bsp:
@@border-width:1px;border-style:solid;border-width:1px@@
@@border-width:1px 4px;border-style:solid;border-width:1px 4px@@
@@border-width:1px 2px 3px;border-style:solid;border-width:1px 2px 3px@@
@@border-width:1px 2px 3px 5px;border-style:solid;border-width:1px 2px 3px 5px@@
{{{
white-space:nowrap;
}}}
<html>
<style type="text/css">
OL { counter-reset: item; padding-left: 0em !important; margin-left:3em !important;}
OL OL {margin-left:1em !important;}
LI {display: block;}
LI:before {
content: counters(item, ".");
counter-increment: item;
margin-left:-2.3em !important;
padding-right:1em !important;
}
</style>
Bla<br>
Bla
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two<br/>Foo<div>Bar</div></li>
<li>two.three</li>
</ol>
</li>
<li>three</li>
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
<li>four</li>
</ol>
</html>
!HTML
{{{
Bla<br>
Bla
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two<br/>Foo<div>Bar</div></li>
<li>two.three</li>
</ol>
</li>
<li>three</li>
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
<li>four</li>
</ol>
}}}
!CSS
{{{
OL { counter-reset: item; padding-left: 0em; margin-left:3em;}
OL OL {margin-left:1em;}
LI {display: block;}
LI:before {
content: counters(item, ".");
counter-increment: item;
margin-left:-2.3em;
padding-right:1em;
}
}}}
{{{
<html style="background-color: darkcyan;">
<head>
<style type="text/css">
.lds-spinner {display:inline-block;position:absolute;width:80px;height:80px;left:0;right:0;margin:1em auto;}
.lds-spinner div {transform-origin:40px 40px;animation:lds-spinner 1.2s linear infinite;}
.lds-spinner div:after {content: " ";display:block;position:absolute;top:3px;left:37px;width:6px;height:18px;border-radius:20%;background:#fff;}
.lds-spinner div:nth-child(1) {transform:rotate(0deg);animation-delay:-1.1s;}
.lds-spinner div:nth-child(2) {transform:rotate(30deg);animation-delay:-1s;}
.lds-spinner div:nth-child(3) {transform:rotate(60deg);animation-delay:-0.9s;}
.lds-spinner div:nth-child(4) {transform:rotate(90deg);animation-delay:-0.8s;}
.lds-spinner div:nth-child(5) {transform:rotate(120deg);animation-delay:-0.7s;}
.lds-spinner div:nth-child(6) {transform:rotate(150deg);animation-delay:-0.6s;}
.lds-spinner div:nth-child(7) {transform:rotate(180deg);animation-delay:-0.5s;}
.lds-spinner div:nth-child(8) {transform:rotate(210deg);animation-delay:-0.4s;}
.lds-spinner div:nth-child(9) {transform:rotate(240deg);animation-delay:-0.3s;}
.lds-spinner div:nth-child(10) {transform:rotate(270deg);animation-delay:-0.2s;}
.lds-spinner div:nth-child(11) {transform:rotate(300deg);animation-delay:-0.1s;}
.lds-spinner div:nth-child(12) {transform:rotate(330deg);animation-delay:0s;}
@keyframes lds-spinner {0% {opacity:1;} 100% {opacity:0;}}
</style>
</head>
<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</html>
}}}
!HTML Tags: Lower Case
Example: a, h1, h2, h3, li, ul, ...
!Custom Class Names: camelStyle and hyphens
*In contrast to Visual Basic the xml, html, css world tends to dislike capital letters.
*Some people put lower case usage to an extreme by writingeverythingtogetherandlowercase. thisisunreadable.
*camelSytle is the compromise to keep single words lower case and combined words readable.
!!When to use camelStyle vs. hyphens
||Hyphens|camelStyle|h
|''Purpose''|Namespace for grouped classes|Type Suffixes|
|''Examples''|.mask-panel<br>.mask-table<br>.mask-col-label<br>.mask-col-unitSymbol<br>.mask-unitSymbol<br>.mask-input<br>.mask-buttons-panel<br>.mask-buttons-button|.activeStepTitle<br>.fellowQuickSearch<br>.reportTable<br>.resultTable|
!Commonly Used Vocabulary
|Word|Meaning|h
|-Panel|Container to group child elements|
!.htaccess
x - beim Provider erfragen!
{{{
AuthType Basic
AuthName "Access to /yyy/zzz"
AuthUserFile /kunden/homepages/x/xxxxxxxx/htdocs/yyy/zzz/.htpasswd
require user <loginname>
}}}
!.htpasswd
{{{
<loginname>:<passwordhash>
}}}
!Siehe auch
http://de.selfhtml.org/servercgi/server/htaccess.htm#allgemeines
!Page margins
!!Page-Margin
*It is not possible to move elements outside the page margin - they will appear truncated
*Best practice: Do not use page margin. Use Padding of body/other elements.
!!Body-Padding
*The body will span over multiple pages
**The top padding will only appear on the first page
**The bottom padding will only appear on the last page
**Folglich ist er nicht geeignet für oberer/unterer Rand
**sehr wohl aber für linker/rechter Rand
!Creating printer friendly pages using CSS
Today's sites excel at pleasing the eye, but unfortunately at the expense of the user's printer. The complex background, navigational bars, ads, and other "eye candy" aspects of the page waste both ink and paper when they're included in the printout. Using CSS2's support for the print media, we can rinse, trim and even do away with these redundant elements as the page is fed to the printer. Print media stylesheets are supported in IE5+, Firefox/ NS6+, and Opera 7+.
Here's an example of the print media in action:
{{{
<style type="text/css">
@media print{
body{ background-color:#FFFFFF; background-image:none; color:#000000 }
#ad{ display:none;}
#leftbar{ display:none;}
#contentarea{ width:100%;}
}
</style>
}}}
!Siehe auch
http://de.selfhtml.org/css/eigenschaften/printlayouts.htm
Referenz hierzu siehe http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm
[[CSS2 - before and after|Html-Wiki Attachments/CSS2 - before and after.mht]]
!Abschalten
*Die erste(!) Zeile im gerenderten HTML-Code muss wie folgt aussehen:
{{{
<!DOCTYPE html>
}}}
*FALLE: Es dürfen keine Kommentare vor oder über dem DOCTYPE stehen!
!Erkennen
!!Via Javascript
1. Zu untersuchende Seite aufrufen
2. Sofort danach folgendes in Adresszeile kopieren:
{{{
javascript:alert(document.compatMode);
}}}
"BackCompat" = Quirks-Modus!
!!Via Internet Explorer Entwicklertools
*In der Menüleiste der Entwicklertools wird ganz rechts der aktuelle Zustand angezeigt
*Man kann ihn dort auch festlegen
**FALLE: Nach dem Festlegen hilft kein Reload mehr, man muss den Browser schließen und neu öffnen!
!Veraltete Lösungen, die noch im Netz kursieren
{{{
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
}}}
*Braucht man alles nicht (seit IE6), wenn man <!DOCTYPE html> (korrekt) verwendet!
!Weblinks
*MSDN: [[Defining Document Compatibility|http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx]]
*Wikipedia: [[Quirks-Modus|http://de.wikipedia.org/wiki/Quirks-Modus]]
*Wikipedia: [[Box-Modell-Fehler im Internet-Explorer|http://de.wikipedia.org/wiki/Box-Modell-Fehler_im_Internet_Explorer]]
!Grundsätzlich
{{{
overflow:auto;
height:NICHT_AUTO;
}}}
!Height 100% (Bildschirmhöhe)
!!Obligatorisch
{{{
html, body {
height: 100%;
}
}}}
Hinweis für FireBug: CSS für's html-tag kann nicht via Firebug gesetzt werden - nur im source code.
!!Komplette Bildschirmhöhe
{{{
.screenHeight {
height:100%;
overflow: hidden;
}
}}}
Hinweis: Muss bei verschachtelten Elementen rekursiv durchgereicht werden.
!!100% minus x (bei Scrollbalken erforderlich)
Realisierbar nur via position:absolute.
Ggf. zusätzliche Verschachtelung (container) mit position:relative erforderlich.
{{{
.container {
height:100%;
overflow: hidden;
position: relative;
}
.scrollingPanel{
bottom: 3em;
left: 0;
overflow: auto;
position: absolute;
right: 0;
top: 0;
}
}}}
!CSS-Begriffe
Die nachfolgende //Regel// setzt sich aus dem //Selektor//, der die gewünschten Elemente selektiert (auswählt) und einer //Eigenschaft// sowie dem ihr zugewiesenen //Wert// zusammen:
{{{
<Selektor> { <Eigenschaft>:<Wert>; }
<Selektor> { <Eigenschaft>:<Wert> !important; }
}}}
Die Kombination aus Eigenschaft und Wert wird als //Deklaration// bezeichnet.
Das Schlüsselwort "!important" erhöht die [[Spezifität|http://de.selfhtml.org/css/formate/kaskade.htm#ursprung]] der Deklaration
!!Selektoren: Tag, .Klasse, #ID
{{{
h1 /*Wirkt auf alle <h1> Tags */
.menu {<Deklarationen>} /* Wirkt auf alle Tags mit class="menu" */
#Titel {<Deklarationen>} /* Wirkt auf alle Tags mit id="Titel" */
}}}
!!Zusammenschreibung (AND-Operator)
{{{
.menu.selected {<Deklarationen>} /* Wirkt auf alle Tags mit class=".menu .selected" */
h1#Titel {<Deklarationen>} /* Wirkt auf <h1> Tags, die gleichzeitig id="Titel" haben */
}}}
!!Kommata (Wiederverwendung, Vererbung)
Mehrere Elemente bekommen die gleiche(n) Deklaration(en)
{{{
p, li, ... {<Deklarationen>}
}}}
!!Space - Select all nested elements in all sub levels
{{{
h1 a {<Deklarationen>}
}}}
!!Asterisk * (one nested child) - Select the first matching nested element (all sub levels are scanned)
{{{
h1 * a {<Deklarationen>}
}}}
!!Größer > (many 1st level children) - Select all matching nested elements (only the first sub level is scanned)
{{{
h1 > a {<Deklarationen>}
}}}
!!Plus + (one neighbour) - Select the first matching element on my level (after me)
{{{
h1 + a {<Deklarationen>}
}}}
!!Eckige Klammern [ ] (Attributbedingte Selektoren)
{{{
p[align] {color:red;}
p[align=center] {color:blue; text-align:left;} /* Wirkt nur auf zentrierte Absätze*/
td[abbr~=Berlin] {background-color:#FFFF00;}
*[lang|=en] {background-color:#FF0000; color:#FFFFFF;}
input:not([type]) {width: 11em;} /* All inputs without type attribute*/
}}}
!!Doppelpunkt : ([[Pseudoelemente und Pseudoklassen]])
{{{
a:link { color:#EE0000; text-decoration:none; font-weight:bold; }
a:visited { color:#EEAAAA; text-decoration:none; font-weight:bold; }
a:focus { color:#00AA00; background-color:#FFFF77; font-weight:bold; }
a:hover { color:#EE0000; text-decoration:none; background-color:#FFFF99; font-weight:bold; }
a:active { color:#0000EE; background-color:#FFFF99; font-weight:bold; }
}}}
!Klammeraffe @ (CSS-Befehle)
!!@media (umschließt Regeln, die nur für bestimmte Ausgabemodi gelten)
{{{
@media print {
<Regeln>
}
@media screen {
<Regeln>
}
}}}
Referenz hierzu siehe http://de.selfhtml.org/css/formate/einbinden.htm#medientypen
!!@import (importiert innerhalb einer CSS-Definition/Datei)
{{{
@import "allgemein.css";
@import url("erweitert.css");
@import url("druck.css") print, embossed;
@import url("normal.css") screen;
}}}
!Einbetten in HTML
ACHTUNG: Beim Einbetten sollte man auch gleich den [[Quirks Mode]] des Internet Explorers ausschalten, da CSS dort sonst nicht wirklich funktioniert!
!!Direkt (im <head> -Bereich)
{{{
<style type="text/css">
h1 { color:red; font-size:48px; }
</style>
}}}
!!Per Verweis auf CSS-Datei (im <head> -Bereich)
{{{
<link rel="stylesheet" type="text/css" href="formate.css">
<link rel="stylesheet" media="screen" href="website.css"> /* Wirken nur auf dem Bildschirm */
<link rel="stylesheet" media="print, embossed" href="druck.css"> /* Wirken nur beim Druck */
}}}
!Weblinks
*selfhtml: [[Zentrale Formate definieren|http://de.selfhtml.org/css/formate/zentrale.htm]]
*Spielwiese: [[CssDeck.com|http://cssdeck.com/labs]]
{{{
box-shadow: 4px 3px 3px rgba(0, 0, 0, 0.60);
text-shadow: 0.1em 0.1em 0.05em #333;
}}}
{{{
<style type="text/css">
.table {display:table;table-layout:fixed;width:70%;height:100px;background-color:#ffdddd;}
.row {display:table-row;}
.cell {display:table-cell;height:33px;vertical-align:middle;}
.cell div {background:yellow;}
</style>
<div class="table">
<div class="row">
<div class="cell" style="background:grey;">
<div style="display:table;height:33px;margin:0 auto;">content1</div>
</div>
<div class="cell">
<div style="display:inline-block;margin:0 auto;">content2</div>
</div>
<div class="cell" style="background:grey;">
<div>content3</div>
</div>
</div>
</div>
}}}
<html>
<style type="text/css">
.table {display:table;table-layout:fixed;width:70%;height:100px;background-color:#ffdddd;}
.row {display:table-row;}
.cell {display:table-cell;height:33px;vertical-align:middle;}
.cell div {background:yellow;}
</style>
<div class="table">
<div class="row">
<div class="cell" style="background:grey;">
<div style="display:table;height:33px;margin:0 auto;">content1</div>
</div>
<div class="cell">
<div style="display:inline-block;margin:0 auto;">content2</div>
</div>
<div class="cell" style="background:grey;">
<div>content3</div>
</div>
</div>
</div>
</html>
*always use table-layout:fixed, otherwise nothing will be predictable
*center horizontally will only work if you use display:table (inline-block won't work)
!Width
|display|default|if own width is set|if parent width is set|h
|table|"by content"||
|cell|"by content"|content will be cut if it does not fit|"proportional"|
|block|100%||
*default table width is "by content" (in contrast to block, where default width is 100%)
*default cell width is "proportional"
{{{
<table>
<colgroup>
<col>
<col class="alternative">
<col>
</colgroup>
<caption>Caption</caption>
<thead>
<tr>
<th>Head1</th><th>Head2</th><th>Head3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td><td>Footer 2</td><td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td> </td><td> </td><td> </td>
</tr>
</tbody>
</table>
}}}
<html>
<style type="text/css">
.FooTable {width: auto; border:1px solid lavender; border-collapse:collapse;}
.FooTable caption {font-weight: bold;}
.FooTable thead {color:white; background-color:gray; font-weight: bold;}
.FooTable td {border:1px solid lavender;}
.FooTable .alternative {background-color:whitesmoke;}
</style>
<table class="FooTable">
<colgroup>
<col>
<col class="alternative">
<col>
</colgroup>
<caption>Caption</caption>
<thead>
<tr>
<th>Head1</th><th>Head2</th><th>Head3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td><td>Footer 2</td><td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td>
</tr>
</tbody>
</table>
</html>
!Common Table-CSS
{{{
table {table-layout: fixed;border-collapse:collapse;}
td {padding:0;}
}}}
!Fixed vs. Auto
*As long as ''table width'' is undefined, fixed and auto behave equally
*Fixed: Columns rule. The column widths are fixed. Content may overflow or break.
**Default column width: All equal.
*Auto: Content rules. Column widths are computed by the cell contents.
!Columns
!!Defined Directly in the Table
{{{
<colgroup>
<col>
<col style="width:100px;">
<col>
</colgroup>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
}}}
!!Addressed Via CSS Selector
{{{
.FooTable td:nth-child(1) {text-align: left;}
.FooTable td:nth-child(2) {text-align: justify;}
.FooTable td:nth-child(3) {text-align: right;}
}}}
!!!Alternative Syntax for Stone Age Browsers:
{{{
.FooTable td:first-child {text-align: left;}
.FooTable td:first-child + td {text-align: justify;}
.FooTable td:first-child + td + td {text-align: right;}
}}}
!Rows
!!Never use line-height (instead of padding)
*This will look ugly when word break occurs
*Recommended: padding on td, th, caption
**E.g.: {{{caption,th,td {padding: 0.33em;}}}}
**Caption will be vertically centered
*You ''may'' use height on a tr and/or caption
**E.g.: {{{tr,caption {height:2em;}}}}
**This will also affect headers
**The caption will be vertically aligned on top (which cannot be modified).
**Content will be centered vertically (by default)
***vertical-align can be used on tr
***You will have no padding!
**Content is stronger than tr height and will make the rows grow.
!Linked Documents
*[[Table Layouts vs_ Div Layouts From Hell to… Hell|Files/Table Layouts vs Div Layouts From Hell to Hell.mht]]
*[[CSS instead of HTML (Tables etc.)|Files/CSS instead of HTML (Tables etc.).mht]]
*[[CSS - Fun with tables|Files/CSS - Fun with tables.mht]]
!Web Links
*SelfHTML: [[Tabellenformatierung|http://de.selfhtml.org/css/eigenschaften/tabellen.htm]]
*SelfHTML: [[Table-Layout|http://de.selfhtml.org/css/eigenschaften/anzeige/table_layout.htm]]
*SelfHTML: [[Aufbau einer Tabelle|http://de.selfhtml.org/html/tabellen/aufbau.htm]]
*Quirksmode: [[Table columns|http://quirksmode.org/css/css2/columns.html]]
!Facebook
http://developers.facebook.com/docs/reference/plugins/like-box/
!Youtube
https://developers.google.com/youtube/iframe_api_reference
!TinyMce
!!!!!!Javascript based WYSIWYG HTML-Editor
https://www.tinymce.com
!Background & Content
{{{
opacity:0.85;
}}}
!Background Only
{{{
background:rgba(255, 255, 255, 0.85);
}}}
*Wirkt nur auf echte Farben - nicht auf image
*Alpha via PNG im Image selbst setzen, oder folgenden Workaround verwenden
!!Background Image
{{{
<div id="alpha_wrapper">
<div id="alpha_2"></div>
<div id="text_holder_2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>
</div>
</div>
#alpha_wrapper {
width: 540px;
height: 360px;
float: left;
position: relative;
color: #fff;
}
#alpha_2 {
background: transparent url(bicycle.jpg) no-repeat 0 0;
width: 540px;
height: 440px;
float: left;
opacity: 0.3;
}
#text_holder_2 {
background: blue;
position: absolute;
top: 20px;
left: 20px;
width: 500px;
}
}}}
|http://|sub.example.org:80|/customer/app/page.aspx|?parameter1=argument1¶meter2=argument2|#|anchorname|
|//Scheme//|//Authority//<br>//Host:Port//|//Path//|//Query//|//Fragment//|
|sub|example|org|:|80|
|//Subdomain//|//2nd-Level-Domain//|//Top-Level-Domain//||//Port//|
!Relative Paths
|/|Domain (Root)|sub.example.org:80|
|./|Path Segment|sub.example.org:80/customer/app/|
|../|Parent Path Segment|sub.example.org:80/customer/|
!Bezugspunkt: Linke obere Ecke des Parents
{{{
body {
background: url("img_tree.png") no-repeat scroll 10px 10px #FFFFFF;
}
}}}
!Bezugspunkt zum Parent explizit angegeben
position: right 10px bottom 10px
{{{
body {
background: url("img_tree.png") no-repeat scroll right 10px bottom 10px #FFFFFF;
}
}}}
!Größe
{{{
background-size: 100px auto;
}}}
!Hover-Effekte
Viele Deppen frickeln mit background-position rum. Man kann auch einfach das Bild umschalten:
{{{
.DivRotatorArrowRight:hover {
background-image: url("img/DivRotator/ArrowRightHover.png")
}
}}}
*Die Angabe "border" (ohne Konkretisierung) übersteuert alle vorherigen Eigenschaften
*border-width versteht den Syntax von [[Layout Parameter]]
!Weblinks
*http://css3pie.com (löst das border-radius Problem beim IE8)
*Anwendbar auf alle Elemente (Block und Inline)
*macht Element implizit zu Block
*das Element klebt links oder rechts am Parent-Container
*alle Nachfolge-Elemente umfließen es
*Das (obligatorische) Clear-Element stoppt das Umfließen weiterer Nachfolger
**{{{<div style="clear:both;"></div>}}}
*FALLE: Ohne Clear fällt der Parent-Conatiner in sich zusammen (bekommt Höhe 0)
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float
[[Die Theorie|Html-Wiki Attachments/CSS Float - Die Theorie.mht]]
[[Clearing|Attachments/CSS Float - Clearing.mht]]
[[Float test with 'display inline-block'|Html-Wiki Attachments/CSS Float - Test with 'display inline-block'.mht]]
!3-Spalter mit Float
<html>
<style type="text/css">
.container {width:75%;height:100px;line-height:100px;background-color:#ffeeee;;}
.left {float:left;background-color:yellow;}
.right {float:right;margin-right:-100px;}
.center {width:100px;margin:0 auto;}
.container div {background-color:yellow;}
</style>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class = "center">middle</div>
</div>
</html>
*Die Reihenfolge der DIV-Tags ist entscheidend (center muss als letztes stehen)
*Die Breite der left/right DIVs ist "by content"
*Die Breite des center-div muss festgelegt werden (display:table funktioniert leider nicht)
*Vertikales zentrieren: line-height auf den Wert von height setzen (100% funktioniert leider nicht)
*Verschieben außerhalb des Containers ist möglich (negativer Margin)
siehe hier:
[[CSS Position Static Relative Absolute.mht|Files/CSS Position Static Relative Absolute.mht]]
*Default: 'auto' (= 100% vom parent)
*kann nicht kleiner werden als min-width
*Verhalten hängt ab von box-sizing (-moz-box-sizing)
*FALLE: leeres div ignoriert width!
**Workaround 1: Zusätzlich min-width:1px;
**Workaround 2: Als Pseudo-Inhalt %nbsp;
*FALLE: box-sizing je nach Browser unterschiedlicher Default => besser explizit festlegen!
!Automatische Breite anhand Inhalt
{{{
display:inline-block;
}}}
!min-width
*ohne zusätzliche Angabe von width wird die Breite anhand von min-width gesetzt
*FALLE: Hierbei verhalten sich Browser unterschiedlich: box-sizing wird manchmal ignoriert!
**Meistens wirkt min-width im Modus content-box
!External Documents
*[[What No One Told You About Z-Index|Files/What No One Told You About Z-Index.maff]]