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: 1px dotted green; padding: 5px; margin: 0px 0px 20px 0px;background-color:#f8f8ff;"> | + | <div style="border: 5px dotted green; padding: 5px; margin: 0px 300px 0px 100px;background-color:#f8f8ff;"> |
− | :Na ihr Plinsen | + | :Na ihr Plinsen. Heute noch gar nicht´s verändert? |
− | :Heute noch gar nicht´s verändert?
| |
| </div> | | </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 grey - 1Pixel gepunktet grau | + | ** 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: - Begrenzung | + | ** 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:yello; height: 75px"> |
| + | |
| + | </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 |
| + | |
| + | * margin-left: - Begrenzungswerte des Rahmens vom linken Seitenrand |
| *background-color: - Farbe | | *background-color: - Farbe |
− | ** | + | ** orange,magenta - Farbe |
− | <div style="border: 1px dotted green; padding: 5px; margin: 80px 20px 20px 80px;background-color:#f8f8ff;">
| + | ====Wie mache ich einen Rahmen in einem anderen Rahmen?==== |
− | :Na ihr Plinsen | + | z.B. sieht so der Quelltext aus: |
− | :Heute noch gar nicht´s verändert?
| |
− | </div>
| |