Wenn Sie manchmal verschiedenartige Diagramme für die Darstellung bestimmter Statistiken benötigen, machen Sie vielleicht mit irgendeinem Programm ein Bild, welches Sie danach auf Ihrer Webseite/Ihrem Blog veröffentlichen.

Das Problem dabei ist aber folgendes:

Ändern sich Ihre ursprünglichen Daten, müssen Sie natürlich wieder zuerst das Bild neu abspeichern und neu veröffentlichen – ein Vorgang der oft sehr mühsam sein kann. Um auf das Bild verzichten zu können, gibt es diverse CSS Techniken, mit denen Sie auch relativ einfach wunderbare Diagramme erstellen können, welche dann einfacher zu warten sind.

Außerdem verlangsamt jede Grafik die Ladezeiten Ihrer Webseite – der Einsatz von CSS kann Ihnen somit auch helfen, diese zu kurz wie möglich zu halten!

Fertiges Beispiel ansehen [ Grafik oder Link anklicken!]

Super Simple CSS Bar – einfaches CSS-Diagramm

Erstellung der CSS-Diagramme

HTML-Formatierung:

Im Quellcode wird das HTML-Element-<fieldset>, welches normalerweise in Formularen eingesetzt wird, zu Hilfe genommen. In diesem wird danach durch das <legend>-Element die Diagramm-Überschrift festgelegt. Danach erfolgt die Festlegung von 2 <div>-Boxen.

Die div-Box div.progress-container wird mit Hilfe von CSS formatiert, bekommt jedoch auch einen Inline-Style, mit welchem die Gesamt-Breite/Länge des Diagrammes festgelegt werden soll.

In diese div-Box (div.progress-container) wird nun eine leere div-Box eingefügt. In dieser legen Sie mit einem Inline-Stylesheet den Prozentsatz des Diagrammes fest, welches Sie farbig darstellen möchten. Mit der Festlegung der Hintergrundfarbe können Sie hier die Farbe des Diagrammes (%-Anteil) festlegen.

HTML-Beispiel für ein Diagramm-Feld:

1
2
3
4
5
6
7

<fieldset>
<legend>200px 40% orange</legend>
<div class="progress-container" style="width: 200px">
<div style="width: 40%; background: orange;"></div>
</div>
<br/>
</fieldset>

Formatierung der Cascading Style Sheets:

Im CSS legen Sie mit der CSS-Klasse div.progress-container die äußere Form des Diagrammes fest.
Mit der CSS-Regel div.progress-container > div definieren Sie danach die leere div-Box. Mit der Festlegung der Hintergrundfarbe geben Sie dem Diagramm (%) erst das gewünschte Aussehen. Sie können die Hintergrundfarbe aber auch als Inline-Style bereits im HTML-Element <fieldset> definieren (siehe Erklärung zu HTML-Quellcode!)

Stylesheet:

1
2
3
4
5
6
7
8
9
10
11
12

div.progress-container {
  border: 1px solid #ccc; 
  margin: 2px 5px 2px 0; 
  padding: 1px; 
  float: left; 
  background: white;
}
div.progress-container > div {
  background-color: #ACE97C; 
  height: 12px
}
fieldset { margin-bottom: 10px; }

In meinem Beispiel habe ich die Festlegung der Diagramm-Farben absichtlich vermischt, um Ihnen die beiden Möglichkeiten anschaulich vorzuführen. Die beiden ersten Diagramme werden direkt über den CSS-Befehl div.progress-container > div farblich dargestellt. Die Diagramme 3, 4, und 5 hingegen bekommen ihre Farbe über die Inline-Styles.

Fertiges Beispiel ansehen [ Grafik oder Link anklicken!]

Super Simple CSS Bar – einfaches CSS-Diagramm

Quelle: http://blog.leetsoft.com/2006/8/22/super-simple-css-bars

Ähnliche Artikel:

Wie Sie mit CSS schöne Bilderrahmen gestalten können
Wie Sie einen animierten Fortschrittsbalken mit CSS erstellen
CSS/HTML-Tricks: Unterschied zwischen relativer und absoluter Positionierung
CSS/HTML-Tricks: Float mit mehreren div-Boxen
5 Beispiele, wie Sie ungeordnete Listen formatieren können

Auf der Webseite http://www.thewebsqueeze.com habe ich einige interessante Beispiele gefunden, wie Sie mit dem Einsatz der CSS-Eigenschaften border und background schöne und ansprechende Bilderrahmen gestalten können.

Ich möchte Ihnen in den folgenden 6 Beispielen zeigen, wie Sie Grafiken mit Rahmen versehen können. Alle verwendeten Bilder habe ich selber gemalt. Sie können diese neben meinen anderen Kunstwerken in meinem Webalbum picasaweb/sura1119 ansehen.

Download fertige Beispiele (271 KB Zip-Datei)

1.Einfacher Rahmen mit Hintergrund-Farbe

Dies ist die einfachste Variante – sieht aber edel aus. Der Rahmen in der Breite von 1px hat ein padding von 5px und eine Hintergrund-Farbe.

[Fertiges Beispiel ansehen: Grafik anklicken!]

CSS

1
2
3
4
5

#box1 { width: 409px;
        background-color: #efeecb;
        padding: 5px;
        border: 1px solid #4c3c1b;
      }

2. Polaroid-Look

Wenn Sie möchten, dass Ihre Bilder wie Polaroids aussehen, wenden Sie dieses Beispiel an. Es ist praktisch gleich aufgebaut wie Beispiel 1, es gibt nur folgenden Unterschied:

