Webdesign (auch Webgestaltung) umfasst die Gestaltung, den Aufbau und die Nutzerführung von Websites für das WWW bzw. das Interface-Design in diesem Bereich. Dabei werden in der Regel strukturierte Texte, die in XHTML bzw. HTML verfasst sind, samt ergänzenden Grafiken mit CSS formatiert.
Tipps zum Thema WIKI: http://www.dokuwiki.org/de:syntax
CSS
Bookmarks
Getting started
- Mastering CSS Coding: Getting Started http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/
- umfassende CSS-Referenz auf deutsch http://www.css4you.de/
Advanced stuff
- Objektorientiertes CSS – Eine Einführung http://www.webkrauts.de/2009/07/06/objektorientiertes-css-eine-einfuehrung/
- Listen stylen mit CSS http://www.bartelme.at/journal/archive/listen_stylen_mit_css
- CSS-Sprites
CSS Basics
Dynamic Pseudo Classes
| Elements | Affected | Description |
|---|---|---|
| :link | Links only | Unvisited links |
| :visited | Links only | Visited links |
| :hover | All elements | Mouse cursor over element |
| :active | All elements | Mouse clicks element |
| :focus | All elements that can be selected | Element is selected |
| None | All elements | Default state of all elements |
Hacks / Troubleshooting
| Hack | Wirkt in diesen Browsern | Selektiertes Element | Validität |
|---|---|---|---|
| *+html, * html | Nur IE, alle Versionen | html | Valides CSS |
| * html #uno { color: red } | Nur IE bis Version 6 | html | Valides CSS |
| #once { _color: blue } | Nur IE 6 | ||
| #doce { *color: blue } | IE6, IE7 | ||
| #veinte { color/* \* */: blue\9; } | IE7, IE8 | ||
| #diecinueve { color: blue\9; } | IE6, IE7, IE8 | ||
| *+html #dos { color: red } | Nur IE 7 | html | Valides CSS |
| html>body #tres { color: red } | IE7, FF, Safari, Opera | body | Valides CSS |
| html>/* */body #cuatro { color: red } | IE8, FF, Safari, Opera (alle ausser IE 6,7) | body | Valides CSS |
| html:first-child #cinco { color: red } | Opera 9.27 und drunter, Safari 2 | html | Valides CSS |
| html[xmlns*=””] body:last-child #seis { color: red } | Safari 2-3 | html | Valides CSS |
| body:nth-of-type(1) #siete { color: red } | Safari 3+, Chrome 1+, opera9+, ff 3.5+ | body | Valides CSS |
| body:first-of-type #ocho { color: red } | Safari 3+, Chrome 1+, opera9+, ff 3.5+ | body | Valides CSS |
| html[xmlns*=””]:root #trece { color: red } | Safari 2 - 3.1 | html | Valides CSS |
| *İhtml[xmlns*=””] #catorce { color: red } | Safari 2 - 3.1, Opera 9.25 | html | Valides CSS |
| #veinticuatro, x:-moz-any-link { color: red } | Nur Firefox 1+ | ||
| #veinticinco, x:-moz-any-link, x:default { color: red } | Firefox 3.0+ | ||
| #diecisiete { color/* */: blue } | Alle ausser IE 6 | ||
| html>/**/body | Moderne Browser ohne IE 7 | body | Valides CSS |
| :root *> #quince { color: red } | Moderne Browser ohne IE 8 | root | |
| <meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7” /> | IE 7 Rendermode im IE8 erzwingen |
IE 6
Box Model
Der vielleicht verbreiteste IE6 Bug. Angenommen man definiert die folgende Box:
div#box {
width: 100px;
border: 2px solid black;
padding: 10px;
}
Der IE6 wird die Breite der Box mit 100px, moderne Browser aber mit 124px darstellen und führt im Alltag oft zu großen Problemen.
Lösung: I generally work around this issue by just not using padding on boxes I am using for layout. If that box has some text inside it in a <p> element, I’ll apply the padding it needs directly to that p element. Just side-steps the issue, but it works.
Negative Margin-Werte im IE6
In unserem Lieblingsbrower, dem Internet Explorer 6 wird alles, was mit negativer Marging (zB.: margin-left: -6px;) verschoben wird, einfach abgeschnitten.
Lösung: Erster Lösungsansatz bei einem solchen Problem sollte immer sein, dem überstehenden Element durch eine Breitenangabe Layout zu geben.
Damit das Ganze auch im IE6 funktioniert ist zusätzlich noch die Angabe position: relative nötig.
Double-Margin Bug
Der double-margin Bug tritt beim Internet Explorer 6 und früher auf, wenn der Aussenabstand (margin) eines Elements die gleiche Richtung hat in das es floated (z.B.: ein linke margin bei einem links floatenden element). In diesem Fall verdoppelt der IE 6 die margin.
Lösung: Der Bug- fix ist ziemlich strange: setze einfach die Displayeigenschaft auf “inline”. Da alle floats Blockelemente sind, hat der Fix keine Effekte in die Darstellung anderer Browser.
Float-Width Bug
When a floating element is followed by a block-level element with a width defined, Internet Explorer incorrectly redefines the content area for the block-level element. To understand this, let's first look at how it is supposed to work.
This is handled correctly in both browsers. The problem arises when a width is added to the block-level element. Internet Explorer 5.5 and earlier handle this by changing the available content area to start at the right side of the floating div, rather than the left side of the viewport (the browser window). To illustrate, let's add a width of 100% to the block-level element, which is called MainPage:
Lösung:There is no simple solution to this problem. One option is to not define the width of the element that follows the float and to handle its positioning using margin-left (see BrowserBugs/Demos/FloatWithMarginLeft.html). Another option is to float the second element as well and then use margin-left to create a buffer between it and the preceding element (see BrowserBugs/Demos/FloatWithFollowingFloat.html).
3-Pixel Gap Bug
Internet Explorer has a weird bug, in which it adds a three-pixel margin between a floating element and the subsequent element. If the subsequent element has a width defined, Internet Explorer pushes the whole element to the right. If no width is defined, Internet Explorer just pushes the content to the right.
This may not be a problem either, except in the case of a very tight layout. Those extra three pixels could cause the MainPage element to clear down under the float, which would destroy the design.
Lösung: Luckily, the fix is easy. Simply set the margin-right of the floating div to -3 pixels as shown below:
Duplicate Characters Bug
Internet Explorer 6 has a puzzling bug involving multiple floated elements; text characters from the last of the floated elements are sometimes duplicated below the last float. This bug is a real headbanger because there seems to be nothing triggering it. However, by now everyone should know that IE needs no excuse to misbehave.
Lösung:
Lösung:
Lösung:
HTML
Conditional Comments
Um den IE-Browser gezielt in HTML anzusprechen und einzelnen Versionen (IE6, IE7, …) eine eigene CSS-Datei zuzuweisen, eignen sich Conditional Comments (“Bedingte Kommentare”). Anweisungen für bestimmte Browser-Hacks können so ausgelagert und die zentrale CSS-Datei verschmälert werden. Conditional Comments sind im Head-Bereich der HTML-Datei einzubinden.
| Browser | Conditional Comment |
|---|---|
| Alle IE Versionen | <!–[if IE]> <link rel=”stylesheet” type=“text/css” href=”../misc.css” rel=”stylesheet” /> <![endif]–> |
| Alle IE Versionen ≤ 7 | <!–[if lte IE 7]> <link rel=”stylesheet” type=“text/css” href=”../ie7.css” rel=”stylesheet” /> <![endif]–> |
| IE 6 | <!–[if IE 6]> <link rel=”stylesheet” type=“text/css” href=”../ie6.css” rel=”stylesheet” /> <![endif]–> |
Definitionslisten
Neben den häufig eingesetzten ungeordneten Listen <ul> und geordneten Listen <ol> gibt es noch eine dritte Listenform, die Definitionsliste, im englischen definition list <dl>. Schauen wir uns die Notierung einer Definitionsliste im Quelltext an:
<dl> <dt>Definition (list) Term</dt> <dd>Definition (list) Description</dd> </dl>
Die Definitionsliste besteht aus drei verschiedenen Tags:
<dl> | definition list: Beginn und Ende der Liste
<dt> | definition term: der Begriff, der erklärt werden soll
<dd> | definition description: der Text zur Erklärung
Weitere Informationen: http://maxdesign.com.au/presentation/definition/
Elektronische Bildbearbeitung
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Internet
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
