ANIMESCENE - 2 Level || CSS Newsbox styling

CSS Newsbox styling

category: Tutorial | date: 21.06.2010 | 9 comments

Hallo,
heute werde ich euch zeigen wie man ganz einfach seinen News einen besseren look geben kann. Dieses Tutorial ist super für Anfänger geeignet und zeigt einen Weg, den man auch für andere Elemente verwenden kann.

Ich zeige euch hier wie man mit wenigen Einstellungen einen simplen Hintergrund in eine dynamische und gutaussehende Box verwandeln kann.

DOWNLOAD ONLINE DEMO

Step 1: Gestaltung

Die fertige .psd Datei könnt ihr hier runterladen!

Die genauen Einstellungen habe ich hier nochmal für euch hochgeladen (sind in der .psd aber auch vorhanden zum Nachschauen):

Die Einschneidung der Box habe ich ganz simpel mit dem Radiergummi-Werkzeug gemacht.

Step 2: Programmierung

Ich habe die Newsbox mit Div containern programmiert. Zunächst erstellen wir eine simple .html (oder .php) Datei und schreiben folgendes hinein:

<link rel="stylesheet" type="text/css" href="cssdatei.css">

<div id="container_box">
<div id="container_date">
Datum
</div>
<div id="container_title">
<b>Eine Überschrift</b>
</div>
<div id="container_comment">
Kommentare
</div>
</div>
<div id="container_box2">
<table class="inhalt" border="0" width="385px">
    <tbody>
        <tr>
            <td width="15px"> </td>
            <td width="329px" valign="top">
            Inhalt
            </td>
            <td width="10px"> </td>
            <td width="31px" valign="middle"><a href="link.php"><img src="images/go_arrow.png" border="0"/></a></td>
        </tr>
    </tbody>
</table>
</div>
<div id="container_footer">
</div>

Jetzt erstellen wir eine .css Datei (cssdatei.css) in der wir die Attribute die in der .html datei vergeben sind die nötigen Werte verpassen.

#container_box { position:relative; width:385px; height:55px; left: 0px; top: 0px; background-image:url(images/pic_top.png); background-repeat:no-repeat; text-align:left; }
#container_date { position:relative; left: 39px; top: 6px; text-align:left; font-size:9px; color:#FFFFFF; float:left; }
#container_title { position:relative; left: 80px; top: 1px; text-align:left; font-size:15px; color:#87C24C; float:left; }
#container_comment { position:relative; left: -47px; top: 19px; text-align:left; font-size:9px; color:#FFFFFF; float:left; }
#container_box2 { position:relative; width:385px; left: 0px; top: 0px; background-image:url(images/pic_middle.png); background-repeat:repeat-y; text-align:left; }
#container_footer { position:relative; width:385px; height:26px; left: -1px; top: 0px; background-image:url(images/pic_footer.png); background-repeat:no-repeat; text-align:left; }
table.inhalt { color:#333333; font-size:12px; }

Falls Erklärungsbearf besteht benutzt einfach die Kommentare!

DOWNLOAD ONLINE DEMO

Dieser Eintrag wurde von Darkon (Rene) verfasst.

Comments

about CSS Newsbox styling

CSS Newsbox styling
verfasst von: Adriano, 22.06.2010

ID: 561

Sehr ausführlich. Ich würde noch erwähnen wie man die css datei einbindet oder wie in der demo direkt in die html datei schreibt.

CSS Newsbox styling
verfasst von: Darkon, 22.06.2010

ID: 562

Bericht wurde überarbeitet. Danke Adriano

CSS Newsbox styling
verfasst von: Guest, 22.06.2010

ID: 563

Schat cool aus. Ich hoffe mal ich schaffe es diese Vorlage an die breite meines designs anzupassen ;/ thx für das tutorial schonmal. Ich abe mich immer gefragt wie man sowas genau macht.

CSS Newsbox styling
verfasst von: Guest, 02.07.2010

ID: 575

Wollte mich nur schnell für das Tutorial bedanken.

CSS Newsbox styling
verfasst von: Akahito, 04.07.2010

ID: 576

Es ist sehr ausführlich geschrieben und ist verständlich.
Ich habe es natürlich aus spaß nachgemacht und mir gefällt die Idee ^__^

CSS Newsbox styling
verfasst von: Akatsuki, 07.07.2010

ID: 577

Ja sehr schönes Tutorial und vorallem kreatives Outcome!

Vielleicht würde ich ein paar Kleinigkeiten im Code ergänzen: Um die Box etwas suchmaschinenfreundlicher zu gestalten würde ich prinzipiell alle Links mit title=\"Überschrift\" versehen

...

Auch bei den Bildern würde ich ein \"title\" UND ein \"alt\" Attribut hinzufügen!!!

$\"..\"$

Die Überschrift, die durch formatiert wurde, würde ich durch h1-Tags ersetzen...

Ich habe nix gegen tables, aber ich denk auch da lässt sich der Code mit div-Tags eleganter lösen...

Aber das sind nur Kleinigkeiten, und nicht jeder Coder ist da meiner Meinung.. seht es nur als Denkanstöße^^

Aka

CSS Newsbox styling
verfasst von: Akatsuki, 07.07.2010

ID: 578

Nachtrag: AH ich seh schon.. HTML ist noch aktiviert.. evtl muss man den Quelltext anschauen um zu verstehen was ich meine..
See ya

CSS Newsbox styling
verfasst von: Darkon, 07.07.2010

ID: 579

Thx, werde ich im Bericht heute noch nachtragen.

CSS Newsbox styling
verfasst von: Guest, 29.07.2010

ID: 600

Sieht gut aus. Allerdings würde ich auf die Tabellen verzichten

Your name: (register now)

Your email:

Anti Spam: (calculate)

Write your comment here!