KompoZer flexible feste Breite Div-Container Grundgerüst
Start - Die ersten Schritte - Website erstellen - Webspace + Domain - Weitere Schritte - Startseite erstellen
Start > Website erstellen > 2. WYSIWYG Editor > Anleitung Kompozer > 2. Feste und flexible Breite

Anleitung KompoZer 2 – Website feste oder flexible Breite erstellen

Feste Breite: Als erstes erstellen wir ein Design für die Auflösung von 1024 x 768 Pixel bzw. 600. Hierfür legen wir den Rahmen mit der Breite fest. Mit F11 rufen wir CSS auf und klicken auf #Rahmen. Bei Box 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 vergessen wird mit anzugeben. Unter Box geben wir dem Rahmen einen Außenabstand von z.B. 10 Pixel auf allen Seiten. Macht zusammen 990 Pixel. Dadurch steht der Rahmen nicht direkt am Bildrand an. Sieht meiner Meinung nach besser aus. Mit Vorschau kann das ganze immer wieder im Browser überprüft werden. Bei mehr als 990 Pixel wird ein Scroll-Balken eingeblendet, wenn der Bildschirm eine Auflösung von 1024 Pixel hat.
Flexible Breite: Statt der 970px geben wir hier z.B. 98% ein und Außenabstand 1 %. Macht zusammen 100 % Bildbreite aus.

Div-Container richtig anordnen

Der Rahmen, den wir erstellt haben, ist nur dazu da, dass wir die Seitenbreite festlegen können. Im Moment kann man seine Farbe zwischen jedem Div-Container sehen. das wollen wir nicht. Daher ordnen wir die Div-Container direkt untereinander an. Zuerst klickt man in die Header Linie ans Ende des Wortes. Mit Entf-Taste die Zwischenlinie des Rahmens löschen, das ganze mit allen anderen Elementen bis nach unten wiederholen. Übrig bleibt die oberste Rahmen Linie.
Es gibt nun 2 Möglichkeiten:

  1. Man behält den Rahmen und legt mit F11 und Box einen Rahmen um die ganze Seite mit Innenabstand (Pixel oder Prozent, je nachdem, ob flexible oder feste Freite), oder
  2. Löscht den ganzen sichtbaren Rahmen, so dass nichts mehr zu sehen ist

Den sichtbaren Rahmen werden wir löschen, da das schwieriger ist. Mit der Entf-Taste geht das ganze diesmal nicht, denn dann würde der Header verschwinden.
Wir müssen den HTML-Tag für Zeilenumbruch entfernen, der nennt sich <br>. Dazu müssen wir die Ansicht wechseln, am besten geht das indem man unten unten auf Quelltext geht , ansonsten über das Menü Ansicht. Zu sehen sollte nach <body> dies hier: <div id=”Rahmen”>Rahmen<br>. Am Anfang die Namenszuweisung des Div-Containers mit Rahmen, dann das was in der Linie sichtbar geschrieben ist – Rahmen und am Ende der HTML-Tag <br> für Zeilenumbruch. Wir entfernen das geschriebene und den Zeilenumbruch (Rahmen<br>) und lassen <div id=”Rahmen”> stehen. Wenn man nun in die WYSIWYG Ansicht zurück wechselt, ist der rahmen + Beschriftung verschwunden. Da wir keinen sichtbaren Rahmen mehr haben, können wir auch die Farbe entfernen. Mit F11 ins CSS wechseln und dort bei der Div ID #Rahmen den Hintergrund löschen. So halten wir unsere CSS Stylesheet Datei klein, indem wir unnötiges wieder löschen.

Design Grundgerüst fertigstellen

Als nächstes geht es an das festlegen der Höhen und Breiten der ganzen Bereiche. Bisher wird das ganze mit der Entertaste = Zeilenumbrüche gestaltet, oder durch den Inhalt der sich in Boxen befindet. Mit CSS (F11 – Div ID wählen – Box) lassen sich die Höhen gestalten, wie wir das schon mit der Breite getan haben. Das kann jeder so gestalten wir er es für richtig hält. Darauf brauchen wir nicht weiter eingehen, da wir das schon auf der vorherigen Seite gelernt haben.

Beschäftigen wir uns mit dem 2 Menü und dem Inhalt. Die sollen statt untereinander nebeneinander stehen. Daher weisen wir dem 2 Menü eine geringere Breite zu z.B. 150 Pixel (F11). Neben dem Menü erscheint nun ein Loch mit der Farbe des Rahmens (keine). Dort soll unser Inhaltsbereich hin.
In CSS gibt es das Float um das umzusetzen. Float heißt soviel wie im Wasser schweben/treiben.
CompoZer nennt das ganze Puffer und ist im CSS Reiter Box zu finden.
Wir nehmen links. Siehe da, der Inhaltsbereich ist nun rechts vom Menü 2.

Wie muss man sich das mit float vorstellen?

Fehlersuche: Sollte das nicht der Fall sein, dann liegt das an der Formatierung des Inhalt Bereiches. Entweder man hat dem Inhalt eine Breite zugewiesen, oder eine Position. Die müssen entfernt werden.
Ich nehme mal nicht an, dass es daran liegt, dass man zuerst den Inhalt, dann das Menü 2 erstellt hat, habe das extra auf der vorherigen Seite zwei mal erwähnt.
Die Breite passt sich nach dem Rahmen an, den wir der Seite gegeben haben, je nachdem ob man nun eine feste oder flexible Breite eingestellt hat, verändert sich der Inhaltsbereich dementsprechend. Daher ist keine Breitenangabe nötig. wird aber eine breite angegeben, die Breiter ist, als der freie Platz neben dem Menü 2, rutscht der Inhalt nicht nach oben.
Eine Positionsangabe brauchen wir nicht. Der Inhalt soll einfach nach dem Menü 2 kommen.

Weiter mit dem 3. Teil: Website fertig stellen und verlinken