Sammelthread für Tutoriale und Codehilfen

HR-Elemente formschoen auszeichen

Hier zeig ich euch, wie ihr die horizontale Linie am unteren Rand eurer Seite formschoen gestalten koennt.

Das brauchen wir dazu:

[*]euren Lieblingsbrowser (*). [*]einen Texteditor (*). ( fuer unsere Zwecke tut es Notepad ) [*]ein simples Malprogramm (*). ( hier reicht eigentlich Paint ) [*]kuenstlerisches Talent - mehr oder weniger. [*]last but not least, das kleine bisschen Motivation & Mut um euch auszuprobieren. [/LIST]

Erste Schritte:

• Browserkompatibilitaet:
• Schwierigkeitsgrad:
[/LIST]

Als erstes kuemmern wir uns um die einfache - nicht grafische - gestaltung. Ich werde immer erst den Code posten, im Anschluss die Ausgabe und danach die dazugehoerige Erklaerung. Ist eigentlich recht simpel. Viel Spass also:

<style type="text/css" media="screen">
    hr {
       border: none;   /* Rahmen aus */
       color: #f00;    /* Farbe: rot */
       width: 50%;     /* Breite     */ 
    }
</style>

So sieht das dann aus:

---

Erklaerung:

Mit der ersten Definition border: none;, sagen wir dem Browser, dass wir keinen Rahmen haben, den den setzten manche Browser und dann sieht es wirklich nicht gut aus. In der zweiten Definition color: #f00;, legen wir fuer unser hr-Element eine rote Farbe fest. Hier koennten wir anstatt des Hex-Wertes auch red schreiben. In der dritten Definition width: 50%;, bestimmen wir eine prozentuale Breite. Hier bitte aufpassen, denn dieser Wert bezieht sich immer auf ein Element, dass vorher eine Breite zugewiesen bekommen hat. Haben wir z.B. ein Element das wie auf unseren HPs das 600px gross ist, wird das hr-Element 50% dieser Breite beziehen, was laut Adam Riess 300px sind. Diese Art der Breitennotation kann sehr kompliziert werden, weshalb man lieber bei der Breitenangabe mit Pixel (px) bleiben sollte. Hier hab ich das nur mal angewand um auf die Problematik anzusprechen.

Hier gibt es dann natuerlich auch noch andere Moeglichkeiten, die nur in eurer Phantasie eine Begrengunf finden koennten. Hier noch ein - nicht grafisches - Beispiel, mit dazugehoerigem Quellcode:

<style type="text/css" media="screen">
    hr {
       border: 3px dotted #0f0; /* Rahmen: 3px breit, gepunktet & gruen */
       height: 25px;            /* Hoehe                                */
       background: #ff0;        /* Hingergrundfarbe: gelb               */
    }
</style>

So sieht das dann aus:

---

Erklaerung:

Hier ist es im Prinzip genau das gleiche wie oben ausser, dass wir hier eine 3px breiten Rahmen haben, der gruen #0f0 und gepunktet dotted ist. Wir weissen dem hr-Element noch eine Groesse von 25px zu und setzen den Hintergrund auf gelb #ff0. Rot und Gruen zusammengemischt, ergibt doch Gelb ;). Ansonsten koennt ihr hier mit den verschiedenen Bordereinstellungen spielen um zu probieren, was hier noch alles moeglich ist.

---

Ende Sektion eins

---

Grafische <hr />-Tags:

• Browserkompatibilitaet:
• Schwierigkeitsgrad:
[/LIST]

Als Erstes, solltet ihr in euer Malprogramm gehen und euch dort irgendetwas gestalten, dass huebsch ist und euch gefaellt. Ich wollt mir jetzt nicht allzu viel Muehe machen und hab mir einfach mal eines der grafischen Beispiele vom Smashing Magazine(*) hergenommen um euch anhand dieses Beispiels zu zeigen, dass auch ganz andere Moeglichkeiten gegeben sind als nur die Linie (ob jetzt gepunktet, gestrichelt oder durchgezogen) an sich zu gestalten.

<style type="text/css" media="screen">
    hr {
       background: url('http://i42.tinypic.com/2pyazaf.png') no-repeat;
       border: none;            /* Rahmen: keinen    */
       height: 79px;            /* Hoehe der Grafik  */
       width: 600px;            /* Breite der Grafik */
    }
</style>

So sieht das dann aus:

Wie gesagt 'for the sake of time', wie es so schoen im Englischen heisst, verwende ich diese Grafik hier: Es gibt auch ein ganzes Paket vom Smashingmagazine mit solchen Grafiken, die man zu Testzwecken auch benutzen darf. Den Link findet ihr im Anhang.

Erklaerung:

