Anleitung 2 BlueGriffon Breite festlegen DIV-Container
Start - Die ersten Schritte - Website erstellen - Webspace + Domain - Weitere Schritte - Startseite erstellen
Start > Website erstellen > 2. WYSIWYG Editor > Anleitung BlueGriffon > 2. Feste und flexible Breite

Anleitung BlueGriffon 2 – Website feste oder flexible Breite erstellen

Als nächstes legen wir in BlueGriffon die Breite der Website fest. Dafür gibt es zwei Möglichkeiten.

  1. Feste Breite: Inzwischen werden die meisten Seiten auf eine Auflösung von 1024 Pixel optimiert. Daher werden wir das auch machen. Wir markieren (klicken) den Rahmen DIV an  und in den Stil-Eigenschaften –> Geometrie –> Breite legen wir 970 Pixel fest. Als Außenabstand nehmen wir 10px zusammen sind das 990 Pixel (10 Pixel links, Inhalt 970 Pixel und 10 Pixel rechts). Dafür markieren wir die Option “Vier gleiche Außenabstände” und geben 10px im freien Feld an. Maßeinheit px nicht vergessen! Würden wir mehr als zusammen die 990 Pixel nehmen, würde ein Scroll-Balken eingeblendet werden
  2. Flexible Breite: Hier wird statt der 1000 Pixel 98% genommen. Als Außenabstand nehmen wir 1%. Zusammen macht das die 100 % der Bildschirmgröße.

Eine andere Möglichkeit wäre eine feste oder variable Breite durch auswählen im Menü oben zu bekommen.  Mit der Maus kann man mit den Balken, durch klicken und ziehen am Ende des Balkens, die Pixel festlegen.

Div-Container richtig anordnen

Noch sieht das ganze nichts gleich. Der Div-Container für das linke Menü geht noch immer über die ganze Seite. Daher wird dem Menü nun eine geringere Breite zugewiesen. Dafür gehen, bzw. klicken wir in die Linie des Menü links und klicken unten auf den Div für das Menü links. Im Stil-Eigenschaften Fenster werden nun  die Regeln für diesen Div angezeigt. Bei Geometrie –> Breite geben wir z.B. 150px ein. Das Menü ist nun 150 Pixel breit. Jetzt scheint rechts neben dem Menü die Farbe des Rahmens durch. Die entfernen wir, da wir den Rahmen nur dazu brauchen, die Webseite eine Breite zu geben und alles zusammen zu halten. Klicken dazu unten den Div an und unter Farben –> Hintergrund das runde Feld dahinter mit der Farbe. Im neuen Fenster löschen wir nun das was bei Hex: und Name: eingetragen ist. Meist wird nur etwas bei Hex eingetragen sein. Mit OK ist alles erledigt, keine Farbe mehr zu sehen. Nun ist da ein Loch neben dem linken Menü. An diese Stelle soll unser Inhalt Div.
Um den Inhalt rechts neben das linke Menü zu bringen, markieren wir den Div des linken Menüs (unten drauf klicken) und wechseln ins CSS Fenster (Stil-Eigenschaften) –> Position und Layout. Hier gibt es die Option Umfluss mit drei Möglichkeiten. Links-, nicht- und rechts umfliessend . Wir nehmen links, da wir unser Menü auf der linken Seite haben wollen. Ihr könnt auch mal die anderen Symbole zum testen klicken, passiert nichts was nicht mit einem Klick auf eines der anderen Symbole nicht rückgängig gemacht werden könnte. Sobald links oder rechts geklickt wird, rutscht der Inhalts Div nach oben neben das Menü. Nun ist alles an der richtigen Stelle.

Weiter geht es mit Teil 3 der Anleitung: Website fertig stellen und verlinken