Passen Sie die CSS-Anweisung padding-bottom individuell an und schon ergibt sich der „Polariod-Look“!

[Fertiges Beispiel ansehen: Grafik anklicken!]

CSS

1
2
3
4
5

#box1 { width: 315px;
        border: 1px solid #666;
        background-color: #efeecb;
        padding: 10px 10px 40px 10px;
      }

3. Art Gallery

Durch den doppelten Rahmen und die Hintergrund-Farbe sehen die Bilder aus, als würden sie in einer Art Gallery hängen.

[Fertiges Beispiel ansehen: Grafik anklicken!]

CSS

1
2
3
4
5

#box1 { width: 325px;
        border-style: double;
        background-color: #efeecb;
        padding: 16px;
      }

4. Rahmen Oben und Unten / Linker und rechter Rahmen

Doppelter Rahmen oben und unten (als Alternative rechts und links). Probieren Sie beide Varianten aus und spielen Sie mit den Rahmenfarben.

[Fertiges Beispiel ansehen: Grafik anklicken!]

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/* --- CSS (Rahmen oben und unten): --- */
#box1 { width: 350px;
        background-color: #f8fbf0;
        border-top-width: 4px;
        border-bottom-width: 4px;
        border-top-style: double;
        border-bottom-style: double;
        border-top-color: #E1A60A;
        border-bottom-color: #E1A60A;
        padding: 8px 0px;
      }
 
/* --- CSS (Rahmen links und rechts): --- */
#box2 { width: 350px;
        background-color: #f8fbf0;
        border-left-width: 4px;
        border-right-width: 4px;
        border-left-style: double;
        border-right-style: double;
        border-left-color: #0020ff;
        border-right-color: #0020ff;
        padding: 0px 8px;
      }

5. Bilder mit Schatten

In Beispiel Nummer 5 kommt als Hintergrund die untenstehende Schatten-Grafik [framebox6.jpg] zum Einsatz.

Über bzw. in diese Schattengrafik wird danach das eigentliche Bild eingefügt.

[Fertiges Beispiel ansehen: Grafik anklicken!]

CSS

1
2
3
4
5

#box1 { width: 221px;
        background-image: url(verkleinert/framebox6.jpg);
        padding: 17px;
        border: 1px solid #ddd;
      }

6. Einsatz einer Hintergrundgrafik

Statt einer Hintergrundfarbe habe ich in Beispiel Nummer 6 eine Hintergrund-Grafik (bg2.jpg) eingebaut.

[Fertiges Beispiel ansehen: Grafik anklicken!]

CSS

1
2
3
4
5

#box1 { width: 436px;
        padding: 11px;
        background-image: url(verkleinert/bg2.jpg) repeat;
        border: 1px solid #000;
      }

Download fertige Beispiele (271 KB Zip-Datei)

Quelle: { stylish & co }

Ähnliche Artikel:

Wie Sie eine Bildergalerie nach Nummern nur mit CSS erstellen
Wie Sie einen animierten Fortschrittsbalken mit CSS erstellen
CSS-Tricks: Wie Sie doppelte Rahmen für Bilder/Grafiken erstellen können
CSS Tricks mit Inner Border Images (Rahmen um Grafiken) von Chris Coyier
Zitate mit CSS gestalten – Styling Blockquotes

Ich möchte Ihnen heute ein schönes Beispiel einer tollen Bildergalerie von Stu Nicholls von CSSPlay vorstellen. Diese ist eine ‘CSS only version’, das heißt, dass für die Realsierung der Bildergalerie kein Flash, kein JavaScript oder andere Tricks angewendet wurden, sondern diese alleine mit HTML und CSS realisiert wurde.

Ich habe die Slideshow nach Nummern mit meinen Kunstwerken (Acrylbildern, Collagen etc.) versehen und möchte Ihnen diese Bearbeitung hier präsentieren. Die CSS-Formatierungen dazu finden Sie im Quelltext meines Beispieles.

[Bildergalerie ansehen: Link oder Grafik anklicken!]

Slideshow by numbers – Slideshow nach Nummern

Original von Stu Nicholls ansehen: http://www.cssplay.co.uk/menu/numbergallery.html

Stu Nicholls erklärt zu dieser Slideshow in seiner Info folgendes:

Ich dachte, dass es nett sein würde, eine reine CSS-Version einer Bildergalerie ohne die Verwendung von ’speziellen Effekten’ wie JavaScript oder Flash zu erzeugen, welche aber ein ähnlich gutes Ergebnis liefern.

Wenn Sie mit der Maus über den dunklen Hintergrund fahren, erscheint eine Reihe von 34 Zahlen. Jede dieser Zahlen steht für ein Bild. Fahren Sie mit der Maus über die verschiedenen Zahlen und Sie sehen die entsprechende Grafik als Thumbnail (Minibild).

Mit einem Klick auf eine Zahl sehen Sie dann das dazugehörige Bild. Um das ganze Bild ohne die Zahlenreihe zu sehen, fahren Sie mit der Maus weg vom dunklen Hintergrund!

Die CSS-Bildergalerie arbeitet ohne Einschränkungen in IE6, IE7, IE8, Firefox und Opera. Ein kleines Problem besteht jedoch bei den Browsern von Safari (PC) und Google Chrome. In diesen beiden Fällen müssen Sie, um das Bild in voller Größe anschauen zu wollen, die linke Maustaste auf der jeweiligen Nummer gedrückt halten.

Ähnliche Artikel:

Wie Sie einen animierten Fortschrittsbalken mit CSS erstellen
Webseiten-Überschriften mit CSS als elegante Hingucker
5 Beispiele, wie Sie ungeordnete Listen formatieren können
CSS-Tricks: Listen mit Sonderzeichen
600+ kostenlose CSS Layouts – 600+ Free CSS Layouts

Pure CSS Animated Progress Bar – Animierter Fortschrittsbalken

Ich möchte Ihnen heute in diesem Beispiel mit einer einfachen Demonstration zeigen, wie Sie einen animierten Fortschrittsbalken (animated progress bar) mit HTML und ein wenig CSS herstellen können.

Der Trick ist sehr einfach. Sie benötigen dazu einleitend 3 HTML-Elemente (1 Container und 2 ineinander verschachtelte Elemente).

Beispiel ansehen / Download Beispieldateien (17,5 KB Zip-File)

Das Konzept

Punkt 1:

Zuerst legen wir eine Hintergrund-Grafik (bg_bar.gif) in den Container (Definitionsliste dd bzw. Blockelement p) und definieren eine fixe Höhe und eine fixe Breite.

Punkt 2:

Das HTML-Element span (First Child) fungiert als animierter Fortschrittsbalken (bar.gif).

Punkt 3:

Das HTML-Element em (Second Child) mit der Grafik bg_cover.gif wird danach mit der CSS-Eigenschaft position: absolute genau über der Progress Bar platziert.

Ganz wichtig: Im HTML-Element em wird die Breite des Fortschrittbalkens mit einem Inline-Style festgelegt.

Inline-Styles bieten Ihnen die Möglichkeit, die CSS-Formatierungen ohne die herkömmlichen Selektoren direkt am HTML-Element selbst anzubringen. Sie sind am besten geeignet zur individuellen Formatierung einzelner Elemente.

Dadurch und durch den CSS-Befehl repeat-x entsteht erst der Effekt des Fortschrittsbalken, welcher bei einem bestimmten Prozentsatz stehen bleibt.

Punkt 4:

Fertige Progress Bar (Grafik mit Erläuterungen)

Punkt 5:

In meinem Beispiel sehen Sie den Effekt des Fortschrittsbalkens in 2 verschiedenen Variationen:

1. Fortschrittsbalken – Progress Bar in einer Definitionsliste (dd):

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<dl>
<dt>Marktanteil 90%</dt>
<dd>
<em style="left: 180px;">90%</em>
</dd>
<dt>Toleranzgrenze 10%</dt>
<dd>
<em style="left: 20px;">10%</em>
</dd>
<dt>Bekanntheitsgrad 50%</dt>
<dd>
<em style="left: 100px;">50%</em>
</dd>
</dl>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/* DEFINITION LIST PROGRESS BAR */
 
dt, dd {
   margin:0;
   padding:0;
}
dl { padding: 5px 0 10px 10px;
     margin:0;
     border: 1px solid #000;
     width: 230px;
}
dd {
   width:216px;
   height:41px;
   background:url(bg_bar.gif) no-repeat 0 0;
   position:relative;
}
dd span {
   position:absolute;
   display:block;
   width:200px;
   height:25px;
   background:url(bar.gif) no-repeat 0 0;
   top:8px;
   left:8px;
   overflow:hidden;
   text-indent:-8000px;
}
dd em {
   position:absolute;
   display:block;
   width:200px;
   height:25px;
   background:url(bg_cover.gif) repeat-x;
   top:0;
}

2. Fortschrittsbalken innerhalb des Block-Elementes p:

HTML:

1
2
3

<p class="progressBar">
<em style="left: 50px;">25%</em>
</p>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* SINGLE PROGRESS BAR */
 
.progressBar {
   width:216px;
   height:41px;
   background:url(bg_bar.gif) no-repeat 0 0;
   position:relative;
}
.progressBar span {
   position:absolute;
   display:block;
   width:200px;
   height:25px;
   background:url(bar.gif) no-repeat 0 0;
   top:8px;
   left:8px;
   overflow:hidden;
   text-indent:-8000px;
}
.progressBar em {
   position:absolute;
   display:block;
   width:200px;
   height:25px;
   background:url(bg_cover.gif) repeat-x;
   top:0;
}

Punkt 6:

Animation

Warum funktioniert dies nun also? Natürlich nur, weil hier eine animierte Grafik (bar.gif) zur Anwendung kommt. Das HTML-Element span besitzt eine 200px breite Hintergrund-Grafik, welche sozusagen von „Null“ bis 200px verläuft (animiert). Im HTML-Element em wird danach die Breite der Animation durch einen Inline-Style (left …. px) eingestellt.

Ergebnis

Es ist völlig egal, welchen Prozentsatz Sie auch einstellen, die Grafik bleibt genau bei Ihrer eingestellten Zahl stehen

Punkt 7:

HTML-Element EM: Einstellung der Breite

In meinem Beispiel verwende ich eine 200px breite Progress Bar. Das HTML-Element em hat also auch eine Breite von 200px. Jedes Prozent ist hier dementsprechend 2px breit. 50% bedeutet also 100px, 35% wäre 70px, 90% sind demnach 180px und so weiter.

Beispiel ansehen / Download Beispieldateien (17,5 KB Zip-File)

Zum Original-Artikel:

http://cssglobe.com/post/1468/pure-css-animated-progress-bar

Mein Artikel ist eine autorisierte Bearbeitung bzw. Übersetzung des Artikels von Alen Grakalic von CSS Globe | Web Standard Magazine. Das Original hat den Titel Pure CSS Animated Progress Bar und wurde vom Webdesigner am 27. März 2008 veröffentlicht.

Nähere Informationen zum Autor:

About CSS Globe
Pixelpusher

