Anpassung an Bildschirmauflösung

Feuertraum · 06. Januar 2007, 20:01:07

Hallo liebe Tintenzirkler!

Ich habe es zwar geschafft, meinen Text zweispaltig darzustellen (nein, nein, keine Angst - nicht mittels Tabellen!!) und habe es auch auf verschiedenen Browsern ausprobiert; mit Ausnahme von Maxthon sieht es sowohl bei IE als auch bei FF und bei Opera sehr gut aus (bei Maxthon liegt der relative Link "zurück zum Start" ziemlich knapp am unteren Rand, und Lynx als Textbrowser bekomme ich nicht auf meinem Rechner installiert, so dass ich nicht sagen kann, wie es dort aussieht)
Nun habe ich jedoch nicht bedacht, das manche User vollkommen andere Bildschirmauflösungen nutzen als jene, die ich habe.

Kann man mittels (X)HTML/CSS das ganze so befehligen, das es sich an die jeweilige Bildschirmauflösung anpaßt? Oder muß ich für jede Bildschirmauflösung eine eigene CSS-Datei schreiben? Und dann die Frage: was kann bzw. muß man dann machen, dass dann die jeweilige Auflösung die richtige CSS-Datei anspricht?

Wäre lieb, wenn Sie mir da helfen können.

LG und dankeschön im voraus

Feuertraum

Martino Mauricio · 09. Januar 2007, 19:22:55

Hi,

ich glaub nicht das es mit CSS funktioniert. CSS hat was mit der grafischen Darstellung zu tun.

Aber mit JavaScript klappt es auf jeden Fall. Funktioniert über eine Abfrage der Bildschirmgrößen und dann kommt ne If-Funktion. Hab leider grad mein Javahandbuch nicht parat, schau aber mal nach.

Martino Mauricio

Maja · 09. Januar 2007, 19:54:16

Viele Leute surfen aus Sicherheitsgründen mit deaktiviertem Javascript. Daher kann es ganz übel in die Hose gehen, die Darstellung Javascriptabhängig zu machen. Wie haben Sie es denn jetzt realisiert? Würde mich mal interessieren...

Martino Mauricio · 09. Januar 2007, 20:39:46

Ich hab das Problem mal mit nem Frameset umgangen.

<frameset cols="*,700,*" frameborder="no" border="0" bordercolor="black" framespacing="0">

Im mittleren Frame ist dann der Inhalt, der rechte und linke Frame besteht dann aus einer Datei die nur eine Hintergrundfarbe hat. Müßte dann auf allen Monitoren funktionieren. Der linke und rechte Frame ist so halt breiter oder schmaler, je nach Auflösung.

Maja · 09. Januar 2007, 20:49:39

Damit wird aber nicht der Text zweispaltig umgebrochen. Das ist ein Frameset, etwas, das man nach modernen Standards um jeden Preis vermeiden sollte. Es läßt sich mittels CSS elegant mit Divs lösen - einer links mit Inhalt A, einer Rechts mit Inhalt B. Divs lassen sich an jede Monitorauflösung anpassen, wenn man mit Prozentangaben statt Festbreiten arbeitet.

Ich glaube, was Feuertraum meint, ist, daß Inhalt A in mehrere Spalten umgebrochen wird, wie beim Zeitungssatz - das würde ich gerne im Webdesign können und weiß nicht, wie es geht. Oder liege ich da falsch?

Martino Mauricio · 09. Januar 2007, 20:58:50

Wenn ich es richtig verstanden hab wurde das Problem mit den Spalten bereits gelöst. Jetzt ist nur das Problem da es auf jedem Monitor gleich aussehen zu laßen. Dafür wäre die Lösung mit den Frames gedacht.

Ein Freund von mir gestaltet Webseiten beruflich. er hat auch gesagt das man nicht mehr mit Frames arbeitet. Er macht das jetzt mit I-Frames. Ergibt den gleichen Effekt, hab es selbst aber noch nicht probiert.

Vielleicht einfach mal auf www.selfhtml.de reinschaun. Da findet man ne Menge Antworten zum Thema Webseitengestalltung.

Maja · 09. Januar 2007, 21:02:10

