CSSGURU.DE » CSS

CSS clearfix

admin — Tue, 22 Jun 2010 16:25:53 +0000

Das Problem mit “float-Elementen” innerhalb eines Container ist, dass diese manchmal “ausbrechen”. Der Grund dafür ist, dass der Float, den Fluss unterbricht und somit das überstehende Element nicht weis wie hoch es sein soll. Da man es eigentlich schlecht erklären kann – hier ein Beispiel was gemeint ist:

Box 1

Box 2

In diesem Beispiel sieht man ganz gut, dass die Box 2 aus der Box 1 ausbricht, obwohl sich diese innerhalb befindet.
Um dieses zu unterbinden kann man entweder ein “clear: both” hinter dem float-element hinzufügen, oder auch den sogenannten “clearfix” benutzen. Das CSS dafür sieh so aus:

.clearfix:after {  /* für Firefox, IE8, Opera, Safari, etc. */
    content: ".";  
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
 
* + html .clearfix { /* für IE7 */
    display: inline-block;
}
 
* html .clearfix { /* für IE6 */
	height: 1%;
}

Und hier das HTML mit der “clearfix” Klasse:

<div class="test_clearfix_box clearfix">
    <p>Box 1</p>
    <div class="float_left_box">Box 2</div>
</div>

Und hier das Ergebniss wie es eignlich aussehen sollte:

Box 1

Box 2

CSS3 Box und Text-Shadow

admin — Tue, 27 Apr 2010 19:33:56 +0000

Firefox und Safari bieten die Möglichkeit an per CSS Schatten-Effekte beim Text oder auch beim Box-Model zu zaubern.
Beim Text-Shadow sieht es so aus:

text-shadow: 2px 2px 2px #000;

Die ersten 2px sind für den Schatten rechts und die nächsten 2px für den Schatten unten.
Danach folgt noch der Abstand in PX und die Farbe des Schatens:

Ich bin ein Text mit Schatten

Beim dem Box-Shadow Effekt siehts ähnlich aus. Man braucht auch hier 3 angeben (Schatten rechts, Schaten unten und der Blur-Effekt)

-moz-box-shadow: 5px 5px 5px #999; /* Firefox hack */
-webkit-box-shadow: 5px 5px 5px #999; /* Safari and Chrome hack */
box-shadow: 5px 5px 5px #999;

Bei dem Beispiel unten habe ich noch ein padding von 10px für den inneren Abstannd hinzugefügt.

Ich bin eine Box mit Schatten

Leider werden diese Eigenschaften (wie immer) von den Internet Explorer nicht ünterstützt.

HTML 5 Layout

admin — Tue, 11 Aug 2009 11:32:47 +0000

Die Arbeit am HTML 5 ist zwar noch nicht abgeschlossen, da es aber von dem W3C-Konsortium vorgestellt und schon von den modernen Browsern unterstützt wird, werde ich in diesem Artikel zeigen wie man ein Seitenlayout mit HTML 5 erstellt.

Als Vorlage werde ich ein einfaches Design wie dieses hier verwenden:

Das HTML 5 Grundgerüst sieht dann wie folgt aus:


<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>HTML5 Layout</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
  </head>
  <body>
  ...
  </body>
</html>

Bis auf den Doctype sieht die Synthax eigentlich nicht viel anders aus als bei einem XHTML/HTML 4 Document.
Um mit der Umsetzung des Layouts weiter zu machen, habe ich noch eine kleine Grafik erstellt, um die Synthax von HTML 5 besser darzustellen:

Jetzt kommt die Struktur:

<div id="doc">
  id="header">
    <h1>HTML5 Layout</h1>
    
      <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
      </ul>
    </nav>
  </header>
  id="content">
    
      <h2>Artikel Überschrift</h2>
      <p>Lorum ipsum...</p>
    </article>
  </section>
  
    <h2>Sidebar</h2>
    <p>Lorum ipsum...</p>
  </aside>
  
    <a href="#">Impressum</a>
  </footer>
</div>

Wie man eindeutig erkennen kann, bekommt die HTML 5 Struktur mehr Symantik. Die einzelnen Elemente wie z.b. Header, Navigation, Sidebar usw. bekommen endlich eigene Tags was auch zu einem schlankerem Code führt. Das eine “div” wird verwendet, um dem Layout eine feste Breite zu verschaffen und um alles zu zentrieren.

Damit jetzt alles Form und Farbe bekommt folgt nun das CSS:

/* HTML5 HACK -------------------------------------- */  
header, section, footer, aside, nav, article {  
	display: block;  
}
 
/* LAYOUT ------------------------------------------ */
 
body {
  background: #fff;
  font-size: 12px;
  font-color: #444;
  font-family: Verdana, Arial, sans-serif;
  margin: 0;
  padding: 0;
}
 
#doc  {
  width: 800px;
  margin: 0 auto;
}
 
