dastellung der Homepage in verschiedenen Browser

Beitrag von **boxenluder** » 27.04.2006, 20:16

Hallo liebe Profis,
Ich habe meinen Homepage www.gourmetsuisse.ch mit dem Homepagemaker4 von Viennasoft gemacht.
Wie kann ich nachschauen ob bei jedem Browser meine Homepage richtig dargestellt wird. Und im Fall wenn ein Element verrutscht ist wie kann ich es verbessern?
Jeder Rat und Kritik ist Willkommen! Ich lerne viel von Euch.
Danke und Grüsse

von **Anzeige von ABAKUS** »

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

Beitrag von **1aaaa** » 27.04.2006, 20:29

https://www.abakus-internet-marketing.d ... 26648.html

Beitrag von **tingeltangeltill** » 27.04.2006, 21:20

du kannst auch in foren user fragen, ob sie dir ein screenshot machen:

www.xhtmlforum.de

oder du lädst dir standalone browser von https://www.evolt.org/ runter und switched zwischen den browsern...

von **Anzeige von ABAKUS** »

Beitrag von **haha** » 27.04.2006, 21:29

boxenluder hat geschrieben:Ich habe meinen Homepage www.gourmetsuisse.ch mit dem Homepagemaker4 von Viennasoft gemacht.

Ohje, ein Homepagemaker ;)

Und im Fall wenn ein Element verrutscht ist wie kann ich es verbessern?

Keinen Homepagemaker verwenden ;) Nein, ernsthaft: So allgemein kann man darauf nur antworten, entweder am jeweiligen Problem herumzufrickeln oder, weniger nervenaufreibend, sich konsequent von Anfang bis Ende an die Standards für HTML und CSS zu halten. Standards sind dafür gedacht, dass man sich gerade nicht darum kümmern muss, ob etwas hier oder da funktioniert. Wird der Standard eingehalten, kann man per Definition davon ausgehen, dass es funktioniert.
Genauso wie ein Blatt Papier entsprechend DIN A4 in einen Umschlag entsprechend DIN C4 passt (weil beides standardisiert ist), sollte es auch mit Webseiten in standardkonformem HTML und CSS funktionieren - und im Großen und Ganzen ist es auch so.

Wie es mit der Qualität von Code aussieht, der Programme wie einen "Homepagemaker" verlässt, kannst Du Dir unter https://validator.w3.org/check?uri=www.gourmetsuisse.ch oder, in der wichtigeren Variante, https://validator.w3.org/check?uri=http ... .01+Strict, anschauen. Der Valditor prüft allerdings nur die Rechtschreibung, der Stil ist eine ganz andere Frage. Für einen "Homepagemaker" sind in Deiner Startseite recht wenige Rechtschreibfehler, aber wenn ich Sachen wie '<b>magazin</b><b><br></i></Font><FONT FACE="Arial" COLOR="#000000"><i>' sehe, kriege ich eine Krise.. :)

Beitrag von **marc** » 27.04.2006, 23:57

Sorry ich kriege eine Krise wenn ich den Code sehe ^^

Ich bin immer ein Verfechter der Meinung das Webseiten NICHT 100% Valide sein müssen um etwas zu reissen, damit kann man sich nur in "eingeweihten" Kreisen was kaufen...(wer weiss wie es später aussieht)

Bevor du dich an die Feinarbeit machst deine Seiten Browsermäßig zu optimieren, solltest du dringend bei Google und hier nachlesen was die Grundlagen für SEO sind...Deine Seite wird so wie sie ist niemals gute Positonen erlangen wenn nur halbwegs gute Webmaster in deinem Mitbewerberfeld unterwegs sind...

Ahso und P.S...Wenn du einen halbwegs ordentlichen Generator haben willst, schmeiss deinen weg und schaff dir Dreamweaver 8 an

Die Version hat auch eine grafische Oberfläche so dass du nicht im Code direkt rumfrickeln musst und direkt auf der Seite arbeiten kannst wie sie auch imnetz dargestellt wird und schreibt dabei noch ziemlich guten xhtml oder sonstwelchen code

Beitrag von **Mac** » 28.04.2006, 00:43

Hi,

@boxenluder

- styles auslagern in externe css-datei (erklärt auf www. selfhtml. org)

- die javascript-sch... hat keine erkennbare Funktion, jedenfalls sehe ich im firefox mit und ohne javascript keinen Unterschied in der Darstellung, also ist es unnötig; siehe auch www. heise.de/newsticker/meldung/72363

- Die fette blaue Leiste oben, die der IE - mit Texten - anzeigt, wird im Firefox geschluckt, da seh' ich grad noch einen schmalen blauen Balken ohne Inhalt.