@Martino
Ich beherrsche CSS und HTML und kenne auch SelfHTML.
Mit Frames kann man zwangsweise - weil jeder Frame eine eigene Datei enthält - nur verschiedene Inhalte nebeneinander anordnen. Sobald der linke Frame überläuft, gibt es einen unschönen Scrollbalken, bei kleiner Bildschirmauflösung schneller als bei großer, was einer der Gründe ist, warum man nicht mit Frames arbeiten sollte.
Aber es löst nicht die Frage, wie man einen Text durch mehrere Spalten fließen läßt. Ich hoffte, daß Feuertraum da vielleicht eine Lösung gefunden hat.

@Feuertraum: Hat er?

Feuertraum · 10. Januar 2007, 11:51:42

@Maja: Ich fürchte, Sie haben mich da schon falsch verstanden. Zwar habe ich das mit den zwei Spalten hinbekommen (ich habe mich da des Tricks bedient, dass ich sowohl den Text für die linke als auch den Text für die rechte Seite mit position:absolut und dann den Werten für Links und rechts, oben und unten angegeben habe.*)

Worauf es mir allerdings ankommt: ich selber habe eine Bildschirmauflösung von 1024 x 768. Papa hat seinen auf 1900 x 1440. Da konnte ich schon den Unterschied sehen, dass ungefähr 2/3 des Bildschirms eine weiße Fläche waren.
Scherzeshalber habe ich daraufhin einmal 800 x 600 ausprobiert und mußte schon nach rechts und unten scrollen, weil es so groß war. Trotzdem waren die beiden Spalten da.
Der Punkt ist natürlich nun, dass ich bei kleineren Bildschirmauflösungen auch kleinere Schriften nehmen würde, bei größeren hingegen würde ich dann dementsprechend eine größere font-size nutzen, um die Fläche auszunutzen.

