Tabellenlayout in Css konvertieren ?!

[conTux]

Hallo liebe Gemeinde...

ich bin was (x)HTML betrifft noch ein kleiner Newbie. Ich hatte meine erste Website mit Hilfe von Vorlagen und Dreamweaver erstellt. Nun beschäftige ich mich gerade mit dem Buch von Michael Jendryschick (Einführung in XHTML, CSS und Webdesign) und habe doch leider noch einige Unklarheiten...

Ich möchte gerne in XHTML schreiben und dabei auch ganz genau auf die Trennung von Markup und Layout achten! Da nun meine alte Website komplett in HTML 4.01 Transitional geschrieben ist, möchte ich nun dieses Tabellenlayout, inkl. Bilder.. irgendwie in CSS konvertieren, weiß aber leider nicht wie ich das so richtig machen soll!

Ich freue mich über jeden guten Rat!

Danke!

contux

 

[Marv]

Hallo,
in dem Buch und auf der Webseite des Autors sollte eigentlich beschrieben sein, wie man ein Layout mit HTML und CSS erstellt. Also mit Div-Containern und diese dann mit "float" floaten.
Auf CSS 4 You findest du auch viele nützliche hinweise (hier auf der Seite meines Links unten bei Punkt 7 bis 9 z.B. zwei und dreispaltige layouts).
Wenn du dann noch explizite Fragen zur Umsetzung hast und den/Deinen entsprechenden HTML / CSS code angibst können wir dir sicher weiterhelfen.

Gruß, Marv

 

[struppi]

Soweit ich weiß, sind auch die Bücher Startseite - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller) gut.

XHTML ist keine gute Wahl - wird nicht mehr weiterentwickelt. Nimm lieber HTML5.

Und ein Tabellenlayout ohne Tabellen, ist schwierig und wird schnell eine DIV Suppe. Entwickel lieber ein Boylayout, dafür ist HTML/CSS optimal.

 

[Körnerbrötchen]

Das W3C spricht sich gegen eine Nutzung von HTML5 im Produktivbereich aus. Wieso empfehlt ihr es dann immer? XHTML tut es doch sehr gut.

@conTux: Ein Tabellenlayout "konvertiert" man nicht zu CSS. Das wäre der falsche Weg. Besser schaust dir das Design an und fängst einfach völlig frei vom alten Code an, die Seite neu zu schreiben.

 

[struppi]

Das W3C spricht sich gegen eine Nutzung von HTML5 im Produktivbereich aus. Wieso empfehlt ihr es dann immer? XHTML tut es doch sehr gut.

Ich gehe mal davon aus, es geht um bestimmte HTML5 Tags.

Aber HTML5 an sich, läßt sich heute schon im Produktivbereich einsetzen, zumal es ja auch abwärtskompatibel ist (und z.b. von google schon verwendet wird). Der Vorteil ist, dass es eben kompatibel ist. Mit XHTML hast du nur Probleme.

 

[conTux]

Ein Tabellenlayout "konvertiert" man nicht zu CSS. Das wäre der falsche Weg. Besser schaust dir das Design an und fängst einfach völlig frei vom alten Code an, die Seite neu zu schreiben.

Wie ich ja schon geschrieben habe, bin ich gerade dabei mit dem Buch von Michael Jendryschick etwas zu lernen! Nun habe ich darin auch gelesen, dass es besser ist - wenn man in der Zukunft in XHTML schreibt und Layout vom Inhalt trennt!

Dieses möchte ich ja nun auch machen!

Ich glaube das komplette Tabellenlayout jetzt in CSS zu schreiben, damit es genauso aussieht wie im Moment.... dazu habe ich noch zu wenig CSS-Planung!

Ich werde mich da einfach noch ein wenig durchlesen müssen! (Übung macht den Meister)

Also komm ich so um´s neu schreiben nicht rum? Gibt es da keine Werkzeuge, die mir die Arbeit abnehmen?

 

[Marv]

Hallo,

Nun habe ich darin auch gelesen, dass es besser ist - wenn man in der Zukunft in XHTML schreibt und Layout vom Inhalt trennt!

Das Buch ist auch von 2008, und man war sich damals noch nicht klar darüber ob man weiter XHTML als Standard weiterentwickelt oder HTML (HTML 5).

Werkzeuge zum Konvertieren kenne ich so nicht. Außerdem würde ich das für dich eher als positiv sehen das alles von Hand zu machen und so besser zu lernen. Das hilft Dir auch für spätere Projekte weiter.

 

[struppi]

Ich glaube das komplette Tabellenlayout jetzt in CSS zu schreiben, damit es genauso aussieht wie im Moment.... dazu habe ich noch zu wenig CSS-Planung!

Wie gesagt, dass wäre auch der falsche Weg.

 

[conTux]

Ich komm nicht klar! Ich verstehe es einfach nicht, wie ich mein altes Tabellenlayout in ein CSS-Layout bekommen kann.... ich komm mit diesem ganzen DIV nicht klar! Wie habt ihr angefangen, CSS an HTML zu verwenden? Also überhaupt das ganze mit der Positionierung ist ja nicht gerade sehr einfach für mich Newbie... :)

HIIIIILFEEEEE !!! :(

--siehe Quelltext von kenyaurlaub.de ----> sieht aber ziemlich durcheinander aus :-( !!! Daher möchte ich ja jetzt gerne Layout und Inhalt trennen und das am besten mit xhtml und css, aber ich raffs net :(

 

[threadi]

Denk nicht in div's. Denn mit div's erstellt man keine HTML-Codes. Du darfst dir auch nicht das jetzige Tabellenungetüm im Quellcode anschauen. Schau dir die Original-Seite im Browser an. Schau dort nach wie welche Texte gedacht sind. Überschriften, Absätze, Betonungen, Links etc. Und dann baust Du dir diese Texte so auf das HTML sie auch semantisch korrekt auszeichnet. Also für Überschriften <h1> bis <h6>, für Absätze <p>, für Betonungen <strong> etc.pp. Ggfs. gruppierst Du diese Elemente dann mit <div>'s, aber nur spärlich, so wie es dein Design gerade erfordert. Dann erst nimmst Du dir CSS zur Hand und gestaltest das was Du da geschrieben hast mit Stylesheets.

 

[Körnerbrötchen]

Ich gehe mal davon aus, es geht um bestimmte HTML5 Tags.

Wieso gehst du mal davon aus? Es dreht sich nicht um spezifische HTML5-tags: W3C: HTML5 ist noch nicht reif für den Einsatz - Golem.de

 

[struppi]

Wieso gehst du mal davon aus? Es dreht sich nicht um spezifische HTML5-tags: W3C: HTML5 ist noch nicht reif für den Einsatz - Golem.de

In dem Artikel, der dort verlinkt wird geht es um spezifische HTML5 Tags, wie Video, Canvas, MathML. Aber ansonsten kannst du natürlich den Doctype für HTML5 verwenden, denn wie gesagt XHTML hat nur Nachteile.

Wenn du den Links in den Artikel folgst, kommst du z.b. hier hin:
How to use HTML5 on your website today | Applications - InfoWorld

Starting from the top. You can use HTML5's doctype now; there's no reason not to. You can even do a mass find and replace throughout your site, looking for (for instance):