Kopiere den folgenden Code und setze ihn in den <body>-Bereich Deiner Webseite.
html
<!-- Start der Newsbox mit Hintergrundbild und zentriertem Inhalt -->
<div class="newsbox">
<div class="inhalt">
<!-- Hier kommt Dein News-Inhalt rein -->
<p>✦Beispiel:<br /><br /></p>
<p>✓ Neue Tutorials<br /></p>
<p>✓ Download-Ecke<br /></p>
<p>✓ Feedback Ecke<br /><br /></p>
<p>:•.Viel Spaß mit der Box.•:<br /><br /></p>
<p><a target="_blank" href="https://phantasygraphics.blogspot.com" class="Credits">Newsbox by DarkNickli</a></p>
<!--- News-Inhalt Ende --->
</div>
</div>
<!-- Ende der Newsbox -->
Kopiere den Stil-Code in Deine CSS-Datei.
Du kannst die Farben anschließend an Dein Design anpassen.
Hier bestimmst Du die Größe der Box sowie das verwendete Hintergrundbild.
css
.newsbox {
position: relative; /* Ermöglicht die absolute Positionierung von Kind-Elementen */
height: 326px; /* Höhe der Newsbox */
background-image: url(img/Newsbox.jpg); /* Hintergrundbild der Box */
background-size: 506px 326px; /* Größe des Hintergrundbilds */
background-repeat: no-repeat; /* Kein Wiederholen des Hintergrundbilds */
background-position: center; /* Zentriert das Hintergrundbild */
margin: 0 auto; /* Zentriert die Box horizontal */
display: flex; /* Aktiviert Flexbox für den Inhalt */
justify-content: center; /* Zentriert Inhalt horizontal */
align-items: flex-start; /* Inhalt wird oben ausgerichtet */
padding-top: 48px; /* Abstand von oben zum Inhalt */
}
♦Anpassungen: height: → Höhe der dunklen Box. background-size: → Hier legst Du fest, wie groß das Hintergrundbild in der Box dargestellt werden soll.
２. Der Inhalt (id="inhalt")
Das ist der scrollbare Inhalt der Newsbox.
css
.inhalt {
background-color: rgba(23, 17, 8, 0.35);/* Halbtransparenter dunkler Hintergrund */
direction: rtl; /* Schreibrichtung: von rechts nach links */
scrollbar-width: thin; /* Dünner Scrollbalken (für Firefox) */
scrollbar-color: #d1cfcc transparent; /* Scrollbalken-Farbe */
width: 275px; /* Breite des Inhaltsbereichs */
height: 231px; /* Höhe des Inhaltsbereichs */
color: #d1cfcc; /* Schriftfarbe */
font-family: "Lucida Sans", Verdana; /* Schriftart */
font-weight: bold; /* Fettere Schrift */
text-align: center; /* Zentrierter Text */
overflow-y: auto; /* Vertikaler Scrollbalken erscheint bei Bedarf */
padding: 5px 13px; /* Innenabstand: oben/unten 5px, rechts/links 13px */
margin-top: 46px; /* Abstand von oben (Positionierung innerhalb der Newsbox) */
margin-left: -186px; /* Verschiebung nach links (negative Margin) */
position: absolute; /* Absolute Positionierung relativ zum nächsten `relative`-Elternelement */
}
♦Anpassungen: background-color: → Ersetze den Farbwert durch eine Farbe deiner Wahl (auch mit Transparenz möglich, z. B. rgba). scrollbar-color: → Hier kannst Du die breite und die höhe festlegen von Dein Bild. width: → Breite des scrollbaren Textbereichs. height: → Höhe des scrollbaren Textbereichs. scrollbar-color und scrollbar-width → Damit bestimmst du das Aussehen der Scrollbar (nur in Firefox sichtbar). font-family: → Wähle eine Schriftart, die zu Deinem Design passt (z. B. Arial, Georgia, Verdana). font-weight: → Legt die Schriftstärke fest (z. B. normal, bold, lighter). text-align: → Zentriert oder linksbündig ausrichten.
♦Hinweis zum Scrollbalken und Symbolen
Wenn der Scrollbalken links steht (z. B. durch direction: rtl;), kann es passieren, dass Symbole wie das Häkchen ✓an der „falschen“ Stelle erscheinen.
Das heißt: Statt „✓ Neue Tutorials“ wird angezeigt: „Neue Tutorials ✓“, denn das Symbol steht hinter dem Text statt davor.
Das liegt daran, dass durch die Schreibrichtung rtl der Textfluss umgekehrt wird.
Der Text ist zwar noch gut lesbar, aber die Symbole „wandern“ an eine ungewollte Position.
Falls Dich das stört, kannst Du es ganz einfach beheben:
1.Entferne aus Deinem CSS den folgenden Code:
css
.inhalt {
direction: rtl;
}
2.Füge stattdessen folgenden Code ein, um den Scrollbalken schmal und farblich passend zum Design darzustellen.
♦ So bleibt der Scrollbalken rechts und die Symbole stehen dort, wo sie hingehören.
３. Optional: Scrollbar für WebKit-Browser
Damit der Scrollbalken auch in Chrome, Safari und Edge sichtbar und gestaltbar ist.
css
/* Für Chrome, Edge, Safari */
.scroll-content::-webkit-scrollbar {
width: 8px; /* Breite des vertikalen Scrollbalkens */
}
.scroll-content::-webkit-scrollbar-track {
background: transparent; /* Hintergrund der Scrollbar-Spur bleibt unsichtbar */
}
.scroll-content::-webkit-scrollbar-thumb {
background-color: #d1cfcc; /* Farbe des Scrollbalkens (Daumen) */
border-radius: 4px; /* Abgerundete Ecken für weicheren Look */
}
♦ Du kannst die Farbe und Breite der Scrollbar hier nach Deinem Geschmack anpassen.
４. Die Quellenangabe (.Credits)
Dies ist der Link ganz unten in der Newsbox, der auf die Quelle oder den Urheber hinweist.
css
.credits {
margin-top: 10px; /* Abstand nach oben */
font-size: 7pt; /* Schriftgröße in Punkt */
font-weight: lighter; /* Dünne Schrift für eleganten Look */
color: #d1cfcc; /* Helle Textfarbe im normalen Zustand */
text-decoration: none; /* Keine Unterstreichung bei Links */
}
.credits:hover {
text-decoration: none; /* Auch beim Hover keine Unterstreichung */
letter-spacing: 1px; /* Etwas mehr Buchstabenabstand beim Überfahren */
color: #b1a79e; /* Sanfte Farbänderung beim Hover für Interaktivität */
}
♦Anpassungen: font-size: → Schriftgröße (z. B. größer oder kleiner einstellbar) font-weight: → Schriftstärke festlegen (z. B. normal, bold, lighter) color: → Farbe des Links oder Texts im normalen Zustand text-decoration: → z. B. Unterstreichung entfernen oder hinzufügen letter-spacing: → Abstand zwischen den Buchstaben (z. B. beim Hover-Effekt) color (hover): → arbe, die erscheint, wenn man mit der Maus darüberfährt
Das war's auch schon von mir. 😊
Verfasst am 13.Februar 2007, aktualisiert am 26.Juli 2025