Tutorials

Bilderrahmen mit CSS realisieren Tutorial

Einloggen
Benutzername:
Passwort:

Passwort vergessen?
Kostenlos
Anmelden
anzeigen
Bilderrahmen mit CSS realisieren


4588 - 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. Smily NR:8

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">
Diesen Code musst du vor <html> einbauen!

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">
Diesen Code muss du zwischen <head></head> eingebauen!


Dies ist der Inhalt unserer css-datei.css:
1
2
3
4
5
img.picrahmen{
    background:#ffffff;
    padding:6px;
    border:6px solid #dfdfdf;
}


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. Smily NR:7

mfg Eugen

Mitglieder-Kommentare


#3 von Hurricane
Wenn man keine klasse vergeben möchte gehts auch so Smily NR:7

Zitat:

<img src="bildname.jpg" border="0" width="600" height="400" alt="test" style="background:#ffffff; padding:6px; border:6px solid #dfdfdf;">

Mfg Michi
#2 von ntmb
Danke schön Smily NR:8

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
#1 von B4ckflip
Das ist wieder mal ein gut geschriebenes und erklärtes Tutorial von dir ... sehr schön Smily NR:7

Nur registrierte Mitglieder könnten einen Kommentar schreiben.

Melde dich doch ganz einfach an, es ist kostenlos. :-)