Zur Navigation

Alte Website tabellenlos umgestalten

HTML, CSS, JAVA-SCRIPT

1 Globetrotter_A

Hallo Jörg,

seit einiger Zeit beobachtet man einen neuen Trend - Webseiten tabellenlos mithilfe DIVs und CSS zu gestalten. Da ich meine Website http://www.clipproject.info/ komplett überarbeiten möchte, spiele ich auch mit diesem Gedanken.

Ziele der Umgestaltung:

1. SEO-freundliche Gestaltung (Korrekter Code, Keywords, META-TAGS).

2. Mehr Flexibilität durch Einbindung von mehrfach "wiederholbaren" Elementen wie Menüs, Tops etc. via Java-Scripts (als Alternative wird auch PHP berücksichtigt).

3. Im Züge der Einführung von HTML5 werden viele "alte" HTML-Tags wie z. B. ALIGN, IFRAME etc. "abgeschafft". Daher sollen solche "veralteten Tags vermieden werden.

4. Kompatibilität mit allen bekannten Browsern wie IE, FF, Chrome, Safari, Opera

Also, die Website soll mehr flexibel und technisch gesehen zukunftsorientiert werden.

Die ersten Proben mit DIVs und CSS sind nicht besonders erfolgreich gelaufen, da ich viele Layout-Grafiken, Hintergrundbilder etc. auf der Website benutze. Dazu noch "tanzen" DIVs in verschiedenen Browsern nicht synchron. Dementsprechend, um die korrekte Platzierung von DIVs auf der Website zu gewährleisten, kommt man immer wieder auf die alte gute Tabelle. ;-)

Fragen an Dich wären:

- Hast Du evtl. gute Tipps, wie man solche Website tabellenlos gestalten könnte?

- Inwieweit macht es überhaupt Sinn den Afwand zu betreiben, Webseiten tabellenlos zu überarbeiten? Wenn man auch sehr namenhafte Webprojekte anschaut, überall findet man Tabellen. ;-)

Danke im Voraus!

03.07.2010 12:55

2 Jörg Kruse

2. Mehr Flexibilität durch Einbindung von mehrfach "wiederholbaren" Elementen wie Menüs, Tops etc. via Java-Scripts (als Alternative wird auch PHP berücksichtigt)

Die Einbindung von Seitenelementen über JavaScript passt aber nicht zu dem Anspruch in 1., dass die Seite suchmaschinenfreundlich sein soll. Ich würde in solchen Fällen mit PHP include arbeiten.

Die ersten Proben mit DIVs und CSS sind nicht besonders erfolgreich gelaufen, da ich viele Layout-Grafiken, Hintergrundbilder etc. auf der Website benutze. Dazu noch "tanzen" DIVs in verschiedenen Browsern nicht synchron.

Welches Doctype verwendest du? Bei einem stricten (X)HTML weichen die moderner Browser in der Darstellung nur minimal voneinander ab. Probleme machen dann allenfalls die Bugs der älteren IEs (6 und 7) - für die es aber Workarounds gibt und denen man notfalls über Conditional Comments korrigierendes CSS unterschieben kann

Inwieweit macht es überhaupt Sinn den Afwand zu betreiben, Webseiten tabellenlos zu überarbeiten?

Ja - am anfang ist der Aufwand größer, da man auch erst einmal lernen muss, wie man Seitenelemente mit float, clear etc. positioniert. Die im gepinnten Thread aufgeführten Online-Ressourcen können hierbei auch hilfreich sein. Wenn man sich die neuen Techniken angeeignet hat, ist der Aufwand nicht mehr so groß

Gänzlich tabellenlos müssen (und sollten) Webseiten übrigens nicht sein - es gibt neben den Layout-Tabellen ja auch noch "richtige" Tabellen (wie z.B. auf der Startseite dieses Forums), die natürlich auch durch HTML-Tabellen realisiert werden sollten.

03.07.2010 23:32

3 Globetrotter_A

Hallo Jörg,

vielen Dank für Dein Feedback! Ich arbeite jetzt an neuem Entwurf in PHP. Stelle den bald zum Anschauen online aus. :-)

Bevor ich aber nichts falsches mache, noch eine Frage: wenn ich die alten html-Seiten in PHP ersetze, dann gehen diese im Suchmaschienen-Index verloren, oder? Wenn ja, dann, wie kann man dieses Problem lösen?

Und noch eine kurze Frage: beim Doctype Strict meckert der Validator wegen Attribute "border" bei den Bildern. Bsp.:
<img src="http://www.clipproject.info/Cliparts_Free/Berufe_Free/Clipart_Free_Download_52.gif" border="0" width="140" height="86" alt="Home" />

Das ist auch logisch, da "border" als Attribute abgeschafft werden soll. Wenn ich aber es rausnehme, dann rahmen alle bekannten Browser das Bild um.

05.07.2010 16:06 | geändert: 05.07.2010 16:45

4 Jörg Kruse

Du kannst die border in CSS definieren

<img src="http://www.clipproject.info/Cliparts_Free/Berufe_Free/Clipart_Free_Download_52.gif" style="border:none" width="140" height="86" alt="Home" />

... oder global für alle Bilder in der CSS-Datei:

img {
border:none;
}

Bevor ich aber nichts falsches mache, noch eine Frage: wenn ich die alten html-Seiten in PHP ersetze, dann gehen diese im Suchmaschienen-Index verloren, oder? Wenn ja, dann, wie kann man dieses Problem lösen?

