Erweiterte CSS-Layouts Schritt für Schritt, WebReference
Die Herausforderung: Replizieren webref auf der Titelseite mit CSS. Die Lösung: CSS und viele Iterationen.
Rogelio Lizaolo verbessert auf Kwon Ekströms CSS-Version von webref der Tabled Homepage. Monate in der Herstellung, dupliziert das endgültige Design erfolgreich webref Layout ohne die Verwendung von Tabellen. Zahlreiche Fehler wurden in in Netscape und Internet Explorer entdeckt, wie sie CSS umgehen, und wir fanden einige elegante Abhilfen für diese und andere Probleme. Was folgt, ist ein Schritt für das Layout Tutorial Schritt CSS, das zeigt, wie wir auf das endgültige Design bekam.
Einführung
In "Evolution einer Home Page" Andy King warf den Fehdehandschuh, anspruchsvolle Leser webref die eingereichten (und sagenumwobene) home page in CSS zu duplizieren. Kwon Ekström kam mit einer Lösung auf. arbeitete in einer Reihe von Browsern. Nach seiner Lösung zu untersuchen, fand ich ein paar Probleme mit seinem Design, und dachte, ich würde versuchen, und auf sie zu verbessern. Andy, Kwon, und ich ging hin und her über mehrere Monate zwicken und zu verbessern mein Design. Was folgt, ist ein Schritt-für-Schritt-Konto meines Versuchs webref die tabellenartigen Layout mit CSS, zu duplizieren, während in anderen Implementierungen gefunden einige der Bugs und Probleme zu vermeiden.
Das ultimative Ziel ist es, ein CSS-Layout zu erstellen, die genau das WebReference.com Layout mit Tabellen gemacht ähnelt und auch benimmt sie gut mit kleinen Fenstergrößen und großen Schriftart.
Der Zielbrowser sind alle Generation fünf und mehr Browser für Windows und Macintosh-Plattformen. Wir suchen auch die gleichen Stilregeln für alle diese Browser zu verwenden. Diese Einschränkung macht die Aufgabe schwieriger und der endgültige Code größer und komplexer als es 6. So für einen Browser mit guter Compliance CSS Level 2, wie Netscape sein würde, können wir nicht die Funktionen verwenden, die nicht für alle Browser unterstützt und manchmal die notwendigen Abhilfen eine nicht so einfache Verwendung von CSS ergeben Bugs oder andere Probleme zu lösen.
Die Layout-Herausforderung
3 Spaltenlayout: Schritt für Schritt
Wir ändern nur die Hintergrundfarbe des neuen div. Jetzt können wir klar die linke Spalte und seinen Separator sehen. Schau mal
Dieses Mal werden wir Nest ein anderes div namens „main“ nur aus durchsichtigem seine Hintergrundfarbe anders zu setzen, und so können wir die Säulen und die Separatoren markieren. Schau mal
Fügen Sie die Top Nav und Ad Bars
Wir haben nicht den Code für den rechten und linken Spalten Inhalt noch, nur das visuelle Layout gemacht, aber wir haben die grundlegende Technik illustriert drei Spalten angezeigt werden und sie genau die gleiche Höhe zu machen. Also, bevor dieses Problem diskutiert sie die obere Navigationsleiste setzen und den Werbeblock an seinem Platz. Wir werden innen „ebenen1“ zu nisten und vor „Level2“ ein div mit einer id auf „topbar“ und innen „topbar“ wir Nest ein anderes div mit einer id auf „advBar.“ Schau mal
Float den Tip-o-the-Day
Inhalt jedermann?
Nun wollen wir das Problem angehen, wie Inhalte in diesen Gitter zu bringen. Die natürliche Art und Weise, es zu tun wäre, um die Eigenschaft float zu verwenden, aber wegen Opera und IE-Rendering-Probleme mit dieser Technik müssen wir uns auf dem absoluten Positionierung verlassen um Dinge zu erledigen. Der IE Fehler ist minimal, und außer Acht gelassen werden könnte, aber es gibt keine Möglichkeit, die Opera Fehler zu lösen, die wir entdeckten. Werfen Sie einen Blick auf die Links unten für eine Beschreibung und ein Beispiel für diesen Fehler.