- Dein Problem dürfte aber trotzdem weniger die Darstellung in unterschiedlichen Browsern sein, als vielmehr die Darstellung bei unterschiedlichen Auflösungen. Schalte Deinen Monitor mal auf 1280*1024, das sieht schon sehr merkwürdig aus und liegt an den 'position:absolute'-Anweisungen im Quelltext. Auch bei 1024*768 wirkt die Seite deswegen irgendwie seltsam an den linken Rand gequetscht.

Das Arbeiten mit div-containern (oder wie die Tiere heißen) ist etwas für Profis, zu denen gehören wir beide nicht. Mach' ein solides HTML-Tabellenlayout, mit ausgelagerten Styles, und laß dabei genug Toleranzen für die unterschiedlichen Darstellungsweisen der Browser. Die interpretieren in der Praxis, entgegen haha's Theorie, gleiche Anweisungen nämlich sehr wohl unterschiedlich. Auf der weniger unsicheren Seite solltest Du liegen, wenn der IE Deine Texte nicht an unpassender Stelle umbricht.

Als HTML-Editor kann ich Phase5 empfehlen, den kannst Du dir kostenfrei herunterladen und auch verschiedene Browser (soweit natürlich auf Deinem Rechner installiert) für die Vorschau einbinden. Was mit IE und Firefox vernünftig aussieht, sollte erfahrungsgemäß auch mit Opera und Safari funktionieren.

HTML und CSS sind auf www. selhtml. org sehr ausführlich erklärt, ansonsten geht probieren über studieren.

Gruß,
Mac

Beitrag von **Kralle** » 28.04.2006, 01:32

Viele Meinungen, viel Halbwissen...

Mac hat geschrieben:Das Arbeiten mit div-containern (oder wie die Tiere heißen) ist etwas für Profis, zu denen gehören wir beide nicht. Mach' ein solides HTML-Tabellenlayout, mit ausgelagerten Styles, und laß dabei genug Toleranzen für die unterschiedlichen Darstellungsweisen der Browser. Die interpretieren in der Praxis, entgegen haha's Theorie, gleiche Anweisungen nämlich sehr wohl unterschiedlich. Auf der weniger unsicheren Seite solltest Du liegen, wenn der IE Deine Texte nicht an unpassender Stelle umbricht.

Wie bitte? Worin liegt denn der sooo grundlegende Unterschied zwischen einem div-Layout und einem Tabellen-Layout hinsichtlich der "Professionalität"? Beides kann ich via CSS nahezu beliebig gestalten, mit dem Vorteil, daß sich div-Layouts wesentlich schneller aufbauen und so ganz nebenbei auch hinsichtlich Barrierefreiheit (dazu zählen auch "dumme" Bots) einwandfrei sind.
Mit dem IE hast du allerdings recht. Allerdings wird wohl die neue 7er die meisten Anzeigeprobleme beheben.

Zum Editor:
Das ist ne Glaubensfrage. Professionelle Gestalter kommen aber wohl um Dreamweaver nicht herum, so wie professionelle Grafiker um Photoshop nicht umher kommen. Schon allein wegen der hervorragenden Unterstützung beim "direkten Coden" und dem m. E. besten WYSIWYG-Modus (so heißt das nämlich richtig - sprich "What you see is what you get").

Beitrag von **haha** » 28.04.2006, 08:34

marc hat geschrieben:Sorry ich kriege eine Krise wenn ich den Code sehe ^^

Ich bin immer ein Verfechter der Meinung das Webseiten NICHT 100% Valide sein müssen

Das habe ich auch nicht behauptet. Aber ein Gewühl aus <b>, <i> und <font> ist zum Beispiel schlichtweg überflüssig, sowas kann man auch wesentlich eleganter lösen.

Beitrag von **haha** » 28.04.2006, 08:44

Mac hat geschrieben:laß dabei genug Toleranzen für die unterschiedlichen Darstellungsweisen der Browser. Die interpretieren in der Praxis, entgegen haha's Theorie, gleiche Anweisungen nämlich sehr wohl unterschiedlich.

Nun rate mal, warum ich "im Großen und Ganzen" schrieb... Davon abgesehen ist entgegen der landläufigen Meinung der IE bei weitem nicht so schlecht, wie gerne behauptet wird. Wesentliche Fehler lassen sich leicht umgehen, kleinere Details kann man meist verschmerzen.

Beitrag von **boxenluder** » 28.04.2006, 09:44

Hallo Leute,
danke für die Beiträge!
Jetzt habe ich an was zu knabern....

