Rahmen um Bild legen - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

Rahmen um Bild legen

Tutorials
Rahmen mit CSS um Bilder legen
Für das Rahmen von Bildern bietet die CSS-Formatierung ganz einfache Möglichkeiten. Dazu muss sich das Bild auf dem WEB-Server zum Beispiel im Verzeichnis "images - befinden. Das Bild muss nicht die Größe aufweisen, wie es später auf der Webseite erscheinen soll.
Die genaue Größe wird über die Style-Informationen im HTML-Code bestimmt. Es sollte aber die Mindestgröße haben, wie in den Style-Informationen angegeben, um Verpixelungen durch Vergrößerungen zu vermeiden.
Website X5 bietet zwar die Möglichkeit über das Programm Bilder einzufügen, doch wird bei mehrfacher Verwendung des selben Bildes auf dem Webserver auch mehrfach das Bild mit individueller Buchstaben-/Zahlenkombination hinterlegt (z. B. img_1_5xnj2ds8.jpg). Das kann bei wenigem Webspeicher dann zu Engpässen führen.
Wir empfehlen Bilder immer selbst mit dem <img> Tag einzubinden, um Speicherplatz zu sparen.
Erläuterungen:


alt="Fotoname"
- Alternativtext für Sehgeschädigte
wird nicht angezeigt
src="images/dateiname.jpg"
- Pfad und Dateiname des Bildes
kann auch mit http:// beginnen
width="220px"
- Breite des Bildes
sollte angegeben werden
height="170px"
- Höhe des Bildes
kann auch weggelassen werden
border-style: dotted;
- Rahmenart
siehe auch hier (CSS4You)
border-width: 7px;
- Rahmenbreite
siehe auch hier (CSS4You)
border-color: #FF0000;
- Rahmenfarbe
siehe auch hier (Farbcodetabelle)

So sieht es dann aus:

So wird es gemacht:

Rahmen unterdrücken:
Foto Home

Code für den <BODY> Bereich
<img alt="Foto Demo1" src="images/demo_1.jpg"
width="220px" height="170px"
style="
border: 0;
">

Rahmen durchgehende Linie rot:
Foto Demo2

Code für den <BODY> Bereich
<img alt="Foto Demo2" src="images/demo_2.jpg"
width="220px" height="170px"
style="
border-style: solid;
border-width: 4px;
border-color: #FF0000;
">

Rahmen gepünktelte Linie grün:
Foto Demo3

Code für den <BODY> Bereich
<img alt="Foto Demo3" src="images/demo_3.jpg"
width="220px" height="170px"
style="
border-style: dotted;
border-width: 4px;
border-color: green;
">

Rahmen 3D außen Linie gold:
Foto Demo4

Code für den <BODY> Bereich
<img alt="Foto Demo4" src="images/demo_4.jpg"
width="220px" height="170px"
style="
border-style: outset;
border-width: 7px;
border-color: gold;
">

Rahmen 3D innen Linie gold:
Foto Demo5

Code für den <BODY> Bereich
<img alt="Foto Demo5" src="images/demo_5.jpg"
width="220px" height="170px"
style="
border-style: inset;
border-width: 7px;
border-color: gold;
">

Rahmen 3D diagonal Linie gold:
Foto Demo6

Code für den <BODY> Bereich
<img alt="Foto Demo6" src="images/demo_6.jpg"
width="220px" height="170px"
style="
border-style: groove;
border-width: 7px;
border-color: gold;
">

Rahmen doppelte Linie blau:
Foto Demo7

Code für den <BODY> Bereich
<img alt="Foto Demo7" src="images/demo_7.jpg"
width="220px" height="170px"
style="
border-style: double;
border-width: 5px;
border-color: #0000FF;
">

Rahmen gestrichelter Linie schwarz:
Foto Demo8

Code für den <BODY> Bereich
<img alt="Foto Demo8" src="images/demo_8.jpg"
width="220px" height="170px"
style="
border-style: dashed;
border-width: 5px;
border-color: yellow;
">

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt