CSS-Fundgrube mit Tipps, Tricks und Anleitungen

Absolute Positionierung gezielt und richtig einsetzen 17.08.2008

Diese Eigenschaft wird oft unnötig und falsch verwendet. Sie hat aber - gezielt eingesetzt - durchaus ihre Berechtigung. weiter

"Position: absolute" wird oft absolut falsch eingesetzt 17.08.2008

Wer als Anfänger die CSS-Eigenschaft "position: absolute;" verwendet und sich deren Bedeutung nicht bewusst ist, der wird von seinem Layout schnell absolut enttäuscht sein. weiter

Den Footer immer unten anordnen 14.08.2008

Ein häufiges CSS-Problem, aber dennoch lösbar: Der Footer soll immer unten angeordnet werden:
Entweder bei wenig Inhalt am unteren Bildschirmrand oder bei längerem Inhalt am Ende der Seite. weiter

Abstandsprobleme mit dem Firefox 25.07.2008

Ein fehlendes Clearing bestraft der Firefox mit Abstandsproblemen. weiter

Der Firefox stellt den Hintergrund nicht vollständig dar 24.07.2008

Oder ein Merkspruch für den Webmaster: "Wer floatet, muss auch clearen!" Wir bringen Licht in die Float-Materie. weiter

Röhrenbalken als Layout-Aufpepper 08.07.2008

Mit Röhrenbalken können schöne Aufpepp-Effekte für unsere CSS-Div's erzielt werden. weiter

Pipeline-Effekt 07.07.2008

Hier gehts um eine sich kachelnde Konsole als Fortsetzung einer Logo-Grafik. Sie passt sich unterschiedlichen Bildschirmbreiten an. weiter

Webdesign mit Farbverläufen 07.07.2008

Sehr schöne Design-Effekte lassen sich mit Farbverlaufgrafiken erzielen. Dabei gibt es vielseitige Einsatzmöglichkeiten. weiter

Hintergrundgrafiken und Texturen 07.07.2008

Wem eine schlichte Hintergrundfarbe zu einfach wirkt, der kann eine Textur oder Hintergrundgrafik verwenden. weiter

Browser stellen Abstände unterschiedlich dar 18.06.2008

Wenn Abstände in verschiedenen Browsern unterschiedlich dargestellt werden, kann es an den browserspezifischen Vordefinitionen für die einzelnen Elemente liegen. Wir trimmen die Browser auf eine einheitliche Abstands-Darstellung. weiter

Zitate und "Anreisser" im Text hervorheben 30.05.2008

Im Text hervorgehobene Zitate oder Inhaltsanreisser lockern diesen auf und machen ihn für den Leser interessant. weiter

Grafiken mit Fließtext umgeben 28.05.2008

Mitunter sieht ein Layout ansprechender aus, wenn eine Grafik von Fließtext umgeben wird. Im Zusammenspiel mit einigen grafischen Vorarbeiten hat CSS auch dafür eine Lösung. weiter

Flaggen basteln: Eine Spielerei mit CSS 26.05.2008

CSS dient nicht nur dem Web-Layout; es bietet auch manche Spielreien. So kann man mit wenigen CSS-Angaben auch Nationalflaggen basteln. weiter

Der Umstieg von Frames auf CSS-Layout 24.05.2008

Soviel vorweg: Er lohnt sich, erfordert aber auch ein gewisses Umdenken. Der wesentliche Unterschied wird hier erklärt. weiter

Doppelter Abstand im Internet-Explorer 6 22.05.2008

Wenn der Internet-Explorer 6 einen Seitenabstand verdoppelt, ist meist der "IE-Doubled-Float-Margin-Bug" dran schuld. weiter

Faux Columns bei flüssigem Layout 15.05.2008

Mit dem "Faux-Columns-Trick" lassen sich Spalten mit unterschiedlich langem Inhalt auf gleiche Länge bringen. Das funktioniert auch bei einem "flüssigen Layout" mit prozentualen Spaltenbreiten weiter

