Die Linie hinter dem Text in diesem Beispiel ist gemeint.

Das hab ich mich auch schon einige Male gefragt. Und zu meiner Verwunderung gibt es schon viele gute Ansätze zu dem Thema, wie man eine Linie vertikal hinter einem Text zentriert und dabei noch Abstand zum Text halten kann. Nachfolgend will ich euch eine Variante vorstellen, die auch auf kunterbuntem Hintergrund funktioniert.

Wie immer brauchen wir zu Beginn eine HTML-Grundlage, mit der wir arbeiten können. Dazu reicht uns ein Container und eine Überschrift, in diesem Fall soll das mal eine <h3> sein.

HTML

1
2
3

<section>
	<h3>Lorem Ipsum</h3>
</section>

Zuerst bekommen der Container und die H3 selbst einige CSS Anweisungen.

CSS

1
2
3
4
5
6
7
8

section {
	overflow: hidden;
	text-align: center;
}
h3 {
	display: inline-block;
	position: relative;
}

position: relative sorgt dafür, dass wir später die Linien relativ zur Überschrift ausrichten können. Damit die Überschrift mittig dargestellt wird, braucht es die Zentrierung über text-align. Overflow verhindert, dass die Linien über den Container hinaus weitergezeichnet werden.

Der Hintergrund ist nur Beispielhaft.

So weit, so gut! Jetzt geht es darum die Linien zu erstellen. Da wir dafür keine weitere HTML-Tags hinzufügen wollen, nehmen wir die CSS-Pseudo-Elemente ::before und ::after.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

h3::before,
h3::after {
	content: "";
	position: absolute;
	border-top: 1px solid #666;
	top: 50%;
	width: 2000px;
}
h3::before {
	margin-right: 15px;
	right: 100%;
}
h3::after {
	margin-left: 15px;
	left: 100%;
}

Mit diesen CSS-Anweisungen werden die Linien auf einen Pixel Dicke und einer sehr großen Länge von 2000 Pixeln festgelegt, um sicher zu gehen, dass sie immer bis ans Ende des Containers reichen. Ihr könnt die Länge aber natürlich auch auf eine andere Breite beschränken. Die 15 Pixel Margin bei beiden Linien stellt den Abstand links und rechts zur Überschrift dar.

Tipp

Wenn du die Linien dicker machen willst, geht das über die border-top-Anweisung. Wenn die Linie dicker wird, wird sie nicht mehr zentriert ausgegeben, das kannst du mit einem negativen margin-top ausgleichen.

Damit wären wir auch schon fertig! Die Vorteile liegen auf der Hand: Wenig HTML, auf jedem Hintergrund anwendbar und funktioniert auf allen Browser ab IE9. Der Nachteil ist, dass wir overflow:hidden benötigen. Sollte das aber kein Problem für euch darstellen, hab ihr hiermit eine gute Möglichkeit gefunden eure Überschriften etwas aufzupeppen.

Ich will für diese Lösung übrigens ganz sicher keine Anerkennung ernten, 1. hat mein Kollege diese Variante verfasst, ich hab sie lediglich leicht verändert und veröffentlicht, und 2. hat diese Variante sicher schon jemand irgendwo in dieser Form bereits gemacht und ich hab es nur übersehen. Solltet ihr übrigens Verbesserungen finden oder eine gänzlich andere Methode bevorzugen, würde ich mich über einen Kommentar sehr freuen.

HTML5 in progress

Nach langer Pause melde ich mich mal wieder zurück. Ja, mir gehts gut, ich war nur ziemlich abgelenkt und hatte daher wenig Lust zu Schreiben.

Jedenfalls dachte ich, wir sollten mal einen Blick auf ein neues HTML5 Form Element werfen: Das progress Element. Wie der Name schon sagt, kann man damit einen Fortschritt abbilden, meistens im Zusammenhang mit einem Formular. Dabei ist das geläufigste Beispiel ein Checkout in einem Internet-Shop, bei dem in der Regel mehrere Schritte nötig sind, bis die Ware verschickt wird.

Browserunterstützung

Browser
ab Version	6	–	11	6	–

Das Element ist Teil einer ganzen Reihe von neuen HTML-Tags und wird daher noch nicht von allen Browsern unterstützt. In Chrome und Opera geht es schon seit geraumer Zeit und Firefox wird ab Version 6 (kommt am 16.08.) vollständigen Support bieten. Leider hat auch das Update auf 5.1 bei Safari keine Unterstützung mitgebracht und beim IE weiß man nicht, ob und wann es überhaupt kommt.

Syntax

Um ein einfaches progress Element zu erzeugen reicht es, wenn ihr das bisschen Code benutzt:

HTML

1

<progress>in progress</progress>

Das erzeugt dann einen Fortschrittsbalken mit einer, je nach Browser, Standardbreite und einem Aussehen, das sich am Betriebssystem orientiert.

in progress

Wie ihr seht, ist das der Zustand, bei dem ein genauer Fortschritt ungewiss ist, man weiß nur, dass etwas im Gange ist. Der Text innerhalb des Elements ist zugleich ein Fallback für ältere Browser und für die Accessibility des Tags zuständig. Schaut man sich das Element also im IE an, sieht man nur den Text “in progress”, nicht aber einen Fortschrittsbalken.

Will man nun zeigen, dass etwas zu 25% abgeschlossen ist, muss man das dem Element in Form von Attributen sagen. progress hat derzeit zwei mögliche Attribute (abgesehen natürlich von class, id, style etc., die jedes Element besitzen kann).

1. max, der Maximalwert, entspricht 100% der Breite des Fortschrittsbalkens
2. value, der derzeitige Stand des Fortschrittsbalkens, kleiner-gleich max

Damit lassen sich jetzt z. B. diese drei Balken produzieren:

HTML

1
2
3

<progress value="0.5">50%</progress>
<progress value="25" max="100">25 aus 100</progress>
<progress value="800" max="1000">800</progress>

50%
25 aus 100
800

Wer will, kann das ganze auch per JavaScript animieren, dazu muss man nur den Wert von value überschreiben.

Styling per CSS

Zu aller erst sei gesagt, dass es sich hier um ein Inline-Element handelt, ähnlich dem img Tag. padding, margin, vertical-align und width haben also alle eine Wirkung auf unseren Fortschrittsbalken. Daneben gibt es noch Experimente mit Pseudo-Elementen wie ::-moz-progress-bar oder ::-webkit-progress-value (nur wenn -webkit-appearance auf none gestellt ist). Mozilla benutzt auch -moz-orient, um das Element auf den Kopf zu stellen.

Nun ja, das soll es dazu gewesen sein. Habt ihr das neuen Element schon benutzt? Könnt ihr euch vielleicht noch andere Anwendungsfälle vorstellen? Die Comments stehen euren Gedanklichen Ergüssen frei zur Verfügung!

Problem?

Dass der IE6 manchmal ein übler Troll sein kann und sein Nachfolger IE7 ihm in dieser Hinsicht in nichts nachsteht, brauch ich euch ja wohl kaum erzählen (ich habs jetzt natürlich trotzdem gemacht, einfach um ein cooles Intro zu haben ). Jedenfalls bin ich neulich erst auf einen richtig schönen Fix für ein bekanntes Problem bezüglich der Darstellung von Buttons im IE gestoßen.

Kennt ihr das: Ihr habt einen Button oder ein Submit-Input und gebt dem etwas Padding und schon zerschießt es euch im IE das halbe Formular, weil dieser Browser denkt, er müsse den Dicken markieren, indem er den Padding-Wert verdoppelt?

Na dann seit ihr hier goldrichtig!

Das Problem

Wir haben also einen button oder ein input mit dem type="submit" (der Bug betrifft beides gleichermaßen) auf unserer Seite, was der tut ist uns an dieser Stelle reichlich egal.

HTML

1

<button>Button</button>

Normalerweise rate ich immer dazu die Buttons so zu lassen, wie sie sind und so wenig wie möglich am Styling zu ändern. Natürlich kommt es jedoch vor, dass sie dadurch nicht richtig ins “Corporate Design” einer Firma “fitten”. Und da Kunde==König immer wahr ist, muss man hier und da etwas nachhelfen, dass die Buttons auch zum Rest passen. Sehr häufig muss dazu beispielsweise links und rechts das Padding erhöht werden, damit das alles nicht so zusammengeklatscht aussieht.

CSS

1
2
3

button {
	padding:3px 10px;
}

Alles gut denkt man, aber beim X-Browser-Test macht man schnell große Augen: Im IE6 und IE7 sind es nicht nur 10 Pixel links und rechts sondern mindestens doppelt so viele. Hier ein Vergleich:

Die türkisen Linien sind nachträglich eingezeichnet worden..

Die Lösung

In solchen Momenten möchte man am liebsten in die Tastatur beißen oder die Maus durch die Gegend werfen (@Wireless-Maus-User: tut es nicht!). Aber das ist gar nicht nötig, denn die Lösung ist ganz einfach, nahezu trivial.

Alles, was wir tun müssen, ist eine Zeile CSS mehr zu schreiben:

CSS

1
2
3
4

button {
	overflow:visible;
	padding:3px 10px;
}

Durch overflow:visible hört der IE auf, mehr Padding zu vergeben als eigentlich gewollt. Das Schöne daran ist, dass er 100% valide ist und keinerlei Nachteile hat. Der Tag ist damit gerettet und alle können quietschvergnügt nach Hause gehen!

Frontend-Developer 1:0 Internet Explorer

Ein weiterer Tag, ein weiteres Türchen, eigentlich wollte ich mittlerweile mal etwas aufgeholt haben aber irgendwie kommt immer was dazwischen. Aber na gut, kommen wir also zu #14: text-indent. Mit dieser Eigenschaft können wir die erste Zeile eines beliebigen Textblocks manipulieren.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	3.0

Unterstützt ab Internet Explorer 3.0, das sagt glaub ich alles. Man kann die Eigenschaft also bedenkenlos einsetzen, sie funktioniert ausnahmslos in jedem Browser.

Erfahrene Webdeveloper nutzen diese Technik relativ häufig um beispielsweise Text zu verstecken oder um einen Absatz eingerückt beginnen zu lassen. Für Anfänger jedoch erschließt sich der richtige Gebrauch von text-indent meist etwas zu spät. Deswegen sei hier nochmal darauf hingewiesen, dass man damit nur einzeilige Texte bzw. die erste Zeile eines Textes beeinflussen kann.

Als Werte sind positive wie negative Längenangaben und prozentuale Angaben erlaubt.

Beispiele

Beispiel Nummer eins gebraucht text-indent zur Einrückung von Absatzanfängen, als Basis dient uns folgender Code:

HTML

1
2
3
4

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
et justo duo dolores et ea rebum.</p>

CSS

1
2
3

p {
	text-indent:2em;
}

Ergebnis

Man beachte, wie die erste Zeile des Absatzes um 2em eingerückt wird, die anderen Zeilen aber nicht.

Deswegen sollte man text-indent auch niemals in Menüs/Navigationen verwenden, sollte nämlich doch mal ein Menüpunkt umbrechen, ist nur die obere Zeile eingerückt, nicht aber der Rest des Textes. In solchen Fällen ist padding zu bevorzugen.

Nächstes Beispiel: Wie in Türchen #3 angedeutet, wird text-indent gern zum verstecken von Text verwendet, speziell wenn es um Image-Replacement geht. Wollen wir doch noch mal nachsehen, wie genau das funktioniert. Wir nehmen wieder den Absatz von oben und fügen noch ein span-Tag ein, dass wir mit einem Bild (in diesem Fall der Schriftzug meines Blogs) ersetzen wollen..

HTML

1
2
3
4

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua. <span class="logo">Norman's Blog</span> 
At vero eos et accusam et justo duo dolores et ea rebum.</p>

CSS