@Martino Mauricio: Leider kenne ich mich mit Java Script gar nicht aus, und so wie ich Maja verstanden habe (und es mir auch des öfteren Mal von Moni gesagt wird) nutzt nicht jeder User Java Script. Mir wurde allerdings einmal gesagt, das Frames nicht gerade barrierefrei sind. Und wie es mit dem restlichen Java Script aussieht (also in Punkten Barrierearmut) weiß ich leider nicht :-(

Trotzdem vielen lieben Dank Ihnen beiden für die Mühen

LG

Feuertraum

* Der Punkt "position:absolut" hat zwar den Vorteil, das man seine Sachen dorthin bekommt, wo man sie hin haben möchte, ist aber abhängig von der Grundeinstellung eines Browsers.
Ich habe einmal spaßeshalber bei IE, FF und Opera die Schriftgröße verändert.
Bei IE schafft er es, ohne Probleme im Bildschirm zu bleiben, bei FF und Opera hingegen schießen die Buchstaben aus dem Rand hinaus :-(
Da jedoch Hintergrundbilder hinzukommen, kann ich keine relative Position einbauen.

Chuck · 12. Juni 2007, 21:07:20

So, ich bin gerade ein wenig am Page bauen und versuche natürlich so gut, wie es eben geht auf alle Eventualitäten vorbereitet zu sein.

Welche Möglichkeiten gibt es denn da alles... bzw. auf welche sollte die Page vorbereit sein?

Momentan geht die Page in verschiedene Richtungen bei:
- M Internet Explorer => 1024 * 768
- M Internet Explorer => 800 * 600
- Netscape => 1024 * 768
- Netscape => 800 * 600

Dann will ich noch machen: Mit JavaScript und ohne - denke das kann nicht schaden

Ich benutze Firefox, aber bei mir steht Netscape... weil die beiden ja auch eng verbunden sind. Reicht es, wenn ich für Netscape die Seite gestalte? Mein Firefox reagiert zumindest auch darauf.

Maja · 13. Juni 2007, 00:07:19

Willst du mit einer Browserweiche arbeiten, die je nach Browser verschiedene Stylesheets lädt? Oder das ganze mit einem Auswahlmenü machen? Letztes wäre nämlich ein probates Mittel zum Surfervergraulen

Netscape nutzt heute kaum noch jemand. Firefox und Seamonkey sind die Nachfolger. Anders als der alte Netscape interpretieren sie CSS richtig (was Netscapes der früheren Generation ganz und gar nicht konnten). Opera sollte nicht vergessen werden. Die einfachste Art, browserübergreifend zu coden, ohne für jeden Browser und jede Auflösung eine eigene Fassung schreiben zu müssen, ist, sich an die Regeln des W3C zu halten und validen Code zu schreiben. Damit sieht deine Seite dann immer noch nicht in allen Browsern gleich aus, aber sie funktioniert überall.
Auf Javascriptbasierte Navigation würde ich dagegen verzichten - was hast du mit dem JS denn vor?

Ich würde dir, was die Auflösungen angeht, raten, stumpf mit Prozenten zu arbeiten statt mit festen Pixelbreiten, und mit DIVs statt mit Tabellen. Die neue Zirkelseite, z.B. funktioniert auch noch unter 800x600 ohne horizontalen Scrollbalken. Gefährlich wird es erst ab dem Moment, wo die Titelgraphik zu breit wird. Aber so ist das Maßarbeit. Sie überschneidet sich noch nicht mal mit dem Klecks.

Volker · 13. Juni 2007, 00:34:58

Auf Arbeit habe ich 2688x900 oder 1248x1024, je nachdem. Meist Firefox, selten(st) IE, gelegentlich Dillo. Entsprechend mit und ohne Frames, mit und ohne JS, mit und ohne CSS.
Ich weiß, ich bin böööse...

Ansonsten gilt Majas Rat: die Webseite sollte auch ohne den Augenschmaus-Firlefanz und festgelegte Breiten/Höhen funktionieren. Der Rest ist Kür.

Chuck · 13. Juni 2007, 00:40:28

Also ein Auwahlmenü soll nur im aller größten Notfall erscheinen, aber eigentlich wird alles automatisch geregelt... (oder soll zumindest automatisch geregelt werden)

Habe nur einen Iframe... der ist so in der Mitte, dass höchstens die Hintergrundgrafik falsch angezeigt wird... daran lässt sich also arbeiten.

Meine liebe zu DIV´s habe ich auch entdeckt!

Allerdings im Zusammenhang mit JS... habe mir damit eigene Pull-Down Menüs gebastelt. Also mit DIVs die Menüs erstellt und dann mit Java und "onclick" realisiert.
Daher wird wohl eine Java unabhängige Version unabdingbar sein. Wenn es Alternativen zu selbstgestalteten Pull-Down Menüs gibt... immer her damit!

Ansonsten ist mein CSS schon W3C tauglich... schon getestet!

Aber wo kann ich denn mal sehen, wie die Vorgaben für W3C Standards sind? Darf man dann bestimmte HTML-Befehle net nutzen? Kenne den Unterschied zwischen XHTML und HTML auch nicht...
aber das werde ich auf jedenfall in den nächsten Tagen lernen.

Im Großen und Ganzen glaube ich, habe ich jetzt nen guten Plan... wenn sie bald fertig ist, muss jeder mal einen Testklick machen und mich auf die Fehler hinweisen.

[EDIT] Ok, wo ich die W3C Standards lesen kann, habe ich selbst gefunden.

Moni · 14. Juni 2007, 13:45:46

Zitat von: Chuck am 12. Juni 2007, 21:07:20
So, ich bin gerade ein wenig am Page bauen und versuche natürlich so gut, wie es eben geht auf alle Eventualitäten vorbereitet zu sein.

Welche Möglichkeiten gibt es denn da alles... bzw. auf welche sollte die Page vorbereit sein?

Momentan geht die Page in verschiedene Richtungen bei:
- M Internet Explorer => 1024 * 768
- M Internet Explorer => 800 * 600
- Netscape => 1024 * 768
- Netscape => 800 * 600

Dann will ich noch machen: Mit JavaScript und ohne - denke das kann nicht schaden

Ich benutze Firefox, aber bei mir steht Netscape... weil die beiden ja auch eng verbunden sind. Reicht es, wenn ich für Netscape die Seite gestalte? Mein Firefox reagiert zumindest auch darauf.

Über den Firefox würd ich mir die wenigsten Gedankenmachen, aber der IE (auch der neue 7) hat so einige Bugs, die dir das Leben schwer machen könnten. Du müßtest also die berühmten IE Hacks einsetzen, um deine Konforme Seite auch im IE korrekt dargestellt zu wissen. Da kann ich dir einen Besuch auf der www.yaml.de Seite empfehlen, doirt werden alle IE Hacks erläutert.