FAQ - Häufige Fragen und die dazugehörigen Lösungen

[prefix]

wir haben uns entschlossen, hier mal die unserer ansicht nach am öftesten nachgefragten themen im puristenboard ausführlich zu erklären.

bitte lest die erläuterungen genau durch, seht euch die beispiele dazu an und versucht das ganze zu verstehen. für verbesserungsvorschläge verwendet bitte die pm, da es aufgrund der übersichtlichkeit nicht gut ist, wenn hier eine diskussion an sich entsteht - deshalb ist das topic geschlossen.

da wir euch das ganze gleich zukunftsweisend zeigen wollen, verwenden wir für die hier angeführten beispiele xhtml 1.0! dadurch kann es vorkommen, dass der code nicht 1:1 für html 4 übernommen werden kann!

details hierzu findet ihr in diesem artikel im portal.

-------------------------------------------------------------------------

vorwort / fehlervermeidung beim arbeiten mit css

damit wir uns gemeinsam das lösen von css-problemen erleichtern, hier ein paar tipps dazu:

1. validiert eure style-sheets vorab - damit könnt ihr schon mal die syntax-fehler abfangen (klammer nicht geschlossen usw.)

ihr könnt folgende 3 möglichkeiten zur überprüfung (=validierung) auswählen:

- über den uri
- in einem textfeld (copy and paste)
- durch einen upload

2. gebt uns das verwendete doctype dazu an! ein artikel darüber wird in kürze im portal veröffentlicht! die auswirkungen der dtds könnt ihr hier ersehen!

NEU: LANtastic hat einen sehr umfassenden artikel zu diesem thema verfasst - damit dringt ihr ganz tief in die materie ein

3. sagt uns genau, bei welchen browsern und welchen betriebssystemen der fehler auftaucht! legt idealerweise einen screenshot bei, da ja nicht jeder von uns alle browser und betriebssysteme besitzt!

4. wenn ihr euer css mit einem html-editor (dreamweaver, golive usw.) erstellt habt, dann gliedert es bitte ordentlich (siehe screenshot). damit erleichtert ihr es uns wesentlich, das problem rasch zu erfassen.

5. habt geduld mit css - es ist noch kein meister vom himmel gefallen. gerade die browservielfalt macht oft und gerne probleme und problemchen - aber es gibt lösungen :-)

6. habt keine angst vor "hacks" - diese lösen darstellungsprobleme mit tricks, sind aber absolut aufwärtskompatibel und valide. also keine angst, dass z.b. der box-model-hack nicht mehr im ie7 (sollte er jemals kommen) funktionieren könnte!

7. vor allem bei topics wie "wie mache ich 2 verschiedene link-klassen" und ähnlichem bemüht noch mehr die suchfunktion - es gibt schon sehr viele antworten, die genau euer problem lösen :-)

8. wenn euer css auch im nn4.x funktionieren soll, überlegt es euch vorab einmal verdammt gut! oft ist es ein erheblicher mehraufwand - glaubensfrage *lol*

achja, fast vergessen - aber hier doch noch zum abschluss erwähnt:

die css-eigenschaften für die scrollbar (=einfärben) sind keine vom w3c abgesegneten standards! d.h. euer css wird nicht validieren, wenn ihr folgendes verwendet:

	body {
	scrollbar-face-color: #FFFFCC; 
	scrollbar-highlight-color: #FFFFCC; 
	scrollbar-shadow-color: white; 
	scrollbar-3dlight-color: #FFCC66; 
	scrollbar-arrow-color: #0079B2; 
	scrollbar-track-color: #FFFFCC; 
	scrollbar-darkshadow-color: #FFCC66;
        }

alle, die css etwas näher kennenlernen wollen, dürfen sich natürlich gerne mit der css2-spezifikation des w3c "vergnügen".