1
2
3
4
5
6
7
8

.logo {
	background:transparent url(normansblog_logo.png) no-repeat 0 0;
	display:inline-block; /*damit height und width greift*/
	height:29px; /*Höhe des Bildes*/
	text-indent:-9999px;
	vertical-align:bottom;
	width:150px; /*Breite des Bildes*/
}

Ergebnis

Soviel dazu, text-indent ist also eine nützliche Sache, die man im Hinterkopf behalten sollte.

Auch an diesem wundervollen Abend gilt es einmal mehr ein Türchen im Adventskalender zu öffenbaren, diesmal verbirgt sich dahiner.. cursor! Mit dieser tollen Eigenschaft ist es uns möglich, das Bild des Mauszeigers zu ändern, wenn dieser über bestimmte Elemente unserer Webseite fährt bzw. ruht.

Browserunterstützung

Browser
ab Version	1.0	1.2	7.0	1.0	4.0

cursor hat sehr viele mögliche Werte, angefangen vom normalen Pfeil, über eine Hand, bis hin zu einer Sanduhr kann man so ziemlich alles damit machen. Die Unterstützung an der Browserfront ist sehr gut, einige extravagante Icons sind allerdings erst in höheren Versionen nutzbar bzw. abhängig vom jeweiligen Betriebssystem.

Von der Syntax her ist cursor ganz einfach aufgebaut und kann auf jedes Elemente angewendet werden. Nach der Eigenschaft folgt einfach eines der vielen Schlüsselwörter. Man kann auch eigene Cursor verwenden, hierzu benötigt man jedoch eine .cur-Datei (eine besondere Form des .ico Formats). Diese bindet man dann über url(pfad-zur-cursor-datei) ein.

CSS

1
2
3
4
5
6
7
8
9

abbr {
	cursor:help;
}
.wait {
	cursor:wait;
}
.hide-cursor {
	cursor:none;
}

Beispiele

Im Folgenden werde ich mal einige Werte auflisten, wenn ihr über den Listeneintrag fahrt, werden ihr sehen, wie sich euer Mauszeiger verändert.

• default
• none
• help
• pointer
• progress
• wait
• crosshair
• move
• n-resize

Eine komplette Übersicht mit allen möglichen Werten gibt es unter anderem im MDN. Wie ihr sicherlich schon richtig vermutet, kann man cursor dazu nutzen, um damit allerhand Blödsinn anzustellen. Das ist natürlich nicht der Sinn des Erfinders. Vielmehr würde ich mir wünschen, dass bei anklickbaren Elemente (in Zeiten von jQuery und Co. kann das ja alles sein) ein Pointer-Cursor erscheint, und bei Dialogboxen/Fenstern entsprechend ein Move-Cursor.

Für erklärende Elemente, wie das abbr-Tag beispielsweise, sollte man cursor:help setzen, damit der User weiß: “Ah, hier wird mir etwas erklärt, hier bekomme ich Hilfe.” Kleine Dinge, die die Usability einer Seite aber entscheidend beeinflussen können, aber bitte nutzt es in Maßen!

Wenn wir nun einmal mit Tables angefangen haben, machen wir doch gleich damit weiter. Noch eine Eigenschaft, die es nur für Tables gibt, ist caption-side. Sie ist fest an das caption-Tag gebunden und setzt logischer Weise voraus, dass ihr solches auch benutzt. Die Eigenschaft gibt dabei an, auf welcher Seite der Tabelle der Titel ausgegeben werden soll.

Browserunterstützung

Browser
ab Version	1.0	1.0	4.0	1.0	8.0

caption-side hat zwei Werte, die von Bedeutung sind: top und bottom, wobei erstes den Defaultwert darstellt. Firefox unterstützt zudem auch noch left und right. Die Wahrscheinlichkeit aber, mit der ein Fall eintritt, indem einer dieser beiden Werte nötig wären, geht quasi gegen Null.

Beispiel

Wie letztens gehts mit einer normalen Tabelle los, diese hier wird auch eine caption (Überschrift, Bezeichnung) haben, denn darum gehts uns ja.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table>
	<caption>Besucherzahlen</caption>
	<thead>
		<tr>
			<th>Monat</th>
			<th>Besucher</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>11/2010</td>
			<td>2.744</td>
		</tr>
		<tr>
			<td>10/2010</td>
			<td>2.503</td>
		</tr>
		<tr>
			<td>09/2010</td>
			<td>2.771</td>
		</tr>
	</tbody>
</table>

Da caption-side:top der Standard ist, erwartet uns folgende Ausgabe:

Jetzt nutzen wir caption-side:bottom und wenden es am caption-Tag an.

CSS

1
2
3

caption {
	caption-side:bottom;
}

Damit sieht unsere Tabelle dann so aus:

Das Gleiche könnt ihr jetzt ja mal für left und right im Firefox probieren.

Manchmal werden sie einfach noch gebraucht, auch wenn man sie eigentlich überhaupt nicht leiden kann.. die Rede ist nicht von Frauen sondern natürlich von Tables. Im Zusammenhang mit Tables gibt es einiges zu wissen und kennen zu lernen. Neben den ganzen Elementen und Hierarchien, die man damit aufbauen kann, gibt es auch eine ganze Reihe von CSS Eigenschaften, die speziell Tables beeinflussen. Eine davon, nämlich empty-cells, stelle ich euch heute vor.

Browserunterstützung

Browser
ab Version	1.0	1.2	4.0	1.0	8.0

Eigentlich schon erstaunlich wie wenig der IE vor Version 8 überhaupt beherrscht hat, empty-cells hat jedenfalls nicht dazu gehört. Aber da es sich hier eh nur um eine kosmetische Eigenschaft geht, ist das noch vertretbar. Was macht empty-cells? Wie der Name schon andeutet, handelt es sich hier um Zellen einer Tabelle, die durch CSS ausgeblendet werden können, wenn sie leer sind.

Der dafür zuständige Wert lautet hide, um leere Zellen wieder anzuzeigen, muss der Wert auf show gestellt werden. show ist außerdem der Standardwert für empty-cells.

Beispiel

Schauen wir uns die Sache an einer Beispieltabelle an:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table>
	<thead>
		<tr>
			<th>Browser</th>
			<th>CSS3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Firefox</td>
			<td>ja</td>
		</tr>
		<tr>
			<td>Chrome</td>
			<td>ja</td>
		</tr>
		<tr>
			<td>IE</td>
			<td></td>
		</tr>
	</tbody>
</table>
<p>(..jede Menge Tags, ich weiß..)</p>

Ergebnis

Raus kommt eine normale Tabelle, eventuelle Borders und Hintergründe werden auch für leere Zellen gerendert, jetzt das Ganze mit empty-cells:hide.

1
2
3

table {
	empty-cells:hide;
}

Ergebnis

Und weg ist die leere td! Naja nicht ganz weg, aber halt versteckt. Sie bleibt immer noch im Markup vorhanden und behält ihre Ausmaße. Man muss auch keine Angst haben, dass floatende Elemente in die Lücken rutschen oder sowas in der Art.

Komischer Weise hat sich so ein bisschen das Gerücht verbreitet, dass negative Werte für margin irgendwie falsch oder nicht standardkonform oder Cross-Browser-inkompatibel sein sollen. Das ist natürlich vollkommener Blödsinn, vor allem wenn man bedenkt, wie nützlich es sein kann, negative Werte zu benutzen. Ein Beispiel will ich euch gern zeigen.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	3.0

margin wird natürlich von allen Browsern seit jeher unterstützt, dazu zählt auch die Angabe von negativen Werten. Damit lässt sich allerhand machen und kann einen in so manch einer kniffligen Situation aus der Patsche helfen. Prinzipiell könnte man es vielleicht am ehesten mit position:relative vergleichen. Die Position bzw. die Ausmaße einen Blocks ändern sich.. aber wie immer lässt es sich am besten an einem Beispiel erklären.

Beispiel

Nehmen wir ein einfaches Widget mit einer Überschrift, innerhalb des Widgets gibt es eine Überschrift und Inhalt in irgendeiner Form. Natürlich soll der Inhalt einen gewissen Abstand zum Rand des Widgets haben, dafür nutzen wir logischerweise Padding. Die Überschrift allerdings, soll durch einen Hintergrund farblich hervorgehoben sein.. aber durch das Padding des Widgets entsteht jetzt links und rechts eine Lücke, was also tun?

Schauen wir uns das Ganze mal näher an:

HTML

1
2
3
4

<div class="widget">
	<h4>Überschrift</h4>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

CSS

1
2
3
4
5
6
7
8
9

.widget {
	border:1px solid #aaa;
	padding:0 10px 10px;
	width:200px;
}
h4 {
	background-color:#adf;
	padding:0 10px;
}

Ergebnis

Da haben wirs.. grottig diese blöde Lücke links und rechts – aber es gibt eine Lösung für dieses Problem: negatives Margin to the rescue!

Überschrift bekommt negatives Margin

1
2
3
4
5

h4 {
	background-color:#adf;
	padding:0 10px;
	margin:0 -10px;
}

Ergebnis

Ach schön.

Am neunten Tag möchte ich euch display:inline-block näher bringen. display an sich dürfte ja allen bekannt sein.. es gibt (neben diversen anderen) display:none, display:block, display:inline und eben noch etwas dazwischen – inline-block. Wozu man das braucht und wobei es hilfreich sein kann, verrät euch der heutige Eintrag.

Browserunterstützung

Browser
ab Version	3.0	1.0	3.5	1.0	5.5

inline-block hat eine Weile gebraucht bis es sich flächendeckend bei allen Browsern durchgesetzt hat. Aktuelle Versionen unterstützen es problemlos, nur IE6 und 7 haben eine Einschränkung: Der Wert wird nur auf inline-Elemente korrekt angewendet.

Was ist nun der große Vorteil von Inline-Block-Elementen? Anders als Block-Elemente, welche standardmäßig auf die volle Breite des Elternelements aufgezogen, verhalten sich Inline-Block-Elemente wie Replaced Elements (das img-Tag wäre ein Beispiel dafür). D. h. dass sie in den Textfluss eingebunden bleiben aber dennoch dir Vorteile eines Block-Elements genießen. Dazu zählen unter anderem volle Unterstützung für Margin. Auf normale Inline-Elemente kann man beispielsweise kein Margin anwenden, das hat schlicht keinen Einfluss.

Beispiel

Oftmals wird inline-block eingesetzt, wenn man ein Grid – auf Deutsch “Gitter-Struktur” – aufbauen will, deren Zellen aufgrund ihres Inhalts eine unbekannte Höhe haben können. Nehmen wir an, wie hätten eine Liste mit sechs Elementen, diese wollen wir zu einem 3×2-Grid zusammenfügen.

HTML

1
2
3
4
5
6
7
8

<ul>
	<li>1</li>
	<li>2<br/>+</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>

Zunächst wollen wir das auf althergebrachte Art und Weise machen, mit float:

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

ul {
	border:1px solid #aaa;
	color:#fff;
	font-size:30px;
	list-style:none;
	overflow:hidden;
	padding:0 10px 10px 0;
	width:180px;
}
li {
	background:#adf;
	float:left;
	margin:10px 0 0 10px;
	padding:10px;
	text-align:center;
	width:30px;
}

Ergebnis

• 1
• 2
  +
• 3
• 4
• 5
• 6

Und da sehen wir auch schon das Problem dieser Lösung: Sobald ein Listenelement höher ist als die anderen, bringt es komplett die Reihenfolge durcheinander. Außerdem muss die Liste gecleared werden, da die Listenelemente floaten. Genau da hilft uns inline-block weiter, aber auch damit muss man zwei Dinge beachten.

