Div Problem!

Beitrag von **matze_1963** » 19.11.2011, 16:37

Hallo!
Bin gerade dabei immer mehr mit Div's zu arbeiten. Mein Problem besteht darin das die Dinger nicht so wollen wie ich es gerne hätte. Es gibt grosse unterschiede in der Darstellung in verschiedenen Browsern (Test mit IE und Firefox).
Was mache ich falsch bzw. sind manchmal Tabellen unumgänglich?

Die Unterschiede der Drstellung mit fast nur Tabellen sind im Rahmen.

https://www.gewinnspiel42.de/neu/test.php
https://www.werbung-fuer-werbung.com/

Matze

von **Anzeige von ABAKUS** »

Beitrag von **Melegrian** » 19.11.2011, 18:39

Viel kann ich Dir nicht helfen, da ich nicht vor habe meine alten Seiten umzustellen. Doch ein allgemeiner Hinweis. Du arbeitest im Kompatibilitätsmodus (Quirks) und solltest versuchen im standardkonformen Modus zu arbeiten. Die Unterschiede in der Darstellung zwischen Quirks- und standardkonformen Modus waren zumindest bei meinen Seiten teilweise beträchtlich, wobei für den Wechsel bei meinen Seiten bereits der Verweis auf https://www.w3.org/TR/html4/loose.dtd hinter der Dokumenttyp-Deklaration reichte.

Im IE kannst Du aber auch so zu Testzwecken über ein Symbol in der Browserzeile den Modus wechseln. Doch so sehr viele Unterschiede sehe ich gerade nicht zwischen den Seiten, außer das sich die Höhe etwas verschiebt.

Beitrag von **Can** » 19.11.2011, 18:42

Hast halt scheiße Programmiert mh ?

Beitrag von **Melegrian** » 19.11.2011, 19:12

Jedenfalls von dem sollte man sich erst einmal verabschieden, um aussagekräftige Resultate zu erzielen:

https://de.wikipedia.org/wiki/Quirks-Modus

Beitrag von **matze_1963** » 19.11.2011, 20:28

Hallo!
Jetzt bin ich total durch den Wind!

@Can Die Aussage "Hast halt scheiße Programmiert" war sehr hilfreich.

So hab ich das richtig verstanden das ich noch im Kompatibilitätsmodus arbeite weil ich im Doctyp den verweis auf
"https://www.w3.org/TR/html4/strict.dtd nicht angegeben habe?

Jetzt hab ich mir mal einige Pages angeschaut und habe gesehen das es verschiedene verweise auf w3.org gibt.

Welchen soll mann nehmen um auf dem neusten stand zu sein?

Matze

Beitrag von **mano_negra** » 19.11.2011, 21:23

irgendwie sieht mir der code chaotisch aus, hab aber jetzt auch nicht so genau geschaut. jedenfalls hast du ja noch immer jede menge tabellen drin.

es geht immer um das gleiche. div, float und clear - such einmal nach div layout oder so ähnlich. das häufigste problem ist das richtige "clearen".

Beitrag von **Melegrian** » 19.11.2011, 21:37

matze_1963 hat geschrieben:Welchen soll mann nehmen um auf dem neusten stand zu sein?

Da kann ich keinen richtig guten Rat geben, da meine Seiten alle etwas älter sind und ich nicht mit dem Gedanken spiele, ein vollkommen neues Projekt zu beginnen. So verwende ich immer noch

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http&#58;//www.w3.org/TR/html4/loose.dtd">

und bin bisher damit zufrieden. Der Unterschied zwischen mit und ohne Verweis war, dass die Darstellung unterschiedlich hoch war, wenn als erstes mit p ein Absatz eingeleitet wird. Im Quirks-Modus kein Problem, doch im standardkonformen Modus musste ich einiges mit <p style="margin-top: Wert px; margin-bottom: Wert px"> korrigieren.

Wenn ich ein völlig neues Projekt noch einmal beginnen würde, so würde ich mich vermutlich mal mit XHTML oder mit HTML5 auseinander setzen. Bei HTML5 scheint wieder alles etwas anders auszusehen und es wird keine DTD (Document Type Definition) wie im oberen Beispiel für den Standardmodus mehr benötigt, wenn ich das richtig verstanden habe.

Beitrag von **tmyp** » 19.11.2011, 21:46