/* HEADER & NAVIGATION ------------------------------ */
 
#header {
  background: #333;
  padding: 0 15px;
}
 
#header h1 {
  margin: 0;
  padding: 15px 0;
  color: #A5A5A5;
}
 
#header nav ul {
  list-style-type: none;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
 
#header nav ul li {
  display: inline;
  margin: 0;
  padding: 0;
}
 
#header nav ul li a {
  display: inline-block;
  padding: 2px 10px;
  color: #fff;
  background-color: #CC3366;
  text-decoration: none;
}
 
#header nav ul li.active a,
#header nav ul li a:hover {
  background-color: #fff;
  color: #444;
}
 
/* CONTENT ------------------------------------------ */
 
#content {
  width: 440px;
  padding: 0 15px;
  margin: 0 0 10px 0;
  float: left;
}
 
/* SIDEBAR ------------------------------------------ */
 
aside {
  width: 300px;
  padding: 0 15px;
  margin: 0 0 10px 0;
  float: left;
}
 
/* FOOTER ------------------------------------------ */
 
footer {
  clear: both;
  background: #DDD;
  text-align: right;
  padding: 10px 15px;
  margin: 10px 0 0 0;
}
 
footer a {
  color: #999;
}

Am Anfang des CSS Files befindet sich ein kleiner Hack, damit sich die HTML 5 Elemente (header, section, footer, aside usw.) wie ganz normale Block-Level-Elemente verhalten. Wie es auch bei einem “div” der Fall ist.
Das komplette Ergebniss aus HTML und CSS kan man hier sehen.

Wie schon oben erwähnt befindet sich HTML 5 noch in der Entwicklung und wird zur Zeit leider in nur wenigen Browsern unterstützt. Für den IE gibts halt wie immer Workarounds. Es ist aber gut das man jetzt schon mit HTML 5 arbeiten kann.

Mehr Informationen gibts hier (english):
http://www.w3.org
http://html5doctor.com

Blueprint CSS Framework

admin — Mon, 08 Jun 2009 17:58:43 +0000

Das Blueprint Framework ist vorgefertigtes Gerüst welches einem sehr viel Arbeit abnehmen kann. Es ist ein typografisch angepassten Layout in einem 24 Spalten (Grid) Design mit einer “Reset.css” und einem Stylesheet fürs Drucken. Ansonsten findet man noch ein CSS-File für schöne Formulare und noch ein paar Plugins für Buttons, Tabs und Sprites.
Das tolle an Blueprint ist, dass man in nur wenigen Minuten verschiedene CSS Layouts zusammen bauen kann, welche auf den 24 Grids basieren:

Um es zu verwenden muss man zuerst mindestens die Dateien “screen.css”, für den Internet Explorer die “ie.css” und optional die “print.css” in den Header einbinden. Jetzt kann man z.b. ein ganz einfaches Layout wie dieses hier erstellen:

Hier das Markup:

<div class="container">
    <div class="span-16">
        <h1>Main Content</h1>
    </div>
    <div class="span-8 last">
         <h2>Sidebar</h2>
    </div>
</div>

Wie man sehen kann werden die einzelnen Grids mit der CSS-Klasse “span” definiert.
Zu beachten ist, dass man der letzten Spalte noch ein “last” hinzufügt.

Das obere Beispiel ist natürlich nichts besonderes, will man aber z.b. mehrere Blöcke ineinander verschachteln, merkt man schnell wie hilfreich Blueprint ist.

Und hier das HTML:

<div class="container">
    <div class="span-16">
        <h1>Main Content</h1>
        <div class="span-8">
            <h3>InnerA</h3>
        </div>
        <div class="span-8 last">
            <h3>InnerB</h3>
        </div>
    </div>
    <div class="span-8 last">
        <h2>Sidebar</h2>
    </div>
</div>

Ich hoffe man kann anhand des kurzen Beispiels sehen wozu ein CSS Framework nützlich sein kann.
Ob man es einsetzen soll oder nicht bleibt jedem selbt überlassen, allerdings muss ich sagen dass es die Arbeit an komplexeren Seiten deutlich erleichtert.

Mehr Informationen gibts hier:
http://www.blueprintcss.org

Eine Alternative mit einem “Online-Grid-Baukasten” findest du hier:
http://960.gs

Alternative CSS-Datei für den Internet Explorer

admin — Thu, 12 Feb 2009 16:55:14 +0000

Da der IE in den meisten Fällen HTML Seiten anders als z.b. der Firefox anzeigt, kann man das Problem entweder mit einem Hack, oder mit einer CSS Datei die nur für den IE importiert wird lösen. Diese Methode nennt sich “conditional comments” und ermöglicht einen validen CSS Code für alle Browser.

Ein paar Zeilen Code werden dafür einfach in den “head” Bereich eingebunden:

Beispiel für alle Internet Explorer

Beispiel nur für den IE6

Beispiel nur für den IE7

Beispiel nur für alle IE Browser Versionen unter IE7

Beispiel für alle IE Browser Versionen die entweder IE7 sind oder dadrunter

4 CSS Layouts zum downloaden

admin — Wed, 31 Dec 2008 12:49:26 +0000

Layouts mit CSS und XHTML zu bauen ist ja nicht jedermanns Sache, also habe ich mir gedacht ich mach mal einfach ein paar davon.
Hier das Ergebniss zum kostenlosen Download:

CSS Flashmessage styling

admin — Sun, 19 Oct 2008 17:44:30 +0000

Auf fast jeder Seite wird man früher oder später einer grünen Success- oder einer roten Errormessage begegnen. In diesem kurzem Tutorial werde ich erklären wie man eine Flashmessage wie diese hier erstellt:

Hallo, ich bin eine rote Flashmessage!

Hallo, ich bin eine grüne Flashmessage!

Das HTML dafür ist ein einfaches DIV mit einer CSS-Klasse.

<div class="error_message">Rote Flashmessage!</div>
 
<div class="success_message">Grüne Flashmessage!</div>

Im CSS wird zuerst die Text-, Border- und Backgroundfarbe definiert. Dem “background” wird noch ein Hintergrundbild hinzugefügt welches links 8px und oben 4px abstand hat. Dann kommt noch ein innerer “padding” und ein äusserer “margin-bottom”.

.error_message {
    background: #FFBABA url(error_icn.png) no-repeat 8px 4px;
    border: 1px solid #CB2026;
    color: #CB2026;
    margin: 0 0 20px 0;
    padding: 10px 10px 10px 40px;
}
 
.success_message {
    background: #DFF2BF url(success_icn.png) no-repeat 8px 4px;
    border: 1px solid #359545;
    color: #359545;
    margin: 0 0 20px 0;
    padding: 10px 10px 10px 40px;
}