1. Dadurch, dass die Elemente nun Inline-Charakter haben, werden Zeilenumbrüche, Einrückungen und Leerzeichen im Code als zu einem Leerzeichen zusammengefasst. Um dem entgegen zu wirken, brauch man nur die li-Tags hintereinander zu schreiben.
2. Ein weiterer Nachteil des Inline-Charakters ist die Tatsache, dass jetzt das Vertical-Alignment greift. Wir müssen also vertical-align:top setzen, damit die Listenelemente nach oben hin bündig zueinander sind.

HTML

1
2
3

<ul>
	<li>1</li><li>2<br/>+</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

ul {
	border:1px solid #aaa;
	color:#fff;
	font-size:30px;
	list-style:none;
	/*overflow:hidden;*/
	padding:0 10px 10px 0;
	width:180px;
}
li {
	background:#adf;
	/*float:left;*/
	display:inline-block;
	margin:10px 0 0 10px;
	padding:10px;
	text-align:center;
	width:30px;
	vertical-align:top;
}

Ergebnis

• 1
• 2
  +
• 3
• 4
• 5
• 6

Somit hätten wir ein schönes Grid, das so umbricht, wie man es von einem Grid erwartet. To be continued..

Tag acht des CSS-Adventskalenders, wie die Zeit vergeht. Heute im Angebot: white-space und wie und warum man es benutzt. Wie immer gibts ein aussagekräftiges Beispiel, wenn ihr allerdings noch ein besseres bzw. überzeugenderes parat habt, dann immer her damit! Und ja ich weiß, ich bin viel zu spät dran damit aber besser spät als.. na ihr wisst schon.

Browserunterstützung

Browser
ab Version	1.0	1.0	4.0	1.0	6.0

white-space hat im Laufe der Zeit einige neue mögliche Werte bekommen, uns geht es aber primär um den Wert nowrap, den jeder relevante Browser schon seit längerem unterstützt. nowrap ermöglicht es uns Zeilenumbrüche zu verhindern. D. h. egal was kommt, Text mit diesem Wert wird auf keinen Fall umgebrochen.

Beispiel

Am einfachsten kann man das durch ein Beispiel zeigen. Manchmal möchte man ein Element in eine Richtung floaten lassen und vergibt eine eher schmale Breite. Innerhalb des Elements steht meinetwegen eine Überschrift und ein Datum, da der Browser nicht weiß, dass es ein Datum ist, bricht er den Text aufgrund der Breite innerhalb des Datums um. Das sieht nicht schön aus, besser wäre es doch, wenn der Text nach der Überschrift umbrechen würde und das Datum zusammen bleibt.

HTML

1
2
3
4

<div class="widget">
	<h3>Überschrift <span class="datum">8. Dezember 2010</span></h3>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

CSS

1
2
3
4
5
6

.widget {
	background-color:#eee;
	border:1px solid #aaa;
	padding:10px;
	width:180px;
}

Ergebnis

Wie ihr seht, bricht der Text erst nach der “8″ um, somit wird das Datum auseinander gerissen. Um das zu vermeiden, geben wir jetzt der Klasse “datum” white-space:nowrap.

CSS

1
2
3

.datum {
	white-space:nowrap;
}

Ergebnis

Und siehe da, das Datum bleibt als Ganzes erhalten und die Überschrift muss nun an anderer Stelle umbrechen. Mission accomplished.

Ich weiß, ich weiß.. ich hatte versprochen etwas pünktlicher zu werden und jetzt ist es später als je zuvor. Tut mir leid aber am Geburtstag meiner Mutter gibt es einfach andere Prioritäten als einen Artikel im Blog zu schreiben.

Trotzdem will ich mir jetzt die Zeit nehmen und euch etwas über outline erzählen.

Browserunterstützung

Browser
ab Version	1.5	1.2	7.0	1.0	8.0

Wow, erst ab IE8 wird das unterstützt.. ich musste auch erst zwei mal hinsehen und auf einer zweiten Seite checken aber okay. outline gibt es prinzipiell aus einem Grund. Dieser eine Grund besteht darin, Elemente, die mit der Tastatur (meistens durch Drücken der Tabulator-Taste) sogenannten “Fokus” bekommen, hervorzuheben. Dies geschiet in der Regel durch eine gepunktete Linie, die um das Elemente gezogen wird. Im Prinzip handelt es sich dabei um eine Art Spezialfall von border Da nur klickbare Elemente Fokus bekommen, können wir durchaus outline dazu benutzen einen doppelten Border-Effekt für nicht-klickbare Elemente zu erstellen.

Leider ist outline um einiges restriktiver als es border ist. Es erlaubt nämlich nicht, nur bestimmte Seiten rendern zu lassen, sondern rendert immer alle vier Seiten. D. h. im Klartext: es gibt kein outline-top/-right/-bottom/-left sondern eben nur outline.

Das Wertetripel ist allerdings das Gleiche wie wir es von border her kennen:

1. outline-width, die Linienstärke – angegeben in irgendeiner Maßeinheit
2. outline-style, ein Style-Schlüsselwort wie bspw. dottet, solid, dashed oder groove
3. outline-color, Farbe der Linie; wenn nicht angegeben, nimmt es (zumindest in Firefox) den Wert der Schriftfarbe an

Beispiele

Wie oben schon erwähnt werden wir jetzt mal eine doppelte Border mit Hilfe von outline erstellen:

CSS

1
2
3
4
5
6
7

.widget {
	background-color:#eee;
	border:5px solid #aaa;
	padding:10px;
	outline:5px solid #888;
	width:200px;
}

Ergebnis

Aber Achtung: Outline zählt nicht zum Box-Model, das Margin fängt stets nach der Border an, Outline wird dabei ignoriert. Es hat damit auch keinen Einfluss auf den Gesamtfluss aller anderen Elemente.

Ein weiteres Beispiel wäre einer Box oder einem Widget einen kleinen 3D-Effekt zu verpassen. Dazu hellt man die oberste Pixelreihe auf und dunkelt die anderen ab, um so die Box hervorzuheben.

CSS

1
2
3
4
5
6
7
8

.box {
	background-color:#adf;
	border-top:1px solid #cff;
	border-bottom:1px solid #28a;
	padding:10px;
	outline:5px solid #7ac;
	width:200px;
}

Ergebnis

Ich geb’s ja zu.. man muss schon etwas genauer hinsehen. Aber solche Details sind es schließlich, die ein klasse Design von einem guten Design unterscheiden können. Und mit outline geht das ganz einfach ohne zusätzlichem Markup.

Ach und bevor ich wieder Mecker einstecken muss: Die durch Outline produzierte Border wird derzeit im Firefox nicht von border-radius abgerundet, bei anderen Browsern bin ich mir grad nicht sicher. Und ja, man kann eine doppelte Border auch mit box-shadow herstellen aber das ist noch Cross-Browser-inkompatibler ( ) als man mit outline schon ist.

Bis morgen dann.

Und, hattet ihr was leckeres in euren selbstverständlich geputzten Schuhen? Wenn nicht, gibts hier wieder etwas, was eure Laune eventuell anheben kann. Hinter Türchen Nummer sechs haben wir heute overflow:hidden, das viele im Zusammenhang mit Verstecken von Inhalt bzw. Scrollbalken kennen werden. Es gibt aber noch einen anderen Anwendungsfall…

Browserunterstützung

Browser
ab Version	1.0	1.1	4.0	1.0	4.0

Die Eigenschaft overflow wird von allen Browsern beherrscht, im IE6 gibts allerdings ein kleines Problem, wenn der Wert visible gesetzt ist. Demnach vergrößert er das Element, damit der Inhalt hinein passt. Dadurch verhalten sich height/width wie min-height/min-width. Uns interessiert aber nur ganz speziell der Fall von overflow:hidden und da gibts keine Probleme.

Normalerweise setzt man diese Eigenschaft ja dazu ein, um überstehenden Text auszublenden oder um zu verhindern, dass Scrollbalken erscheinen. Ein schöner Nebeneffekt ist aber, dass Elemente mit overflow:hidden ihren gefloateten Inhalt “clearen”.

Beispiele

Am besten wir schauen uns das mal an einem Beispiel an. Folgender Aufbau: Ein Container hat eine nach links floatende Box als Inhalt. Dadurch fällt der Container in sich zusammen und alle nachrückenden Inhalte rücken nach oben.

HTML

1
2
3
4

<div class="container">
	<div class="box">Box</div>
	Container
</div>

CSS

1
2
3
4
5
6

.box {
	float:left;
	height:100px;
	margin-right:10px;
	width:100px;
}

Ergebnis

Seht ihr was ich meine? Das sieht doof aus und oftmals will man das gar nicht.

Um das zu vermeiden, kann man jetzt dem nachrückenden Inhalt z. B. ein clear:both geben. Das löst zwar das Problem mit dem Text neben der Box, aber nicht die Höhe unseres Containers. Jetzt kommt aber overflow:hidden ins Spiel, das wir dem Container verpassen müssen:

CSS

1
2
3

.container {
	overflow:hidden;
}

Ergebnis

Siehe da, alles bestens, die floatende Box wird wieder komplett vom Container umschlossen. Dabei brauchen wir nicht einmal zusätzliches Markup wie beispielsweise ein Clear-Div.

Short and simple, schönen Tag noch und bis morgen.

Verzeiht mir die kleine Verspätung aber hier nun Türchen Nummer vier, hinter dem sich heute font-variant verbirgt. Schade eigentlich, dass font-variant so selten benutzt wird, es ist ein schöner Effekt besonders für Überschriften oder Einleitungen, aber dazu gleich mehr.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	4.0

font-variant gibt es schon ewig und wird von allen Browsern problemlos unterstützt. Es stehen uns drei Werte zur Auswahl, von denen meistens nur einer wirklich gebraucht wird.

1. normal, Default-Wert, muss nicht zwingend angegeben werden
2. small-caps, damit lässt sich Text manipulieren: Kleinbuchstaben werden zu Großbuchstaben, verändern aber (im Gegensatz zu text-transform) ihre Höhe nicht
3. inherit, übernimmt den Wert für diese Eigenschaft vom Elternelement

Beispiel

Es ist unschwer zu erkennen, dass wir uns hier nur den Wert small-caps genauer ansehen wollen. Wie gesagt, der Text wird manipuliert und Kleinbuchstaben werden zu.. kleinen Großbuchstaben, “Small Capitals” eben. Zunächst ein Beispieltext:

HTML

1
2

<h3>Überschrift des Textes</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

Ohne font-variant kommt das dabei raus:

Jetzt wollen wir der Überschrift sagen, dass sie small-caps benutzen soll, das können wir entweder direkt über font-variant machen oder aber in Kurzschreibweise als Teil der font Property.

CSS font-variant

1
2
3
4
5
6
7

h3 {
	font-family:georgia,serif;
	font-size:22px;
	font-variant:small-caps;
	font-weight:normal;
	line-height:30px;
}

ODER als Teil von font

1
2
3

h3 {
	font:small-caps normal 22px/30px georgia,serif;
}

In beiden Fällen sieht unser Text dann so aus..

Je nach Schriftart kann es von Vorteil sein auch noch etwas letter-spacing hinzuzufügen, um die Lesbarkeit zu erhöhen. Prinzipiell macht aber eine solche Überschrift schon etwas mehr her und zieht die Blicke auf sich. Dabei wirkt sie aber nicht so aufdringlich wie eine Überschrift, die nur mit (großen) Großbuchstaben geschrieben wurde.

So da ihr jetzt hoffentlich euren echten Adventskalender für heute schon geplündert habt, gibts jetzt noch das zweite Türchen des CSS-Kalenders. Weniger süß, dafür umso informativer.

Diesmal gehts um die Eigenschaft Text-Transform, die es uns ermöglicht Groß- und Kleinschreibung eines Textes zu verändern.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	4.0

text-transform gibt es schon seit CSS1 Zeiten und wird von allen Browsern unterstützt. Sie wird allerdings meiner Erfahrung nach recht wenig benutzt, bzw. erst spät von “CSS-Neulingen” entdeckt, dabei ist kann sie ziemlich nützlich sein.

Die Syntax der Eigenschaft erlaubt neben none und inherit genau drei Werte, die von uns von Bedeutung sind:

1. capitalize, alle Wörter im Text beginnen mit einem Großbuchstaben
2. uppercase, alle Buchstaben eines Textes werden zu Großbuchstaben
3. lowercase, alle Wörter beginnen mit kleinen Buchstaben, auch Satzanfänge und Substantive

Schauen wir uns die Beispiele an.

Beispiele

Als Ausgangsbasis wird uns folgender Text, der genauso im Quellcode steht, dienen:

1
2
3

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua.</p>

text-transform: capitalize

1
2
3

.capitalize {
	text-transform:capitalize;
}

jedes Wort muss groß anfangen

text-transform: uppercase

1
2
3

.capitalize {
	text-transform:uppercase;
}

alles großgeschrieben

text-transform: lowercase

1
2
3

.capitalize {
	text-transform:lowercase;
}

alles kleingeschrieben

Ich denke, dass gerade die Fälle capitalize und uppercase bei Überschriften, Titeln oder Einleitungssätzen von Nutzen sein können.
Das wars für heute, bis morgen!

Damit die Vorweihnachtszeit nicht zu langweilig wird, habe ich mir gedacht ich biete euch einen kleinen Adventskalender in Form von 24 Artikeln an. Das heißt, euch erwartet ab heute jeden Tag ein Beitrag zum Thema: Selten benutzte CSS Properties.

Dabei lernt ihr nützliche CSS Properties kennen, von denen ihr bisher vielleicht nicht einmal wusstet, dass es sie gibt. Den Anfang macht heute Box-Sizing.

Browserunterstützung

Die Eigenschaft box-sizing dient zur Steuerung des CSS Box-Models. Das normale W3C-Box-Model besteht aus Width×Height + Padding + Border + Margin. Dabei werden Padding, Border nicht mit bei der Breiten- bzw. Höhenberechnung berücksichtigt. Mit box-sizing kann man dieses Verhalten jedoch ändern und so das “alte” Box-Model des IE6 (Quirks Mode) nutzen.

Browser
ab Version	1.0	3.0	7.0	1.0	8.0

Da eine CSS3-Eigenschaft ist, wird sie noch nicht von allen Browsern in ihrer eigentlichen Schreibweise unterstützt. Gecko- und Webkit-Engines benutzen noch sogenannte Vendor-Prefixes. Als mögliche Werte stehen zwei (für Firefox drei) zur Auswahl:

1. content-box (Default-Wert), spiegelt das W3C-Box-Model wider
2. border-box, damit wird Padding und Border-Width in die Breiten- und Höhenberechnung eingebunden
3. padding-box (nur Firefox), hierbei wird lediglich das Padding mit einberechnet

Eine Zuweisung per CSS würde demnach folgendermaßen aussehen:

1
2
3
4
5

.box-sizing {
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari, Chrome */
	box-sizing:border-box; /* IE8, Opera */
}

Beispiele

Unten stehende Boxen haben die gleichen folgenden CSS-Eigenschaften und unterscheiden sich ausschließlich durch ihr Box-Model. (Ihr könnt es gerne mit Firebug o.ä. nachprüfen )

1
2
3
4
5
6
7
8

.box {
	background-color:#eee;
	border:10px solid #aaa;
	height:60px;
	margin:10px;
	padding:10px;
	width:350px;
}

Wie ihr seht, sind die Boxen unterschiedlich lang, obwohl wir beiden eine Width von 350px gegeben haben. box-sizing mit dem Wert border-box berechnet die Breite (bzw. Höhe) also aus Width (Height) + Padding + Border und nicht wie das normale Box-Model nur aus Width (Height).

Besonders nützlich wird die Eigenschaft, wenn man eine Textarea auf 100% Breite ziehen will und gleichzeitig aber Padding vergeben möchte. Probieren wir es aus:

Die erste Textarea geht 20 Pixel über den Rand hinaus, die zweite verhält sich besser – dank box-sizing!

Und damit wäre Türchen #1 auch schon wieder verputzt, freut euch auf morgen.

Viele werden es kennen: Man bekommt eine Seite vorgesetzt und soll Layoutänderungen daran vornehmen – “Am besten nur über CSS!”, eigentlich wäre das kein Problem, nur sieht man in den seltensten Fällen durch das Wirrwarr, das der Vorgänger hinterlassen hat hindurch. Da stehen ein Paar komische Klassen hier und seltsame Selektoren da.. keine Kommentare – alles scheint irgendwie durcheinander zu sein. Manchmal blickt man aber auch nach einer Weile selbst nicht mehr durch seinen eigenen Code.

Das muss nicht sein. Geht mit gutem Beispiel voran und lernt, wie man besseren, sauberen CSS-Code verfasst, der noch dazu in allen Browsern zu einem nahezu identischen Ergebnis führt.

1. CSS Reset einbinden

CSS Reset bedeutet, dass alle Browser-Styles überschrieben werden, sodass die Darstellung bei allen Browsern bei Null anfangen kann. Auf dieser Basis lässt sich dann ein einheitliches Design beschreiben. Die Einbindung erfolgt entweder über eine gesonderte reset.css (vor eure eigentliche CSS platzieren) oder man schreibt die wenigen Zeilen in seine eigentliche CSS Datei (vor allen anderen Anweisungen).

Eine bekannte Reset-Methode ist die von Eric Meyer, einem international anerkannten CSS-Experten, der diverse Bücher veröffentlicht hat (darunter auch CSS: The Definite Guide). Folgender Code wird verwendet..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Die Reset von Eric Meyer ist nicht das Maß aller Dinge. Sie ist dazu gedacht verändert und an das jeweilige Projekt angepasst zu werden. Hinterfragt sie also kritisch und passt sie euren Vorlieben und Erfahrungen an.

Für die Minimalisten unter euch gibt es auch eine einfachere aber trotzdem recht effektive Methode. Dabei wird das Margin und Padding für alle Elemente (Universal Selector) auf Null gesetzt..

1
2
3
4

* {
	margin:0;
	padding:0;
}

2. Keine Hacks, dafür Conditional Comments verwenden

Im Laufe der Zeit haben sich “kluge” Leute Hacks für ältere Browser ausgedacht, um bestimmte W3C Standards auch auf diesen zum Laufen zu bringen. Baut man diese Hacks in sein CSS ein, kann es sein, dass damit euer Code invalide wird. Abgesehen davon, dass sie in der Community mittlerweile verpönt sind, sollte man wirklich auf Browser Hacks verzichten.

Stattdessen sollte man Conditional Comments benutzen um spezielle CSS-Dateien für die jeweiligen Problem-Browser einzubinden (meistens betrifft das nur IE6).

Conditional Comments werden über besondere Kommentare im head-Bereich (unterhalb eurer eigentlichen CSS) eingefügt. Um zum Beispiel eine CSS für alle IE-Versionen kleiner-gleich IE6 einzubinden, muss man folgenden Code ins HTML schreiben:

1
2
3

<!--[if lte IE 6]>
	<link rel="stylesheet" href="/pfad/zum/css/IE6.css" type="text/css"/>
<![endif]-->

3. Strukturieren & Kommentare nutzen

Euer Code sollte strukturiert und kommentiert sein. Um das zu erreichen versucht den Code in Bereiche zu gliedern, die auch im Front-End zu sehen sind: Basic HTML Tags, Navigation, Content, Header, Sidebar, Footer, Suche & Formulare.. usw. Benutzt einfach eine Gliederung, die für euch funktioniert und halbwegs logisch aufgebaut ist. Um die Bereiche voneinander zu trennen, kann man einfach gut sichtbare Kommentar-Blöcke verwenden.

1
2
3
4
5
6
7
8
9

/* ------------------------ */
/* ------ Content --------- */
/* ------------------------ */
#content {
	...
}
#content p {
	...
}

Es empfiehlt sich außerdem einen einleitenden Kommentarblock zu schreiben, in den man Information rund um die CSS-Datei schreibt. Neben dem Autor (also dein Name) kann man Versionsnummer, letztes Bearbeitungsdatum und Kurzbeschreibung (auf Englisch) auch häufig genutzte Farbcodes oder ähnliches dazuschreiben. Diese Herangehensweise ist unter WordPress Pflicht, da das Backend wichtige Informationen über das Theme aus der CSS ausliest.

4. Schlankes, effektives CSS schreiben

Um schlankes und gleichzeitig effektives CSS zu schreiben, sollte man sich einige Punkte verinnerlichen.

1. Aussagekräftige IDs und Klassennamen wählen

   Bezeichner sollten auch ihren Namen gerecht werden: #sidebar ist besser als #divleft.

2. Selektoren gruppieren

   Sollten unterschiedliche Tags, IDs oder Klassen die gleichen CSS Eigenschaften bekommen, gruppiert man die jeweiligen Selektoren.

   1 2 3 4 5

   h4, #header, span.block { ... }

3. Kurze Selektoren

   Wenn möglich sollten Selektoren so kurz wie möglich sein.

   1	#sidebar .widget h2.widgettitle

   ..ist viel zu lang, besser ist es so..

   1	#sidebar h2

   ..obwohl sie beide das gleiche ansprechen.

4. Properties einrücken und alphabetisch sortieren

   Um die Lesbarkeit des Codes zu erhöhen, ist es ratsam jede Property auf eine neue Zeile zu schreiben, sie einzurücken und alphabetisch zu sortieren. Das macht erstmal ein wenig Arbeit aber wenn man von Anfang an so vorgeht, ist man genauso schnell und es zahlt sich am Ende aus.

   1 2 3 4

   #sidebar { z-index:20; background-color:#fff; position:relative; line-height:22px; font-site:12px; }

   ..das ist wesentlich schlechter zu lesen als das hier..

   1 2 3 4 5 6 7

   #sidebar { background-color:#fff; font-site:12px; line-height:22px; position:relative; z-index:20; }

5. Shortcodes verwenden

   Um sich unnötige Arbeit zu ersparen sollte man immer die Kurzformen von Properties und Farbcodes verwenden.

   1 2 3 4 5 6 7 8 9 10

   #sidebar { background-color:#ffaa99; background-image:url(images/bg_sidebar.jpg); background-repeat:no-repeat; background-position:top left; margin-top:0; margin-right:10px; margin-bottom:15px; margin-left:0; }

   ..ist extrem umständlich, viel einfacher und kürzer gehts so..

   1 2 3 4

   #sidebar { background:#fa9 url(images/bg_sidebar.jpg) no-repeat top left; margin:0 10px 15px 0; }

6. !important vermeiden

   Die !important-Anweisung hat natürlich einen Sinn aber man sollte sie dennoch nur in Notfällen benutzen, da man sonst erhebliche Probleme mit dem Cascading bekommen kann.

Habt ihr noch weitere Vorschläge? Wie formatiert Ihr euren Code? Teilt eure Meinung anderen einfach per Kommentar mit!

Kann IE6 das?

dann sucht man meistens den Fehler bei sich selbst – ist mein XHTML invalide, hab ich Fehler im CSS? Meistens. Manchmal hat man es aber auch mit einem strunzdummen Browser zu tun. So zum Beispiel diese Woche, als auf Arbeit ein kleines Problem auftrat. Hier mal eine Beschreibung der Situation: gefordert war ein Newsticker, der seine Einträge automatisch durchscrollen lässt. Bei den Einträgen handelte es sich um große Hintergrundbilder mit einer darübergelegten halbtransparenten Textbox, in der wiederum ein Link stehen sollte (zur Weiterleitung auf den eigentlichen Newseintrag).

