Anleitung Amaya flexible oder feste Breite
Start - Die ersten Schritte - Website erstellen - Webspace + Domain - Weitere Schritte - Startseite erstellen
Start > Website erstellen > 2. WYSIWYG Editor > Anleitung Amaya > 2. Feste und flexible Breite

Anleitung Amaya 2 – Website feste oder flexible Breite erstellen

Feste Breite: Als erstes erstellen wir ein Design für die Auflösung von 1024 Pixel x 768 bzw. 600. Hierfür legen wir den Rahmen mit 970 Pixel Breite fest. Dafür müssen wir den Div-Container Rahmen auswählen. Dafür klicken wir auf das erste div unten . Klickt man direkt ins Rahmenfeld, hat man nur ein Div zur Auswahl. Das richtige hat man, wenn alles zusammen markiert ist. Das CSS Symbol  nun anklicken und den Reiter Rahmen auswählen. Bei width wählen wir, bzw. geben wir 970px ein. Px steht für Pixel (Maßeinheiten Web). Immer darauf achten, dass man die Maßeinheit nicht vergisst mit anzugeben. Unter margin geben wir dem Rahmen einen Außenabstand von z.B. 10 Pixel auf allen Seiten. Macht zusammen 990px in der Breite. Dadurch steht der Rahmen nicht direkt am Bildrand an. Sieht meiner Meinung nach besser aus. Wird mehr als 990 Pixel zusammen als Breite vergeben, wird ein hässlicher Scroll-Balken eingeblendet.
Flexible Breite: Statt der 1000px geben wir hier z.B. 98% ein und Außenabstand (margin) 1 %. Macht zusammen 100 % Bildbreite aus.

Nicht vergessen: Immer mal wieder zwischendurch abspeichern!

Div-Container richtig anordnen

Dem Menü links soll nicht über die ganze breite gehen. Daher weisen wir ihm eine Breite zu. Dazu klicken wir in die Menü links Linie und klicken unten das letzte DIV-Element an, nun sollte die ganze Linie markiert sein. Im Menü oben klicken wir auf das CSS Symbol  und wählen den Reiter Rahmen aus. Bei width legen wir z.B. 150px fest. Nun hat das Menü links nur noch 150 Pixel breite und rechts davon scheint die Rahmenfarbe hervor.

Vom Rahmen wollen wir nichts mehr sehen, daher löschen wir nun die Hintergrundfarbe. Klicken in die Rahmenlinie und klicken unten auf das div, so dass alles markiert ist. CSS aufrufen und bei Farben die Hintergrundfarbe (background-color) entfernen, indem man transparent auswählt.

Ganz oben gibt es noch eine Rahmen Linie, in der wir auch die Beschreibung drin haben (Rahmen). Da der Rahmen Div-Container nur die Größe der Website festlegen soll, aber sonst nicht zu sehen sein soll, löschen wir diese Linie. Als erstes entfernen wir das Wort Rahmen, dann drücken wir die Entf-Taste, nichts mehr vom Rahmen zu sehen. Wenn alles richtig gemacht wurde, darf sich die Hintergrundfarbe des Headers nicht geändert haben. Ansonsten mit Strg+Z (engl. Ctrl+Z), bzw. Bearbeiten –> Rückgängig das ganze zurücksetzen und wiederholen. Wenn nun in eine Linie geklickt wird, müssen zwei div unten zu sehen sein. Der erste ist für den Rahmen und markiert alles, der zweite div steht für Zeile in der man ist.

Jetzt ist neben dem Menü links noch immer ein Loch und der Inhalt steht darunter. Nun setzen wir den Inhalt auf die rechte Seite. Dazu werden wir mit dem float Befehl die Menü Box nach links fließen lassen. Wir klicken in den Menü Links Bereich und markieren die Zeile durch das anklicken des div unten (der zweite und letzte, da der erste der Rahmen ist). Rufen CSS auf und wählen Format. Bei float geben wir left an, für links, übernehmen und fertig. Der Inhalt ist nun rechts vom Menü links.

Wer nun auf die Idee kommt, dass das Menü doch besser auf der rechten Seite aufgehoben ist, der wählt statt left nun right aus. Das Menü ist nun rechts und der Inhalt links.

Wie muss man sich das mit float vorstellen?

Jetzt ist noch alles ganz nah beieinander. Mit CSS könnte man den ganzen Div-Container Höhen zuweisen, alternativ ginge das auch mit der Entertaste. Aber wir lassen das besser so, denn durch die Inhalte (Text und direkt eingefügte Bilder, nicht durch Hintergrundbilder) die wir einfügen, werden sich die Boxen anpassen.

Weiter mit Teil 3: Website fertig stellen und verlinken