In solchen Fällen ist es sinnvoll, einen reproduzierbaren Minimal-Einsatz zu bauen.
Also die kleinste mögliche Einheit, die das Problem zeigt.
So wirkt das ganze sehr nach "ja, ich habe keine Lust meinen Fehler zu suchen, bitte macht ihr das mal, kostenlos versteht sich". Jeder macht Fehler. Wenn Du deinen Fehler wirklich nicht findest, bau so einen Testcase, der nur das allernötigste enthält. 95% der Fehler findet man beim bauen des Testcases. Der Rest ist interessant und für mehr Leute als nur dich relevant.
Wenn Du das getan hast, kann dir auch leichter und schneller geholfen werden, aber es erfordert, dass Du dich mit deinem Problem auseinandergesetzt hast.

Beitrag von **matze_1963** » 20.11.2011, 00:14

Hallo!

Danke für eure Antworten.
Dachte das ich mit ein paar Div Boxen und ein wenig mit tabellen das schon so hinbekomme.

Leider habe ich mich getäuscht und muss noch üben.

Matze

Beitrag von **Melegrian** » 20.11.2011, 06:52

Nun ja, einen Tipp noch. Da ich auch nur einen Uralt-Editor als Wysiwyg und für PHP den Notepad++ verwende, so benutze ich für die Vorschau den FF und als Add-on diesen HTML-Validator:

https://addons.mozilla.org/de/firefox/a ... serprofile

Und der zeigt ja bei Deinen Seiten so einige Fehler an und liefert auch den einen oder anderen Hinweis, wie was berichtigt werden könnte. Und wenn der da bei beiden Seiten überall missing <tr> anzeigt, dann könnte man zuerst einmal derartige Fehler bereinigen und diese vermissten <tr> Tags einfügen. Wie man diese <tr> Tags einfügt, dafür liefert der Validator auch gleich noch ein Beispiel.

Leider hinkt der Entwickler immer etwas hinter den FF-Versionen hinterher. Soll heißen, der ist zwar auf den neusten Stand, doch die neuste Version ist immer nur über die Webseite des Entwicklers verfügbar. Wobei mein Vertrauen nicht grenzenlos ist, wenn es um deartige Add-ons geht, doch ich kenne leider kein besseres. Allerdings habe ich die anderen bei Mozilla als Add-ons aufgelisteten Validatoren auch noch nie getestet.

Beitrag von **Pork am Kork** » 22.11.2011, 12:27

Melegrian hat geschrieben:https://addons.mozilla.org/de/firefox/a ... serprofile
[…]
Wobei mein Vertrauen nicht grenzenlos ist, wenn es um deartige Add-ons geht, doch ich kenne leider kein besseres. Allerdings habe ich die anderen bei Mozilla als Add-ons aufgelisteten Validatoren auch noch nie getestet.

Anstatt deinen Browser mit Erweiterungen aufzublähen, könntest du auch einfach die seit Jahrzehnten, ach, was rede ich, seit Jahrhunderten, Urzeiten!1 bekannten Originale benutzen: https://validator.w3.org und https://www.validome.org.

matze_1963 hat geschrieben:Jetzt hab ich mir mal einige Pages angeschaut und habe gesehen das es verschiedene verweise auf w3.org gibt. Welchen soll mann nehmen um auf dem neusten stand zu sein?

Neuester Stand ist nicht der Punkt. Der Modus muss zu deinem Code und letztlich deinem Scheibstil passen.

Ohne dir jetzt zu nahe treten zu wollen, aber das, was du da als Test fabriziert hast, ist recht fürchterlich, hat mit neuestem Stand nichts zu tun, das ist vom Stil her irgendwo Mitte 90er. Tonnenweise Layouttabellen, <font>- und <i>-Elemente, Listen mit <br>.

Es ist vergebene Liebesmüh', so einen Wust umzustellen, weil dir immer irgendwas querschießen wird. Ein Seitengerüst auf CSS-Basis (ich schreibe ausdrücklich nicht <div>-Basis) verhält sich anders als eines auf Tabellenbasis. Nicht alles, was mit Tabellen möglich ist, ist mit CSS möglich – das muss man erstmal akzeptieren. Andersrum ist natürlich auch nicht alles, was CSS und sauberes HTML ermöglichen, mit Tabellenlayout möglich.