CSS Blockqotes

admin — Thu, 09 Oct 2008 20:29:38 +0000

Heute werde ich mal ein kurzes Tutorial über das Styling von blockquotes erstellen.
Im großen und ganzen wird das Ergebniss letzendlich so aussehen:

Der erste Vorschlag für Cascading Style Sheets kam 1993 auf, mehrere weitere folgten bis 1995.

Das HTML hierfür sieht ganz einfach aus:

<blockquote>
  <em>Der erste Vorschlag für Cascading Style Sheets kam 1993 auf, mehrere weitere folgten bis 1995.</em>
</blockquote>

Gefolgt vom CSS:

blockquote {
	background: url(images/blockquote_left.gif) no-repeat top left;
	margin: 0 15px;
	padding: 0 0 0 40px;
	color: #999;
	font-size: 140%;
}
 
blockquote em {
	margin: 0;
	padding: 0 30px 0 0;
        background: url(images/blockquote_right.gif) no-repeat bottom right;
	display: block;	
}

Das “blockquote” Tag hat die linke Hintergrundgrafik, welche oben links ausgerichtet wird. Das “em” Tag die rechte. Dazu noch bischen padding damit der Text die Hintergrundgrafik nicht verdeckt.

P.S. Hab noch keine zeit gehabt es unter IE zu testen.

CSS Tabellen

admin — Mon, 21 Jul 2008 18:04:24 +0000

Die Zeiten wo man noch ein Layout mit Tabellen erstellt hat sind vorbei, was nicht heissen soll dass diese nicht mehr benutzt werden. Sie erfüllen andere, wichtige Zwecke und werden nach wie vor gebraucht. Deshalb beschäftigt sich dieser Artikel mit einer einfache Tabelle, welche mit hilfe von CSS gestylt wird. Das Ergbinss sieht dann so aus:

Konsole:	XBOX 360	Playstation 3	WII
CPU:	3 x Power PC Kerne	Cell Prozessor	IBM Power PC
Grafik:	ATI GPU	Nvidia GPU	ATI GPU
Speicher:	512 MB GDDR3	256 MB XDR	24 MB + 64 MB extern
Preis:	249,- Euro	399,- Euro	249,- Euro

Tabellen werden erst seit CSS2 gesondert behandelt und haben eigene CSS-Eigenschaften. Dennoch gibt es auch eine Menge Eigenschaften von CSS1, die sich auf Tabellen, Spalten und Zeilen anwenden lassen. Im meinem HTML werde ich die Tabelle in zwei Segmente teilen: einmal den Tabellenkopf (thead) und den Tabellenbody (tbody). Es gibt noch den Tabellenfooter (tfoot), allerdings lasse ich ihn aus, da er meiner Meinung nach in dieser Struktur keinen Sinn macht. Und so sieht dann das HTML aus:

<table id="simple-table" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <td>Konsole:</td>
      <td>XBOX 360</td>
      <td>Playstation 3</td>
      <td>WII</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>CPU:</strong></td>
      <td>3 x Power PC Kerne</td>
      <td>Cell Prozessor</td>
      <td>IBM Power PC</td>
    </tr>
    <tr class="grey">
      <td><strong>Grafik:</strong></td>
      <td>ATI GPU</td>
      <td>Nvidia GPU</td>
      <td>ATI GPU</td>
    </tr>
    <tr>
      <td><strong>Speicher:</strong></td>
      <td>512 MB GDDR3</td>
      <td>256 MB XDR</td>
      <td>24 MB + 64 MB extern</td>
    </tr>
    <tr class="grey">
      <td><strong>Preis:</strong></td>
      <td>249,- Euro</td>
      <td>399,- Euro</td>
      <td>249,- Euro</td>
    </tr>
  </tbody>
</table>