- Die fette blaue Leiste oben, die der IE - mit Texten - anzeigt, wird im Firefox geschluckt, da seh' ich grad noch einen schmalen blauen Balken ohne Inhalt.

Ich habe screen-shots gemacht für alle meine seiten mit der https://browsershots.org/submit/ und es zeigt keine grosse verschiebungen an.
Und ich habe Firefox abgeladen auf meine festplatte und die darstellung ist gleich wie bei IE.
Wieso sehe ich dann nicht die selben fehler als Mac?

Sorry ich kriege eine Krise wenn ich den Code sehe ^^

Jaaa, ich kriege auch die Kriese davon. Wie kann ich es ausbessern?

Anfang bis Ende an die Standards für HTML und CSS zu halten. Standards sind dafür gedacht, dass man sich gerade nicht darum kümmern muss, ob etwas hier oder da funktioniert. Wird der Standard eingehalten, kann man per Definition davon ausgehen, dass es funktioniert

Also soll ich nicht beim jeden text Schriftart, Schriftgrad,usw. angeben sondern einfach den Homepagemaker das automatisch generieren lassen?

- Dein Problem dürfte aber trotzdem weniger die Darstellung in unterschiedlichen Browsern sein, als vielmehr die Darstellung bei unterschiedlichen Auflösungen. Schalte Deinen Monitor mal auf 1280*1024, das sieht schon sehr merkwürdig aus und liegt an den 'position:absolute'-Anweisungen im Quelltext. Auch bei 1024*768 wirkt die Seite deswegen irgendwie seltsam an den linken Rand gequetscht

Ich arbeite mit ein laptop (toschiba/satellite pro4200 series) und bis jetzt war mein Monitor auf 800X600, jetzt habe ich auf1024x768 gestellt, und bei mir hat sich nichts verändert. Wieso? Ist es ein unsinn mit ein laptop zu designen?

Das Arbeiten mit div-containern (oder wie die Tiere heißen) ist etwas für Profis, zu denen gehören wir beide nicht. Mach' ein solides HTML-Tabellenlayout, mit ausgelagerten Styles, und laß dabei genug Toleranzen für die unterschiedlichen Darstellungsweisen der Browser. Die interpretieren in der Praxis, entgegen haha's Theorie, gleiche Anweisungen nämlich sehr wohl unterschiedlich. Auf der weniger unsicheren Seite solltest Du liegen, wenn der IE Deine Texte nicht an unpassender Stelle umbricht.

???ich nix verstehen!!!
Erklär mir bitte ein bisschen einfacher.
Liebe Grüsse,
eure boxenluder

Beitrag von **boxenluder** » 28.04.2006, 10:10

P.S.

styles auslagern in externe css-datei (erklärt auf www. selfhtml. org)

Die website funktioniert nicht, hat jemand einen alternative?
Danke und Gruss
boxenluder

Beitrag von **Cole** » 28.04.2006, 10:33

https://de.selfhtml.org/

Beitrag von **Mac** » 28.04.2006, 23:41

Hi,

- die fette blaue Leiste

das Problem hab' ich heute - auf zwei verschiedenen Rechnern - auch nicht mehr reproduzieren können. Merkwürdig.

- nicht bei jedem text Schriftart, Schriftgrad,usw. angeben sondern
einfach den Homepagemaker das automatisch generieren lassen?

nix 'automatisch generieren'. Das erzeugt jede Menge völlig überflüssigen Code, denk mal an die armen Leute, die nicht mit DSL ins Netz gehen. Auf einer meiner Seiten konnte ich durch Umstellen von einem Frontpage-Bastard auf HTML und CSS die Dateigröße (ohne Grafiken) von 25-30 auf 6-8 kB verringern, bei praktisch identischer Darstellung. Du willst ja wohl nicht Hunderte von Unterseiten ins Netz stellen, also mach Dir mit HTML/CSS ein Muster (neudeutsch: template) und füge die Inhalte der einzelnen Unterseiten entsprechend ein.

- Ist es ein unsinn mit ein laptop zu designen?

Warum sollte es? Du mußt nur bedenken, daß verschiedene Leute mit verschiedenen Browsern, verschiedenen Auflösungen und verschiedenen Bildschirmgrößen unterwegs sind. Bei Deiner Seite krieg' ich halt ein Layout, das unmittelbar an den linken Bildschirmrand drangeklebt ist und rechts - je nach Auflösung - einen leeren Bereich (natürlich in Hintergrundfarbe) von zweieinhalb bis zehn Zentimetern zeigt. Dieses feature finde ich nicht besonders ansprechend, eine Seite sollte schon den ganzen Bildschirm ausfüllen (was sich im Tabellenlayout mit <table width="100%"> für alle Bildschirmgrößen und -auflösungen ohne Mühe erreichen läßt).

(div-container)

sind sozusagen Setzkästen, die Du an die Wand nagelst . Und zwar an die Stellen, die in Deinem Quelltext mit z.B.

style="position:absolute; left:18px; top:512px; width:94px; height:68px;..."

vorgegeben werden. Hier 18 Pixel Abstand nach links, 512 Pixel Abstand nach oben, 94 Pixel breit und 68 Pixel hoch. Die linke obere Ecke des Setzkastens wird also mit 18 Pixeln Abstand nach links und 512 Pixeln Abstand nach oben auf den Bildschirm getackert, und der ganze Setzkasten ist 94 Pixel breit und 68 hoch. Egal ob der Bildschirm 600, 768 oder 1024 Pixel breit, und ob er 800, 1024 oder 1280 Pixel hoch ist.

Dein Homepagemaker berechnet offenbar alles nur nach dem Abstand von der oberen linken Ecke des Bildschirms. Bei noch besserer Auflösung würde dann die Seite vielleicht noch das obere linke Viertel des Bildschirms ausfüllen, der Rest wäre leer.

@kralle:
Natürlich kann 'man' sowohl mit Tabellen wie mit div-containern (oder einer Mischung aus beiden?) professionell aussehende Seiten gestalten. *Ich* kann aber zu der zweiten, wesentlich anspruchsvolleren Variante nichts Sinnvolles beitragen, und für ein prinzipiell dreispaltiges Layout wie das von Boxenluder sind divs auch nicht zwingend erforderlich.

Gruß,
Mac

Beitrag von **bejay** » 29.04.2006, 05:32

Genauso wie ein Blatt Papier entsprechend DIN A4 in einen Umschlag entsprechend DIN C4

und wie is das mit umschlägen aus redmont?

div-container sind aber doch eigentlich nicht etwas für profis, sondern einfach eine feine sache...

und jetzt zum thema:
-homepagemaker sind nichts gutes. gerade als anfänger würde ich einfach zum editor (is schon bei windows dabei - start>programme>zubehör>editor) greifen, oder wenn man es konfortabler haben will webcraft ( https://www.pr0g.net ) benutzen. wenn man den code der seite selbst schreibt versteht man die funktionsweisen von html viel besser und html ist wirklich nicht schwer -versprochen

-
das prinzip ist ganz einfach : <definition>text auf den die definition zutrifft</definitin> (der schrägstrich beendet eine definition)

nun ein paar tipps zu dem projekt:
-so ein dreispaltiges layout solltest du evtl. so angehen: gib der sache ein feste breite, das ist am einfachsten zu kontrollieren. ideal sind 750 pixel, die breite kann jeder auf seinem monitor sehen

-zentriere die ganze sache, idealerweise so: <div style="margin: auto; width: 750px"> Hierhin alles andere </div> margin beschreibt den abstand zu den seiten. auto heisst gleich gross zu beiden seiten. et voilà du hast einen bereich in dem deine seite stattfindet und nichts geht mehr schief bei anderen browsern.

-noch ein tipp zu grafiken: schneide diese immer mit einem grafikprogramm, zur not paint (auch bei windows dabei) auf die grösse, die tatsächlich auf der seite angezeigt werden soll, das spart bei grossen grafiken ladezeit und kleine sehen mies aus, wenn sie vom browser vergrössert werden.

hoffe dass dir die tipps zu einem guten start helfen und du so den tollen inhalt auch schön präsentieren kannst

Beitrag von **haha** » 29.04.2006, 12:43

bejay hat geschrieben:
Genauso wie ein Blatt Papier entsprechend DIN A4 in einen Umschlag entsprechend DIN C4
und wie is das mit umschlägen aus redmont? ;-)

Umschläge aus Redmond sind - wie bereits geschrieben - in der Praxis kein allzu großes Problem. Anderes behaupten nur Leute, die nicht wissen, welche kleinen Kniffe man wo ansetzen kann, wie das Papier einzuführen ist und eine Eintüthilfe namens IE7 (nicht identisch mit den neuen MSIE7-Umschlägen) nicht kennen. Mal ganz zu schweigen von den Typen, die glauben, mit einem Umschlag genauso umgehen zu müssen wie mit einer Holzkiste ;)

Nicht, dass ich Redmonder Umschläge empfehlen würde, aber als Ausrede für althergebrachte Seitenkleberei wie sie zu Zeiten von Umschlägen Marke Mountain View aktuell war, taugen sie nicht :)