CSS Tutorial1
| « Zurück zur Übersicht | CSS-Tutorial | Klicks |
Div-Box auf einer Textseite erstellen
Newsbox, Infobox, Hinweis etc...
Hier zeige ich euch wie man mit ein wenig CSS und HTML eine einfache elegante oder auch bunte Box mit Inhalt erstellen kann. Solch eine Box kann man bequem auf jede Textseite einbinden und darin News, Infos oder einfach einen Hinweis platzieren.
Es gibt rundsätzlich 2 Wege um solch eine box auf einer Textseite zu erstellen. Zum einen das direkte Modifizieren einer Div-Box im HTML tag oder durch das hinzufügen einer CSS-ID. Fangen wir mit ersterem an!
I. Style-Attribute im Div-Tag
Eine Div-Box besteht zunächst aus zwei Div-Tags, dem Start-Tag "<div>" und dem End-Tag "</div>", und einem Text:
Damit man aus dem Div jetzt auch eine Box erstellen kann fügt man dem HTML-Tag noch einige Style-Attribute hinzu.
Quelltext der Textseite
II.Style-Attribute im CSS-Code
Da man durch das Einfügen der Style-Attribute im HTML-Tag leicht den überblick verliert, kann man das mit einer ID-zuweisung einfacher gestalten. Zunächst weist man dem Div-Tag eine ID zu:
Quelltext der Textseite
Dadurch ist diese Div-Box gekennzeichnet und kann so nun im CSS-Code deiner Homepage gestaltet werden:
CSS-Code
#BOX{
background: #eeeeee;
border: 1px solid #e0e0e0;
width: 300px;
padding: 5px;
margin: 5px;
}
</style>
Einer Box kann man beliebig viele Eigenschaften zuweisen, je nach dem, wie sie aussehen soll.
Musterbeispiele
So könnte eine CSS-Box aussehen
| Code | Ergebnis |
|
<div style="border: 1px solid #FBC2C4; background-color: #FAE3E4; padding: 5px; width: 400px; text-align: left; margin: 5px;">INHALT</div>
|
INHALT
|
|
<div style="border: 3px dashed #e0e0e0; background-color: #eeeeee; padding: 5px; width: 400px; text-align: left; margin: 5px;">INHALT</div>
|
INHALT
|
Weiterführende Tutorials:Tolle Hover Effekte bei DIV-Boxen |
KompatibilitätFF, IE, Opera, Chrome, Safari |
Bewertung |
Links