Alen Grakalic lives in Rijeka, Croatia. He is a freelance web designer and web developer. He is 33 years old and married (wife Natasa and 3 years old son Erik).

Ähnliche Artikel:

CSS/HTML-Tricks: Float mit mehreren div-Boxen
CSS/HTML-Tricks: Unterschied zwischen relativer und absoluter Positionierung
CSS/HTML-Tricks: Der normale Fluss (Flow) von 3 div-Boxen
CSS-Tricks: Wie Sie doppelte Rahmen für Bilder/Grafiken erstellen können
CSS-Tricks: Bereits besuchte Links mit sogenannten Checkmarks extra kennzeichnen
CSS-Tricks: Listen mit Sonderzeichen

Einleitung

Das klassische Einsatzgebiet für die CSS-Anweisung float ist die Positionierung von Grafiken in einem Fließtext.
Lesen Sie dazu die genauen Erläuterungen in Little-Boxes 1 online.

„To Float“ heißt «schweben» – und eine schwebende Box macht 3 Bewegungen: Sie erhebt sich aus dem normalen Fluss, schwebt wie ein losgelassener Heißluftballon in der umgebenden Kiste auf der einen Seite nach oben und driftet dann je nach Windrichtung so weit es geht auf die andere Seite (Zitat: Little Boxes – Teil 1)

Webseiten zur Float-Theorie in CSS:

Auf den unten angeführten 7 Webseiten finden Sie ausführliche Anleitungen, Erklärungen und Beschreibungen über die CSS-Eigenschaft float.

http://little-boxes.de/lb1/13-float-schwebende-boxen.html
http://little-boxes.de/lb1/13.4-floats-mit-mehreren-boxen.html
http://www.thestyleworks.de/tut-art/layout_div_2.shtml
http://jendryschik.de/wsdev/einfuehrung/eigenschaften/ausrichtung-und-elementfluss

http://css.maxdesign.com.au/floatutorial/
http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/#CSS-Basics2
http://www.w3schools.com/CSS/css_float.asp

Floats mit mehreren Boxen

Auf der Grundlage des Artikels Little-Boxes 1 online – 13.1 Text um Bilder fließen lassen von Dozent Peter Müller möchte ich mit ein paar einfachen Beispielen erklären, wie Sie die Float-Theorie in die Praxis umsetzen können. Sie werden danach das manchmal etwas seltsame Verhalten von Floats besser verstehen können.

3 Boxen ohne Float

Die Grundlage für die folgenden Beispiele bilden drei einfache, nicht gefloatete div-Boxen.

HTML:

1
2
3
4
5

<body>
<div id="eins">Box 1</div>
<div id="zwei">Box 2</div>
<div id="drei">Box 3</div>
</body>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

body {
color: black;
background-color: gray;
padding: 0;
margin:0;
}
div {
font-weight: bold;
width: 200px;
height: 50px;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#eins {
background-color: #fff;
}
#zwei {
background-color: #ddd;
}
#drei {
background-color: #aaa;
}

Die 3 div-Boxen haben verschiedene Hintergrundfarben, eine fixe Breite und eine vorgegebene Höhe und sehen so aus:

Wichtig:

Gefloatete Boxen müssen immer eine mit width fix definierte Breite haben. Ohne diese Angabe wird die Breite von div-Boxen unberechenbar. Bei Grafiken ist width nicht nötig, weil sie eine feste Breite haben, bei allen anderen gefloateten Elementen gilt die Faustregel: floaten immer mit der CSS-Anweisung width.

Übung 1: 3 Boxen nach links floaten

In der ersten Übung werden alle 3 Boxen nach links gefloatet. Das CSS wird dafür nur an einer Stelle geändert – die CSS-Formatierung float: left wird hinzugefügt.

CSS:

1
2
3
4
5
6
7
8
9

div {
float: left;
font-weight: bold;
width: 200px;
height: 50px;
padding: 10px;
border: 1px solid black;
margin: 5px;
}

Im Browser stehen die 3 Boxen jetzt nebeneinander und beginnen auf der linken Seite.

Ergebnis Übung 1:

Die erste div-Box schwebt an der rechten Seite der umgebenden Box (hier: body) so weit es geht nach oben und schwebt dann so weit es geht nach links rüber. Jede folgende Box macht genau dasselbe, bis die 3 Boxen nebeneinander stehen.

Übung 2: 3 Boxen nach rechts floaten

In der zweiten Übung floaten Sie die 3 Boxen nach rechts. Dazu müssen Sie im CSS nur ein einzigen Wort ändern – statt float: left steht nun float: right.

CSS:

1
2
3
4
5
6
7
8
9

div {
float: right;
font-weight: bold;
width: 200px;
height: 50px;
padding: 10px;
border: 1px solid black;
margin: 5px;
}

Auch hier stehen die 3 Boxen auch nebeneinander, die Reihenfolge ist jedoch geändert und beginnt auf der rechten Seite im Browser.

Ergebnis Übung 2:

Box 1 ist ganz rechts angeordnet, links daneben steht Box 2 und noch weiter links folgt Box 3. Dies kommt daher, dass Box 1 an der linken Seite des umgebenden Elementes ganz nach oben schwebt und dann soweit wie möglich nach rechts rüber schwebt; die anderen Boxen machen genau dasselbe.

Übung 3: Float und zu wenig Platz im Browserfenster

Sollte eine gefloatete Box im Browserfenster zu wenig Platz finden, springt sie automatisch eine Zeile tiefer. Die folgenden Grafik zeigt die 3 nach links gefloateten Boxen in einem verkleinerten Browserfenster.

Ergebnis Übung 3:

Verkleinern Sie bitte das Browserfenster so weit, bis Box 3 eine Zeile tiefer springt. Wenn Sie das Fenster noch mehr verkleinern, wird Box 2 dies auch tun.

Übung 4: Float und verschieden hohe Boxen

Wenn gefloatete Boxen verschiedene Höhen haben, kann es vorkommen, dass einige Boxen an anderen hängen bleiben. Für das Beispiel habe ich die Höhe von Box 1 auf height: 75px erhöht.

CSS:

1
2
3
4
5
6
7
8
9

div {
float: right;
font-weight: bold;
width: 200px;
height: 75px;
padding: 10px;
border: 1px solid black;
margin: 5px;
}

Bei zu kleinem Browserfenster schwebt Box 3 nicht an den linken Rand, sondern bleibt an Box 1 hängen.

Ergebnis Übung 4:

Um den Effekt sehen zu können, verkleinern Sie das Browserfenster, bis Box 3 an Box 1 hängen bleibt.

Beispieldateien herunterladen (2,9KB – Zip-Datei)

Quellnachweis:

Little Boxes -Teil 1

Webseiten gestalten mit CSS. Grundlagen.
Markt + Technik / 2007 / Dozent Peter Müller

www.little-boxes.de (Peter Müller )
http://little-boxes.de/downloads/beispieldateien.html#beispieldateien (Beispieldateien)

Ähnliche Artikel:

CSS/HTML-Tricks: Unterschied zwischen relativer und absoluter Positionierung
CSS/HTML-Tricks: Der normale Fluss (Flow) von 3 div-Boxen
CSS-Tricks: Bereits besuchte Links mit sogenannten Checkmarks extra kennzeichnen
CSS-Tricks: Listen mit grafischen Aufzählungszeichen
5 Beispiele, wie Sie ungeordnete Listen formatieren können

Basierend auf meinem Artikel CSS/HTML-Tricks: Der normale Fluss (Flow) von 3 div-Boxen vom 24. Oktober 2009 möchte ich Ihnen heute in der Reihe CSS/HTML-Tricks den Unterschied zwischen relativer und absoluter Positionierung erklären.

Die Grundlage zu meinen nachfolgenden Erläuterungen bilden die 3 verkürzten Boxen im Fluss aus dem Beispiel vom 24.10.2009.

3 verkürzte Boxen im Fluss

Der Quellcode bzw. die CSS-Formatierung sieht dazu wie folgt aus:

HTML-Quellcode:

1
2
3
4
5

<body>
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12

body {
color: black;
background-color: gray;
padding: 0;
margin: 0;
}
div  {
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}

[Beispiel ansehen: Grafik oder Demo-Button anklicken!]

Unterschied zwischen absoluter und relativer Positionierung

Die Eigenschaft position legt fest, auf welche Art und Weise die Position einer Box berechnet wird.

Relative Positionierung: relative

Die relative Positionierung mit position: relative; macht 2 Dinge:

• Sie verschiebt die Box von ihrer normalen Position im Fluss.
• Sie markiert den ursprünglichen Platz des Elementes als geschützt

Die anderen Elemente im Dokument verhalten sich so, als ob das Element noch an seinem ursprünglichen Platz im normalen Fluss steht.

HTML und CSS werden für dieses Beispiel ein klein wenig geändert:

HTML-Code:

1
2
3
4
5

<body>
<div id="anders">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

body {
color: black;
background-color: gray;
padding: 0;
margin: 0;
}
div  {
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#anders {
position: relative;
top: 25px;
right: 25px;
background-color: #f3c600;
}

[Beispiel ansehen: Grafik oder Demo-Button anklicken!]

Die Boxen 2 und 3 verändern sich also überhaupt nicht. Bei der relativen Positionierung bleibt die ursprüngliche Position des Elements wie gesagt geschützt und wird nicht von den nachfolgenden Elementen beansprucht.

Ein positioniertes Element bekommt seine genauen Koordinaten mit den CSS-Eigenschaften top, right, bottom und left, die bei der relativen Positionierung von der ursprünglichen Position im Flow aus gemessen werden:

• top: 25px drückt die Box 1 nach unten. An der normalen Position der Box werden oben 25px eingefügt
• right: 25px schiebt die Box 1 nach links, sodass sie zum Teil verschwindet. An der ursprünglichen Position werden rechts 25 Pixel eingefügt.

Alle Angabe sind relativ zur ursprünglichen Position und geben an, wo der Wert eingefügt wird und nicht (!), in welche Richtung die Box geschoben werden soll.

Absolute Positionierung: absolute

Im Gegensatz zur relativen nimmt die absolute Positionierung das Element komplett aus dem Fluss heraus. Das Element wird – bildlich gesprochen – hoch gezogen, und alle anderen Elemente verhalten sich so, als ob es gar nicht da wäre.

Das HTML für dieses Beispiel ist gleich, im CSS wird genau ein Wort geändert. Die CSS-Anweisung position: relative wird durch die Anweisung position: absolute ersetzt.

HTML-Code:

1
2
3
4
5

<body>
<div id="anders">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

body {
color: black;
background-color: gray;
padding: 0;
margin: 0;
}
div  {
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#anders {
position: absolute;
top: 25px;
right: 25px;
background-color: #f3c600;
}

[Beispiel ansehen: Grafik oder Demo-Button anklicken!]

Absolut positionierte Elemente werden aus dem Fluss herausgehoben und liegen über den anderen Elementen.

Die genaue Position wird wieder durch top, right, bottom oder left angegeben, aber die Werte für diese 4 CSS-Eigenschaften orientieren sich nicht mehr an der ursprünglichen Position der Box im Fluss:

Die absolute Positionierung eines Elements bezieht sich auf das nächste umschließende Element, das mit relative, absolute oder fixed positioniert ist.

Falls kein positioniertes umschließendes Element vorhanden ist (kommt in der Praxis häufig vor), erfolgt die Positionierung relativ zum obersten Element des Dokumentenbaumes, und das ist nicht (!) body, sondern html.

Diese beiden Aussagen kann man abschließend wie folgt zusammenfassen:

a) Absolute Positionierung ist relativ zu irgendeinem Bezugspunkt.
b) Es gibt zwei verschiedene mögliche Bezugspunkte: [ein umgebendes, positioniertes Element | das Stammelement html]

Download Beispieldateien | Relative – Absolute Positionierung (1,5KB Zip-Datei)

Quellnachweis:

Little Boxes -Teil 1

Webseiten gestalten mit CSS. Grundlagen.
Markt + Technik / 2007 / Dozent Peter Müller

www.little-boxes.de (Peter Müller )
http://little-boxes.de/downloads/beispieldateien.html#beispieldateien (Beispieldateien)

Ausführliche Informationen zur Positionierung mit CSS:
http://jendryschik.de/wsdev/einfuehrung/eigenschaften/positionierung
http://www.mediaevent.de/tutorial/positionieren.html
http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://www.de.html.net/tutorials/css/lesson14.asp
http://www.thestyleworks.de/ref/position.shtml
http://www.validome.org/doc/HTML_ge/css/eigenschaften/positionierung.htm

Ähnliche Artikel:

CSS/HTML-Tricks: Der normale Fluss (Flow) von 3 div-Boxen
CSS-Tricks: Listen mit grafischen Aufzählungszeichen
Die Gestaltung von Hyperlinks mit Hilfe von CSS – Teil 1
Die Gestaltung von Hyperlinks mit Hilfe von CSS – Teil 2
CSS-Tricks: Bereits besuchte Links mit sogenannten Checkmarks extra kennzeichnen
CSS Tricks mit Inner Border Images (Rahmen um Grafiken) von Chris Coyier

Begriffserläuterung: Document Flow

1.Ein einzelnes Element wird soweit wie möglich links und oben positioniert.

2.Wenn weitere Elemente dazu kommen, werden diese jeweils rechts davon angeordnet, und zwar so lange, bis kein Platz mehr vorhanden ist.

3.Wenn rechts kein Platz mehr ist, rutschen sie eine Zeile tiefer und beginnen wieder ganz links.

Erst durch die Wirkung des Flows werden Webseiten flexibel und können von den Webdesignern wie von Architekten geplant und aufgebaut werden.

a) Der normale Fluss der Boxen

Ich möchte Ihnen an Hand eines kleinen Beispieles zeigen, wie der Flow funktioniert und wie sich die <div>-Boxen auf einer Webseite verhalten.

3 Boxen im Fluss

Schauen Sie sich folgendes HTML und CSS an:

HTML-Quellcode

1
2
3

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12

body {
color: black;
background-color: gray;
padding: 0;
margin: 0;
}
div  {
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}

Weil <div> ein Block-Element ist, stehen die 3 Kästen untereinander, auch wenn sie nur wenig Inhalt haben.

[Beispiel ansehen: Grafik oder Demo-Button anklicken!]

Ein Block-Element nimmt immer die verfügbare Breite des Eltern-Elements ein, in diesem Falle also von body.

Unterschied zwischen Block-Element und Inline-Element

Block-Elemente erzeugen eine neue Zeile im Textfluß und können zum vorherigen und zum nachfolgenden Element einen größeren Abstand aufweisen. Sie sind im Textfluß somit immer untereinander angeordnet.
Block-Elemente können Text, Inline- und je nach Element auch weitere Block-Elemente enthalten.

Inline-Elemente erzeugen im Gegensatz dazu keine neue Zeile und sind im normalen Textfluß immer nebeneinander angeordnet. Es sei denn, sie sind zusammen breiter als das übergeordnete Element. Dann wird eine weitere Zeile eingefügt. Inline-Elemente dürfen Text und weitere Inline-Elemente aber in der Regel keine Block-Elemente enthalten.

Weitere Infos: CSS4You

b) 3 verkürzte Boxen im Fluss

Im nächsten Schritt werden die drei div-Geschwister mit width auf 20% verkürzt. Alles andere bleibt unverändert.

Geänderte CSS-Formatierung

1
2
3
4
5
6
7

div  {
      width: 20%;
      background-color: white;
      padding: 10px;
      border: 1px solid black;
      margin: 5px
  }

[Beispiel ansehen: Grafik oder Demo-Button anklicken!]

Auch die verkürzten <div>-Boxen stehen weiterhin untereinander (Grafik 2). <div> ist ein Block-Element, und Block-Elemente haben einen integrierten Zeilenumbruch. Mit der CSS-Eigenschaft widht wurden die Boxen zwar verkürzt, der Zeilenumbruch bleibt aber bestehen.

Dieses Verhalten der Boxen im Flow wird im CSS auch position: static bezeichnet. So hat gerade die Positionierung, die dem natürlichen Fluss der HTML-Elemente freien Lauf lässt, den Namen static erhalten.

Download 3 Boxen im Fluss | 3 verkürzte Boxen im Fluss – Beispieldateien (9,8KB Zip-Datei):

Quellnachweis:

Little Boxes -Teil 1

Webseiten gestalten mit CSS. Grundlagen.
Markt + Technik / 2007 / Dozent Peter Müller

