Für dieses Tutorial braucht ihr Firefox und die Erweiterung Firebug oder Chrome. Die Sceenshots zeigen Firefox, mit Chrome sieht es aber sehr ähnlich aus (Schau dir unten das 1. Kommentar an, falls du es mit Chrome machen willst!)
Geht auf eure Seite und klickt auf den Stift um es zu bearbeiteb und danach auf HTML-Modus.
Kopiert dann folgenden Code in das Textfenster:
- Code:
-
<div style="background: url(#URL#) no-repeat; width: #Breite#px; height: #Höhe#px; ">
Ersetze #URL# durch die Adresse deines Hintergrundbildes (damit ist der Direktlink gemeint, der mit http anfängt und mit .jpg, .png oder .gif aufhört) sowie #Höhe# und #Breite# durch die entsprechenden Abmessungen eures Layouts. Achte darauf, dass du auch die # ersetzt, nicht nur das Wort.
Bei meinem Layout erhalte ich so folgenden Code:
- Code:
-
<div style="background: url(http://img11.imageshack.us/img11/6464/layout1o.jpg) no-repeat; width: 557px; height: 700px;">
Danach kommt der Code für die einzelnen Scrollboxen. Für jede gewünschte Box musst du folgenden Code einfügen:
- Code:
-
<div style="width: 100px; height: 100px; display: inline; margin-top: 25px; margin-left: 25px; overflow: auto; float: left; border: 1px solid">c</div>
Und zum Schluss setze noch dies darunter.
- Code:
-
</div>
Klicke dann wieder auf Normalmodus.
Du siehst jetzt dein Layout und nebeneinander aufgereiht die Boxen.
Um diese jetzt an die richtige Stelle zu bekommen, öffne Firebug, indem du F12 drückst. Du kannst es auch über
Extras -> Web-Entwickler -> Firebug -> Firebug öffnen
aktivieren, wenn F12 nicht funktioniert.
Klicke auf das Symbol mit dem blauen Pfeil und fahre dann mit der Maus über die erste Textbox. Wenn sie blau leuchtet, klicke darauf.
Rechts siehst du nun die Eigenschaften dieser Box. Klicke auf die Zahl neben margin-top und erhöhe oder erniedrige sie mit den Pfeiltasten deiner Tastatur. Mache das selbe mit der Zahl hinter margin-left, bis die obere linke Ecke der Box da ist, wo sie hin soll.
Verfahre danach genauso mit den Werten für width und height, um die Größe der Box zu ändern.
Gehe, wenn du mit der Positionierung der Box fertig bist, mit der Maus über den Wert border bei den Eigenschaften und dann ein kleines Stück nach links. Du solltest dort jetzt einen grauen durchgestrichenen Kreis sehen. Klicke ihn an und der Rahmen der Box verschwindet.
Wiederhole dies mit den anderen Boxen.
Um eure Boxen mit Text zu füllen, müsst ihr dann nur noch das c (ohne vorher Firebug zu benutzen) anklicken.
Thema: Layouts Coden 
)