HOFMANN EDV-BERATUNG

The background color for this column is actually a 200 pixel wide .GIF applied to the pageFrame element with background-repeat of repeat-y.

Background Colors

You can delete or change the background in the colors.css file, along with the background/foreground colors for any other element in this page.

When picking colors, try to use shades of the same color. It provides a more uniform, clean look and feel.

Another method in choosing a color scheme is to find something you see in life that you think is beautiful, then steal its color scheme. For example, if you see a poster that looks great, try using its color scheme in the layout.

Fonts

Font family (face type) and size can be changed using the theme.css stylesheet. This stylesheet is read in by Netscape 4 so some care should be taken with what is put in here. Or you could just @import this file which would basically hide it from Netscape 4.

One might look into shrinking the font size for innerContentColumn (the white background area) or increasing the font sizes used in the horizontal and vertical menus.

x x x x x this is to test the italics bug in ie x x x x x

Sicherlich muss man das Rad nicht jedes Mal neu erfinden, wenn man eines braucht. Daher fußt auch diese Webseite auf einem Template, welches im Internet häufig vorkommt. Sie können gerne die Seite von Herrn Tantek besuchen, wo Sie sicherlich noch viele Ideen finden, die Sie in Ihren eigenen Projekten verwenden können.
Alle für diese Internetseite verwendeten CSS-Dateien finden Sie hier links, falls Sie diese herunterladen möchten.

Primäre Ziele

Ein zweispaltiges Layout zu erhalten, das nur CSS verwendet (d. h. keine Tabellen), das des weiteren eine Fußzeile berücksichtigt, die beide  Spalten abdeckt und am Ende der Seite erscheint, unabhängig davon, ob ein Spalte "höher" ist, als die andere. Es unterstützt alle gängigen Browser und funzt auch gut mit  Browsern mit schlechter oder keiner CSS Unterstützung. Das schließt Netscape 4 ein.

Sekundäre Ziele

Seien Sie im Stande, die Trennung von  Spalten auf eine Weise (Grenzen) zu zeigen, die nur CSS verwenden (d. h.. keine Images, Hintergrund oder sonst). Schließen Sie einen Masttop (trivial) ein und schließen Sie auf ungeordnete Listen beruhende Menüs ein. Hintergrundfarben für individal  Spalten sind möglich aber, jetzt, nur durch den Gebrauch eines Hintergrundimages, um als eine  Spalte (gewöhnlich linke  Spalte) Hintergrundfarbe zu handeln.

Die Grundidee
Die linke  Spalte hat eine angegebene Breite (200px in diesem Fall) und wird verlassen schwimmen lassen. Die wichtige (zufriedene)  Spalte hat eine angegebene Breite nicht aber wird mit einem Rand der nach links Seite dieselbe Breite wie die linke  Spalte gesetzt. Der Fußzeile-Kasten hat den CSS klarer Attribut-Satz zu link, so dass, unabhängig von dem  Spalte (link oder Inhalt) höher ist, die Fußzeile immer am Boden sein wird.

Wichtige Details
Das komplette Lay-Out wird innerhalb genannten pageFrame eines Blocks von elternteil-DIV eingeschlossen. Das berücksichtigt einen Rand, der auf die komplette Seite ohne anzuwenden ist, die CSS Eigenschaften von mehreren verschiedenen Elementen editieren zu müssen. Es berücksichtigt auch einen sehr leichten Weg, dieses Lay-Out auf eine befestigte Breite zu setzen, soll solch ein Ding gewünscht werden.

Der Gebrauch von Grenzen ist ziemlich aufrichtig. Die einzigen Zeitdinge fangen an, heikel zu werden, ist mit der Grenze, die die linken und zufriedenen  Spalten trennt. Das Problem besteht hier dass darin, wenn wir die Grenze definieren, um der linken  Spalte zu gehören, dass das Trennen der Linie nur ebenso hoch sein wird wie die linke  Spalte. Wenn wir es zur zufriedenen  Spalte schalten, dann wenn die linke  Spalte länger ist, ist diese Linie dabei, daran anzuhalten, bevor es die Fußzeile erreicht. Wir verwenden ein flüssiges Lay-Out, so haben wir keine Weise zu wissen, welche Einstellungen der Endbenutzer hat. So, beide Situationen zu bedecken (verlassen ist länger als Inhalt, ist Inhalt länger als link) beide Grenzen werden definiert und gemacht, um zu überlappen.

Um auf Grenzen überzugreifen, müssen wir pixel-vollkommen werden. Das ist, warum die linke  Spalte an 200px in Breite gesetzt wird aber der Anfangsrand der zufriedenen  Spalte an 199px gesetzt wird. Jedoch arbeitet das völlig in alten Browsern nicht. So gibt es einen zusätzlichen CSS im einfachen stylesheet, der sich widths und Rändern der linken  Spalte befasst, die ein bisschen nutzlos scheinen. D. H. 4 Bedürfnisse ein-200px rechter Rand auf der linken  Spalte und Netscape 4 Bedürfnisse 2px Anfangsrand auf der linken  Spalte. Am Ende arbeitet es, und es ist wirklich, welch von Bedeutung ist.