Im CSS kann ich dann direkt die “thead” ansprechen und so eine andere Hintergrundfarbe zuweisen.
Die CSS-Klasse “grey” benutze ich um jede zweite Zeile mit dem leichtem Grau zu hinterlegen, um es so besser lesbar zu machen:

#simple-table {
  margin: 0 0 10px 0;
  padding: 0;
  width: 100%;
}
 
#simple-table td {
  padding: 5px;
  border-bottom: 1px solid #C0C0C0;
}
 
#simple-table thead td {
  background-color: #333;
  color: #fff;  
  font-weight: bold;
}
 
#simple-table tbody tr.grey td {
  background-color: #EEE;
}

Das war’s auch

CSS Sprites

admin — Wed, 16 Jul 2008 16:35:51 +0000

Die CSS Sprites Technik ist keine Neuerfindung, da es schon zu den alten “Super Mario Brothers Nintendo Zeiten” verwendet wurde. Grössere Webseiten nutzen die Technik um die Ladezeiten zu verringern. Wenn man z.b. Tonnen von JavaScript für Werbung, Tracking und andere Sachen laden muss, versucht man an jeder Ecke zu optimieren. Auch wenn die Ladezeiten nur milisekunden dauern summiert es sich wenn eine Seite ca. 30 Bilder laden muss. Genau da kommen die Sprites zum Einsatz. Es wird versucht auf einer Datei möglichst viele Grafiken unterzubringen und diese danach per CSS zu positionieren ohne das der Anwender etwas davon mitkriegt.

In diesem Artikel werde ich diese unten abgebildete Yahoo-Buttons-Navigation nachbauen und somit versuche die Technik zu erklären:

Hierfür werde ich diese eine Grafik verwenden.

Und jetzt erstmal das HTML. Es wird eine einfache ungeordnete Liste mit 5 Unterpunkten erstellt. Jedes LI Element erhält eine eigene Klasse um nachhher per CSS die Positionierung der entsprechenden Grafik zuordnen zu können.

<ul id="simple-sprite">
  <li class="mail"><a href="#">Mail</a></li>
  <li class="messanger"><a href="#">Messanger</a></li>
  <li class="radio"><a href="#">Radio</a></li>
  <li class="wetter"><a href="#">Wetter</a></li>
  <li class="lokales"><a href="#">Lokales</a></li>
  <li class="horoskop"><a href="#">Horoskop</a></li>
</ul>

Gefolgt vom CSS, im welchem ich zuerst die Liste style.

ul#simple-sprite {
    list-style-type: none;
    float: left;
    width: 370px;
    font-family: Verdana ,Arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 0;
    margin: 0;
}
 
ul#simple-sprite li {
    width: 115px;
    height: 35px;
    display: block;
    float:left;
    margin: 0 5px 5px 0;
    background: #FFF;
    border: 1px solid #B9C0C6;
}

Jetzt bekommt die Klasse “ul#simple-sprite li a” das Sprite als Hintergrund, um es danach mit “background-position” den einzelnen Buttons zuzurodnen:

ul#simple-sprite li a {
    display: block;
    color: #193777;
    background: #fff url(images/sprite_example.jpg) no-repeat top left; /* Sprite */
    padding: 10px 10px 10px 35px;
}
 
/* Und hier die einzelnen Buttons */
 
ul#simple-sprite li.mail a {
    background-position: 5px 10px; 
}
 
ul#simple-sprite li.messanger a {
    background-position: 5px -45px; 
}
 
ul#simple-sprite li.radio a {
    background-position: 5px -95px;	 
}
 
ul#simple-sprite li.wetter a {
    background-position: 5px -145px; 
}
 
ul#simple-sprite li.lokales a {
    background-position: 5px -195px;	 
}
 
ul#simple-sprite li.horoskop a {
    background-position: 5px -248px; 
}

Und fertig:

Interessante Links zum Thema Sprites:
CSS Sprites Quellensammlung (Dr.Web)