Website tabellenlos gestalten (HTML + PHP + CSS)

Beitrag von **x-drive** » 07.07.2010, 10:44

Hallo zusammen,

bin auf die Idee gekommen, meine Website komplett tabellenlos umzugestalten. Nach einigen STunden Arbeit ist folgender Entwurf entstanden:

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

Dieser wurde in 5 Browser getestet: IE, FF, Opera, Chrome, Safari. Folgende Problemen sind festgestellt worden:

1. Im IE der Slogan "Free Cartoons & Cartoon Clip Art Images..." steht einbischen zu hoch. Dabei verschiebt sich der Werbeblock 725x15 mit Links nach unten. In FF, CHROME, OPERA und SAFARI sieht aber alles super aus!!! (?)

2. Den oberen Abstand (von oben bis zum Top-Banner) würde ich gerne auf 2 px. minimieren. Die MARGIN-Anweisungen in CSS werden leider ignoriert.

3. Unerwünschter Abstand zwischen dem Banner "Menu" und dem Buttom "Home" auch nicht gewünscht. ERstaunlicherweise, wenn man an dieser Stelle Text platziert wird, dann g. e. keinen Abstand (?)

von **Anzeige von ABAKUS** »

Beitrag von **HaraldHil** » 07.07.2010, 11:08

Solltest sowas wohl besser in 'nem CSS-Forum posten.

Beitrag von **bond** » 07.07.2010, 19:17

Also eine CSS-Umstellung sieht anders aus. An deiner Stelle würde ich das entweder professionell erledigen lassen oder bei den Tabellen verbleiben.

von **Anzeige von ABAKUS** »

Beitrag von **nicolas** » 07.07.2010, 20:31

1. Hat im Normalfall in unterschiedlicher Interpretation von Padding und Margin zu suchen. Keyword Box-Model
2.Da sollte ein CSS-Reset helfen

*{padding:0;margin:0;}

3.Im Menu solltest du die Bilder als Hintergründe einfügen um ein sauberes Design zu haben, dann sollte auch der Abstand verschwinden.

Beitrag von **xlb** » 07.07.2010, 21:28

N'Abend.

Um effektiv mit CSS zu arbeiten, solltest du dir für den Firefox ein paar Addons installieren, die dir bei Formatierung und "Fehleranalyse" gute Helferlein sein werden :

Firebug:
- u. a. ändern von HTML und CSS zur "Laufzeit". Resultat der Änderung ist im Browser sofort zu sehen.

WebDeveloper:
- u. a. Anzeige/Einblenden der Block-Level-Elemente (divs)

... unterschiedlicher Interpretation von Padding und Margin zu suchen

Das ist bei aktuellen Browsern (selbst beim IE8) weniger ein Problem. Welchen IE verwendest du?

Beitrag von **Loptr** » 07.07.2010, 22:34

WebDeveloper - heißer Tipp.
Ich würde vllt noch HTML-Validator empfehlen.

Mit margin und padding reisst dir bei alten Browsern immer ein Bein ab. Am besten mal nach Browserweichen suchen, damit klappt eigentlich ganz gut.

Oder gleich mit absoluten positionen arbeiten. Das nimmt der IE6 nicht allzu übel.

BTW: mach dir nicht so viele Gedanken um IE6 - es gibt viele Seiten, die den Support dafür schon lange eingestellt haben. Prominentestes Beispiel wäre youtube

PS: lagere mal dein CSS in eine css Datei aus - damit läßt sich auch besser arbeiten

Beitrag von **x-drive** » 08.07.2010, 16:34

Hi zusammen,

danke für Feedbacks.

FIREBUG und HTML-Validator sind sehr gute Tools! Inzwischen sind die Fehler behoben, es siht gut aus!

Beitrag von **nerd** » 15.07.2010, 07:20

bei "tabellenlos + css" solltest du lieber gleich auf https://960.gs umsteigen, dann sparst du dir das ganze drama mit browser problemen, abweichungen, float ueberlaeufen usw.
die ganzen css styles direkt in die tags zu schreiben ist auch schlechter stil....