nicht angemeldet michat
michat
Der Martin
michat
Gunnar Bittersmann
michat
Der Martin
michat
... möglicherweise verwandt oder verwechselbar mit dem Dauerbrennerthema " (vertikal) zentrieren", aber darum geht es mir _nicht_ (obwohl es im Ergebnis fast auf das gleich hinausläuft).
Ich möchte schlichtweg erreichen, dass die alles umgebende Hauptbox (rote box im Beispiel) eben in Abhängigkeit von der Höhe (des Anzeigefensters=viewport?) skaliert. Wenn mich meine immer noch sehr rudimentären CSS Kenntnisse nicht täuschen wird - soweit ich relative werte angebe - standardmäßig _immer_ in Abhängigkeit der Breite skaliert (was bei der gegebenen hardware mit Bildschirmen die eben in der Regel breiter als hoch sind ggf. eben ein Scrollen erzwingt.
Möchte ich aber eine Seite möglichst (nur) die Höhe ausfüllend darstellen (und nehme also je nach Bildschirm die freien Flächen links und rechts in Kauf), sind mir die Hände gebunden, bzw. ich kann das mit reinem (x)html+css nur für jeweils eine Auflösung erreichen. Denn es gibt keine Möglichkeit _relative_ Seitenverhältnisse zu erzwingen.
???
Falls ich mich irre (was ich in diesem Fall sehr hoffe, aber nicht wirklich glaube) bitte ich um Vorschläge (die mit xhtml+css _ohne_ scripte (javascipt, php, wasweißich) möglichst in IE6-8 +FF + (möglichst) Opera funktionieren.
Im verlinkten Beispiel soll die rote Box möglichst bildschirmfüllend bezogen auf die Höhe _skalieren_ (im Quelltext habe ich zwei weitere Auflösungen als Kommentare eingefügt. Die kleinste Auflösung sollte optimal für 1080x768er Auflösung sein).
bye
MH
Om nah hoo pez nyeetz, michat!
Im verlinkten Beispiel soll die rote Box möglichst bildschirmfüllend bezogen auf die Höhe skalieren (im Quelltext habe ich zwei weitere Auflösungen als Kommentare eingefügt. Die kleinste Auflösung sollte optimal für 1080x768er Auflösung sein).
warum kann besagte box denn nicht überall z.B. 100% hoch sein? das wäre bildschirmfüllend.
Die Bildschirmauflösung abfragen und danach irgendetwas gestalten, z.B. färbe die Box bei 1024x170 Pixel gelb, funktioniert nur mit html und css nicht.
Matthias
warum kann besagte box denn nicht überall z.B. 100% hoch sein? das wäre bildschirmfüllend.
Das geht schon 100% hoch, nur wie breit ist die dann? Mein design ist ja grob DIN A4 quer, also 29/21, gerundet 3/2. Wie lege ich fest, dass die rote Box bei einer Höhe von 100% in der Breite 3/2 der Höhe hat. Genau das geht nicht.
»»Die Bildschirmauflösung abfragen und danach irgendetwas gestalten, z.B. färbe die Box bei 1024x170 Pixel gelb, funktioniert nur mit html und css nicht.
eben
bye
MH
@@michat:
nuqneH
Mein design ist ja grob DIN A4 quer, also 29/21, gerundet 3/2.
√2 ist deutlich näher an 1.4 als an 1.5.
Wie lege ich fest, dass die rote Box bei einer Höhe von 100% in der Breite 3/2 der Höhe hat.
Wozu denn? Mein Viewport ist 1200 × 1674 (Breite × Höhe) groß. Willst du davon nur einen kleinen Teil nutzen?
Qapla'
@@michat:
nuqneH
Mein design ist ja grob DIN A4 quer, also 29/21, gerundet 3/2.
√2 ist deutlich näher an 1.4 als an 1.5.
Stimmt:
Ich lösche ein 3/2 und kaufe ein 7/5 , wenn's der Anschauung dient ;-)
Wozu denn? Mein Viewport ist 1200 × 1674 (Breite × Höhe) groß. Willst du davon nur einen kleinen Teil nutzen?
In diesem Fall ausdrücklich "Ja", ich möchte mit dieser Seite absichtlich die Höhe _deines_ Viewports zu 100% beanspruchen, und dabei auf ggf. etwas von der Breite _deines_ Viewports verschenken. Letzteres, der Verzicht auf die Nutzung der vollen Breite ist, wem sag ich's, ein weit verbreitetes Designelement auch bei Höhen von mehr als 100% Viewport. Und die Alternative in beiden Dimensionen etwas zu verschenken ist eben nicht wirklich eine "Wahl".
bye
MH
Hallo,
Ich möchte schlichtweg erreichen, dass die alles umgebende Hauptbox (rote box im Beispiel) eben in Abhängigkeit von der Höhe (des Anzeigefensters=viewport?) skaliert.
dann gib ihr eine Höhe von 100% (oder einen davon abweichenden Prozentwert), und allen ihren Vorfahrenelementen ebenfalls 100%.
Wenn mich meine immer noch sehr rudimentären CSS Kenntnisse nicht täuschen wird - soweit ich relative werte angebe - standardmäßig _immer_ in Abhängigkeit der Breite skaliert (was bei der gegebenen hardware mit Bildschirmen die eben in der Regel breiter als hoch sind ggf. eben ein Scrollen erzwingt.
Huh? Das verstehe ich nicht. Ein height:80%; bedeutet: Das Element soll 80% der Höhe seines Elternelements einnehmen. Die Breite spielt dabei keine Rolle.
Denn es gibt keine Möglichkeit _relative_ Seitenverhältnisse zu erzwingen.
Es gibt AFAIK in CSS *gar keine* Möglichkeit, Seitenverhältnisse festzulegen. Nebenbei: Seitenverhältnisse sind immer relativ, daher "Verhältnis".
Im verlinkten Beispiel soll die rote Box möglichst bildschirmfüllend bezogen auf die Höhe _skalieren_
Also height:100%, dabei die Vorfahrenelemente nicht vergessen.
So long,
Martin
Hallo,
Denn es gibt keine Möglichkeit _relative_ Seitenverhältnisse zu erzwingen.
Es gibt AFAIK in CSS *gar keine* Möglichkeit, Seitenverhältnisse festzulegen.
Jain: Es wäre halt schön, wenn das was mit <img src="beispiel.png" style=widht=""; height=100%;> geht, nämlich ein skalieren unter Beibehaltung des Seitenverältnisses, irgendwie auch mit nicht Bitmaps ginge im Stile von <div id="hauptbox" style=widht="3"; height="2";> welches dann die Box auf den zur Verfügung stehenden Platz expandierte.
»»Nebenbei: Seitenverhältnisse sind immer relativ, daher "Verhältnis".
Nunja, ich möchte eine Box, die ein (fixes) Seitenverhältins von 3 zu 2 hat relativ zur Höhe des Browserfensters skalieren ...
(<klugsch..>
Ein "Verhältnis" von 3/2 ist fix und nicht relativ, die Seitenlängen zueinander stehen in einer fixen(!) Relation, nicht deren Verhältnisse, von denen die Seiten nur eines und nicht gleich mehrere haben. Mehrere Seitenverhältnisse mögen untereinander fix, relativ oder auch relativ fix sein, und das Problem hier ist, dass das fixe Seitenverhältnis des Designs nur durch Angabe absoluter Größen zu erzielen ist, und dieses Seitenverhältnis - anders als es mit Graphiken möglich ist - nicht relativ zur Höhe skaliert werden kann um den unterschiedlichen SeitenverhältnisSEN verschiedener Monitoren und Auflösungen ein Schnippchen schlagen zu können _ohne_ den user zu manchmal auch unerwünschten Scrollorgien zu zwingen.
Aber gut, "_relative_ Seitenverhältnisse" hatte ich in den Ring geworfen ...
</klugsch..>):
Ich möchte erreichen, dass meine Seite wie eine Art Plakat statisch im Browser erscheint, ohne das ein scrollen, weder vertikal noch horizontal notwendig ist. Dabei soll die hauptbox inkl. margin 100% der gesamthöhe des Browsers einnehmen.
Verkürzt inkorrekt notiert:
html height:100%
body height:100%
rote box height:90%, margin: 4% auto 4% auto; (summe 98%, rest für border)
bye
MH
@@michat:
nuqneH
Ich möchte erreichen, dass meine Seite wie eine Art Plakat statisch im Browser erscheint, ohne das ein scrollen, weder vertikal noch horizontal notwendig ist.
Du möchtest SVG verwenden?
Dabei soll die hauptbox inkl. margin 100% der gesamthöhe des Browsers einnehmen.
?? Und dann nach rechts rausragen, weil die Breite nicht in den Viewport passt? Horizontales Scrollen ist eher nicht nutzerfreundlich.
Qapla'
@@michat:
?? Und dann nach rechts rausragen, weil die Breite nicht in den Viewport passt? Horizontales Scrollen ist eher nicht nutzerfreundlich.
Wo ragt dann in meinem Beispiel etwas rechts raus? Nur wenn der user seinen Monitor hochkannt stellt und seinen Viewport per Treiber um 90% dreht.
bye
MH
Hallo,
?? Und dann nach rechts rausragen, weil die Breite nicht in den Viewport passt? Horizontales Scrollen ist eher nicht nutzerfreundlich.
Wo ragt dann in meinem Beispiel etwas rechts raus? Nur wenn der user seinen Monitor hochkannt stellt und seinen Viewport per Treiber um 90% dreht.
du vergisst, dass die Fenstergröße so ziemlich jeden beliebigen Wert annehmen kann - gern auch höher als breit, was mir persönlich auch wesentlich angenehmer und praktischer erscheint als das übliche Breitbildformat heutiger Monitore. Hochkant gestellt sind manche von denen durchaus okay.
Im übrigen ragt dein Anzeigebeispiel bei mir auch weit nach rechts aus dem Bild heraus. Nach unten auch.
Hallo,
?? Und dann nach rechts rausragen, weil die Breite nicht in den Viewport passt? Horizontales Scrollen ist eher nicht nutzerfreundlich.
Wo ragt dann in meinem Beispiel etwas rechts raus? Nur wenn der user seinen Monitor hochkannt stellt und seinen Viewport per Treiber um 90% dreht.du vergisst, dass die Fenstergröße so ziemlich jeden beliebigen Wert annehmen kann - gern auch höher als breit, was mir persönlich auch wesentlich angenehmer und praktischer erscheint als das übliche Breitbildformat heutiger Monitore. Hochkant gestellt sind manche von denen durchaus okay.
Darüber könnten wir sofort reden, solieb mir mein Monitor zum Filme glotzen ist ( ja, auch dazu gebrauche ich ihn) so wenig praktisch finde ich ihn wegen seinem unglücklichen Breite zu Höhen Verhältniss.
Aber es geht eben um die derzeit meistverbreiteten Monitore und um diese spezielle Seite.
BTW: auf der Hauptseite der Domain kannst du "bewundern" worauf das letztlich hinauslaufen soll.
Im übrigen ragt dein Anzeigebeispiel bei mir auch weit nach rechts aus dem Bild heraus. Nach unten auch.
Verstehe ich nicht. Verwendest du standardmäßig Zoom?
Die Box hat(te) width: 847pt; height: 594pt; und wird auf meinem 1680x1050 Schirm mit ca. 1cm Rand oben und unten angezeigt, habe jetzt die Version, die ich eigentlich für 1024X768 Auflösung optimiert sehe hochgeladen, Boxmaße width: 705pt; height: 500pt; .
Aber eigentlich sind wir hier Mitten im Thema: Wie gestalte ich die Seite so, dass sie mit möglichst vielen Auflösungen ansprechend aussieht. Eine theoritische möglichkeit wäre eine Anpassung relativ zur Höhe. was offenbar praktisch nicht wie gewünscht geht
bye
MH
Hi,
Im übrigen ragt dein Anzeigebeispiel bei mir auch weit nach rechts aus dem Bild heraus. Nach unten auch.
Verstehe ich nicht. Verwendest du standardmäßig Zoom?
nein, warum sollte ich? Aber ich habe den Browser nicht unbedingt im Vollbildmodus, damit ist das nutzbare Anzeigefenster meist so 900..1000px breit und um die 800px hoch.
Die Box hat(te) width: 847pt; height: 594pt; und wird auf meinem 1680x1050 Schirm mit ca. 1cm Rand oben und unten angezeigt, habe jetzt die Version, die ich eigentlich für 1024X768 Auflösung optimiert sehe hochgeladen, Boxmaße width: 705pt; height: 500pt;
Wie kommst du auf die Idee, pt als Einheit für Bildschirmmaße zu nehmen? Von welchem hypothetischen Umrechnungsfaktor gehst du aus? Ein typischer Wert ist 96dpi, also 96px=72pt. Damit würde sich mit deinen obigen Maßen eine Breite von 1129px und eine Höhe von 792px ergeben.
Aber eigentlich sind wir hier Mitten im Thema: Wie gestalte ich die Seite so, dass sie mit möglichst vielen Auflösungen ansprechend aussieht.
Indem du die "Auflösung", besser gesagt, Fenstergröße, vergisst und ein fließendes Layout machst, das nur da feste Größenangaben verwendet, wo es unbedingt nötig ist. Und indem du es nicht als Problem, sondern als Stärke von HTML und CSS siehst, dass ohne weiteres Zutun der Platz automatisch je nach Bedarf ausgenutzt wird.
So long,
Martin
Hi,
Hi back
Wie kommst du auf die Idee, pt als Einheit für Bildschirmmaße zu nehmen? Von welchem hypothetischen Umrechnungsfaktor gehst du aus? Ein typischer Wert ist 96dpi, also 96px=72pt. Damit würde sich mit deinen obigen Maßen eine Breite von 1129px und eine Höhe von 792px ergeben.
Ups, das hatte ich wohl ordentlich versemmelt, Eigentor. Habe das jetzt auf vernünftige px Maße gebracht. Jetzt endlich wurde mir dadurch auch klar, warum ich das beim IE-netrenderer nicht passend angezeigt bekam. Danke für den Hinweis.
Aber eigentlich sind wir hier Mitten im Thema: Wie gestalte ich die Seite so, dass sie mit möglichst vielen Auflösungen ansprechend aussieht.
Indem du die "Auflösung", besser gesagt, Fenstergröße, vergisst und ein fließendes Layout machst, das nur da feste Größenangaben verwendet, wo es unbedingt nötig ist. Und indem du es nicht als Problem, sondern als Stärke von HTML und CSS siehst, dass ohne weiteres Zutun der Platz automatisch je nach Bedarf ausgenutzt wird.
Ja gut, hier betritt man ein weites Diskussionsfeld wo ich Mangels fundierter Kenntnisse nur bedingt mitreden kann:
A) Dass html/css ein fließendes Design ermöglicht ist lobenswert, auch wenn mir im täglichen surfen dieser Wert nicht augenscheinlich ist, vielleicht wiederum Mangels fundierter Kenntnis.
B) Aber warum muss es dann so sperrig sein, ein einfaches und vielleicht bewusst starres Design, für dass es viele Gründe geben kann, mit einfachen Mitteln zu realisieren? Warum muss ich mir ein "fließendes Design" ausdenken müssen, wo ich es hier ausdrücklich nicht will, und ob ich es können will sei dahingestellt.
Aber Danke für deine Hinweise ...
So long,
Martin
bye
MH
Hallo,
Wie kommst du auf die Idee, pt als Einheit für Bildschirmmaße zu nehmen? [...]
Ups, das hatte ich wohl ordentlich versemmelt, Eigentor.
ah, also keine Absicht.
Indem du die "Auflösung", besser gesagt, Fenstergröße, vergisst und ein fließendes Layout machst, das nur da feste Größenangaben verwendet, wo es unbedingt nötig ist.
A) Dass html/css ein fließendes Design ermöglicht ist lobenswert, auch wenn mir im täglichen surfen dieser Wert nicht augenscheinlich ist, vielleicht wiederum Mangels fundierter Kenntnis.
Dieser Wert manifestiert sich darin, dass man bei gut gemachten Seiten sowohl die Fensterbreite als auch die Schriftgröße in weiten Bereichen variieren kann, ohne dass das Layout entstellt wird oder nicht mehr zu gebrauchen ist. Dass man mit wenig (manchmal sogar ganz ohne) Aufwand erreichen kann, dass ein Layout auf einem PDA ebenso anständig aussieht wie beim Ausdruck auf einem A4-Blatt.
B) Aber warum muss es dann so sperrig sein, ein einfaches und vielleicht bewusst starres Design, für dass es viele Gründe geben kann, mit einfachen Mitteln zu realisieren?
Ist es nicht. Du kannst jederzeit ein pixelstarres Layout festtackern. Nur ob das sinnvoll ist, steht auf einem ganz anderen Blatt. Aber eine Hybridlösung -also fließendes Layout mit festen Grenzen- erfordert etwas Nachdenken.
Ciao,
Martin
@@michat:
nuqneH
Aber es geht eben um die derzeit meistverbreiteten Monitore
Die da wären?
Und das Nutzer von derzeit weitverbreiteten „Monitoren“ ständig zwischen Querformat und Hochformat wechseln, ist dir bewusst?
Qapla'
