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