Zum besseren Verständnis mal ein Bild:

Newseinträge mit Hintergrundbild und halbtransparenter Box.

Das Sliden/Scrollen der Einträge war kein Problem, das erledigte ein Javascript. Das große Bild wurde per img-Tag im Newseintrag angegeben, genau wie der Inhalt der Textbox samt Link. Die Textbox hatte als Hintergrundbild die halbtransparente weiße Box und wurde mit position:absolute an die entsprechende Stelle geschoben. Alles funktionierte wunderbar, natürlich fehlten jetzt noch die Anpassungen für den IE6.

Da IE6 keine halbtransparenten PNGs unterstützt, nutzen wir die proprietäre Filtermethode von Microsoft. Dabei wird das Hintergrundbild entfernt und das neugefilterte Bild eingefügt. Der Code sieht folgendermaßen aus:

1
2
3
4

.trans_box {
    background-image:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='trans_box.png');
}

Das ganze sollte man über eine extra IE6 CSS-Datei per Conditional Comment einfügen, weil sonst das CSS invalide wird.

Gesagt, getan doch plötzlich das böse Erwachen (im IE6): den Link in der Textbox konnte man zwar noch markieren aber nicht mehr anklicken.

Und ich nur so: “WTF?!”.

Tja.. die Filtermethode hat leider einige Nachteile, wie ich wenig später herausgefunden habe. Was mir schon bekannt war, war dass background-position Anweisungen nicht mehr funktionieren würden ABER außerdem noch folgendes (jetzt kommts):

Links, die sich innerhalb eines absolut-positionierten Elementes befinden, das ein halbtransparentes Hintergrundbild durch die Filtermethode zugewiesen bekommt, sind nicht klickbar.

Jap, so hab ich auch geguckt. Was also tun? Nach ein paar Minuten Googeln die Lösung: Damit die Links wieder funktionieren, muss man zusätzliches Markup einfügen.

1
2
3
4
5

<div class="trans_box">
    <div class="innerwrap">
        <a href="#">Link</a>
    </div>
</div>

Damit können wir jetzt die Änderungen am CSS durchführen.

1
2
3
4
5
6
7
8
9
10
11

.trans_box {
    background:none;
}
.innerwrap {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='trans_box.png');
    zoom:1;
}
.trans_box a {
    position:relative;
    z-index:1;
}

Der Filter wird von der äußeren Box rein in den innerwrap gezogen und bekommt zoom:1;, damit hasLayout im IE6 gesetzt ist. Die Änderungen am Link sind dazu da, dass dieser stets über den anderen Boxen dargestellt wird.

Ist alles bisschen dreckig aber es funktioniert. Das Extra-Markup ist denke ich verkraftbar, wenn man dafür eine schöne transparente Box im IE6 haben kann.
Viel Spaß damit.

Mehr zum Thema auf Englisch bei satzansatz.de

Diese Woche hatte ich auf Arbeit ein ungewöhnliches Problem, mit dem ich an die Grenzen von CSS gestoßen bin. Ich bekam die Aufgabe einige Screendesigns umzusetzen, an sich nichts Ungewöhnliches, allerdings gab es einige Bedingungen bezüglich der Sidebar: ein Widget – also eine Box innerhalb der Sidebar – sollte sich immer am unteren Rand der Sidebar aufhalten, wobei Sidebar und Content immer gleich hoch sein sollten, je nachdem, welches der beiden höher ist.

Das Problem

Ich dachte also erstmal nach, wie ich die beiden Teilprobleme lösen könnte. Eine Box an den unteren Rand einer anderen Box zu schieben ist einfach zu lösen. Die Sidebar bekäme ein position:relative und das Widget position:absolute sowie einen kleinen Wert für bottom. Wie lässt man jedoch Content und Sidebar gleich hoch sein? Dafür gibt es verschiedene Ansätze. Man könnte zum Beispiel eine Tabelle benutzen oder man suggeriert das Ganze (faux columns), indem man eine Hintergrundgrafik benutzt.

Ich konnte keine Tabelle benutzen, weil man position:relative auf td Tags nicht anwenden kann und die andere Variante viel weg, weil ich wirklich zwei gleich hohe DIVs brauchte. Da saß ich also und hatte ein schier unlösbares Problem.

“Man müsste irgendwie abfragen können, wie hoch die beiden DIVs sind und sie dann entsprechend anpassen.”, hab ich mir gedacht und hatte damit die Lösung schon gefunden. Nach Absprache mit einem Kollegen stand fest: Mir bleibt nichts anderes übrig als JavaScript zu benutzen.

Die Lösung

Ich entschied mich für jQuery, das sich in einigen anderen Projekten bereits als extrem nützlich und vielseitig erwiesen hatte. Es ist außerdem sehr einfach zu erlernen und bringt neben einer guten Dokumentation auch viele coole Plugins mit sich. “Die ganze Bibliothek nur für eine simple Abfrage?”, wird sich mancher an dieser Stelle denken. Ja. Natürlich geht das auch mit reinem JavaScript aber da ich jQuery auch noch an anderer Stelle im Template gebraucht habe, wäre es dumm gewesen, die jQuery Funktionen nicht zu nutzen.

Ich habe also die aktuelle jQuery Version eingebunden und mir dann kurz überlegt, was mein Script machen muss:

1. Hol dir die Höhe der Sidebar und die Höhe des Contents
2. Vergleiche beide Werte und bilde das kleinste gemeinsame Vielfache (kgV)
3. Setze die Höhe der beiden DIVs auf das kgV

Die Umsetzung

Soweit zur Theorie, kommen wir zur Praxis:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//sync height of Content and Sidebar
function syncheight(){
	//Reset auf 'auto'
	$('#content').height('auto');
	$('#sidebar').height('auto');
 
	//hole aktuelle Werte
	var contentheight = $('#content').height();
	var sidebarheight = $('#sidebar').height();
	var fullheight;
 
	//vergleiche beide Hoehen, bilde kleines gemeinsames Vielfaches
	if (contentheight>=sidebarheight || contentheight==sidebarheight) {
		fullheight = contentheight;
	} else {
		fullheight = sidebarheight;
	};
 
	//setze beide auf gleiche Hoehe
	$('#content').height(fullheight);
	$('#sidebar').height(fullheight);
}

Das ist die ganze Funktion. #content und #sidebar stehen für die ID des Contents bzw. der Sidebar. Hinzu kam noch das Zurücksetzen der beiden Höhen auf den Wert auto. Das ist notwendig, will man später die Funktion in einem anderen JavaScript aufrufen. Möchte man, dass die Funktion automatisch aufgerufen wird, nachdem die Seite geladen ist, muss man die Funktion noch in eine document.ready – Funktion legen:

1
2
3

$(document).ready(function() {
	//hier die Funktion rein
});

Durch diese Funktion wartet der Browser bis die Seite vollständig aufgebaut wurde und führt dann erst das Script aus.

Demo

Mein Problem war gelöst, mein Chef zufrieden und ich denke mal, dem einen oder anderen könnte die kleine Funktion auch helfen.

Viel Spaß wünsch ich damit

Kaloeffel möchte gern, dass ich für ihn ein Problem löse und das mach ich auch..

Neue Herausforderung:

Ich möchte dass die Sidebar oben anfängt, also nicht nur neben dem Content sondern auch neben dem Header.
Die Seite soll die ganze breite einnehmen und der Header und Content sollen eine flexible breite haben.
Problem: Wenn z.B. der Header die Eigenschaft “float:left;” bekommt, ist die Größe nicht mehr flexibel sondern nur noch das Minimum.

Ausgehend vom Beispiel aus dem dritten Teil des CSS Einsteiger Tutorials kommt nun die Lösung.

Zuerst müssen wir natürlich das Markup, also den XHTML Code ändern. Die Sidebar muss für sich sein, und der Header muss in den Content geschoben werden oder man erstellt ein neues div, in das man Header und Content schiebt. Der Einfachheit halber verzichte ich aber jetzt darauf. Ein Footer wurde nicht gewünscht, deshalb lasse ich den jetzt auch mal weg. Zum Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
	<head>
	<!-- meta Elemente, Verlinkung auf CSS Datei -->
	</head>
	<body>
		<div id="page">
			<div id="sidebar">
				Sidebar
			</div>
			<div id="content">
				<div id="header">
					Header
				</div>
				Content
			</div>
		</div>
	</body>
</html>

Soweit sogut. Jetzt müssen wir natürlich auch das CSS ändern. Wir haben 2 Hürden zu bewältigen: 1. die Variable Breite und 2. eine Sidebar mit fester Breite, die neben Header und Content platziert sein soll.

Die Änderungen, die dafür notwendig sind, sind ziemlich simpel. Das Page-Div verliert seine feste Breite und bekommt width:100% statt 800px. Die Sidebar behält float:left, der Content (der den Header jetzt enthält) verliert aber jegliches float sowie seine feste Breite und bekommt stattdessen ein margin-left mit dem Breitenwert der Sidebar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#page {
	width:100%; /* Seite hat variable Breite  */
}
 
#header {
	background-color:#0ff;
	height:50px;
}
 
#sidebar {
	clear:left;
	float:left;
	background-color:#f80;
	width:200px;
	height:100px;
}
 
#content {
	background-color:#f0f;
	height:400px;
	margin-left:200px;
}

Ergebnis:

So soll es sein

Das war es auch schon

CSS3 Effekte

Hallo Leute, dieser Artikel wird ein kleines Tutorial darüber, wie man schon jetzt einige der neuen CSS3 Features in modernen Browsern nutzen kann.

Als Versuchsobjekt wird uns ein Link in Form eines Buttons dienen.

Dazu erstmal der XHTML Code:

1

<a href="#">CSS3 Button</a>

und der CSS Code:

1
2
3
4
5
6
7
8
9

a {
	background-color:#e9e9e9;
	border:1px solid #828282;
	color:#828282;
	font:bold 26px arial,sans-serif;
	padding:10px 15px;
	text-decoration:none;
	text-transform:uppercase;
}

So sieht das Ganze dann mit CSS2 Features aus:

Button mit CSS2

Border-Radius

Das sieht natürlich alles noch sehr eckig und langweilig aus. CSS3 und die demnächst erscheinenden neuen Browser (Firefox 3.5, Opera 10 (teilweise) und – neulich erst released – Safari 4) erlauben es uns aber, durch einige nette Effekte, alles etwas aufzupeppen.

Beginnen wir am besten mit abgerundeten Ecken. Die Property border-radius wird derzeit noch von keinem Browser richtig unterstützt, einige haben aber damit begonnen, sie selbstständig zu implementieren. Firefox3 kennt die Eigenschaft als -moz-border-radius, während man unter Safari -webkit-border-radius benutzen muss.

Damit also in möglichst vielen Browsern die runden Ecken zu sehen sind, müssen wir gleiche mehrere Zeilen CSS Code zu unserem obigen Beispiel hinzufügen:

1
2
3

-moz-border-radius:25px; /* Mozilla alte Syntax */
-webkit-border-radius:25px; /* Safari alte Syntax */
border-radius:25px; /* W3C Standard */

Für den Internet Explorer (<9) gibt es derzeit keine Lösung.

Das Ergebnis sieht folgendermaßen aus:

border-radius

Text-Shadow

Als nächstes wollen wir versuchen, dem Text einen Schatten zu geben. Aber nicht irgendeinen, sondern etwas, das in die richtung “Emboss” geht, eine Art Präge-Effekt. Dafür gibt es text-shadow, das es uns möglicht macht, einen oder mehr verschiedengroße und -farbige Schatten auf den Text anzuwenden.

Für den gewünschten Emboss-Effekt brauchen wir zwei Schatten, einen dunklen oben und einen hellen unten, damit der Eindruck entsteht, von oben käme Licht:

1

text-shadow:0 1px 0 #fff,0 -1px 0 #404040;

Die Schatten werden durch ein Komma getrennt, Parameter sind [color] [x-offset]px [y-offset]px [blur/size]px. Negative Werte für Offsets sind erlaubt, die Reihenfolge der Schatten spielt hierbei keine Rolle.

Auch hier spielt der Internet Explorer nicht mit.

text-shadow

Box-Shadow

So sieht unser Button doch schon wesentlich angenehmer aus. Was jetzt noch fehlt ist ein Schlagschatten für den gesamten Button. Hierfür gibt es box-shadow, das wir wieder über Brwoserspezifische Präfixe einbinden müssen:

1
2
3

-moz-box-shadow:#ccc 0 0 10px; /* Mozilla alte Syntax */
-webkit-box-shadow:#cc 0 0 10px; /* Safari alte Syntax */
box-shadow:#ccc 0 0 10px; /* W3C Standard */

Fehlanzeige im Internet Explorer (<9).

Damit ist unser Button schon fertig:

box-shadow

Wie ihr seht, bringt CSS3 einige coole Neuerungen mit sich, die unsere Arbeit wesentlich erleichtern werden. (Natürlich sind die obigen drei nicht alles, was CSS3 zu bieten hat, sehr interessant werden z.B. auch die neuen Selektoren sein.) Denkt nur mal an box-shadow, ich weiß gar nicht, wie oft ich schon Vorlagen aus der Designabteilung bekommen habe, in denen jede Box irgendeinen soften Schlagschatten hatte und wir dann immer abwägen mussten ob sich der Aufwand lohnt dafür extra Grafiken zu machen. Auch bei Seitenrändern mit Schlagschatten mussten immer Grafiken zurecht geschnitten und mühevoll mit CSS an die richtige Stelle geschubst werden. Ebenfalls entfällt das Rendern für Überschriften mit Schatten, denn dafür gibt es jetzt ja text-shadow und Runde Ecken sind je eh ein Kapitel für sich…

Mit CSS3 spart man also Zeit, Geld und Traffic! *froi*

Neue CSS!

Da ich nun den IE6 Support eingestellt habe und ich dennoch nicht recht mit dem zerschossenen Layout leben wollte, hab ich mal eben noch die CSS Datei etwas optimiert und siehe da: sieht alles gut aus, auch im alten Drecksbrowser. Die einzigen Darstellungsfehler sind jetzt noch die PNG Grafiken. Die werde ich aber nicht austauschen. Im Gegenteil, die 3 kleinen Icons unter der Artikelüberschrift sind jetzt PNG Dateien und haben einen angenehmeren Farbverlauf.

Außerdem hat die CSS Datei jetzt eine Versionierung in Form eines Timestamps bekommen, sodass sie bei jedem neugeladen werden muss, sollte ich etwas daran verändert haben.

Herzlich willkommen zum dritten Teil des CSS Einsteiger Tutorials. Es wird empfohlen folgende Teile des Tutorials vorher gelesen zu haben:

1. Teil #1 (XHTML+CSS, Syntax)
2. Teil #2 (Syntax, Selektoren, Box-Model)

In Teil 3 werden wir versuchen ein zweispaltiges Layout – bestehend aus Header, Sidebar, Content und Footer – zu erstellen.

Wieder mit dabei?

na aber sicher!

Ok, bevor es richtig losgeht, sollte wir noch eine wichtige Unterscheidung von HTML-Elementen kennen und verstehen lernen.

Block- & Inline-Elemente

Block-Elemente

Block-Elemente sind HTML-Elemente, die vom Browser so interpretiert werden, als würde vor und nach ihnen ein Zeilenumbruch stehen. Sie starten also, außer nicht anders durch CSS-Befehle festgelegt, eine neue Zeile. Standardmäßig bekommen Block-Elemente die gleiche Breite wie ihre Elternelemente, sie versuchen also ihr Elternelement in der Breite (nicht aber in der Höhe, die wiederum vom Inhalt bestimmt wird) auszufüllen.

Beispiele für Block-Elemente sind:

• div – Divisions (Sektor)
• p – Paragraph (Absatz)
• blockquote – Blockquote (Zitat)
• ul,ol – Unordered/Ordered List (ungeordnete/geordnete Liste)
• li – List Item (Listenelement)
• h1-6 – Headings (Überschriften)
• table – Table (Tabelle)

Inline-Elemente

Inline-Elemente hingegen produzieren keine Zeilenumbrüche, sie werden einfach der Reihe nach dargestellt. Ihre Breite und Höhe wird von ihrem Inhalt bestimmt, unabhängig vom Elternelement (auch hier gilt wieder: nur solange nicht anders durch CSS-Befehle festgelegt).

Beispiele für Inline-Elemente sind:

• span – Span
• a – Anchor (Link)
• em – Emphasize (Italic)
• strong – Strong (Fett)
• code – Code

Bemerkungen

Ein Layout, und dazu zählt auch unseres, besteht aus Block-Elementen, die mit anderen Block- und Inline-Elementen gefüllt werden. (Sidebar bekommt eine Liste, Content wird mit Absätzen befüllt, die wiederum Links und Spans enthalten können usw.)

Jedes Element kann in seinem Verhalten verändert werden. Der CSS-Befehl, der dafür zuständig ist, heißt display. display hat mehrere Zustände; hier die 4 wichtigsten:

1. none das Element wird nicht angezeigt (Element + Inhalt verstecken)
2. inline das Element wird als Inline-Element behandelt
3. block das Element wird als Block-Element behandelt
4. list-item das Element wird als Listenelement angezeigt (mit Anstrich)

Jedes Block-Element kann somit als Inline-Element und umgedreht behandelt werden, wodurch man sehr flexibel wird was die Benutzung von Elementen angeht.

Durch das Ändern der display-Eigenschaft ändern wir nicht das Element selbst. Ein Block-Element bleibt ein Block-Element, es verhält sich nur anders. Es ist also auch damit nicht möglich ein div innerhalb eines a-Elements zu schreiben o.ä.!

das hab ich natürlich gleich gewusst..

Zweispaltiges Layout

Ein Layout mit zwei Spalten besteht zumeist aus Header (Banner, Top-Navigation, Suche etc.), Sidebar (Navigation, Kalender, Werbung etc.), Content (der eigentliche Seiteninhalt, Bilder etc.) und dem Footer (Back-Links, Sitemap, Copyright etc.). Die meisten WordPress Themes – meins inklusive – benutzen ein zweispaltiges Layout, deshalb soll es uns hier mal als Beispiel dienen:

Zweispaltiges Layout mit Header, Sidebar, Content und Footer.

Alle markierten Blöcke auf dem Bild sind divs und somit Block-Elemente. Der HTML-Code für diese grobe Struktur würde wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<html>
	<head>
	<!-- meta Elemente, Verlinkung auf CSS Datei -->
	</head>
	<body>
		<div id="page">
			<div id="header">
				Header
			</div>
			<div id="sidebar">
				Sidebar
			</div>
			<div id="content">
				Content
			</div>
			<div id="footer">
				Footer
			</div>
		</div>
	</body>
</html>

Die IDs sind dazu da, um die Elemente später per CSS anzusprechen. Das div id="page" ist praktisch, wenn wir unsere Seite zentrieren wollen. Oftmals wird so ein div auch wrapper genannt, weil es die Seite nochmal umschließt (eng: to wrap).

Wollen wir nun unseren Blöcken ein gewisses Aussehen verleihen und schreiben also folgende CSS (die Werte für height und background-color stehen nur da, damit wir nachher was sehen, normalerweise wird die Höhe vom Inhalt des jeweiligen Divs bestimmt):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#page {
	margin:0 auto; /* zentriert die Seite */
	width:800px; /* Seite wird 800 Pixel breit */
}
 
#header {
	background-color:#00ffff;
	height:50px;
}
 
#sidebar {
	background-color:#ff8800;
	width:200px;
	height:100px;
}
 
#content {
	background-color:#ff00ff;
	width:600px;
	height:400px;
}
 
#footer {
	background-color:#00ff00;
	height:50px;
}

Schauen wir uns nun das Ganze im Browser an:

Zweispaltiges Layout? Noch nicht ganz..

hm.. da stimmt irgendwas noch nicht. sidebar und content sollten doch eigentlich nebeneinander passen?!

Völlig richtig! Allerdings reicht dafür obenstehendes CSS nicht aus. Es gibt allerdings eine ganz einfache Methode, um unser Ziel zu erreichen – float

Float

float hat 3 wichtige Zustände:

1. left Element “fließt” nach links
2. right Element “fließt” nach rechts
3. none Element “fließt” nicht

öhm.. “fließt” ??

Um es verständlicher zu machen, erkläre ich es am besten an einem Beispiel. Folgendes Szenario: Eine große 500px breite Box (schwarzer Rahmen) soll mit 4 Boxen (Box1-4) befüllt werden, die alle die Eigenschaft float:left besitzen und jeweils eine unterschiedliche Höhe und Breite haben.

Gehen wir die Sache Schritt für Schritt durch..

1. Box1 platziert sich wie erwartet links oben.

Bild 1

2. Box2 “fließt” jetzt links neben Box1, da noch genug Platz vorhanden ist.

Bild 2

3. Box3 tut es Box2 gleich.

Bild 3

4. Die “erste Reihe” ist nun voll Box4 muss sich weiter unten einreihen, wir sehen jedoch das Problem. Box4 lässt nach links Platz weil es ja auch soweit wie möglich nach oben will und muss.

Bild 4

5. Um das zu verhindern und Box4 auf einer “neuen Zeile” beginnen zu lassen, fügen wir vor Box4 noch eine weiter Box hinzu.

Bild 5

CSS-Code für Box5:

1
2
3

.box5 {
	clear:both;
}

Damit ist Box5 ein sogenannter Clear-Div. Solche Divs bewirken, dass nachfolgende Elemente das Floating von vorhergehenden Elementen ignorieren und somit wieder “bei Null angfangen”, d.h. sich wieder ganz links anordnen und nicht solche Fehler produzieren wie in Bild 4.

Neben both hat clear noch die Werte left und right, sodass es möglich ist nur eine bestimmte float-Richtung aufzuheben. Außerdem ist clear nicht auf Divs beschränkt sondern kann auf jedes Element angewendet werden.

Ok, ich denke ich hab’s verstanden.. zurück zu unserem Beispiel, was muss ich da nun wo ändern?

Mit dem neuen Wissen lassen wir nun die Sidebar und den Content floaten. Die Sidebar nach links und den Content nach rechts. So können wir sicher sein, dass nichts schief läuft. Zusätzlich sollten wir dem Footer noch ein clear:both verpassen, das ist zwar nicht unbedingt notwendig aber sollten wir doch aus irgendwelchen gründen noch Elemente nach dem Footer einfügen und diese floaten lassen besteht die Gefahr, dass es uns das Layout zerschießt.

Der neue CSS-Code lautet demnach (nur #sidebar, #content und #footer ändern sich, Rest bleibt gleich):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#sidebar {
	float:left;
	background-color:#ff8800;
	width:200px;
	height:100px;
}
 
#content {
	float:right;
	background-color:#ff00ff;
	width:600px;
	height:400px;
}
 
#footer {
	clear:both;
	background-color:#00ff00;
	height:50px;
}

Und siehe da, alles so wie es sein soll

Sieht es bei dir auch so aus? Dann Glückwunsch zum einem zweispaltigen Layout!

Sehr geil.

Nun kannst du anfangen die Blöcke mit Inhalt zu befüllen! Folgende Teile stehen zum Weiterlesen bereit:

1. Teil #1 (XHTML+CSS, Syntax)
2. Teil #2 (Syntax, Selektoren, Box-Model)
3. Teil #3 (Zweispaltiges Layout, Float)

War dieses Tutorial hilfreich? Was möchtest du als nächstes wissen? Hast du Fehler gefunden oder etwas vermisst? Dann hinterlasse einfach einen Kommentar

F*** YOU!

was zum geier hat sich microsoft bitte dabei gedacht, als sie der neuen version von outlook (2007) den IE als rendering-engine weggenommen und durch die von word (!) ersetzt haben?!

“und?” werden jetzt vllt einige denken.. ich kann euch sagen, was das zu bedeuten hat. die html/css rendering-engine von word kann NICHTS! ein beispiel: wir wollen einen html-newsletter verschicken und positionieren ein paar divs hier und da und geben denen ein hintergrundbild und vllt auch ne feste höhe und breite.. klingt nicht sehr aufregend aber nichts davon kann das NEUE outlook.

im ernst.. das ist ein alptraum. ab jetzt müssen designer wieder zum alten table-layout greifen und hoffen, dass man mit altertümlichen html-tags zumindest annähernd ähnliche resultate hervorbringen kann. das wirft uns geschätzte 5 jahre zurück..

hier mal eine übersicht, was welcher email-dienst unterstützt.

..ich kanns immer noch nich fassen.. warum macht microsoft sowas? erst IE6 und jetzt das, als ob sie daraus nichts gerlernt hätten.

ich kann nur hoffen, dass die meisten noch das alte outlook 2003 benutzen und nicht umgestiegen sind oder aber gleich zu thunderbird greifen, was als einziges ALLES unterstützt und die beste performance abliefert. trotzdem, das problem für designer bleibt.. und wieder müssen sich alle nach dem monopolisten richten..

bis die tage

PS: als grund nannte MS wohl, dass somit dem benutzer der umstieg von word zu outlook einfacher gemacht wird.. blödsinn.. niemand erstellt html emails in word und wenn doch kommt der/die sowieso in die hölle!

Herzlich willkommen zum zweiten Teil des CSS Einsteiger Tutorials. Es wird empfohlen folgende Teile des Tutorials vorher gelesen zu haben:

1. Teil #1 (XHTML+CSS, Syntax)

In diesem Teil werden wir noch mehr Möglichkeiten zum Ansprechen von HTML Elementen kennen lernen. Das kleine Layout muss bis Teil3 warten, da Teil 2 etwas größer als geplant geworden ist.

Bist du wieder mit dabei?

logisch *Kippe ausmach* *anschnall*

Gut, dann können wir ja anfangen..

Syntax (Weiterführung)

Kommentare

In CSS ist es möglich und auch sinnvoll Kommentare zu setzen. Ähnlich wie in C/C++ werden sie folgendermaßen gekennzeichnet:

/* Kommentar */

Solche Kommentare können auch über mehrere Zeilen verlaufen:

/* Kommentar,
der über mehrere
Zeilen verläuft */

Es ist gut Überschriften innerhalb der CSS Datei per Kommentar zu setzen, um so eine gewisse Struktur aufzubauen. Weiter gehts!

Selektoren

In Teil 1 haben wir die Grundstruktur von CSS Regeln kennen gelernt, hier nochmal der Aufbau:

Selektor {
	Property-A: Value-A;
	Property-B: Value-B;
	...
}

In unserem letzten Beispiel war der Selektor ein p-Tag bzw. ein p-Tag mit der Klasse absatz. Es gibt jedoch noch eine ganze Menge anderer Selektoren und Art und Weisen, wie man diese klug einsetzen kann.

Folgende Tabelle gibt einen Überblick über alle möglichen Selektoren (Quelle: Wikipedia)

IE6 unterstützt keine Attribut-Selektoren.
Versuche einfach andere Selektoren zu benutzen (Klassen- oder ID-Selektoren) oder dein HTML entsprechend dahingehend zu ändern.

boar.. das sind jetzt aber ganz schön viele, muss ich die alle auswendig wissen?!

Nein. Es kann zwar nicht schaden sie alle zu wissen, in der Regel reicht es aber gehört zu haben, dass es sowas gibt und dann an entsprechender Stelle nachzuschlagen. Du wirst schnell merken, welche in der Praxis wichtig und welche weniger wichtig sind.

In unserem Beispielabsatz aus Teil 1 haben wir den Selektor p.absatz benutzt, der sagt, dass alle p-Tags der Klasse absatz von den darauffolgenden Properties betroffen sind. Was ist aber, wenn wir auch andere Elemente wie div oder blockquote so aussehen lassen wollen?

Dieses Problem lösen wir einfach, indem wir das p in unserem Selektor weglassen. Dann bleibt nur .absatz übrig. Genau dieser Ausdruck sagt, “nimm alle Elemente der Klasse absatz und style sie wie folgt..”. Es werden also alle Elemente, egal ob p, div oder blockquote gestylt, solange sie die entsprechende Klasse besitzen.

Dasselbe gilt natürlich auch für IDs, welche übrigens mit einem Nummernkreuz/Raute # statt einem Punkt angesprochen werden.

Was ist denn überhaupt der Unterschied zwischen class und id?

Das ist ganz einfach: Elemente mit einer Klasse können beliebig oft innerhalb des HTML Dokuments auftauchen.. zum Beispiel könnte ein Text aus mehreren Absätzen bestehen, alle p-Tags könnten dann die Klasse absatz haben. Wenn wir jedoch IDs vergeben, so dürfen diese nur einmalig innerhalb des Dokuments sein. Zum Beispiel wird es auf einer Seite nur genau einen Header geben, deswegen können wir diesem eine ID geben.

Merke:
id = einmalig
class = beliebig oft

OK, merk ich mir.. sonst noch was?

Ja, es kann vorkommen, dass wir einem Element zwei Klassen geben wollen oder müssen. Sowas ist der Fall, wenn wir zum Beispiel mehrere Absätze haben, diese aber unterschiedlich gestylt werden sollen:

1
2
3

<p class="important">Ich bin ein wichtiger Text und deshalb fett geschrieben</p>
<p class="warning ">Ich bin eine Warnung, deshalb rot geschrieben.</p>
<p class="warning important">Ich bin eine wichtige Warnung und deshalb rot und fett geschrieben.</p>

der dazugehörige CSS Code:

1
2
3
4
5
6
7

.important {
	font-weight: bold;
}
 
.warning {
	color: #FF0000;
}

Wir sehen, dass der letzte Absatz zwei Klassen bekommen hat, indem wir einfach zwei Bezeichnungen innerhalb des class-Attributes angegeben haben. Damit bekommt er auch die Eigenschaften beider Klassen verliehen.

Wollen wir jetzt aber – aus welchem Grund auch immer – den dritten Absatz noch weitere besondere Eigenschaften geben, müssen wir unseren CSS Code noch erweitern und folgendes hinzufügen:

1
2
3

.important.warning {
	/* jetzt folgen die besonderen Eigenschaften */
}

Du siehst, durch einfaches Aneinandersetzen zweier Klassennamen sprechen wir ausschließlich Elemente an, die beide Klassen besitzen. Die Reihenfolge spielt hierbei keine Rolle (.warning.important wäre also auch möglich).

Pseudo-Klassen und -Elemente

Folgende Tabelle zeigt alle Pseudo-Klassen auf:

IE6 unterstützt Pseudo-Klassen nur für a-Tags. Im IE7 treten keinerlei Probleme auf und Pseudo-Klassen sind für alle Tags nutzbar.

Pseudo-Klassen stehen immer direkt hinter dem Selektor:

1
2
3
4

