ABAKUS

Verfasst: **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 (?)

Hochwertiger Linkaufbau bei ABAKUS:

Google-konformer Linkaufbau
nachhaltiges Ranking
Linkbuilding Angebote zu fairen Preisen
internationale Backlinks

Wir bieten Beratung und Umsetzung.
Jetzt anfragen: 0511 / 300325-0

Verfasst: **07.07.2010, 11:08**

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

Verfasst: **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.

Verfasst: **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.

Verfasst: **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?

Verfasst: **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

Verfasst: **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!

Verfasst: **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....

ABAKUS

Website tabellenlos gestalten (HTML + PHP + CSS)

Website tabellenlos gestalten (HTML + PHP + CSS)

Re: Website tabellenlos gestalten (HTML + PHP + CSS)