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.
- 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 - 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