Hier setzten wir erstmal unser Bild mittels background und geben diesem ein no-repeat mit, damit es sich nicht wiederholt. Es waere zwar nicht unbedingt notwendig, weil wir im naechsten Schritt ein width: 600px; und height: 79px; mitgeben, dass eine exakte Breite und Hoehe angibt, sodass es sich unsere Hintergrundgrafik nicht mehr wiederholen kann aber sicher ist sicher. Hier muessen wir den Rahmen ganz entfernen, denn der Opera und Firefox wuerden einen zumeist schwarzen Rahmen um das hr-Tag generieren, was wir aber in unserem Fall gar nicht wollen, deshalb schmeissen wir es ueber border: none; ganz graus. Bei der Breite und Hoehe, muesst ihr noch genau auf die Abmessungen eurer Grafik achten, denn ansonsten kann es entweder zu klein oder zu gross werden, was nicht immer gewollt ist.

So und jetzt noch ein letztes, besonderes Beispiel.

• Browserkompatibilitaet:
• Schwierigkeitsgrad:
[/LIST]

<style type="text/css" media="screen">
    hr {
       background: url('http://i41.tinypic.com/28ldiqw.jpg') no-repeat center;        
       border: none;            /* keinen Rahmen    */
       height: 103px;            /* Hoehe der Grafik */
    }

    hr:before {
       content: ''; /* automatische generierung von Inhalt */
       background: url('http://i41.tinypic.com/28cmw0h.jpg') repeat-x bottom;        
       display: block;
       height: 100%;           /* prozentuale Hoehe */
       width: 100%;          /* prozentuale Breite */
    }
</style>

So sieht das dann aus:

Das ist eine Grafik ueber einer Grafik, die eine wiederholt sich, die andere ist zentriert und statisch, wiederholt sich also nicht.

---

Erklaerung:

Als erstes, gestalten wir - wie nun schon gewohnt - unser eigentliches hr-Element, indem wir ihm wieder einen Hintergrund mittels background geben. Die zwei, zusaetzlichen Werte sind zum einen: das no-repeat, was der Hintergrundgrafik sagt, dass es sich nicht wiederholen soll und zum anderen: das center - das bewirkt eine zentrierte Darstellung, sowohl in der Horizontalen als auch in der Vertikalen. Als naechstes vergeben wir eine Hoehe, diese muss genau so gross sein wie unsere vorgefertigte Grafik. Was wir hier aber nicht machen werden ist eine Breite zu vergeben, denn das hr hat den Ausgangswert von 100%, weshalb das fuer uns jetzt auch keine Rolle spielt. Der naechste Abschnitt ist interessant und auch dafuer verantwortlich, dass der Internet Explorer hier kapituliert. Er beherrscht unser Pseudoelement :before nicht. Diese 'falshe'Element sorgt dafuer, dass das Gras sich ueber die ganze Breite wiederholt. Mit content:''; erzeugen wir Inhalt - auch wenn es in diesem Fall gar kein Inhalt ist -bzw. leerer Inhalt, so ist es doch Inhalt, ich weiss isn bissel kompliziert aber nehmt es einfach mal so hin. Der Hintergrund wird mittels background erzeugt, erhaelt hier allerdings ueber repeat-x den Befehl sich ueber die x-Achse also die Horizontale zu wiederholen. Der Hintergrund wiederholt sich so lange, bis er an seine berechneten 100% kommt. Auch muss darauf geachtet werden, dass wir unsere Pseudoelement immer als Blockelement display: block; auszeichnen, ansonsten seht ihr nix. So das war es dann vorerst einmal. Bis zum naechsten Tutorial.

---

Legende

---

[*]

Browserkompatibilitaet:

alle Browser werden Unterstuetzt:

ohne Explorer-Unterstuetzung:

ohne FireFox-Unterstuetzung:

ohne Opera-Unterstuetzung:

ohne Safari-Unterstuetzung:

[*]

Referenzen:

Zeichenprogramme:The Gimp, Adobe, IncScape, Paint.NET

Editoren:Notepad2 PSPad, jEdit, textMate, e

Ref-Seiten:SmashingMagazine, CSS4You, LANtastic

TutSeiten:W3C, A List Apart, The Styleworks

Downloads:hr-Grafiken

[/LIST]
[*]

Anmerkungen:

Sollte etwas mal nicht so funktionieren wie hier beschrieben, dann bitte eine /m an mich. Mit einer genauen Beschreibung dessen, was nicht funktioniert und unter welchen Bedingen ( Browser, Betriebssystem, Testcase usw. ) Meine Grafiken ( Ueberschrift, letztes Beispiel & Browsergrafiken plus Schwierigkeitsgrade ) duerfen frei verwendet werden. Wie es bei den Grafiken vom Smashing Magazine bezueglich Veraenderungen u.Ae. steht weiss ich nicht, darum muesst ihr euch selber kuemmern.

[*]

Schwierigkeitsgrade:

leicht:

mittel:

schwer:

[/LIST]

---