CSS-Fundgrube mit Tipps, Tricks und Anleitungen

Neue Website aus der Reihe "gehts-gar.net online" 29.06.2012

Heute mal etwas "off topic" und ausnahmsweise Werbung in eigener Angelegenheit: Am 28.06.2012 ging meine neue Kettlebell-Website online. Wer also etwas sportliches Interesse hat: Schaut einfach mal vorbei. www.ohne-kettlebells.gehts-gar.net">

Spalten seitlich einer Website anbringen 01.02.2012

Da ist die zentrierte Website bereits fertig und man will nachträglich noch seitliche Leisten, z.B. für Werbebanner anbringen. Keine Angst! mit nur wenigen Code-Ergänzungen ist auch dies möglich. weiter

Grafiken mit Fließtext umgeben 02.12.2010

Grafiken oder Blockelemente lassen sich mit Fließtext umgeben, ohne dass dieser manuell umgebrochen werden muss. weiter

CSS-Fundgrube als Downloadangebot 15.03.2009

Die komplette "CSS-Fundgrube" gibt ist jetzt auch als Download und ist damit als Offline-Version verfügbar. weiter

Listen mit links- und rechtsbündigem Inhalt 25.10.2010

Ein Inhalts- oder Kapitelverzeichnis mit linksbündigem Text und rechtsbündigen Zahlen innerhalb einer Zeile - mit einer Liste und etwas CSS kein Problem. weiter

Image-Maps mit CSS 24.10.2010

Image-Maps lassen sich auch ausschließlich mit CSS darstellen. Eine schöne Möglichkeit, um Links auf Grafiken einzubinden. weiter

Vier Layout-Beispiele für einen HTML-Quelltext 26.09.2010

Ein Vorteil von CSS besteht darin, ein und den selben HTML-Quelltext unterschiedlich zu formatieren. Je nach CSS-Angaben entstehen dabei unterschiedliche Layouts. weiter

Highslide- und Zoom-Effekt mit CSS 17.09.2010

Um einen Highslide- oder Zoomeffekt zu realisieren, bedarf es nicht unbedingt eines Javascripts. Auch CSS allein macht's möglich. weiter

Tabellen mit CSS formatieren 03.06.2010

Tabellen müssen nicht langweilig wirken. Mit einigen CSS-Formatierungen lassen sie sich ansprechend "tunen" weiter

Fotos mit Vergrößerungseffekt 28.05.2010

Kleine Fotos vergrößert darstellen: Das lässt sich auch ausschließlich mit CSS bewerkstelligen. weiter

Vertikales Basismenü in Listenform 26.11.2009

So macht man Menüs mit CSS: Ein einfaches Basismenü in Form einer Liste, dazu gibt's Grafiktipps zum Aufpeppen. weiter

Notizzettel als Website-Aufpepper 06.11.2009

Für Notizen, wichtige Mitteilungen oder angepinnte Infos bieten Notizzettel einen echten Eyecatcher auf der Website. In einer Co-Produktion mit der grafischen Abteilung zeigen wir wie's geht. weiter

CSS-Fotoalbum 05.09.2009

Für ein kleines Fotoalbum braucht man kein aufwändiges Script. Mit CSS lässt es sich recht einfach auch selbst coden. weiter

Passepartout-Websites 12.08.2009

Zugegeben: Etwas stolz sind wir schon, dass wir die Passepartout-Websites "erfunden" haben. Zumindest dem Namen nach. weiter

Hover-Effekte mit transparenten Grafiken 10.08.2009

Interessante Hovereffekte lassen sich mit transparenten Hintergrundgrafiken erzielen. weiter

Horizontale Zentrierung einer Seite per Body-Formatierung
07.08.2009

Eine horizontale Seitenzentrierung ist auch allein über die Body-Formatierung möglich, ohne dass es eines gesonderten "Wrappers" bedarf. weiter

Vertikales CSS-Ausklapp-Menü 07.08.2009

Eine vertikale Navi, bei der die Links seitlich ausklappen? Auch das ist mit CSS möglich. weiter

Horizontale CSS-Drop-Down-Navigation 05.08.2009

Oft nachgefragt, nun endlich auch in der CSS-Fundgrube: Das horizontale Drop-Down-Menü, auch Ausklapp-Navi genannt. weiter

CSS-Kommentierung per DocBlock 30.07.2009

Eine besondere Variante von CSS-Kommentaren ist der "DocBlock". Damit fallen Dokumentationsanmerkungen gleich ins Auge und bieten nicht nur dem Webmaster eine Hilfe. weiter