www.little-boxes.de (Peter Müller )
http://little-boxes.de/downloads/beispieldateien.html#beispieldateien (Beispieldateien)

Ähnliche Artikel:

CSS-Tricks: Listen mit grafischen Aufzählungszeichen
Die Gestaltung von Hyperlinks mit Hilfe von CSS – Teil 1
Die Gestaltung von Hyperlinks mit Hilfe von CSS – Teil 2
CSS-Tricks: Bereits besuchte Links mit sogenannten Checkmarks extra kennzeichnen
CSS Tricks mit Inner Border Images (Rahmen um Grafiken) von Chris Coyier

In meinem heutigen Artikel möchte ich Ihnen zeigen, wie Sie mit CSS doppelte Rahmen für Bilder/Grafiken erstellen können.

Den englischsprachigen Original-Artikel zu diesem Tutorial finden Sie unter http://cssglobe.com/post/1330/custom-double-solid-borders-for-images.

Fertige Beispiele ansehen | Download Beispieldateien (16,8 KB)

Vielleicht denken Sie bei doppelten Bilderrahmen daran, die CSS-Anweisung {border-style:double} einzusetzen. Ich würde Ihnen vom Gebrauch dieses CSS-Befehls abraten, da dieser nur sehr schwer zu kontrollieren ist.

Stellen Sie sich eine Situation vor, wo Sie für eine Grafik einen äußeren Rahmen mit 3px und der Farbe ‘Grün’ und einen inneren Rahmen mit 1px und der Farbe ‘Gelb’ festlegen möchten. Mit {border-style:double} können Sie dies nicht bewerkstelligen.

Der Trick:

Um dies doch zu realisieren, verwende ich für den äußeren Rahmen den CSS-Befehl border. Der innere Rahmen wird nur vorgetäuscht und setzt sich zusammen aus den CSS-Anweisungen background und padding.

Zuerst bekommt das Bild mit CSS einen Rahmen von 2px

1
2
3

img{
        border:2px solid #72a143;
}

Wenn man nun für die Grafik ein Padding von 1px einsetzt und mit der Hintergrund-Farbe (background) Gelb ergänzt,

1
2
3
4
5

img{
        border:2px solid #72a143;
        padding:1px;
        background:#ffeda5;
}

erhält das Bild einen „zusätzlichen Rahmen“ innerhalb des tatsächlichen Rahmens.

Anleitung für Beispiel Nummer 1 – Beispiel Nummer 3

In meinen 3 Beispielen verwenden ich einmal die Rahmen-Farbe ‘Grün’, einmal die Farbe ‘Blau’; im 3. Beispiel wird ein ‘Schatten’ für die Grafik vorgetäuscht.

Vorstellung Beispiel 1 – Rahmen Grün:

HTML-Quellcode:

1

<a href="#"><img class="image1" src="image.jpg" alt="image" /></a>

CSS:

1
2
3
4
5

.image1{
        border:2px solid #72a143;
        padding:1px;
        background:#ffeda5;
}

Vorstellung Beispiel 2 – Rahmen Blau:

HTML-Quellcode:

1

<a href="#"><img class="image2" src="image.jpg" alt="image" /></a>

CSS:

1
2
3
4
5

.image2{
        border:2px solid #0055c2;
        padding:1px;
        background:#fff;
}

Vorstellung Beispiel 3 – Vorgetäuschter Schatten

HTML-Quellcode:

1

<a href="#"><img class="image3" src="image.jpg" alt="image" /></a>

CSS:

1
2
3
4
5

.image3{
        border:2px solid #eee;
        padding:2px;
        background:#ccc;
}

Fertige Beispiele ansehen | Download Beispieldateien (16,8 KB)

Ähnliche Artikel:

CSS-Tricks: Bereits besuchte Links mit sogenannten Checkmarks extra kennzeichnen
CSS-Tricks: Listen mit Sonderzeichen
CSS-Tricks: Listen mit grafischen Aufzählungszeichen
Wie Sie mit CSS sogenannte “Spazierende Links” erstellen können
5 Beispiele, wie Sie ungeordnete Listen formatieren können

Fertiges Beispiel ansehen | Download Beispieldateien (42,8KB)

Abgehakt – Kennzeichnung von besuchten Links | Visited Links

Eine ewige Diskussion unter Webdesignern zum Thema Benutzerfreundlichkeit von Internetseiten ist die Frage, ob man bereits besuchte Links (visited Links) kennzeichnen sollte oder nicht.

Bei kleinen und übersichtlichen Webseiten ist es meiner Meinung nach nicht notwendig, die gerade besuchten Links extra zu kennzeichnen. Wenn Sie jedoch eine große Linkliste ( wie zum Beispiel forwebdesigners.com; überhaupt keine Kennzeichnung!) besuchen und dort die einzelnen Punkte abarbeiten wollen, werden Sie schon bald die Übersicht verlieren. Schon nach einigen besuchten Links wissen Sie kaum mehr, welche Seiten Sie nun schon aufgerufen haben und welche nicht.

Sie können natürlich die besuchten Links farblich anders gestalten oder mit unterstreichen
bzw. nicht unterstreichen formatieren, doch auch hier werden Sie nach einiger Zeit nicht mehr genau wissen, welche Farbe die noch nicht besuchten und welche die bereits besuchten Links kennzeichnet.

Es gibt jedoch eine elegante und einfache Art, besuchte Links mit Grafiken auszustatten. Sie nehmen so genannte checkmarks (Häkchen) oder auch andere Grafiken mit transparentem Hintergrund und platzieren diese links oder rechts neben den visited Links. Sehen Sie dazu die folgenden 2 Tutorials!