Ein Schlüsseltrick
Das Durchschauen der Quelle für diese Seite wird mehrere Beispiele (3) zeigen, wo es einen DIV-Block gibt, innerhalb dessen ein innerer DIV-Block gelegt wird (Wie leftColumn, enthält innerLeftColumn). Der Grund dafür ist, dass D. H. und Mozilla (unter anderen Browsern) unterschiedliche Methoden haben, um die Breite und Höhe von Kästen zu messen. D. H. wird Rand, das Polstern, und Grenzen innerhalb einer spezifischen Breite eines Lay-Outs einschließen. Mozilla, sich CSS Standards anpassend, nimmt die definierte Breite eines Kastens und fügt dann das Polstern, Grenzen und Rand obendrein hinzu. Das verschieden in Kasten-Modellen schuf scheußliche Problem-Webentwickler haben versucht, seit Jahren zu lösen. Die am meisten allgemeine Lösung ist gewesen, die Kasten-Musterkerbe zu verwenden. Jedoch habe ich eine verschiedene Annäherung genommen.

Um das Kasten-Musterrätsel zu lösen, wird ein Kasten innerhalb eines anderen gelegt. Der Außenblock enthält die Breite (und Höhe) Dimensionsattribute und nur jene zwei Attribute, die Dimensionen eines Kastens betreffen. Der innere Kasten ist, wo, auspolsternd, Grenze und Ränder angewandt werden können. Indem sie diese Methode verwenden werden, werden beide D. H. und Mozilla Kästen richtig unabhängig davon machen, welches Kasten-Modell verwendet wird. Auf diese Weise können wir frei steuern, die Kasten-Musterkerbe zu verwenden. Nicht, als ob die Kasten-Musterkerbe schlecht ist oder nicht verwendet werden sollte. Das ist gerade ein persönlicher Geschmack, um dieser besonderen Kerbe fernzubleiben.

Wer Sorgt Sich Über Netscape 4?!
Ich tue, weil es einen größeren zu machenden Punkt gibt. Ich wünsche gerade, dass ich wusste, was es war. Es hat etwas, um mit dem Versuchen zu tun, sich anzustrengen, um alle Ihre Benutzer zu unterstützen, und dass, selbst wenn Sie nur, zum Beispiel, D. H. 6 Benutzerbasis, die Erforschung haben, um andere Browser und das Lernen von dieser Erfahrung zu unterstützen, wertvoller ist als die Zeit gespart, die Franse ignorierend.

Aber das könnte ein Gesichtspunkt geteilt nur von hartnäckigen CSS/web Entwicklern sein, die krank genug sind, um diese Art der Erforschung wirklich zu genießen. Wir nennen sie Masochisten.

Stylesheets Verwendet und Ihre Zwecke
simple.css
Das ist, wohin irgendwelcher "allgemein Browser-Safe" CSS geht. Dieser stylesheet ist das einzige Ding, das durch Netscape 4 und irgendwelche anderen alten Browser mit der minimalen CSS Unterstützung gesehen wird. So genug Bedürfnisse, hier zu sein, um dieses Lay-Out zu erzeugen, aber muss es sicherer CSS sein.
complex.css
Irgendwelche nichtsicheren Stile gehen hier. Das kann Netscape 4 und andere Browser zertrümmern, die sogar grundlegenden CSS nicht richtig unterstützen.
complex_hnav.css
Dieser stylesheet behandelt das Lay-Out des horizontalen Menüs gesehen oben. Wenn Sie dieses Menü löschen wollen, einfach diese Stil-Platte und den DIV-Block mit dem id von hnav von der Quelle dieser Seite entfernen, und Sie alle gesetzt werden.
complex_vnav.css
Mag den obengenannten stylesheet außer diesem ist für das vertikale Menü gesehen nach links. Beide Menüs werden von ungeordneten Listen gebildet, ohne diese stylesheets bedeutend, die die Seite noch fein machen wird, und die Logik des Lay-Outs arbeitet noch.
theme.css
Dieser stylesheet wird verwendet, um ein Thema über den Grundlay-Out-Blick anzuwenden. Das ist, wohin Schriftart und Farbenwahlen gehen sollten. Lay-Out-Änderungen, wie Grenze und  Spaltengrößen, sollten nicht hier gehen. Dieser stylesheet wird auf solcher Art und Weise verbunden, dass Netscape 4 es lesen wird. So kann nur sicherer CSS hier gehen.
colors.css
Verzug-Einstellung ließ diesen stylesheet in von theme.css importieren. Das ist, weil Netscape 4 einen Raum zwischen dem Rand eines Kastens hinzufügt, und wo seine Grenze gezogen wird. Die Bedeutung, dass Kästen mit einer Hintergrundfarbe ein Gebiet in der Nähe vom Rand haben werden, wo Sie sehen können, was unter diesem Kasten ist. Ick. Aber, ist das auch eine große Weise zu helfen, die verschiedenen Aspekte der Stile des Lay-Outs auszudehnen und es viel mehr managable zu machen. Jetzt muss man sich nicht durch lange CSS Dateien bemühen, hintergrundfarbige Einträge zu finden. Hier sind sie, und leicht sich zu behelfen.
Verwendete CSS-Kerben
CSS-Kerben werden in diesem Lay-Out verwendet. Der Grund, der das ist, gibt es einige kleine Programmfehler innerhalb von individuellen Browsern, die das Lay-Out abwerfen können. Der Gebrauch von überlappenden Grenzen in diesem Lay-Out verlangt Pixel-Vollkommenheit, die nur zum Bedürfnis nach CSS Kerben beitrug. Dieses Lay-Out versucht, nur einfachen, gültigen CSS zu verwenden, der CSS Kerben erzeugt. Die stylesheets enthalten einige Erklärungen dessen, welche CSS Kerben verwendet wurden und warum.

