Website automatisch an Browserfenster anpaßen

[Rolf B]

Sehr geehrte forum.selfhtml.org-Teilnehmer,

Oha. So förmlich sind wir doch gar nicht :)

Willkommen bei Selfhtml und hallo YunPo,

du hast ja schon einige Hinweise bekommen.

Wenn der Seamonkey so einen Mist abliefert, dann schmeiß ihn weg. Verwendest Du die aktuelle Version 2.53? Bietet er keine Möglichkeit für ein Grid-Layout? Table Layout ist Stil von 2005. Oder so. Vielleicht noch 2007...

Aber ein paar Dinge, die ander gerne falsch machen, hast Du richtig gemacht, das behalte unbedingt bei:

• lang="de" im html-Element
• UTF-8 als Zeichencodierung
• alt-Attribute für img Elemente

Das hier dürfte übertrieben sein:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">

Die zweite Zeile reicht. Den Content-Type sollte dein Webserver mitschicken, und wenn Du für den Anfang über file:/// testet, ist ein fehlender text/html Content Type nicht so schlimm.

Der Rest ist - sorry - Müll.

• Tabellengestütztes Seitenlayout - man nimmt dafür Flexbox oder Grid. Grid ist besser. Der Grund dafür ist, dass man auf schmalen Viewports nicht nur die Spalten schmaler macht, sondern ggf. auch die generelle Anordnung ändert. Das gelingt mit table schlecht. Abgesehen davon sind Tabellen für genau einen Zweck da: Tabellarische Daten anzeigen. Für alles andere haben wir die table- und float-Hölle hinter uns gelassen.
• Besondere Rücksicht auf den Internet-Explorer (eigenes Stylesheet mit if IE Pseudoabfrage ist heute eigentlich nicht mehr nötig. Mit Grid tut sich der IE noch schwer, aber man baut Webseiten heute so, dass im IE etwas erkennbar ist. Spezielle Mühe für den IE gibt man sich nicht mehr. Wenn der IE die Seite so wie ein Mobiltelefon anzeigt, reicht das. Aber wenn Du schon eine Spezialabfrage machst, dann musst Du es auch richtig tun:

<!--[if IE]-->
<link rel="stylesheet" href="./css/ie.css" type="text/css">
<!--[endif]-->

Du darfst den Kommentar nach dem if nicht schließen, sonst ist das link-Element für jeden Browser sichtbar, nicht nur für einen IE. So ist's besser:

<!--[if IE]
   <link rel="stylesheet" href="./css/ie.css" type="text/css">
    [endif]-->

• Das style-Attribut meidet man so gut wie es geht. In die html Elemente gehört der Inhalt, und das Layout gehört ins Stylesheet (CSS). Es gibt Ausnahmen, wenn JavaScript ins Spiel kommt und Positionen von Elementen berechnet (z.B. ein verschiebbarer Popup-Dialog), aber da bist Du längst nicht.

Wenn Du den Widerspruch zwischen deinem Logo und deiner Selbsteinschätzung zum Webdesign auflösen willst, dann schau intensiv in unsere HTML Tutorials. Da erfährst Du einiges darüber, wie man heute das Seitenlayout einer Webseite aufbaut, und auch, wie man sie responsiv macht (d.h. wie man erreicht, dass sie sich an die Größe des Browser-Fensters - auch Viewport genannt - anpasst). Das ist so schwer gar nicht; der einzige wirkliche Sinn eines HTML Editors ist (aus meiner Sicht) das Syntax-Highlighting der HTML Tags. Ein WYSIWIG Editor für HTML führt zu einem HTML Trümmerfeld. Aber das ist meine Privatmeinung, du darfst das gerne anders sehen.

Deine Homepage habe ich übrigens gefunden: https://www.imagefactory-design.de/

Ich hätte gerne ein Beispiel gezeigt, wie man deine Startseite auf ein moderneres Layout umsetzt, aber außer dem Table-Layout ist auf deiner Seite noch hinderlich, dass viele Texte in Bildern eingesetzt sind, statt sie mit CSS-Mitteln zu layouten. Und diesen Seitenschatten - verdammt, ich predige immer, kein Container-DIV zu verwenden, aber hierfür scheint es tatsächlich nötig zu werden 😕. Sofern man denn dieses Design unbedingt beibehalten will. Auf einem Handy würde es beispielsweise überhaupt nicht mehr funktionieren.

Rolf