Neuschnee im Januar
 
 
  
 
 

Tipps - Mögliche Anpassungen

  Breite der Gesamt-Konstruktion ...

Zu ändern in der Datei format.css bei:
/* breite der gesamtkonstruktion*/
#breite {width:960px}
Für eine Prozentkonstruktion (Breite der Seite in Prozent bezgl. der eingestellten Monitor-Breite) schreiben Sie dort anstelle der Pixelwerte (px) alternativ auch beliebige Prozentwerte, z.B:
/*breite der gesamtkonstruktion*/
#breite {width:84%}
- Egal ob Sie die Breite in Pixel oder Prozent ändern, das Layout ist flexibel angelegt, d.h. der Rahmen mit Schatten-Effekt passt sich immer Ihrer Änderung an und wandert mit.

- Falls Sie die Breite ändern, achten Sie evt. darauf, daß Ihr Foto breiter ist, als unser Beispiel-Foto (Baum), welches hier nur 660 Pixel breit ist. Wer mag kann natürlich auch unser Foto entsprechend weiterbearbeiten bzw. die Hintergrundfarbe varieren.


  Verbreitern der Menü-Spalte ...

Zu ändern in der Datei format.css bei:
/* breite der rechten spalte
 - hier beliebig andere px-werte */
#inboxbreite {width:260px;}

 Die Hauptgrafik bzw. Ihr Logo-Bild ...

Das obige Bild (hier das "Baum-Foto" namens "logo.jpg") können Sie tauschen - wenn sie mögen. Müssen Sie aber nicht.

Zu ändern in der Datei format.css bei:
#logo {width:100%;
background-color:#000;
background-image:url(images/logo.jpg);
background-repeat:no-repeat;
background-position: 100% 50%;
border-top:solid 1px #000;
border-right:solid 1px #000;
border-bottom:solid 1px #000;
}

 Das Inhaltsfeld ...

Die wesentlichen Anpassungen bezgl. des Textes/Inhaltsfeldes, wie Schriftgrösse (font-size), Zeilenhöhe (line-height), Schriftart (font-family), Abstände zum Rand hin (padding), Buchstabenabstand (letter-spacing), Hintergrundfarbe (background-color) bwz. Hintergrundgrafik (background-image) sowie Höhe (height) des Feldes finden Sie in der Datei "format.css" bei
#inboxinhalt {
height:1000px;
background-color:#fff;
text-align:justify;
font-size: 17px;line-height: 24px;
font-family: arial,tahoma,verdana,helvetica, sans-serif;
color:#5f5f5f;
padding-top: 80px;
padding-bottom: 80px;
padding-left: 20px;
padding-right:20px;
letter-spacing:0px;
width:100%;
vertical-align:top;
background-image:url(images/sch_re2.png);
background-repeat:repeat-y;
background-position: 100%  0%;
border-top:solid 1px #000;
border-bottom:solid 1px #000;
border-right:solid 1px #000;
}

 Der Rahmen ist auch anpassbar ...