Tutorial 1: Visited Links von CSS-Tricks

Chris Coyier von CSS-Tricks erklärt in seinem Artikel Put Checkmarks Next To Visted Links With Pure CSS wie man mit Einsatz von Checkmarks (Häkchen) bereits besuchte Links mit Grafiken ausstatten kann.

Visited Links von Chris Coyier ansehen: Grafik anklicken

Tutorial 2: Kennzeichnung von besuchten Links auf ge.webdesign.de

Zusätzlich möchte ich Ihnen die Webseite ge.webdesign.de empfehlen, wo Sie ein tolles Tutorial über die Kennzeichnung von besuchten Links finden.

Demoseite ansehen: Grafik anklicken

Mein Beispiel auf sura1.at

Auf der Grundlage dieser beiden Tutorials habe ich selber ein kleines Beispiel zum Thema Visited Links erstellt, welches ich Ihnen nachfolgend vorstellen möchte:

Fertiges Beispiel ansehen (Grafik anklicken!)

CSS-Formatierung:

Das Häkchen ist ein kleines gif, 11 x 11px mit transparentem Hintergrund, für die Schriftgrösse 1.5em. Das Aussehen der Visited Links definiere ich mittels CSS:

1
2
3
4
5
6
7
8
9
10

/* ===============================
   2. Formatierung der Hyperlinks
   =============================== */
a, a:link { color: #FFFF00;
	   text-decoration: none;}
a:visited { padding-left: 14px;
	   background: url(checkmark2.gif) left no-repeat;
	   color: #c0ff00; }
a:hover { text-decoration: underline; }
a:active { color: green;}

Es ist meist sinnvoll, diese Definition auf bestimmte IDs zu beschränken, so dass Links im Kopf oder im Fuss der Seite weiterhin normal angezeigt werden.

Fertiges Beispiel ansehen | Download Beispieldateien (42,8KB)

Besuchte Hyperlinks wieder unbesucht machen

Beim Testen Ihrer Seiten sind früher oder später alle Links besucht. Um diese wieder unbesucht zu machen, müssen Sie den Verlauf bzw.die History Ihres Browsers löschen.

Im Firefox geht dies jedoch viel einfacher mit dem Add-on Web Developer; dort finden Sie im Menü Verschiedenes zu diesem Zweck das Untermenü besuchte Links. Klicken Sie dort auf die Leiste alle Links als nicht besucht.

Ähnliche Artikel:

Zitate mit CSS gestalten – Styling Blockquotes
Wie Sie mit CSS sogenannte „Spazierende Links“ erstellen können
CSS Tooltip mit vertikaler Navigation – CSS Vertical Navigation with Teaser
Free CSS Templates – mehr als 12.000 kostenlose Webseitenvorlagen
Schöner “Scrolling – Trick” mit CSS-Eigenschaft “background-attachment: fixed”

Auf der Webseite www.little-boxes.de habe ich ein interessantes Beispiel gefunden, wie man mit Sonderzeichen eine ungeordnete Liste <ul>…..</ul> optisch aufwerten kann.

Ich habe die Vorlage als Grundlage für meine Bearbeitung genommen. Dabei wurden von mir sowohl die CSS-Dateien als auch der HTML-Quellcode an diese Variante angepasst.

Fertiges Beispiel ansehen – Grafik anklicken!

Das Listen-Beispiel befindet sich in den Übungsdateien von Little Boxes Teil 02 und kann unter www.little-boxes.de/Beispieldateien heruntergeladen werden (4,3Mb ZIP-Datei; ca. 100 Beispiele!).

HTML-Quelltext:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<h2>Liste mit Sonderzeichen</h2>
<div class="liste">
<ul>
   <li><span>&ndash; </span>Kisten erstellen</li>
   <li><span>&ndash; </span>Kisten gestalten</li>
   <li><span>&ndash; </span>Kisten positionieren</li>
</ul>
</div>
 
<div class="liste">
<ul>
   <li><span>&mdash; </span>Kisten erstellen</li>
   <li><span>&mdash; </span>Kisten gestalten</li>
   <li><span>&mdash; </span>Kisten positionieren</li>
</ul>
</div>
<div class="liste">
<ul>
   <li><span>&rArr; </span>Kisten erstellen</li>
   <li><span>&rArr; </span>Kisten gestalten</li>
   <li><span>&rArr; </span>Kisten positionieren</li>
</ul>
</div>
<div class="liste">
<ul>
   <li><span>&hArr; </span>Kisten erstellen</li>
   <li><span>&hArr; </span>Kisten gestalten</li>
   <li><span>&hArr; </span>Kisten positionieren</li>
</ul>
</div>
</div>

CSS-Formatierung

1
2
3
4
5
6
7
8
9
10
11
12
13
14

ul li {
   list-style-type: none;
   padding: 0 ;
   margin: 0 ;
  }
.liste {
   background-color: #DFDFDF;
   padding: 1px 0;
   margin: 4px 0;
   border: 1px solid #000;
  }
 
/* Der Trick: Aufzählung mit negativem margin nach links rücken */
ul li span { margin-left: -1em; }

Ähnliche Artikel:

CSS-Tricks: Listen mit grafischen Aufzählungszeichen
CSS Tricks mit Inner Border Images (Rahmen um Grafiken) von Chris Coyier
Webseiten-Überschriften mit CSS als elegante Hingucker
Wie Sie mit CSS sogenannte „Spazierende Links“ erstellen können
CSS-Tipps und Tricks: Textmarker
CSS-Tricks: Multiple Remote Linking #2