Flüssigbilder für flexible Breiten 13.05.2008

Grafiken, die sich auch den prozentualen Breiten von Containern anpassen: Wir lassen die Bilder "schwimmen". weiter

Flexible Hintergrundgrafik mit Breitenanpassung 12.05.2008

Wie erreicht man, dass eine Grafik bei zunehmender Bildschirmbreite mitwächst und ebenfalls breiter wird? Hier wird das Geheimnis gelüftet. weiter

Abgerundete Ecken mit CSS 12.04.2008

Wer mit rechteckigen CSS-Div's arbeitet, muss deshalb nicht auf abgerundete Ecken verzichten. Mit Hilfe zweier Grafiken lassen sich auch Div's mit abgerundeten Ecken darstellen. weiter

Ein dreispaltiges Layout mit fixen Breiten 24.03.2008

Ein "fixes" Layout ist bei der Gestaltung seines Inhalts kalkulierbar und wird auch bei unterschiedlichen Bildschirmauflösungen gleich angezeigt. weiter

Ein besonderer Bild-Hover-Effekt mit einer Grafik 09.03.2008

"Aus eins mach zwei" ist das Geheimnis eines speziellen Bild-Hover-Effektes. weiter

Layout mit 100 % Höhe bei fixiertem Header und Footer
28.02.2008

Nicht gerade einfach umzusetzen, aber dennoch machbar ist ein CSS-Layout mit 100 % (Fenster-)Höhe. Dabei können Header und Footer fixiert werden. weiter

Register-Navigation mit Ausfahr-Effekt 22.02.2008

Zwei Beispiele, wie man ein Menü mit einer "ausfahrbaren Register-Navigation" einmal etwas außergewöhnlich gestalten kann. weiter

Bildergalerie mit Vergrößerungen beim Hovern 15.02.2008

Kleine Bilder in der Vorschau, die sich beim Hovern vergrößern - die "CSS-Hover-Bildergalerie" macht's möglich.weiter

Navigation mit Buttons gestalten 13.02.2008

Wer an seine Navigation besondere Ansprüche stellt, kann die einzelnen Links mit Grafik-Buttons gestalten. weiter

Ansprechende Bilderrahmen 04.02.2008

Die Wirkung von Bildern lässt sich mit einem ansprechenden Rahmen oft verbessern. Dazu braucht man nicht unbedingt ein Grafikprogramm. Wenige CSS-Angaben reichen ebenso. weiter

Bildergalerie mit CSS-formatierter Liste 28.01.2008

Eine Bildergalerie lässt sich nicht nur mit einer Tabelle, sondern auch mit einer CSS-formatierten Liste erstellen. weiter

Text zu Bildern anordnen 26.01.2008

Ob Text links oder rechts neben einem Bild oder als Bildunterschrift angeordnet werden soll: CSS hat hat für (fast) alle Fälle eine Lösung. weiter

Textformatierung einmal anders 24.01.2008

Um Text zu formatieren gibt es neben den bekannten Eigenschaften für die Textausrichtung noch zahlreiche andere Möglichkeiten. weiter

Link-Tipps 19.01.2008

"Allein kannst du viel erreichen - zusammen mit anderen erreichst du alles." Link-Tipps zu Seiten, deren Webmastern ich mich in unterschiedlicher Art und Weise zu Dank verpflichtet fühle oder zu deren Entwicklung ich beitragen durfte. weiter

Listen: Übersichtlichkeit für Gliederungen und Aufzählungen 19.01.2008

Listen bieten eine hervorragende Unterstützung, wenn es um Gliederungen und Aufzählungen geht. Sie sorgen darüber hinaus für einen übersichtlichen Quellcode. weiter

Link der geöffneten Seite hervorheben 14.01.2008

Für den Besucher ist es oft eine kleine Orientierungshilfe, wenn sich der Link der gerade geöffneten Seite optisch von den anderen hervorhebt. weiter

