Step 04 - Mehrere Divs

Hier werde ich erklären, wie ihr in eurem Design mehrere Textfenster, für zB News oder eine Shoutbox und ähnlichem coden könnt.

1) DIV kopieren

Ihr habt euren Grundcode jetzt in dem Editor kopiert (wenn nicht, dann geht auf Start --> Programme --> Zubehör --> Editor und fügt dann den "Grundcode" von uns ein - siehe hier).
Jetzt betrachtet den Anfang, den CSS-Teil. Irgendwo wolltet ihr den "div.content" finden:

Diesen markierten Teil kopiert ihr mit Rechtsklick --> Kopieren und fügt ihn genau da drunter wieder ein. Achtet darauf, dass alle Klammern, die ich im Screenshot markiert habe, bei euch auch markiert sind. Wenn ihr eine runde Klammer vergessen habt, kann es sein, dass gar nichts mehr funktioniert! Also schön aufpassen.

Bei mir sieht es jetzt so aus:

Ihr seht jetzt, dass ihr zwei Divs doppelt habt. Den ersten müsst ihr so lassen!
Den zweiten, den kopierten Div, müsst ihr im nächsten Schritt verändern.

2) Werte ändern

Da ihr jetzt nur einen Div kopiert habt, ist es ja logisch, dass er genau an der gleichen Stelle ist und auch den gleichen Namen hat, wie der erste Div. Da wir den Content-Div kopiert haben, würde unser zweite Div an der gleichen Stelle, wie der Content sein. Aber das wollen wir ja nicht. Also müssen wir als erstes den kopierten Div umbennen.
Ganz am Anfang des kopierten Divs steht "div.content". Anstatt "content" schreibt ihr einen andren Namen hin, zB "newsbox". Alles muss klein geschrieben werden und es dürfen keine Sonderzeichen oder Umlauten verwendet werden! Also würde es dann "div.newsbox" heißen.
Als nächstes ändern wir die Position des kopierten Divs.. Dazu müssen wir nur die Werte "top", "left", "width" und "height" ändern (also nur die Werte des kopierten Divs!). Die Angaben sind in Pixeln.
top = Abstand von oben
left = Abstand von links
width = Breite des gesamten Divs, also Breite der Box
height = Höhe des gesamten Divs, also Höhe der Box

Schreibt dort einfach mal andere Zahlen hin, egal welche. zB:
top: 200px;
left: 200px;
width: 150px;
height: 400px;

Jetzt sieht das bei mir so aus:

3) Box im Body einfügen

Jetzt haben wir unsere Newsbox im CSS eingefügt, aber noch nicht im Body, die Box ist also noch gar nicht sichtbar auf unserer Homepage.
Wir gucken uns den Body Bereich an:

Jetzt kopieren wir wieder den Content-Teil und fügen ihn darunter ein:

Jetzt müssen wir alles nur noch umbennen. Wir haben unseren Div ja "newsbox" genannt. Dieser Name muss dort überall anstatt "content" hin. Wenn ihr ihn anders benannt habt, müsst ihr natrlich diesen Namen nehmen. Also sieht es jetzt folgendermaßen aus:

Soutbox: Wenn ihr euch irgendwo eine Shoutbox geholt habt, dann ist auch immer ein HTML Code dabei. Den Code müsst ihr kopieren und an dieser Stelle "HIER KOMMT DER INHALT DER NEWSBOX HIN" einfügen. Natürlich den Text davor löschen.

News / Eigener Text: Hier müsst ihr einfach nur euren Text hinschreiben.
Ein Tip von mir: Wenn ihr eure News/euren Text schön formatiert haben wollt, also bunt, fettgedruckt, kursiv oder sogar Bilder dort haben wollt, dann könnt ihr es so ganz leicht machen: Erstellt euch eine neue Textseite, die ihr nicht in die Navigation mit aufnimmt. In dieser Textseite schreibt ihr alles rein, wie es in eurer Newsbox/Textfenster erscheinen soll. Euer geschriebene Text wird genau so erscheinen, wie ihr ihn im Textseiteneditor seht. Ihr könnt auch Bilder und Links einfügen. Gimmicks gehen glaube ich nicht, probiert es einfach aus.
Nachdem ihr fertig seid, speichert ihr die Seite ab und geht danach in den HTML Editor dieser Seite. Kopiert de kompletten HTML Code. Dann geht ihr zurück zu eurem Designcode mit dem neu gecodeten Zweitfenster.
Und an der Stelle, wo das hier steht "HIER KOMMT DER INHALT DER NEWSBOX HIN", fügt ihr euren kopierten HTML Code eurer Textseite ein. Den Text davor natürlich auch löschen. Aber noch ein Tip: Schreibt lieber zuletzt etwas ins Fenster rein, denn es fehlt noch ein wichtiger Schritt!

4) Speichern und rumprobieren

Diesen Vorgang müsstet ihr ja schon einmal beim "Design coden" bei den Grundeintellungen gemacht haben. Ihr müsst Werte ändern, rumprobiere und im Browser nachgucken, ob die Box so richtig positioniert ist. Aber zur Sicherheit erkläre ich es noch einmal im Schnelldurchlauf:
Speichert das Textdokument unter Datei --> Speichern unter
Speichert es dort, wo ihr es leicht wieder finden könnt, am besten auf dem Desktop oder in den Eigenen Dateien. Schreibt als Dateinamen zB "Design.html" hin. Ihr müsst dieses .html dahinter schreiben! Sonst könnt ihr euch die Seite nicht als Test im Internet Explorer ansehen.

Jetzt geht zum Desktop und öffnet eure soeben gespeicherte Datei mit einem Doppelklick. Es sollte sich im Internet Explorer oder einem anderen Browser öffnen. Jetzt könnt ihr sehen, wo ihr eure Newsbox positioniert habt. Wenn sie weiter nach rechts soll, dann vergrößert den Wert bei "left". Wenn die Box breiter soll, dann vergrößert den Wert bei "width". Wenn der Platz von oben kleiner werden soll, dann verkleinert den Wert bei "top". Und so weiter, ich denke, es erklärt sich alles von selbst.
Ihr öffnet eure Datei im Editor, indem ihr auf die Design.html Datei einen Rechtsklick macht --> Öffnen mit --> Editor
Dann könnt ihr den Code wieder bearbeiten und neu abspeichern. Guckt als Test immer wieder im Browser nach, wie es aussieht.