Die Farbe und Breite des Rahmens (hier nur als sogenanne Haarlinie mit nur 1 Pixel Breite in schwarzer Rahmenfarbe), welcher sich um die Seite legt, können Sie selbst bestimmen, und zwar in der CSS-Datei hier bei:
/* rahmen um die seite */
#haupt {
border:solid 1px #000;
}
Probieren Sie mal ein wenig, ein Rahmen mit ca. 10px schaut auch gut aus und gibt dem Ganzen eine andere Note. Dann sollten Sie aber auch -bezogen auf dieses Design- die Farbe ändern, denn in diesem Fall würde ein breiterer (10px) schwarzer (#000) Rahmen (border) nicht so gut aussehen. Ein Rahmen in Weiss oder hellem Grau dagegen eher umso besser.


  Die Menüs ...

Die Menüs passen Sie ggls. in der Datei menue.css an. Zum Beispiel die Ausgangsfarbe der Links oder die Mouseover-Farbe oder wenn Sie die Breite der Menü-Spalte ändern, müssten Sie dort auch die Menü-Breite der Links verstellen.


  Der Design-Trick ...

Wir möchten Ihnen einen kleinen Trick verraten, wenn Sie mögen: Der Kopfbereich wirkt grafisch, da dieser nach oben und unten abgerundet ist. Trotzdem ist dieser Bereich in Höhe verstellbar bzw. auch verkürzbar, so dass Sie hier ggflls. auch mehr oder weniger Inhalt einfügen könnten. Wie funktioniert das? Nun, es ist folgendermaßen: Der Bereich besteht aus drei Teilen: Ein sich hineinwölbender Teil, ein Mittelteil (hier mit dem Homepagenamen) und ein sich herauswölbender Teil. Dadurch ist der Mittelteil unabhängig und flexibel einzustellbar.

Übrigens haben wir das gleiche Prinzip auch unten in der Fusszeile (enthält im Mittelteil die Adresse) angewandt.


  Der Blocksatz ...

Der Text ist hier als Blocksatz gestaltet, d. h. gleiche Ausrichtung der Buchstaben an linker und rechter Kante des Textes. Wer das nicht mag, ersetzt in der Datei "format.css" bei #inboxinhalt den Wert text-align:justify durch text-align:left.


 Die Grafiken - so sind diese eingebaut ...

In den meisten unserer Vorlagen bauen wir die Grafiken als Hintergrund-Grafiken (background-image) ein. Das hat den großen Vorteil, daß man über diese Hintergrund-Grafik dann nicht nur Text legen kann, wie z.B. den Homepagenamen oder die Adresse sondern ggflls. noch weitere Grafiken.

Was noch viel wichtiger ist: Die Anpassung an verschiedene Bildschirmauflösungen erfolgt automatisch, d.h. es wird immer nur der jeweilige Ausschnitt gezeigt.

Das kann z.B. so ähnlich aussehen, hier als "id-Befehl" mit dem Zeichen # im CSS-Bereich und der Angabe "id=beispielname" im HTML-Bereich.
#beispielname {
background-color:#fff;
background-image:url(images/beispielgrafik.jpg);
background-repeat:no-repeat;
background-position:100% 0%;
}
oder aber so ähnlich, nämlich
als "class-Befehl" mit dem Punkt-Zeichen im CSS-Bereich und dem Befehl "class="beispielname" im HTML-Bereich.
.beispielname {
background-color:#fff;
background-image:url(images/beispielgrafik.jpg);
background-repeat:no-repeat;
background-position:100% 0%;
}
Die "class-Angabe" lässt sich gleichzeitig für mehrere Objekte verwenden, die "id-Angabe" nur für ein bestimmtes Objekt innerhalb der Webseite. Das ist eigentlich der wesentliche Unterschied. Ansonsten ist der Quelltext ja nahezu identisch.

Wichtiger für Sie zum Verständnis sind vielmehr die folgenden Parameter:

1. background-image:url (images/beispielgrafik.jpg)
= Name der Grafik, ggflls. vorangestellt der Ordner-Name, hier bei uns "images".

2. background-position:100% 0%
= Ausrichtung der Hintergrund-Grafik in horizontaler Richtung (von links nach rechts) sowie in vertikaler Richtung (von oben nach unten). Die erste Angabe steht für horizontal, die zweite Angabe für vertikal. Je nachdem an welcher Stelle der Wert steht, gilt: Die Angabe 0% bedeutet links oder oben. Die Angabe 100% bedeutet rechts oder unten. Die Angabe 50% 50% zentriert genau mittig in beiden Richtungen.

In dem vorstehenden Beispiel (100% 0%) ist die Grafik rechts (horizontal) und oben (vertikal) ausgerichtet.

3. background-repeat:repeat
Dies ist der Befehl für die Wiederholung (Kachelung) der Grafik.
Andere Parameter sind:
"no-repeat" = keine Wiederholung der Grafik.
"repeat-x" = Wiederholung der Grafik auf der horizontalen Ebene.
"repeat-y" = Wiederholung der Grafik auf der vertikalen Ebene.

4. background-color:#fff
Generell fügen wir eine Angabe der Hintergrund-Farbe (background-color) immer hinzu, obwohl in vielen Fällen die Angabe der Hintergrund-Grafik (background-image) ausreicht. Denn immer dann, wenn der Inhalt eines Objektes (z.B. einer Tabellenzelle oder eines div-Bereiches) grösser ist als die Grafik, greift die Hintergrundfarbe zusätzlich.





Sie befinden sich auf der Tipps-Seite (tipps.html). Hier geht es zurück zur Hauptseite:

  - Die Startseite index.html
 
 
Mike Mustername GmbH & Co. KG    Beispielstraße 55    55234 Sampletown