Scrollbare Div's und Boxen 05.06.2009

Auf einer Seite ist nur noch wenig Platz und man will an dieser Stelle trotzdem viel Inhalt unterbringen - kein Problem mit scrollbaren Div's. weiter

Horizontale Zentrierung einer gefloateten Listen-Navigation
05.06.2009

Ein Menue horizontal zentrieren, bei dem die Listeneinträge gefloatet sind? Es geht auch ohne Pixel-Rechnen. weiter

Fließtext rund um eine Grafik 17.05.2009

Mit Hilfe eines CSS-Konstrukts lässt sich auch Fließtext um eine Grafik darstellen. weiter

Typische CSS-Fehler 01.04.2009

Diese Fehler sind garantiert schon jedem Webmaster passiert. Wer sie jedoch kennt, kann sie besser beachten und damit vermeiden. weiter

Hovereffekt auf Textblöcke anwenden 14.02.2009

Mit wenigen Tricks lässt sich der "Hover-Effekt" nicht nur einem Link, sondern auch größeren Textblöcken zuweisen. weiter

Schattenränder und Schattenboxen 11.02.2009

Einen besonderen Pepp erhält eine Website durch einen Schatteneffekt an den Rändern. weiter

CSS-Fachliteratur 15.12.2008

Hier gibt es viel CSS-Fachliteratur für Webmaster. weiter
Oder soll's ein Geschenk sein?
Wie wär's mit einem Amazon-Geschenkgutschein?

Aktiven Link bei PHP-includeter Navi hervorheben 24.01.2009

Auch wenn die Navigation per PHP includet ist, lässt sich der Link der jeweils geöffneten Seite hervorheben. weiter

Aktiven Link mit Grafik hervorheben 02.01.2009

Das Thema wurde hier bereits behandelt und erfährt nun eine Erweiterung: Wie kann man den Link einer geöffneten Seite mit einer speziellen Grafik besonders hervorheben. weiter

Bildschirmfüllende Hintergrundgrafik 28.12.2008

Ein häufiges Problem vieler Webmaster: Wie lässt sich eine Hintergrundgrafik unabhängig von der Fenstergröße bildschirmfüllend darstellen. weiter

E-Mail-Adressen mit CSS verbergen 28.12.2008

Mit CSS lässt sich der Code von E-Mail-Adressen verschleiern, was einen gewissen Spamschutz bewirken und die Spamflut eindämmen kann. Allerdings bergen diese Methoden auch Nachteile. weiter

Ein Jahr CSS-Fundgrube 27.12.2008

Die CSS-Fundgrube feiert Geburtstag: Seit einem Jahr ist sie online und bietet mittlerweile über 50 Anleitungen zu verschiedenen CSS-Themen. weiter

CSS-Styleangaben einbinden 20.12.2008

CSS-Styleangaben sollten möglichst in einer ausgelagerten CSS-Datei hinterlegt werden. Diese wird in das HTML-Dokument eingebunden. Es gibt aber auch noch weitere Möglichkeiten. weiter

Seiten-Ruckeln im Firefox 14.12.2008

Mitunter kommt es im Firefox beim Öffnen bestimmter Seiten zu einem kleinen Ruckeln oder "Seitenspringen". weiter

Floatbox wird "unterflossen" 03.12.2008

Der Firefox oder Internet Explorer 8 halten keinen Abstand zu gefloateten Elementen und "unterlaufen" diese. Eigentlich richtig, aber "optisch" falsch. weiter

Externe Links hervorheben 22.11.2008

Damit der Besucher erkennt, welche Links zu externen Seiten führen, kann man derartige Links mit einem Icon kennzeichnen weiter

Zwei Hintergrundgrafiken zuweisen 16.11.2008

Einem Element gleichzeitig zwei Hintergrundgrafiken zuweisen? Das geht nicht. Dennoch gibt es einen Trick, um diese Einschränkung zu umgehen. weiter

CSS-Styleswitcher mit PHP-Script 07.11.2008

Ein und die selbe Seite in unterschiedlichen Layouts anzeigen? Ein CSS-Styleswitcher macht's möglich. weiter

Die Hintergrundgrafik wird nicht angezeigt 26.10.2008

Für ein Element wurde eine Hintergrundgrafik definiert und diese wird trotzdem nicht angezeigt? Das lässt sich meist recht einfach beheben. weiter

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

7 Tage kostenlos testen!

Die Fundgruben-Themen
zum Anklicken

Webhosting preiswert ! - Alfahosting.de

nach oben