Hilfe:Rahmen und Farben: Unterschied zwischen den Versionen
| (3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
===Rahmen=== | ===Rahmen=== | ||
| − | Wie mache ich einen Rahmen? | + | ====Wie mache ich einen Rahmen?==== |
z.B. sieht so der Quelltext aus: | z.B. sieht so der Quelltext aus: | ||
<pre> | <pre> | ||
| − | <div style="border: | + | <div style="border: 5px dotted green; padding: 5px; margin: 0px 300px 0px 100px;background-color:#f8f8ff;"> |
| + | :Na ihr Plinsen. Heute noch gar nicht´s verändert? | ||
| + | </div> | ||
</pre> | </pre> | ||
| + | |||
| + | :Das sieht dann z.B. so aus: | ||
| + | |||
| + | <div style="border: 5px dotted green; padding: 5px; margin: 0px 300px 0px 100px; background-color:#f8f8ff;"> | ||
| + | :Na ihr Plinsen. Heute noch gar nicht´s verändert? | ||
| + | </div> | ||
| + | |||
| + | :Erklärung: | ||
* style: border - Fenster oder Umrandungslinie | * style: border - Fenster oder Umrandungslinie | ||
| − | ** 1px dotted | + | ** 1px dotted green - 1Pixel stark gepunktete grüne Umrandung |
| − | * padding: | + | *** oder: 1px solid green - 1Pixel stark durchgezogene Linie grüne Umrandung |
| − | ** 5px - | + | * padding: - Abstand |
| − | * margin: - | + | ** 5px - Abstand zwischen Rand und Text d.h. 5 pixel Abstand zum Rand ringsum |
| + | * margin: - Begrenzungswerte des Rahmens vom Seitenrand | ||
| + | ** 0 - Abstand nach oben zum vorhergehenden Text | ||
| + | ** 300 - Abstand vom rechten Rand | ||
| + | ** 0 - Abstand nach unten zum nachfolgenden Text | ||
| + | ** 100 - Abstand vom linken Rand | ||
| + | *** oder: margin-right:300px - d.h. nur ein abstand von rechten Rand von 300 pixeln | ||
| + | *background-color: - Farbe | ||
** #f8f8ff - Farbnummer | ** #f8f8ff - Farbnummer | ||
| + | |||
| + | ====Wie mache ich zwei oder mehrere Rahmen nebeneinander?==== | ||
| + | z.B. sieht so der Quelltext aus: | ||
| + | <pre> | ||
| + | <div style="border:1px solid grey; width:45%; padding:5px; float:left; background-color:magenta; height: 20px"> | ||
| + | * wurst | ||
| + | * käse | ||
| + | * gemüse | ||
| + | </div> | ||
| + | div style="border: 1px solid grey; width: 30%; margin-left: 65%; padding: 5px;background-color:orange; height: 75px"> | ||
| + | * saft | ||
| + | * bier | ||
| + | * wein | ||
| + | </div> | ||
| + | </pre> | ||
| + | |||
| + | :Das sieht dann z.B. so aus: | ||
| + | |||
| + | <div style="border:1px solid grey; width:30%; padding:5px; float:left; background-color:magenta; height: 75px"> | ||
| + | * wurst | ||
| + | * käse | ||
| + | * gemüse | ||
| + | </div> | ||
| + | <div style="border: 1px solid grey; width: 30%; margin-left: 65%; padding: 5px;background-color:orange; height: 75px"> | ||
| + | * saft | ||
| + | * bier | ||
| + | * wein | ||
| + | </div> | ||
| + | |||
| + | :Erklärung: | ||
| + | * style: border - Fenster oder Umrandungslinie | ||
| + | ** 1px solid grey - 1Pixel stark durchgezogene Linie graue Umrandung | ||
| + | * padding: - Abstand | ||
| + | ** 5px - Abstand zwischen Rand und Text d.h. 5 pixel Abstand zum Rand ringsum | ||
| + | *float: left - am linken rand postiert(fliessend) | ||
| + | * margin-left: - Begrenzungswerte des Rahmens vom linken Seitenrand | ||
*background-color: - Farbe | *background-color: - Farbe | ||
| − | ** | + | ** orange,magenta - Farbe |
| − | + | *es sind auch Hexadezimalfarben möglich, einfach den code angeben, z.B.: | |
| − | + | ** weiss - #FFFFFF | |
| + | ** rot - #FF0000 | ||
| + | *alle Farben mit Nummern gibts [http://de.selfhtml.org/helferlein/farben.htm hier] | ||
| − | + | ====Wie mache ich einen Rahmen in einem anderen Rahmen?==== | |
| − | + | z.B. sieht so der Quelltext aus: | |
Aktuelle Version vom 30. Dezember 2006, 10:29 Uhr
Rahmen
Wie mache ich einen Rahmen?
z.B. sieht so der Quelltext aus:
<div style="border: 5px dotted green; padding: 5px; margin: 0px 300px 0px 100px;background-color:#f8f8ff;"> :Na ihr Plinsen. Heute noch gar nicht´s verändert? </div>
- Das sieht dann z.B. so aus:
- Na ihr Plinsen. Heute noch gar nicht´s verändert?
- Erklärung:
- style: border - Fenster oder Umrandungslinie
- 1px dotted green - 1Pixel stark gepunktete grüne Umrandung
- oder: 1px solid green - 1Pixel stark durchgezogene Linie grüne Umrandung
- 1px dotted green - 1Pixel stark gepunktete grüne Umrandung
- padding: - Abstand
- 5px - Abstand zwischen Rand und Text d.h. 5 pixel Abstand zum Rand ringsum
- margin: - Begrenzungswerte des Rahmens vom Seitenrand
- 0 - Abstand nach oben zum vorhergehenden Text
- 300 - Abstand vom rechten Rand
- 0 - Abstand nach unten zum nachfolgenden Text
- 100 - Abstand vom linken Rand
- oder: margin-right:300px - d.h. nur ein abstand von rechten Rand von 300 pixeln
- background-color: - Farbe
- #f8f8ff - Farbnummer
Wie mache ich zwei oder mehrere Rahmen nebeneinander?
z.B. sieht so der Quelltext aus:
<div style="border:1px solid grey; width:45%; padding:5px; float:left; background-color:magenta; height: 20px"> * wurst * käse * gemüse </div> div style="border: 1px solid grey; width: 30%; margin-left: 65%; padding: 5px;background-color:orange; height: 75px"> * saft * bier * wein </div>
- Das sieht dann z.B. so aus:
- wurst
- käse
- gemüse
- saft
- bier
- wein
- Erklärung:
- style: border - Fenster oder Umrandungslinie
- 1px solid grey - 1Pixel stark durchgezogene Linie graue Umrandung
- padding: - Abstand
- 5px - Abstand zwischen Rand und Text d.h. 5 pixel Abstand zum Rand ringsum
- float: left - am linken rand postiert(fliessend)
- margin-left: - Begrenzungswerte des Rahmens vom linken Seitenrand
- background-color: - Farbe
- orange,magenta - Farbe
- es sind auch Hexadezimalfarben möglich, einfach den code angeben, z.B.:
- weiss - #FFFFFF
- rot - #FF0000
- alle Farben mit Nummern gibts hier
Wie mache ich einen Rahmen in einem anderen Rahmen?
z.B. sieht so der Quelltext aus: