Bilderrahmen mit CSS realisieren
5962 - ntmb - 06.10.2007 23:21 Uhr - Version: 1 - - verlinken als BB-Code
Wie ein Bild standardmäßig aussieht ist dir sicherlich bewusst, leider sieht dies nicht immer so schön aus, deshalb kann man mit wenigen Schritten Bilder mit einem Rahmen versehen.
Dann fangen wir mal an.
Oben in der Datei wo der CSS-Bilderrahmen zusehen sein soll, muss der Typ der Datei vergeben werden. Dieser sagt dann dem Browser welche Sprache man verwendet. Wir verwenden HTML 4.01, da hier das mit dem CSS-Rahmen funktioniert. Wie es bei den anderen Sprachen aussieht kann ich nicht viel zu sagen.
Der Code für unseren Typ Html 4.01 wäre dann:
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
|
Beim img Tag, der zum einbinden von Bilder dient, musst du nur etwas in den style Bereich schreiben.
So könnte zum Beispiel der Code mit dem Rahmen aussehen:
1 |
<img src="bildname.jpg" border="0" width="600" height="400" alt="test" style="background:#ffffff;padding:6px;border:6px solid #dfdfdf;">
|
Begriff-Erklärung:
background: Hier wird festgelegt welche Hintergrundfarbe verwendet werden soll.
padding: Dieser Wert beschreibt den Abstand vom Bild zum Rahmen, in diesem Bereich sieht man dann die Hintergrundfarbe.
border: Die Rahmendicke, die Rahmenart und Rahmenfarbe können hier eingestellt werden.
Unser Beispiel-Bild hätte den Hintergrund weiß gehabt mit einem leicht grauen Rahmen.
Noch ein kleiner Tipp, wenn du diesen Bilderrahmen öfters auf deiner Seite verwenden willst, dann verlege den Styleteil doch ganz einfach in eine CSS-Datei. So könntest du dir unnötiges schreiben ersparen und deine Seite würde schneller geladen werden.
Der Code zum einbinden unserer CSS-Datei:
1 |
<link rel="stylesheet" type="text/css" href="css-datei.css">
|
Dies ist der Inhalt unserer css-datei.css:
1 |
img.picrahmen{
|
Wenn du die css-datei.css Datei eingebunden hast, dann musst du bei deinen Bilder die du mit einem Rahmen versehen willst keinen Style Bereich mehr verwenden. Du musst bei img Tag nur class="picrahmen" reinschreiben.
So würde dies zum Beispiel aussehen:
1 |
<img src="bildname.jpg" border="0" width="600" height="400" alt="test" class="picrahmen">
|
Der zusätzliche Vorteil bei der Verwendung einer *.css Datei ist, dass man nur in dieser Datei die Style-Einstellungen vornehmen muss und alle Datein wo diese *.css Datei eingebunden wurde, haben dann logischerweise automatisch auch die neuen Style-Einstellungen.
Ich hoffe ich konnte euch mit diesem Tutorial ein bisschen weiterhelfen, über Feedback würde ich mich freuen.
mfg Eugen
Mitglieder-Kommentare
#2 von ntmb
Danke schön
Ich muss mal gucken, dass es mehr Tutorials werden, zumal müsste das Script zum posten von Tutorials mal abgeändert werden, aber da muss ich noch genauer gucken, wie ich es umsetzen müsste.
mfg Eugen
Ich muss mal gucken, dass es mehr Tutorials werden, zumal müsste das Script zum posten von Tutorials mal abgeändert werden, aber da muss ich noch genauer gucken, wie ich es umsetzen müsste.
mfg Eugen
Der freundliche Admin aus der Nachbarschaft
Lachecke.de - Dein täglicher Lacher im Internet
Listrank.de - Die ultimative Topliste nach Themen
Lachecke.de - Dein täglicher Lacher im Internet
Listrank.de - Die ultimative Topliste nach Themen
#1 von B4ckflip
Das ist wieder mal ein gut geschriebenes und erklärtes Tutorial von dir ... sehr schön
<img src="bildname.jpg" border="0" width="600" height="400" alt="test" style="background:#ffffff; padding:6px; border:6px solid #dfdfdf;">
Mfg Michi