Globale Rahmeneinstellungen vornehmen

Schritt für Schritt

Um die globalen Rahmeneinstellung vorzunehmen, gehen Sie wie folgt vor:

1. Wählen Sie die erstellte Profilverwaltungsseite aus.

2. Öffnen Sie das Element Stylesheet im Hauptelement Aussehen. An oberste Stelle finden Sie die bereits bestehenden CSS-Anweisungen für den body-Bereich.

   Copy

   1
   2
   3
   4
   5
   body {
       font-family: sans-serif;
       font-size: 12px;
       }
   

   Jede HTML-Datei hat einen body-Tag. Innerhalb dieses Tags befinden sich alle sichtbaren Inhalte einer HTML Seite (Überschriften, Text, Links, etc.). Alle allgemeingültigen Style-Angaben wie z.B. Schriftart, Schriftgröße oder Schriftfarbe können in der CSS-Datei für den Body definiert werden.

3. Setzen Sie die globale Schriftfarbe auf den von Ihnen gewünschten Farbwert.

   Color Picker nutzen: Um den Farbcode schneller zu ermitteln, bieten die meisten Browser in Ihren Entwickler-Tools einen Color Picker an. Damit klicken Sie auf einer Webseite auf eine Farbe und erhalten direkt den dazugehörigen Farbcode.

   Öffnen Sie den Color Picker. Je nach Browser müssen Sie dazu unterschiedlich vorgehen:

   • In Chrome öffnet sich der Color Picker automatisch, wenn Sie eine Farbe in den Entwickler-Tools bearbeiten.

   • In Firefox müssen Sie den Eyedropper über das Menü der Entwickler-Tools manuell öffnen.

   Copy

   1
   2
   3
   4
   5
   6
   body {
       font-family: sans-serif;
       font-size: 12px;
       color:#555555;
   }
   

4. Vergeben Sie eine Hintergrundfarbe.

   Hinweis: Auf der folgenden Webseite finden Sie eine Übersicht aller gängigen CSS-Anweisungen:

   http://www.w3schools.com/css/default.asp

   Copy

   1
   2
   3
   4
   5
   6
   7
   body {
       font-family: sans-serif;
       font-size: 12px;
       color:#555555;
       background-color: #dbecf5;
   }
   

5. Begrenzen Sie die Breite des Inhalts auf die gewünschte Breite:

   Copy

   1
   2
   3
   4
   5
   6
   7
   8
   body {
       font-family: sans-serif;
       font-size: 12px;
       color:#555555;
       background-color: #dbecf5;
       width: 600px;
   }
   

6. Zentrieren Sie Ihre Seite im Browser.

   Den Außenabstand bzw. den Abstand zu einem anderen Element erzeugen Sie über das Element margin. Es gibt verschiedene Wege, einem Element den gewünschten Abstand zuzuweisen.

• margin: 20px: Erzeugt einen Abstand von 20px oben, unten, links und rechts.
• margin: 20px 10px: Erzeugt oben und unten einen Abstand von 20px, links und rechts einen Abstand von 10px.
• margin: 10px 0 20px 30px: Erzeugt einen Abstand oben 10px, rechts 0px, unten 20px, links 30px.

• margin: 0 auto; Erzeugt einen Abstand oben und unten von 0px. auto sorgt dafür, dass der Bereich zentriert wird.

Für die Angabe nur eines bestimmten Wertes können auch folgende Werte verwendet werden:

• margin-top

• margin-bottom

• margin-left

• margin-right

Copy

1
2
3
4
5
6
7
8
9
body {
    font-family: sans-serif;
    font-size: 12px;
    color:#555555;
    background-color: #dbecf5;
    width: 600px;
    margin: 0 auto;
}

7. Vergeben Sie einen Innenabstand, damit die Inhalte nicht direkt an der Browserleiste anhängen.

   Hinweis: Padding-Definitionen legen den Abstand zwischen Inhalt und Rahmen oder einer Box fest. Die Werte-Definition geschieht analog zu margin. Jedoch ist die Anweisung " 0 auto" bei Padding nicht vorhanden.

   Copy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   body {
       font-family: sans-serif;
       font-size: 12px;
       color:#555555;
       background-color: #dbecf5;
       width: 600px;
       margin: 0 auto;
       padding: 20px;
       }
   

8. Klicken Sie auf ( Speichern).

9. Klicken Sie auf , um das Ergebnis zu betrachten.

   

• Sie haben die globalen Rahmeneinstellungen für Ihre Profilverwaltung vorgenommen.