a:link { color: #0000FF; }
a:visited { color: #00FF00; }
a:hover { color: #FF0000; }
a:active { color: #FF0000; }

Dies bedeutet, dass unbesuchte Links Blau, besuchte Rot und Links, über denen die Maus “schwebt” bzw. gerade aktiv sind, Grün dargestellt werden. Die Reihenfolge dieser vier Pseudo-Klassen ist übrigens empfehlenswert (LVHA-Regel).

Und nun die Pseudo-Elemente:

Pseudo-Elemente werden recht selten genutzt, können aber hier und da die Arbeit erleichtern. Nehmen wir an, wir möchten den ersten Buchstabe eines Kapitels (Initiale) besonders hervorheben. Anstatt den ersten Buchstabe in ein extra span-Tag zu schreiben, lassen wir das doch CSS für uns machen:

1
2
3
4

p.lead:firstletter {
	color: #FF0000;
	font-size: 20px;
}

Damit wird der erste Buchstabe in 20px Schriftgröße und in der Farbe Rot dargestellt.

Okay damit hätten wir die Selektoren abgeschlossen, es kann nun aber vorkommen, dass beim Zusammenführen von mehreren Style Sheets Selektoren doppelt auftreten, aber unterschiedliche Properties haben:

1. CSS Datei

1

p.lead { color: #000000; }

2. CSS Datei

1

p.lead { color: #444444; }

Wird der Text nun schwarz (oben) oder grau (unten) dargestellt? Je nachdem welche Datei als letztes eingebunden wurde. In diesem Fall soll das mal die zweite Datei sein, der Text würde also grau werden. Wollen wir aber, dass der Text dennoch schwarz sein soll, müssen wir ein !important zwischen Value und Semikolon schreiben:

modifizierte 1. CSS Datei

1

p.lead { color: #000000 !important; }

Könnte mal nützlich sein!

Hierarchische Verschachtelung

Wir wissen ja, dass unsere HTML Datei eine Struktur hat. Das html-Tag hat die Kind-Elemente head und body. body hat wiederum viele andere Kind-Elemente wie divs, ps oder Überschriften (h1-h6). Sogar Elemente wie p können noch Kind-Elemente haben (z.B. span) – eine Hierarchie entsteht.

Nehmen wir an, wir haben einen div mit der ID “content” und dort sind zwei p-Tags enthalten. Einer davon ist die Einleitung (class="lead") und soll deshalb fett dargestellt werden, der andere ist ein normaler Absatz:

1
2
3
4

<div id="content">
	<p class="lead">Ich bin die Einleitung und deshalb fett. *freu*</p>
	<p>Ich bin nur ein stinknormaler Absatz. *sad*</p>
</div>

Wollen wir jetzt diesen Einleitungsabsatz innerhalb des Inhalts-Divs ansprechen, gilt:

1
2
3

#content p.lead {
	font-weight: bold;
}

Zwischen Eltern- und Kindelement steht also nur ein Leerzeichen.

Und eine letzte Anmerkung zu dem Thema: Gruppieren von Selektoren. Es ist möglich und äußerst praktisch Elemente, die gleich aussehen sollen zu einer Gruppe zusammen zu fassen. Dazu werden die Elemente bzw. die einzelnen Selektoren mit einem Komma verkettet. Als Beispiel nehmen wir den Einleitungsabsatz von eben und die Warnung von weiter oben, beide sollen fett dargestellt werden:

1
2
3

#content p.lead, .important {
	font-weight: bold;
}

Ziemlich simple Angelegenheit, oder?

Joa.. glaub schon, was kommt als nächstes?

Leider schafft es das Layout nicht mehr in diesen Teil des Tutorials aber dafür folgt schon mal ein kleiner Ausblick, indem wir einen Blick auf das Box-Model werfen.

Box-Model

Alle Elemente werden unter CSS als Box aufgefasst. Also als etwas, dass befüllt werden kann (mit Text z.B.). Eine Box kann eine Breite und Höhe haben, die sich in der Regel nach der Größe des Inhalts und der Größe des Elternelements richtet. Dazu kann noch kommen: Padding, Border und Margin.

Um das zu verdeutlichen, hier mal eine Grafik:

Das offizielle W3C Boxmodel mit Padding, Border und Margin.

Diese Eigenschaften kann also jedes Element bekommen, einige haben schon standardmäßig welche. Überschriften haben z.B. ein Margin, damit sie etwas Abstand zu umliegenden Elementen haben und somit besser hervorstechen.

margin und padding können vier Values haben, jeder dieser Values steht für eine Seite (top right bottom left (im Uhrzeigersinn, mit top gehts immer los)). Die anderen vier Properties können immer nur ein Value besitzen.

Ein Beispiel: Wir haben ein span-Tag, welches 10 Pixel Padding an allen Seiten bekommen soll.

1

<span class="padding">Ich bin ein span mit Padding.</span>

CSS:

1
2
3
4
5
6

span.padding {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}

Ich habe hier die einzelnen Properties für jede Seite benutzt und 10px als Value übergeben. Es geht aber noch kürzer:

1
2
3

span.padding {
	padding: 10px 10px 10px 10px;
}

Diese Form ist äquivalent zu der darüber. Aber es geht sogar noch kürzer!

1
2
3

span.padding {
	padding: 10px;
}

WTF..?!

Durch das Weglassen der drei anderen Values, nimmt der Browser einfach an, man möchte auf allen Seiten dasselbe Padding haben. Recht hat er und wir haben einen schlanken Code.

Nur.. was machen wir, wenn wir nur oben und unten Padding haben möchten und links und rechts lieber keinen, weil das vielleicht doof aussieht? Dann nehmen wir zwei Values, das erste regelt die Werte für oben und unten, das andere für die rechts und links:

1
2
3

span.padding {
	padding: 10px 0px;
}

Und wann brauchen wir 3 Values?

Drei Values brauchen wir, wenn wir auf zwei Seiten, die sich gegenüber liegen, einen gleichen Wert haben wollen und auf den andern beiden Seiten unterschiedliche Werte brauchen:

1
2
3

span.padding {
	padding: 10px 0px 5px;
}

Bedeutet:
padding-top: 10px
padding-right: 0px
padding-bottom: 5px
padding-left ist leer, bekommt aber einfach den Wert von padding-right (also auch 0 Pixel)

Puh.. ist mehr geworden als gedacht, deswegen gibts das Layoutbeispiel erst im nächsten Teil, bis dahin viel Spaß mit den Selektoren! Folgende Teile stehen zum Weiterlesen bereit:

1. Teil #1 (XHTML+CSS, Syntax)
2. Teil #2 (Syntax, Selektoren, Box-Model)
3. Teil #3 (Zweispaltiges Layout, Float)

War dieses Tutorial hilfreich? Hast du Fehler gefunden oder etwas vermisst? Dann hinterlasse einfach einen Kommentar

Herzlich willkommen zum ersten Teil meines großen CSS Einsteiger Tutorials.

Ziel des Tutorials soll sein:

Ich will absoluten Neulingen, die noch nie etwas von CSS gehört haben, die Grundlagen und den sauberen Gebrauch von CSS näher bringen. Jeder Teil wird dabei etwas anspruchsvoller sein und es wird tiefer in die Materie vorgedrungen. Die Teile bauen dabei sukzessiv aufeinander auf. Profis werden sich allerdings kaum etwas Neues aus diesem Tutorial nehmen können.

Voraussetzungen:

1. (sehr) gute (X)HTML-Kenntnisse (alle gängigen Tags, W3C-konform)
2. Nerven aus Stahl (Stichwort IE6-Optimierung)
3. Fähigkeit zu Lesen – auch die englische Sprache – und zu Denken
4. Hang zum Perfektionismus

Du erfüllst alle Punkte? Dann können wir ja anfangen.. (wenn nicht, ist auch nicht so schlimm, man wächst schließlich mit jeder Herausforderung )

CSS.. kann man das essen?

Nein, essen kann man es nicht. CSS steht für Cascading Style Sheets und ist ein vom W3C erschaffener und herausgebrachter Standard zur Darstellung von (X)HTML Tags.

Okay.. und wie kann ich das nun benutzen?

Das lustige ist, dass jede Seite bereits gestylt dargestellt wird, da der Browser vorgibt, wie welches Tag gerendert wird. Leider hat jeder Browser andere Default Styles und die Seite sieht dadurch von Browser zu Browser unterschiedlich aus. Außerdem will man ja etwas Besonderes kreieren oder umsetzen und das soll in jedem Browser gleich aussehen.

CSS kann auf vier unterschiedliche Art und Weisen auf eine HTML Datei angewendet werden:

1. Browser Default
2. externes Stylesheet
3. internes Stylesheet
4. inline Style

Die oberste Variante hat die geringste, die unterste die höhste Priorität. Sollte es vorkommen, dass ein HTML-Element von zwei oder mehr solcher Varianten beeinflusst wird, so “gewinnt” stehts die mit der höchsten Priorität.

Varianten im Detail

Da Browser Default nicht verändert werden kann, brauchen wir das auch nicht zu berücksichtigen.

externes Stylesheet:

Bei dieser Variante wird eine normale Text-Datei (mit Texteditor wie Notepad, Wordpad oder Notepad++ öffnen) mit der Endung .css erstellt und in der .html Datei referenziert. Dabei wird folgender Code innerhalb des head-Tags geschrieben.

<link rel="stylesheet" href="url_zum_stylesheet/stylesheet.css" type="text/css" media="screen" />

Damit weiß der Browser nun, dass er sich unter “url_zum_stylesheet” die Datei stylesheet.css suchen muss und dass diese Datei ihm sagt, was er zu tun hat.

internes Stylesheet:

Intere Stylesheets werden innerhalb des head-Tags geschrieben. Man benutzt das style-Tag und schriebt dort den CSS Code hinein. Hierbei muss keine .css Datei angelegt werden.

<style type="text/css">
	...
</style>

inline Style:

Inline Styles werden direkt als Attribut eines HTML-Tags geschrieben.

<p style="...">
	Ich bin ein gestylter Absatz.
</p>

Alles klar und welche nehm ich jetzt, was ist am besten?

Diese Frage ist einfach zu beantworten. Es ist immer zu empfehlen ein externes Stylesheet zu benutzen. Es hält die HTML Datei klein und beschleunigt somit das Herunterladen der Seite. Außerdem ist es übersichtlicher und sauberer.

Die Variante des internen Stylesheets bietet sich bei kleinen, sehr kompakten Projekten an, ein Newsletter ist wohl das beste Beispiel.

Inline Style ist nur in Notfällen zu benutzen! Am besten gleich wieder vergessen, dass es das gibt. (Ich weiß, die Versuchung ist groß )

Syntax

Okay dann nehme ich halt die externe Variante.. .css Datei ist erstellt und Eintrag im Header gemacht, was nun?

Gratulation, jetzt kannst du anfangen deinen ersten richtigen CSS Code zu schreiben ! Anhand eines Beispiels soll gezeigt werden, wie man einen Paragraphen stylt. Der HTML Code lautet wie folgt:

<p class="absatz">
	Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz.
</p>

Beachte: der Absatz hat durch das Attribut class eine CSS-Klasse bekommen. Das ist ähnlich einem Namen, jeder Absatz mit dieser Klasse wird nun so dargestellt, wie wir es in der CSS Datei festlegen. Einfach folgenden Code in deine CSS Datei kopieren.

1
2
3
4
5
6
7
8
9
10

p.absatz {
	background-color: #CCCCCC;
	border: 2px solid #000000;
	font-family: Georgia;
	font-size: 16px;
	color: #000000;
	padding: 20px;
	margin: 10px 0;
	text-align: justify;
}

Wenn wir jetzt die HTML-Seite in unserem Browser öffnen, sollte der Absatz nun so aussehen:

Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz.

Tut er aber nicht

Sollte sich nichts geändert haben, überprüfe den Pfad zur CSS Datei im Header deiner HTML Datei (der Pfad kann auch relativ gesetzt werden).

Jetzt zur Erläuterung der einzelnen Zeilen des CSS Codes:

p.absatz ist ein Sperator, der sorgt dafür, dass alle p-Tags mit der Klasse absatz vom nachfolgenden Code betroffen sind. Der eigentliche Code steht in geschweiften Klammern.

background-color: #CCCCCC; gibt dem Hintergrund des Paragraphen eine Farbe; Farbwerte gibt man in der Regel hexadezimalcodiert an (#000000 = schwarz, #FFFFFF = weiß)

border: 2px solid #000000; gibt dem Paragraphen einen Rahmen, der 2 Pixel dick ist aus aus einer durchgezogenen Linie in der Farbe Schwarz besteht

font-family: Georgia; legt die Schriftfamilie fest, hier Georgia

font-size: 16px; legt die Schriftgröße fest, hier 16 Pixel

color: #000000; legt die Schriftfarbe fest, hier Schwarz

padding: 20px; zwischen Inhalt und Rahmen wird zusätzlicher Platz reserviert, sogenanntes “Padding”

margin: 10px 0; gibt dem Inhalt einen Außenabstand nach oben und nach unten (10 Pixel), links und rechts bleibt der Abstand aber auf 0 Pixel

text-align: justify; kontrolliert den Textfluss innerhalb des Absatzes, justify bedeutet Blocksatz

Nach jedem “Befehl”, den sogenannten Properties, folgt ein Semikolon. Die schließende Klammer nicht vergessen!

Aha soweit so gut, was gibt es denn noch so?

Eine Liste mit allen Properties findet man unter www.w3schools.com, dort sind auch zu allen Properties Beispiele und wichtige Hinweise allerdings nur in Englisch.

Okay für heute soll es das gewesen sein. Probiert euch am besten an dem Absatz noch etwas.. wie wäre es mit einer anderen Schriftart oder einer anderen Hintergrundfarbe? Spielt einfach etwas mit den Werten und ihr werdet merken, wie schnell und einfach CSS zu erlernen ist.

In Teil 2 gehts mit noch mehr Syntax weiter und anhand eines kleinen Layouts werden wir das Positionieren von divs lernen. Folgende Teile stehen zum Weiterlesen bereit:

1. Teil #1 (XHTML+CSS, Syntax)
2. Teil #2 (Syntax, Selektoren, Box-Model)
3. Teil #3 (Zweispaltiges Layout, Float)

War dieses Tutorial hilfreich? Hast du Fehler gefunden oder etwas vermisst? Dann hinterlasse einfach einen Kommentar

Überschrift mit Schatten

Was ist also der einfachste Weg, um unser Ziel zu erreichen? Na? Genau, wir legen hinter unserer eigentlichen Überschrift nochmal den gleichen Text, nur diesmal mit einer anderen, logischerweise dunklen, Farbe.

1. Änderung am Theme

Als erstes müssen wir den zusätzlichen Text in unser Theme einfügen. Die Änderung bezieht sich hier auf die index.php, muss aber in allen .php Dateien durchgeführt werden, wo der Titel einen Schatten bekommen soll.

1
2
3
4
5

...
<div class="post" id="post-<?php the_ID(); ?>">
	<h2 class="shadow"><?php the_title(); ?></h2>
	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
...

In Zeile 3 sieht man den zusätzlichen Titel. Ganz wichtig ist, dass wir diesem neuen Titel eine CSS-Klasse geben (hier: shadow).

Wenn wir uns das ganze jetzt ansehen würden, hätten wir folgendes vor Augen:

2. CSS anpassen

Und hier kommt unsere CSS-Klasse zum Einsatz. In unserer style.css müssen wir nun lediglich ein paar Änderungen vornehmen, damit der eben eingefügte Titel dunkel und hinter dem eigentlich Titel dargestellt wird.

1
2
3
4
5
6
7
8
9
10

h2 {
	margin: 0;
	position: relative;
}
 
h2.shadow {
	color: #000000;
	margin: 1px 0 0 1px;
	position: absolute;
}

Das h2-tag bekommt die zusätzliche Eigenschaft position: relative; und h2.shadow wird schwarz und durch margin und position leicht versetzt hinter h2 dargestellt.

Mehr gibt es dazu nicht zu sagen, viel Spaß mit euren neu schattierten Überschriften