CSS News-Rechteck

Anleitung:

Du nimmst ein Container, also Div-Element zum Beispiel.

<div>
</div>

Dem gibst du eine klasse, damit du mehrere davon ansprechen kannst.

<div class="news">
</div>

Dann fügst du eine Überschrift hinzu, h1 und h2 werden meist schon benutzt h3 oder h4 bieten sich an. Rangfolge beachten! Hier mal beispielhaft mit h4.

<div class="news">
    <h4>wichtige News</h4>
</div>

Danach folgen die News, hier mal als ungeordnete Liste:

<div class="news">
    <h4>wichtige News</h4>
    <ul>
        <li>Reissack in China umgefallen</li>
        <li>Reissack doch nicht umgefallen</li>
        <li>Die 10 schnellsten Reissackumfälle (Video)</li>
    </ul>
</div>

Wenn du das hast folgt die Verschönerung mit CSS. Du musst also angeben, wie breit dein Newskasten sein soll, was passieren soll mit dem Text, wenn er nicht rein passt in die Breite des Newskastens und welche Schrift und Farbe alles haben soll.
Breite soll mal 200 Pixel sein. Überschrift in Fett und immer gross geschrieben. Zudem soll die Überschrift einen Hintergrund in grau haben. Der Kasten soll oben abgerundete Ecken haben.
Die News selbst sollen 0.9 em gross sein und blau.
Textumbruch wenn der Text zu gross ist.

CSS

/* Newsbox */


.news {
    width: 200px;
    border: 1px solid black;
    border-radius: 6px 6px 0 0;
} 
.news h4 {
    display:block;
    text-transform:uppercase;
    text-align: center;
    margin: 0;
    padding: 2px;
    background: grey;
    font: bold 1em/1.5em verdana, sans-serif;
}


.news li{
    color:blue;
    font-size:0.9em;
    word-wrap:break-word;
}

Und schon haben wir eine Newsbox.