wichtig: selfhtml ist ein tolles werk von stefan münz - aber auch tolle arbeiten können fehler beinhalten! d.h. nicht, dass ihr NICHT damit arbeiten sollt - im gegenteil aber denk bitte daran, dass standards immer vom w3c erstellt werden, und von niemand anderem (weil ich erst vor kurzem eine diskussion darüber geführt habe!)!

auch das buch "xhtml, css & co" von stefan mintert ist wärmstens zu empfehlen :-)

----------------------------------------------------

p.s.: noch eine kleinigkeit, die mir persönlich am herzen liegt:

"layer" ist die englische bezeichnung für "ebene" - also an sich korrekt. da aber netscape mal im "wahn" begonnen hat, sog. ilayer (die dann vom w3c zum iframe spezifiziert wurden) zu entwickeln (immer diese browsereigenheiten!!) und auch den "layer" an sich mal anders als vom w3c vorgesehen war, einsetzte, sollte man alle container (also divs und classes zum layouten) grundsätzlich als "ebene" bezeichnen :-)

[prefix]

ich gehe hier jetzt nicht auf die generellen möglichkeiten ein, wie man css in (x)html einbinden kann - dazu siehe z.b. hier auf selfhtml!

ich verwende in meinen beispielen hier nur css-definitionen im head-bereich des html-dokumentes! dies ist jedoch nicht immer die beste variante - ich ziehe sie hier nur zu erklärungszwecken vor.

------------- pseudo-elemente definieren -------------

css an sich kennt folgende "pseudo-elemente" für linkdefinitionen, welche in genau dieser reihenfolge vorkommen müssen:

- a
- a:link
- a:visited
- a:active
- a:hover
- a:focus

(sind optional)

------------- beispiel 1 -------------

will man jetzt für das gesamte dokument ein und dieselben linkdefinitionen verwenden, so kann das wie folgt definiert werden (live-beispiel nr. 1):

a:link {
	color: Blue;
	text-decoration: underline;
}
a:visited {
	color: Gray;
	text-decoration: line-through;
}
a:hover {
	color: Red;
	text-decoration: none;
}
a:active {
	color: Maroon;
	text-decoration: none;
}

in diesem beispiel bewirken die definitionen für das gesamte dokument (den gesamten body bereich) kurz gefasst folgendes:

- ein noch nicht geklickter link ist blau und unterstrichen (a:link)
- ein bereits besuchter link ist grau und durchgestrichen (a:visited)
- ein link beim überfahren mit der maus ist rot und ohne unterstreichung (a:hover)
- ein aktiver link (gerade geklickt) ist kastanienbraun und ohne unterstreichung (a:active)

------------- beispiel 2 -------------

um jetzt verschieden definierte hyperlinks in einem dokument verwenden zu können, müssen wir klassen definieren. eine klasse beginnt immer mit einem punkt!

eine klasse ermöglicht es uns auch, verschiedene css-definitionen auf bestimmte bereiche im html-dokument anzuwenden. hier erstellen wir jetzt 2 klassen:

- .linkformat1
- .linkformat2

und ab geht die post, hier seht ihr das live-beispiel nr. 2!

hier mal der xhtml-code mit den css-definitionen im head des dokuments:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* definitionen für die klasse .linkformat1 */

.linkformat1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .9em;
	color: red;
}

.linkformat1 a:link {
	color: blue;
	text-decoration: underline;
}
.linkformat1 a:visited {
	color: Black;
	text-decoration: line-through;
}
.linkformat1 a:hover {
	color: red;
	text-decoration: none;
}
.linkformat1 a:active {
	color: Aqua;
	text-decoration: none;
}



/* definitionen für die klasse .linkformat2 */

.linkformat2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .9em;
	color: Fuchsia;
}
.linkformat2 a:link {
	color: yellow;
	font-weight: bold;
	text-decoration: none;
}
.linkformat2 a:visited {
	color: Black;
	font-weight: bold;
	text-decoration: none;
}
.linkformat2 a:hover {
	color: Green;
	font-weight: bold;
	text-decoration: underline overline;
}
.linkformat2 a:active {
	color: Olive;
	font-weight: bold;
	text-decoration: line-through;
}
</style>
</head>

