Ich beginne gerade mit der Arbeit an einer Webseite mit einem komplexen tabellenbasierten Layout (vor Jahren kodiert).
Eines der Dinge, die ich tun möchte, ist, das Layout in ein passendes CSS-Layout mit divs und span umzuwandeln.
Können Sie einen guten Ansatz vorschlagen, um solche Probleme anzugehen? Soll ich ein CSS-Framework wie Blueprint verwenden? Einfach reingehen und hacken bis es richtig aussieht? Ich nutze Firebug und die IE Developer Toolbar bereits intensiv.
Beim Konvertieren zwischen Tabelle und CSS gibt es normalerweise keine Wunderwaffe. Jede Seite ist anders und hat andere Anforderungen. Die einzige wirkliche Antwort ist: Einfach das Markup von Grund auf neu starten.
Der beste Rat ist, zuerst das Markup vollständig zu schreiben. Stellen Sie sicher, dass das Markup korrekt und semantisch ist und Ihre Daten vollständig darstellt. Schreiben Sie das Stylesheet noch nicht. Erstellen Sie nach dem Markup das CSS. Auf diese Weise haben Sie semantisches Markup und CSS steuert die Präsentation rein.
CSS-Frameworks befürworten diesen Ansatz für semantisches Markup häufig nicht, da sie gezwungen sind, zusätzliche Tags hinzuzufügen, um ihren Ansatz zu erfüllen. Folglich sind CSS-Frameworks manchmal mehr problematisch als ihr Wert.
Mach das Markup, dann das CSS.
Bevor Sie beginnen, stellen Sie sicher, dass Sie einen CSS-Reset verwenden. Eric Meyer und Yahoo YUI sind beide ausgezeichnet. Dies wird dazu beitragen, dass alle Browser gleich aussehen.
Installieren Sie auch den HTML-Validator . Dadurch wird sichergestellt, dass Ihr HTML-Code gut aussieht und bereit für das Hinzufügen des CSS ist.
Dann nimm dir eine Kopie von Firebug und installiere sie in Firefox. Dies ist hervorragend, um zu sehen, welche CSS-Regeln was machen. Sie können einzelne Regeln deaktivieren, indem Sie für jede Regel auf s klicken.
Sehen Sie sich nun einige Webseiten an, die korrekt validieren und sehen, welche Regeln sie in ihren Stylesheets verwendet haben.
Zu testende Websites sind www.alistapart.com , CSS Zen Garden , SimpleBits usw.
Ich weiß nicht, ob das hilfreich sein kann, ich baue das CSS Framework Emastic (unterstützt flüssig) und feste Spalten) und Sie können Tabellen simulieren, wenn Sie möchten, hier ist das Beispiel Emastic Table
Ich sage den Kommentatoren, die sagen, dass Sie das Ganze von Grund auf neu gestalten sollten. Bereinige den HTML-Code und mache dann das CSS.
Ich möchte einen Grund hinzufügen, dies zu tun. Üblicherweise sind tabellenbasierte Designs mindestens ein paar Jahre alt und sehen daher ziemlich passe aus. Nutzen Sie diese Gelegenheit, um das Design zu verbessern. Entweder eine leichte Erfrischung oder eine komplette Überholung, je nach Geschmack und Bedarf.
Iterativer Weg funktioniert auch. Beginne mit kleinen Blöcken und wandle sie in CSS um. Dies sollte Ihre Tabellenstruktur vereinfachen und hoffentlich nur das "Grundraster" in Tabellen und den Rest in CSS lassen.
Wählen Sie dort eine vorhandene, getestete Lösung aus, wenn es sich um ein einfaches Layout handelt (für 1 bis 3 Spalten gibt es unzählige getestete Lösungen). Wenn es komplexer ist, gehen Sie mit Blueprint.
Ich würde keinen Rahmen verwenden. Ein neues Framework zu lernen ist nur sinnvoll, wenn Sie es über & amp; erneut. Jedes Framework hat seine eigenen Fehler und Schwächen. Verwenden Sie
%Vor% um eine Spalte zu erstellen. Diese werden wie float: left; ausgerichtet. Siehe Ссылка
In einigen Fällen könnte die Verwendung von regulären Ausdrücken Ihren Prozess beschleunigen.
Zum Beispiel so etwas:
%Vor%würde dem Anfang einer Tabelle entsprechen und den Inhalt der ersten Zelle in $ 1 für eine Ersetzung bereitstellen:
%Vor%Natürlich müssen Sie die Anpassung an Ihren speziellen Anwendungsfall anpassen. Wenn Sie eine Reihe ähnlicher Seiten haben, können Sie versuchen, zuerst eine Hand zu codieren und dann etwas zu verwenden, um die Konvertierung der anderen Seiten zu vereinfachen.
Ein anderer Ansatz wäre, etwas wie dieses jQuery-Plugin zu verwenden: Ссылка
Es ist beabsichtigt, das folgende Rendering zu modifizieren, aber es könnte während der Entwicklung verwendet werden, um eine gegebene Tabelle zu nehmen und eine einfache DIV-basierte Form davon bereitzustellen.