www.ohne-pi.gehts-gar.net 13.01.2008

Heute geht eine weitere Seite aus der Serie www.gehts-gar.net online: Viele interessante Anleitungen zum Grafik-Programm "PhotoImpact". weiter

Schrift und Text optimieren 13.01.2008

Was nützt der beste und interssanteste Inhalt einer Homepage, wenn der Text nur schwer lesbar ist? Drei kleine Kniffe zeigen, wie man das Texterscheinungsbild optimieren kann. weiter

Vertikale Linien mit CSS kreieren 11.01.2008

Wenngleich es keine offiziellen vertikalen Linien gibt, sind sie per CSS dennoch möglich. weiter

CSS-Code: Übersichtlich, kurz und knackig 10.01.2008

Ein geordneter und knapper CSS-Code erleichtert den Überblick. Die folgenden Tipps zeigen wie's geht. weiter

CSS Tooltip, Infobox oder Popup-Fenster 07.01.2008

Zu einem Begriff ein Info-Fenster mit zusätzlicher Erläuterung einblenden? Das geht auch ohne Java-Script. weiter

Newsboxen, Infoboxen oder Teaser mit CSS formatieren 06.01.2008

Wer kennt sie nicht, die kleinen Infoboxen, Newsboxen oder Teaser. Sie beinhalten meist eine Kurzinfo oder reißen ein Thema an und verlinken zu einem ausführlicheren Bericht. Eine ansprechende Formatierung mit CSS erweckt das Interesse des Lesers. weiter

Die etwas andere Navi 05.01.2008

Optisch sehr ansprechend sind Links, die eine kleine, themenbezogene Grafik mit Hover-Effekt haben. weiter

Störende "Lücke" am unteren Bildrand 03.01.2008

Zwischen einem Bild und und dem nachfolgenden Div erscheint im Internet Explorer eine seltsame Lücke. CSS sorgt für den "Lückenschluss". weiter

Der Internet Explorer zentriert die Seiten nicht 01.01.2008

Alles richtig gemacht und trotzdem macht der Internet Explorer wieder Mucken? Meist fehlt nur der richtige Doctype. weiter

Dreispaltiges Layout mit flexiblen Breiten 01.01.2008

Prozentuale Breitenangaben ermöglichen ein flexibles Layout, das sich unterschiedlichen Bildschirmauflösungen anpasst. weiter

Das Boxmodell und der Internet Explorer 29.12.2007

Daran sind schon viele Hobby-Webmaster gescheitert. Doch der Internet Explorer kann's auch. Man muss ihm nur etwas auf die Sprünge helfen. weiter

Divs auf gleiche Länge bringen: Der Faux-Column-Trick 28.12.2007

Immer wieder ein großes Problem mit den unterschiedlichen Div-Längen: Der Faux-Column-Trick erklärt, wie man man einheitliche Div-Längen unabhängig von der Größe des jeweiligen Inhalts erreicht. weiter

Bilder nebeneinander anordnen 30.12.2007

Das geht grundsätzlich auch ohne CSS. Mit der Float-Angabe ist man jedoch oft flexibler. weiter

Links mit Klassen unterschiedlich formatieren 28.12.2007

Wem ein durchgehend einheitliches Link-Aussehen nicht genügt, der kann Links mit CSS-Klassen unterschiedlich gestalten. weiter

Vertikale Zentrierung 28.12.2007

Hat ein Div eine fixe Höhe und eine fixe Breite, kann man ihn mit wenigen CSS-Angaben sowohl vertikal als auch horizontal zentrieren. Allerdings birgt diese Methode auch einige Nachteile in sich. weiter

Horizontale Zentrierung 28.12.2007

Seiten bzw. Container, die eine fixe Breite haben lassen sich mit CSS recht einfach horizontal zentrieren. weiter

nach oben

Die Fundgruben-Themen
zum Anklicken

nach oben