Einige Tipps zur Modifikation
Zu ändern in der Datei format.css bei:
Die Hauptgrafik bzw. Ihr Logo-Bild ...
Das obige Bild (namens "logo.jpg")ist als Hintergrundgrafik eingebaut. Ees handelt sich um ein großes Foto und ist damit ggflls. leicht zu tauschen, nur wenn sie mögen.
#haupt {
background-image:url(images/logo.jpg);
background-repeat:no-repeat;
background-position: 0px -20px;
background-color:#454545;
background-repeat:no-repeat;
border:solid 18px #454545;
margin:0px;
}
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 bei #inhalt den Wert text-align:justify durch text-align:left.
Der Textschatten (hier als Zitat)
Der große Vorteil von dieser Text-Schatten-Lösung: Es funktioniert in jedem Browser und kommt ohne Grafiken aus. So ein Textschatten ist außerdem nahezu immer lesbar, egal welche Grafik dahinter liegt. Denn Sie können gleich mit zwei beliebigen Textfarben arbeiten, nämlich die obere und die leicht versetzte untere. Experimentieren Sie mal und setzen dann die Farben mal entgegengesetzt, erst z.B. unten hell und oben dunkel und dann genau umgekehrt, unten dunkel und oben hell. Sichern werden Sie auch von den Möglichkeiten begeistert sein. Klar geht es auch farbig und für manchem noch deutlicher, probieren Sie einfach ein wenig. Hier der CSS-Code:
#textschatten {
position:relative;
float:left;
margin:auto;
top:0px;
left:0px;
width:250px;
font-family: georgia,Verdana,
Arial,Helvetica,sans-serif;
font-size: 19px;
font-style:normal;
letter-spacing:1px
}
#textschatten .text1 {
position:absolute;
top:1px;
left:1px;
color: #000;
}
#textschatten .text2 {
position:absolute;
top:0px;
left:0px;
color: #6f6f6f;
}
1].
Die Farb-Einstellungen nehmen Sie bei
#textschatten .text1
und
#textschatten .text2
vor, dort jeweils bei "color".
2].
Die Einstellungen zur horizontalen Ausrichtung (links, mitte, rechts) und zur vertikalen Ausrichtung (oben, mitte, unten bzw. Zustände dazwischen) sowie Schriftart, Schriftgröße, wieviele Wörter in einer Zeile stehen, ändern Sie bei
#textschatten.
3].
In unserem Beispiel bedeutet das: Das Zitat ist mit der Schrift "georgia" (font-family), der Schriftgröße "19px" (font-size) angelegt. Es ist rechts ausgerichtet (float:right) und hat keinen Abstand (left:0px) zum linken Rand des Logo-Feldes. Weiterhin ist das Zitat-Feld 0 Pixel von oben (top) entfernt und ist 250 Pixel breit (width). Sie können also bestimmen wieviele Wörter in einer Zeile stehen, wennn Sie die Breite und/oder die Schriftgrösse einstellen.
4].
Soll das Zitat-Feld rechts stehen, würde die Änderung so aussehen:
#textschatten {
float:right;
right:30px;(hier mit 30Pixel Abstand)
position:relative;
margin:auto;
top:0px;
width:250px;
font-family: georgia,Verdana,
Arial,Helvetica,sans-serif;
font-size: 19px;
}
5]
Für eine horizontal mittige Ausrichtung scheiben Sie:
#textschatten {
float:center;
left:0px;
position:relative;
margin:auto;
top:0px;
width:250px;
font-family: georgia,Verdana,
Arial,Helvetica,sans-serif;
font-size: 19px;
}
6]. Für eine vertikale Ausrichtung steuern Sie das Zitat-Feld bei "top". Dort einen Pixelwert eintragen.
Breiten/Höhen Anpassung
Gesamtbreite:
Für eine Prozentkonstruktion (Breite der Seite in Prozent bezgl. der eingestellten Monitor-Breite), tragen Sie hier beliebige Prozentwerte ein.
/*breite der gesamtkonstruktion*/
#breite {width:92%}
Für eine Pixelkonstruktion (feste Breite der Seite in Pixelwerten) schreiben Sie dort beliebige Pixelwerte (px), z.B. Im Moment ist es mit 995 Pixel wie folgt eingestellt:
/* breite der gesamtkonstruktion*/
#breite {width:995px}
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 liegt dabei immer transparent über der Hintergrundgrafik.
Breite der linken Spalte:
/* breite der linken spalte in pixel */
.breite_hauptspalte_li {width:300px;
margin:0px;padding:0px}
Höhe des Inhaltsfeldes (zur Zeit 980px):
Die Höhe ändern Sie bei "height". Sie könnten hier z.B. natürlich auch die Abstände (padding) vom Inhaltsfeld zum Rand hin, also nach links, rechts, oben und unten, einstellen, die Schriftfarbe (color), die Schriftgröße (font-size) oder die Zeilenhöhe (line-height) anpassen.
#inhalt {height:980px;
text-align:justify;
vertical-align:top;
width:100%;
font-family : arial, helvetica,
tahoma, verdana, sans-serif;
font-size: 17px;line-height: 22px;
color:#6f6f6f;
padding-top : 40px;
padding-bottom : 80px;
padding-left : 30px;
padding-right : 30px;
background-color:#454545;
}
Bonus-Grafik
Beim Mouseover im linken Menü sowie bei der Beispiel-Liste sehen Sie eine kleine Pfeil-Grafik (arrow.png). Alternativ können Sie auch die kleine Quadrat-Grafik (quadrat.gif) oder die kleine Stern-Grafik (stern_kl.png) anbei verwenden. Je nachdem, was Ihnen besser gefällt.   
* * * * *
Dies ist die Seite tipps.html. Hier geht es per Klick zurück zur Startseite index.html.
|
