|
|
| (7 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| /* Allgemeiner Seitenhintergrund */
| |
| body {
| |
| background-color: #2a2a2a; /* Dunkler Hintergrund */
| |
| background-image: url("DEIN-BILD-URL"); /* Optional: Hintergrundbild */
| |
| background-repeat: no-repeat;
| |
| background-size: cover;
| |
| color: #e0e0e0; /* Helle Textfarbe */
| |
| font-family: Arial, sans-serif; /* Moderne Schriftart */
| |
| }
| |
|
| |
|
| /* Hauptcontainer für den Inhalt */
| |
| #content {
| |
| margin: 20px auto; /* Zentriert den Inhalt und fügt Abstand hinzu */
| |
| max-width: 1200px; /* Maximale Breite des Inhalts */
| |
| background-color: #ffffff; /* Weißer Hintergrund für den Hauptinhalt */
| |
| border: 1px solid #ccc; /* Dünner grauer Rahmen */
| |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Leichter Schatten */
| |
| padding: 20px; /* Innenabstand */
| |
| }
| |
|
| |
| /* Navigation (linke Spalte) */
| |
| #column-one {
| |
| width: 200px; /* Feste Breite für die Navigation */
| |
| background-color: #1a1a1a; /* Dunkler Hintergrund für Navigation */
| |
| color: #e0e0e0; /* Helle Textfarbe */
| |
| border-right: 1px solid #333; /* Trennlinie rechts */
| |
| float: left; /* Navigation links positionieren */
| |
| height: 100vh; /* Volle Höhe der Navigation */
| |
| padding: 20px; /* Innenabstand */
| |
| box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5); /* Schatten rechts der Navigation */
| |
| }
| |
|
| |
| /* Titel der Navigationsleiste */
| |
| #column-one h5 {
| |
| color: #f0a500; /* Hell-orange Farbe für die Titel */
| |
| font-size: 1.2em; /* Etwas größere Schriftgröße */
| |
| margin-bottom: 15px; /* Abstand unter den Titeln */
| |
| }
| |
|
| |
| /* Links in der Navigation */
| |
| #column-one a {
| |
| color: #e0e0e0; /* Helle Farbe für Links */
| |
| text-decoration: none; /* Entfernt die Unterstreichung */
| |
| font-size: 1em;
| |
| display: block; /* Jeder Link ist ein Blockelement */
| |
| margin: 5px 0; /* Abstand zwischen den Links */
| |
| padding: 5px; /* Innenabstand für die Links */
| |
| border-radius: 4px; /* Leicht abgerundete Ecken */
| |
| transition: background-color 0.3s ease; /* Sanfter Übergang bei Hover */
| |
| }
| |
|
| |
| #column-one a:hover {
| |
| background-color: #f0a500; /* Hell-orange Hintergrundfarbe beim Überfahren */
| |
| color: #1a1a1a; /* Dunkle Textfarbe */
| |
| }
| |
|
| |
| /* Hauptfenster (pBody) */
| |
| .pBody {
| |
| margin-left: 220px; /* Platz für die linke Navigation */
| |
| padding: 20px; /* Innenabstand im Hauptfenster */
| |
| background-color: #ffffff; /* Weißer Hintergrund */
| |
| border: 1px solid #ccc; /* Dünner Rahmen */
| |
| box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
| |
| }
| |
|
| |
| /* Kopfzeile (Header) */
| |
| #p-logo {
| |
| background-color: #1a1a1a; /* Dunkler Hintergrund */
| |
| padding: 20px;
| |
| text-align: center; /* Zentrierter Text */
| |
| border-bottom: 2px solid #f0a500; /* Trennlinie in Orange */
| |
| }
| |
|
| |
| #p-logo img {
| |
| max-width: 100px; /* Maximale Breite des Logos */
| |
| display: inline-block;
| |
| }
| |
|
| |
| /* Footer */
| |
| #footer {
| |
| margin-top: 20px; /* Abstand oberhalb des Fußbereichs */
| |
| padding: 20px; /* Innenabstand im Footer */
| |
| background-color: #1a1a1a; /* Dunkler Hintergrund */
| |
| color: #e0e0e0; /* Helle Schriftfarbe */
| |
| text-align: center; /* Zentrierter Text */
| |
| border-top: 1px solid #333; /* Dünne Trennlinie oben */
| |
| }
| |
|
| |
| /* Globale Anpassungen */
| |
| h1, h2, h3 {
| |
| color: #333; /* Dunkle Farbe für Überschriften */
| |
| margin-bottom: 20px; /* Abstand unter den Überschriften */
| |
| }
| |
|
| |
| a {
| |
| color: #0077cc; /* Standard-Linkfarbe */
| |
| text-decoration: none; /* Keine Unterstreichung */
| |
| }
| |
|
| |
| a:hover {
| |
| color: #005fa3; /* Dunklere Farbe beim Überfahren */
| |
| text-decoration: underline; /* Unterstreichung bei Hover */
| |
| }
| |