Das Ergebnis sturer Umstellerei, ohne sich mit den Konzepten zu befassen, ist meistens ein Pärchen aus Code, bei dem nichts gegenüber der vorigen Tabellenversion gewonnen wurde (im besten Falle nur verschlimmbessert in eine <div>-Wüste), und den sattsam bekannten Kommentaren „Dieser CSS-Kram ist doch eh Müll, da kann man ja gar nichts machen, mit Tabellen kriege ich das viel einfacher hin“.
Man kann auch übers Ziel hinausschießen: Es gibt Leute, die verwenden überhaupt kein <table>-Element mehr (generell nichts außer <div>und <span>), nicht einmal für tabellarische Daten, wo <table> eigentlich hingehört. Begründung ist dann, dass man „<table> in modernem Code ja nicht mehr benütze“ … Purer Humbug.

Nach dieser langen Vorrede: Welcher Dokumenttyp welchen Browser in den standardkonformen Modus schaltet, kannst du unter https://hsivonen.iki.fi/doctype/ erlesen.

Mach' eine neue Datei auf, die fünf Elemente des HTML-Grundgerüsts mit standardkonformem Modus, und schreibe erst einmal nur den Seiteninhalt, d.h. den Text und die Grafiken sowie Verweise rein. Ohne jegliche optische Formatierung, nur dem Sinn nach strukturiert durch viele <p>, das eine oder andere <ul> oder <ol>, <h1>, <h2>, <h3>. Große Blöcke zusammengefasst durch <div> (ich sehe da so um und bei vier – wenn du hier schon ein Dutzend brauchst, machst du was falsch).

Anschließend fängst du an, diesen HTML-Code mit CSS auszuzeichnen, zu gestalten. Vermeide feste Größenangaben wie px oder mm, benutze % oder em. Statt float kannst du es hier und da mit display:inline-block versuchen.

Erwarte nicht, dass das übermorgen fertig ist. Die Tabellenlayouterei hast du sicher auch nicht in zwei Tagen gelernt – und CSS-Layout erfordert etwas mehr Um-die-Ecke-Denken.

Auf diesem Weg kommst du zu einer sauber aufgebauten Seite, die meist auch auf Anhieb plattformübergreifend funktioniert.

Beitrag von **matze_1963** » 22.11.2011, 15:45

Hallo!

@Pork am Kork
Klar geht das nicht von heute auf morgen!

Habe jetzt mal eine bischen nachgeschaut und das ist rausgekommen.
www.gewinnspiel42.de/neu/test2.php

Matze

Beitrag von **todo** » 22.11.2011, 16:33

Hast halt scheiße Programmiert mh ?

https://www.mediengestalter.info/forum/ ... 674-1.html

Wir fangen alle mal an oder Can?

Zum eigentlichen Thema wurde ja nun schon ausreichend geantwortet

Beitrag von **Melegrian** » 22.11.2011, 17:34

Pork am Kork hat geschrieben:Anstatt deinen Browser mit Erweiterungen aufzublähen, könntest du auch einfach die seit Jahrzehnten, ach, was rede ich, seit Jahrhunderten, Urzeiten!1 bekannten Originale benutzen:

Die Originale habe ich vorher benutzt, die nehmen keine Seiten von Localhost (nur ungeparst über File, was ja nichts bringt), so dass man eine Seite erst nach jeder Veränderung hochladen und die URL eingeben muss. Es gibt aber nichts leichteres als die Seite im Xampp liegen zu lassen, mit dem Notepad++ zu bearbeiten und gleichseitig jede Veränderung mit "Speichern" und "Neu laden" im FF zu sehen, ohne erst etwas hochladen oder eingeben zu müssen. So kann man auch schnell mal 20 oder mehr Seiten durchblättern, um in der unteren Browserleiste zu sehen, ob eine der 20 Seiten noch einen Fehler hat.

Beitrag von **Pork am Kork** » 22.11.2011, 19:13

Melegrian hat geschrieben:so dass man eine Seite erst nach jeder Veränderung hochladen

Fürs Hochladen reicht doch ein Doppelklick auf rsync, aber …

So kann man auch schnell mal 20 oder mehr Seiten durchblättern, um in der unteren Browserleiste zu sehen, ob eine der 20 Seiten noch einen Fehler hat.

… zum gleichzeitigen Bearbeiten von 20 Seiten reicht meine Geisteskapazität nicht aus. Als alter Sack muss ich immer schön langsam machen, nüch. Ändern, gucken. Ändern, gucken. Wo ist bloß wieder mein Gehstock? ;)