D. H. und Kursive
Es scheint, dass IE5/Win die Breite des in Kursiv gedruckten Textes nicht berücksichtigt, die Breite eines Kastens berechnend und den Text innerhalb des gesagten Kastens wo autozuwickeln. Wenn der Text schließlich innerhalb des Kastens gemacht wird, sind die sich einhüllenden Positionen aus, und einige Linien sind breiter als der Kasten. Die Übergabe von IE des Motors macht Platz, die Breite des Kastens vergrößernd. Jedoch sind alle anderen Kästen, die bereits nach Größen geordnet worden sind, jetzt zu breit, um den verfügbaren Raum einzufügen. Das zerstört das Lay-Out als D. H. versucht, alle Elemente innerhalb der Seite wiedereinzustellen, um den ganzen Raum (Breite) Einschränkungen zu befriedigen.

Im Fall von diesem Lay-Out haben wir schwimmen lassenen verlassenen  Spaltenkasten einer befestigten Breite und einen schwimmen lassenen variablen Breite-Inhalt-Kasten rechts. Wegen dieses Programmfehlers ist der zufriedene Kasten zu breit, um den verfügbaren Raum einzufügen, und wird unten unter der schwimmen lassenen linken  Spalte gestoßen. Das ist nicht wünschenswert.

Dieser Artikel am Obstkuchen richtet das Problem, über das ich spreche.

Die vorgeschlagene Lösung ist, das Überschwemmungsattribut zu sichtbar zu setzen. Das sollte keine Wirkung auf irgendwelche anderen Browser haben, weil es keine Überschwemmung geben wird, wie sie richtig rechnen werden und Lay-Out die Seite. Jedoch für dieses Lay-Out, die Höhe der zu 100 % fraglichen  Spalte (N) setzend, ist auch erforderlich.

Diese Lösung arbeitet für D. H. 5.0 nicht. Eine vorgeschlagene Lösung ist, die Breite des Kastens von der erwarteten Größe zu vermindern, so dass, wenn D. H. die Breite vergrößert, es noch genug Zimmer gibt, um zu passen. Das arbeitet in diesem Lay-Out nicht, wie die Grenze zwischen den linken und wichtigen (zufriedenen)  Spalten aus der passenden Grenze zusammengesetzt wird, die auf jedem jener zwei Kästen definiert wird. Wenn wir sogar 1 Pixel von den Grenzbrechungen sind.

Die andere vorgeschlagene Lösung ist, Überschwemmung zu verborgen zu setzen. D. H. 5.0 kann das und Grenzfall behandeln, die Ränder eines Wortes oder zwei werden abgeschnitten, aber das sollte nicht sehr häufig, wenn überhaupt geschehen. Jedoch scheint diese üble Lage nicht mit diesem Lay-Out zu arbeiten. Am wahrscheinlichsten wegen der Natur der Kästen wenden wir die üble Lage auf und alle anderen angewandten CSS an.

Nach einigen empirisch wurde eine Lösung, die mit diesem Lay-Out arbeitet, gefunden. Einstellung der Überschwemmung zu verborgen und der auch Verwendung einer Breite von 100 % und einer Höhe des Autos scheint zu arbeiten. D. H. Programmfehler () der Hin-und Herbewegung werden geflickt, eine Höhe von 100 % setzend. Jedoch erscheint es, D. H. 5.0 ist Hin-und Herbewegungsprogrammfehler frei sogar mit dieser üblen Lage angewandt, Dank-Güte. Jedoch, gerade natürlich verwenden wir Paar-Kerben, um das CSS fragliche davon zu behalten, bis etwas anderes angewandt zu werden, als D. H. 5.0.

Die vollständige Lösung kann in complex.css gefunden werden.
 

© 2003 Anyone