<body>
<p class="linkformat1"><a href="#">
ich bin ein link, dem die klasse &quot;linkformat1&quot; zugewiesen wurde
</a></p>
<p class="linkformat2"><a href="#">
ich bin ein link der klasse &quot;linkformat2&quot; und verhalte mich anders als der
  obige link
</a></p>
</body>
</html>

hier sehen wir, im unterschied zu beispiel 1, dass 2 klassen definiert wurden und diese dann dem p-tag im body zugewiesen wurden.

diese klassen kann man auch noch vielen anderen elementen wie td usw. zuweisen.

an sich war es das, ihr könnt soviele klassen mit unterschiedlichen definitionen erstellen, wie ihr wollt :-)

--------------- edit 01.07.2003 - 19.40 uhr ---------------

dank an deck16, der mich auf eine schwachstelle hier aufmerksam gemacht hat - ich geben seine anmerkung zu meiner beschreibung hier wieder:

in Deinem Tutorial weist Du dem p tag die Klasse zu und schreibst weiter, sie könne auch anderen tags zugewiesen werden.
Stimmt auch, ausser dem a tag selber (mit deiner css definition).

Es fehlt da ein Hinweis zur Verschachtelung der Klassen finde ich.

Was nun, wenn man zwei links in einem p tag hat und diese verschieden aussehen lassen möchte.

Der Vollständigkeit halber müsste die direkte Zuweisung auch dargestellt werden:

a.linkformat1:link { }
a.linkformat1:visited { }
a.linkformat1:hover { }
a.linkformat1:active { }

So kann man jeden link einzeln formatieren ohne ein parent haben zu müssen.

----------------------------------------------------------------

zum eben behandelten thema gibt es auch noch eine sehr informative beschreibung von LANtastic!

[prefix]

immer wieder steht man vor dem problem, dass man sonderdateien wie beispielsweise die .htaccess (auf apache-servern) online nicht sehen und somit auch nicht löschen kann!

mittels des freewareprogrammes wsftp le ist es ganz einfach:

1. auf den server verbinden
2. oben rechts "-la" (minus el a) eingeben (siehe screenshot)
3. enter betätigen
4. die sonderdateien werden angezeigt

[prefix]

es ist (leider) oft vonnöten, den box-model-bug des ie5 (tanteks hack) zu umgehen, dem ie6 teilweise gesonderte definitionen zu liefern und auch noch die anderen browser (opera, mozilla, netscape,...) mit wieder anderen definitionen zu füttern.

daher eine kleine erklärung, was welcher browser versteht oder nicht versteht:

- ie5 steigt aus bei tantek
- ie6 zieht nach tantek auch noch
- alle ie's steigen aus bei kind-selektoren

folgendes beispiel ist geeignet, um die wirkungsweise zu visualisieren:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.testcontainer {
	background-color: red;
	width:400px;
	voice-family: "\"}\""; /* ende für den ie 5 */
	voice-family:inherit;
	width:100px;
	background-color: yellow; /* ende für den ie 6 */
}

html>body .testcontainer {
	background-color: Lime; /* nur für die mozilla-familie */
}
</style>
</head>

<body>
<div class="testcontainer">ich bin ein testcontainer und erscheine im ie5 rot und 400px breit, 
in allen anderen browsern gelb und 100px breit!</div>
</body>
</html>

[prefix]

zu diesem thema, das häufig gefragt wird, hier mal 2 quellen:

1. kurze und prägnante erklärung von lantastic
2. vertiefendes dazu von mir

[hero-master]

Bin ich gerade drauf gestoßen:

http://www.tiptom.ch/homepage/faqs.html