Wenn du Modrewite zur Verfügung hast, kannst du die Seiten entsprechend weiterleiten. (Einzelheiten hierzu sollten aber besser im Serverforum besprochen werden, da dies nur noch bedingt mit XHTML und CSS zu tun hat)

05.07.2010 17:39 | geändert: 05.07.2010 17:42

5 Käptn Blaubär

Zitat von Jörg

Bevor ich aber nichts falsches mache, noch eine Frage: wenn ich die alten html-Seiten in PHP ersetze, dann gehen diese im Suchmaschienen-Index verloren, oder? Wenn ja, dann, wie kann man dieses Problem lösen?

Wenn du Modrewite zur Verfügung hast, kannst du die Seiten entsprechend weiterleiten. (Einzelheiten hierzu sollten aber besser im Serverforum besprochen werden, da dies nur noch bedingt mit XHTML und CSS zu tun hat)

Du kannst aber auch die alten html-Namen beibehalten, wenn Du sicherstellst, daß die Seiten PHP-geparst werden. Das sollte bei den meisten Webhostern durch diesen Eintrag in der .htaccess klappen:

AddType application/x-httpd-php .html .htm .php

05.07.2010 19:21

6 Globetrotter_A (Gast)

Hallo Käptn Blaubär,

das war mir schon bekannt. Leider mein Hoster hat mir mitgeteilt, dass es bei ihm nict möglich ist :-(

05.07.2010 20:04

7 Globetrotter_A

Hallo zusammen,

nach einigen Versuchen und mehreren Stunden Arbeit habe ich folgendes geschaffen:

http://www.clipproject.info/new_php_design/index.php

Getestet wurde diese Vorlage in FF, IE, CHROME, SAFARI, OPERA.

Folgende Problemen sind aufgetreten:

1. In allen Browser g. e. unerwünshcter Abstand zwischen dem Banner "Menu" und dem Buttom "Home". Außerdem Abstand oben bis zum oberen Rand des Top-Banners ist zu groß.

2. IE und OPERA kommen mit dem Tag
<h1>
nicht zurecht. Der Überschrift "Free Cartoons & Cartoon Clip Art Images ..." wird somit in diversen Schriftgrößen dargestellt. Dadurch verschieben die Fannen nach rechts. Erstaunlicherweise die Darstellung im IE auf dem localhost ist korrekt, nur auf dem Server g. e. Verschiebungen.

3. Ad-Block "ads_234_60.html" lässt sich nicht zentrieren - ignoriert komplett alle STYLE-Anweisungen.

4. Das Gleiche mit dem Text "ads_120_90" in der linken Spalte unter dem Menu.

5. Bei den Links "Terms of Use" und "Contact" im Footer lässt sich die Farbe nicht ändern - trotz aller STYLE-Anweisungen bleiben die Links blau.

6. HTML-Validator zeigt 26 Fehler. Mit diesen werde ich mich morgen auseinandersetzen. Für heute reicht es! ;-)

05.07.2010 22:16 | geändert: 05.07.2010 23:10

8 Globetrotter_A

Habe noch mal mit dem Server ausprobiert. Nachdem ich in die Datei .htaccess den Code
AddType application/x-httpd-php .html
eingefügt habe, bietet der Server alle html-Dateien zum Download statt diese im Browser darzustellen. Was könnte es bedeuten? Einstellungen beim Hoster?

05.07.2010 22:35

9 Käptn Blaubär

Zitat von Globetrotter_A
Habe noch mal mit dem Server ausprobiert. Nachdem ich in die Datei .htaccess den Code
AddType application/x-httpd-php .html
eingefügt habe, bietet der Server alle html-Dateien zum Download statt diese im Browser darzustellen. Was könnte es bedeuten? Einstellungen beim Hoster?

Was ich vorgeschlagen hatte, funktioniert nicht bei allen Webhostern. Erkundige Dich bei Deinem Webhoster nach der erforderlichen Einstellung.

Bei manchen Webhostern geht es auch mit einem Eintrag nach diesem Muster:
<Files ~ "\.html">
  SetHandler x-httpd-php
</Files>

05.07.2010 22:49

10 Jörg Kruse

Zitat von Globetrotter_A
2. IE und OPERA kommen mit dem Tag
<h1>
nicht zurecht. Der Überschrift "Free Cartoons & Cartoon Clip Art Images ..." wird somit in diversen Schriftgrößen dargestellt. Dadurch verschieben die Fannen nach rechts. Erstaunlicherweise die Darstellung im IE auf dem localhost ist korrekt, nur auf dem Server g. e. Verschiebungen.

Opera akzeptiert anscheinend keinen negativen Wert für letter-spacing - dadurch nimmt die Überschrift mehr Platz ein

Wenn du die font-size von h1 definierst, gibt es keinen Interpretationsspielraum für die Browser. Diese Angaben können leider nicht zugeordnet werden, da es kein übergeordnetes Element mit der ID "header" gibt:

#header h1 { 
  font-size: 16px;
  color: #8672FF;
  letter-spacing: -1px;
  padding-left: 0px;
  padding-top: 131px;
  padding-bottom: 0px;
  margin-left: 240px;
  margin-top: 0px; 
  text-align: left;
}

Da du auf der Seite nur ein h1 hast, kannst du in diesem Fall "#header" auch einfach rausschmeißen

Die andren Punkte schau ich mir morgen irgendwann an...

05.07.2010 23:45 | geändert: 05.07.2010 23:46