css-websites - Joerg Dumkow

	Home
	CSS-Tutorial
	JavaScript-Tutorial

	Impressum
	Kontakt
	zur JD Musikerseite!

Neuigkeiten

Webseiten- Programmierung:

Ein Buch für alle Fragen zur Programmierung von Webseiten - Grundlagen nachschlagen, Techniken verstehen, Praxislösungen sofort umsetzen - eine überzeugende Kombination aus Praxisreferenz und Nachschlagewerk von

Data Becker

css-websites-Blog:

01. CSS: Horizontal und vertikal zentrieren

02. CSS-Farben

03. HTML-Sonderzeichen

04. Typografie:

05. CSS-Validation Service

06. CSS: Mehrere Klassen in einem Element

07. Welche Browser werden benutzt

08. CSS: Style Switcher

09. Mozilla Firefox

10. CSS: »Runde« Ecken ohne Grafiken

11. Flash mp3-Player von Marc Reichelt

1. Horizontal und vertikal zentrieren:

Nach wie vor eignet sich das Tabellenlayout sehr gut dafür, wenn man einen Inhalt genau zentriert wiedergeben möchte:

<html>
<head>
<style type="text/css">
body {
background: #F3F6F9;
height: 100%;
margin: 0px;
}
.container {
width: 100%;
height: 100%;
}
.content {
width:400px;
border: 1px solid #CACACA;
background: #FFFFFF;
text-align:left;
padding: 10px;
}
</style>
</head>
<body>
<table class="container">
<tr>
<td align="center" valign="middle">
<table class="content" cellspacing="0" cellpadding="0">
<tr>
<td>
<p>Der Inhalt dieser Webseite:</p>
<p>horizontal und
vertikal zentriert!</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

testen!

2. CSS-Farben:

Mit CSS3 werden die Farbnamen der websicheren und der Nertscape-Palette zum allgemeinen Standard. Auch wenn CSS3 noch Zukunftsmusik ist, werden wohl die meisten aktuellen Browser die Farben schon korrekt wiedergeben können.

ansehen!

3. HTML-Sonderzeichen:

Schnell mal eine Übersicht über alle Sonderzeichen, die jeder Programmierer zur Hand haben sollte. Weniger gebräuchliche Zeichen werden aber nur die wenigsten im Kopf parat haben.

ansehen!

4. Typografie:

Über einige grundlegenden Regeln der Typografie sollte sich jeder Webdesigner im Klaren sein. Eklatante typografische Fehler hinterlassen keinen guten Eindruck. Unbedingt ein Argument, sich auch mit diesem Thema zu beschäftigen.

ansehen!

5. CSS-Validation Service:

Auf der Seite der W3C können Sie nachprüfen lassen, ob Ihre Seite den Konventionen nach dem W3C-Standard für CSS entspricht.

prüfen!

6. Mehrere Klassen in einem Element:

Es ist durchaus möglich, mehrere Klassen, bzw. Klassen und IDs einem HTML-Element zuzuweisen. Im folgenden Beispiel:

<html>
<head>
<title>Mehrere Klassen</title>
<style type="text/css">
body {
font-family: Verdana; Arial, sans-serif;
font-size: 11px;
padding: 80px;
}
.red {
color: red;
}
.big {
font-size: 150%;
}
.italic {
font-style: italic;
}
#border {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Hier sind mehrere <span class="red big">Klassen</span> in einem Element definiert!</p>
<p>Hier sind eine <span class="italic" id="border"> Klasse und eine ID </span> in einem Element definiert!</p>
</body>
</html>

ansehen!

7. Welche Browser werden benutzt:

Eigentlich spielen nur noch zwei Browser eine tragende Rolle: Der Microsofts Internet Explorer und in zunehmenden Maße auch der Firefox. Der Rest fristet nur noch ein Nischendasein!
Mit www.w3schools.com/ behält jeder Webdesigner den Überblick:

ansehen!

8. Style Switcher:

Auf der Seite von Thomas Stich können Sie mehr über die Verwirklichung eines eigenen Style Switchers erfahren. Auf der Seite www.stichpunkt.de werden verschiedene Aspekte zu CSS vorgestellt. Das JavaScript zur Steuerung des Style Switchers steht ebenso zum Herunterladen zur Verfügung: www.stichpunkt.de/switch.js

ansehen!

9. Mozilla Firefox:

Wenn Sie Windows benutzen, haben Sie bereits den Internet Browser von Microsoft auf Ihrem Computer installiert. Möglicherweise haben Sie sich noch nie gefragt ob dies der Weisheit letzter Schluß ist. Es gibt jedoch viele sehr gute Gründe zum Umstieg vom Internet-Explorer auf Mozillas Firefox Browser.

ansehen!

10. »Runde« Ecken ohne Grafiken

Alessandro Fulciniti auf Nifty Corners hat es vorgemacht: abgerundete Ecken funktionieren beim IE und FF auch ohne Grafiken und »-moz-border-radius«. Dazu ist nur etwas Stückelarbeit nötig:

<html>
<head>
<style type="text/css">
body {
padding: 20px;
background-color: #FFFFFF;
font: 100% Verdana, Arial, sans-serif;
}
h1, h3, p {
margin-left: 20px;
}
div#content {
margin-top: 10px;
margin-left: 10px;
width: 400px;
background: #DAA520;
}
span.rtop, span.rbottom {
display:block;
background: #FFFFFF;
}
span.rtop span, span.rbottom span {
display:block;
height: 1px;
overflow: hidden;
background: #DAA520;
}
span.r1 {
margin: 0 5px;
}
span.r2 {
margin: 0 3px;
}
span.r3 {
margin: 0 2px;
}
span.rtop span.r4, span.rbottom span.r4 {
margin: 0 1px;
height: 2px;
}
</style>
</head>
<body>
<div id="content">
<span class="rtop">
<span class="r1"></span>
<span class="r2"></span>
<span class="r3"></span>
<span class="r4"></span>
</span>
<h1>- »Runde Ecken« -</h1>
<p>»Runde Ecken« ohne Bilder</p>
<h3>Idee: Alessandro Fulciniti auf<br>
Nifty Corners</h3>
<p>Gekonntes Stückelwerk bringt »runde Ecken« ins Design!</p>
<span class="rbottom">
<span class="r4"></span>
<span class="r3"></span>
<span class="r2"></span>
<span class="r1"></span>
</span>
</div>
</body>
</html>

ansehen!

11. Flash mp3-Player von Marc Reichelt:

Wenn Sie einen mp3-Player auf Ihrer Seite einbinden wollen, sollten Sie sich mal den emff-player vom Marc Reichelt ansehen (http://www.marcreichelt.de/). Der Player steht zum download bereit und lässt sich einfach über einen div-container auf der Seite plazieren.

im Einsatz ansehen!

Hier: Listings zum Buch

Sie finden hier praxisnahe Online-Tutorials zu JavaScript und Cascading Style Sheets. Beide sind als Buch im Zweiklang-Verlag erschienen. Das PHP-Tutorial ist zur Zeit nur fragmentarisch enthalten, wird aber zu gegebener Zeit weiter ausgebaut. Sie können den abgedruckten Quelltext ausführen, indem Sie den jeweiligen Link betätigen, etwa Code 10.8.