Hilfe:Rahmen und Farben

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
• 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: