Diverse Techniken | ||||||||||||||||||||||
Trennlinie: Auch der Einsatz des HR Tags für horizontale Linie läßt sich dezenter anlegen, wenn man als Größe size="1" und das Attribut noshade zuweist. Schriftgröße: Hier habe ich für den oberen Teil eine Schriftgröße definiert, welche von den Einstellungen des Browsers unabhängig ist. Probieren Sie es aus. Netscape: Bearbeiten / Einstellungen / Gesamtbild (links) /Schriftart .... Internet Explorer: Ansicht / Schriftgrad. Das ist nur möglich mit der Style Sheet Größenangabe in Pixeln. Ich habe für das Style Sheet einen selbstgewählten Namen vorgegeben und zwar die Unterklasse .normaltext .normaltext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; text-decoration: none} Im Body wird der Text mit normalen Font Tags formatiert, damit auch Browser die keine Style Sheets beherrschen, ein paar Schriftformatierungen darstellen. In den Font Tags erfolgt dann die Zuweisung des Style Sheets mittels class. <font size="2" face="Verdana, Arial, Helvetica, sans-serif" class="normaltext"> Leider interpretiert Netscape und Internet Explorer die Größenangabe etwas unterschiedlich, das heißt im Internet Explorer sind die Pixel anscheinend etwas größer als im Netscape (man kennt den Schwachsinn). Also wenn man es ganz genau nehmen will, muß man für Internet Explorer und Netscape ein anderes Style Sheet definieren. Das kann man mit einer Browsererkennung mittels Javascript machen. Dabei muß allerdings wiederum gewährleistet sein, dass Javascript aktiviert ist. Hier ein Style Sheet mit Browserweiche. Tabellenränder: Unten mal ein paar Beispiele, wie man Tabellenränder auch etwas schöner gestalten kann. Es gibt zwar für den IE die Mögichkeit die Tabellenrahmen farbig zu definieren, aber was nützt das, wenn es für den Netscape nicht funktioniert? Durch den Einsatz von cellspacing und die Zuweisung einer Hintergrundfarbe in den einzelnen Tabellenzellen, entstehen schöne dezente Linien. Überhaupt sind geordnete Tabellen mit gleichmäßiger Aufteilung das A und O einer guten übersichtilichen Gestaltung. |
||||||||||||||||||||||
|
||||||||||||||||||||||
|
||||||||||||||||||||||
Hintergrundbild:
Am linken Bildrand hat diese Seite einen Schatten, der im Zusammenhang mit
dem Frameset ganz schön aussieht. Es ist ein Hintergrundbild mit einer
Breite von ca 10 Pixeln und einer Höhe von einem Pixel, welches mittels
Style Sheet, nur am link Bildrand vertikal gekachelt wird. Das funktioniert
mit folgender Style Sheet Zuweisung: body { background-image: url(shadow.gif); background-repeat: repeat-y} Hier findet man noch einige weitere Beisiele für kleine Hintergrundbilder. Dort gibt es auch das Style Sheet für fixierte Hintergrundbilder erklärt. Gesperrter Text: Außerdem möchte ich noch ganz unten auf den Link zu on-design hinweisen. Es ist zwar möglich mittels Style Sheet die Buchstabenabstände zu vergrößern, jedoch funktioniert das mal wieder nicht im Netscape. Deshalb wurde einfach zwischen jeden Buchstaben ein Leerzeichen gesetzt. Zwischen jedes Wort kann noch ein zusätzliches geschütztes Leerzeichen eingefügt werden. |
||||||||||||||||||||||
zurück Copyright
©
Ein weiterer Web Design Tip von Pastor Pixel |
||||||||||||||||||||||