MachHTML - Tool

8-DIV-Tool Runde Ecken oder ausgefallene Rahmen

Mit diesem Tool wurden die meisten unserer kostenlosen Dekorationen erstellt. Sie können damit also auch Ihr Webdesign und Ihr persönliches Angebotsdesign erstellen. Die Artikelbeschreibung kann dann mit unserem Vorlagengenerator erstellt und in den Inhalt Ihrer eigenen Dekoration kopiert werden. Wer also mit Bildbearbeitungssoftware klar kommt und minimale HTML-Kenntnisse besitzt, kann sich individuelle Designs selbst anfertigen und nutzen.

Es werden 8 Bilder benötigt: 4 Bilder für die Ecken, 4 Bilder für die Seiten. Die Bilder werden als Hintergrundbilder bei 8 übereinanderliegenden Divs verwendet. Diese Konstruktion ist für alle Bildschirm-Auflösungen geeignet und wächst mit dem Inhalt.

Alternativ funktioniert es auch mit 2 Bildern (z.B. für eine Kopf- und Fußzeile) oder 3 Bildern (für Boxen, die in der Höhe wachsen können).

Um unnötige Ladezeiten zu sparen, sollten die Bilder nicht zu groß sein. Der Rest wird mit der angegebenen Hintergrundfarbe oder einem gekachelten Hintergrundbild gefüllt.

Seite rechts:

Beispiel:

Inhalt positionieren:
Abstand nach oben: px
Abstand nach unten: px
Abstand nach links: px
Abstand nach rechts: px
Seite unten:
Seite links (Mitte):
Seite oben:
Ecke rechts oben:
Ecke links oben (oben):
Ecke rechts unten:
Ecke links unten (unten):
Hintergrundfarbe:
Hintergrundbild:

Die Hintergrundfarbe und/oder ein (gekacheltes) Hintergrundbild dienen dazu, die restliche Fläche zu füllen, die nicht von den Bildern der Ecken und Seiten abgedeckt wird. Wenn ein Hintergrundbild angegeben wird muss der Farbwert gelöscht werden!

Alle Divs liegen exakt übereinander. Jedes Div enthält ein Hintergrundbild.

Die Bilder für die Seiten werden horizontal bzw. vertikal positioniert und gekachelt.

Die Bilder für die Ecken sind in den jeweiligen Ecken und über den DIVs für die Seiten positioniert.

Bilder erstellen

Um die Bilder für solche Blöcke zu erstellen, kann man ein großes Bild in Ecken und Seiten zerschneiden. Die einzelnen Bilder müssen mit der gleichen Prozentzahl komprimiert werden, da es sonst zu Farbabweichungen kommt.

Transparente Bilder

Für transparente Bereich kann man zwar GIFs verwenden, aber die sehen meist nicht sonderlich schön aus. Deswegen ist es besser und einfacher, den Bildern die Hintergrundfarbe der dementsprechenden Seite zu geben und diese dann als JPG zu speichern.

 

nach oben

© 2008-2017 Constanze Strauss www.seitenschritt.de - Letzte Aktualisierung am 16.10.2017