Größe von Website Elementen

[Kevinb_91]

Guten Tag zusammen,

ich würde gerne wissen wie man an den Grundaufbau einer Website rangeht, wenn man berücksichtigt, dass die Seite bei jedem gleich aussehen soll.
Zum Beispiel hätte ich gerne einen Header, der 100% Des Browsers abdeckt. Nun gut, man könnte "width=100%" definieren, aber genau da setzt mein Problem an;
Wenn ich nämlich meine Website auf prozentualen Angaben aufbaue und das Browserfenster nun kleiner ziehe, schrumpft die ganze Page mit. Das möchte ich aber nicht, sondern es soll ein Scrollbalken entstehen, die Page soll ihre unveränderte Größe behalten.
Nun klar, könnte ich zusätzlich zu den prozentualen Angaben eine min-width einstellen und würde somit das kleiner ziehen meiner Website verhindern, aber wie definiere ich diese. Zu klein und es entstehen ekelige Ränder bei manchen Leuten, zu groß und wieder andere haben von Anfang an einen horizontalen Scrollbalken.

So nun viele Infos die einige Gegenfragen von Anfang an dezimieren sollten, die Gesamtfrage zu dem ganzen lautet wie folgt: Wie gehe ich an den Aufbau einer Website ran, wenn ich diese über 100% Der Breite des Browsers gestalten möchte, was sich auch nicht ändert wenn man das Brwoserfenster verkleinert. Es soll dann ein Scrollbalken entstehen.

Mfg,
Kevin.

 

[Tronjer]

Width in Prozent und min-width in Pixeln.

 

[Kevinb_91]

min-width in Pixeln, gibt das nicht auch wieder Probleme mit Leuten unterschiedlicher Auflösungen oder sowas?

 

[Tronjer]

Wie willst du es anders machen? Breite in Prozent skaliert mit dem Viewport des Browsers. Zusätzlich lassen sich Werte für min-width und max-width in Pixeln einstellen, damit Elemente bei Unterschreitung einer bestimmten Größe nicht umbrochen und bei sehr großen Breiten nicht über den gesamten Viewport gezogen werden. Eine weitere Möglichkeit zur Differenzierung lässt sich über Media Queries vornehmen.

Schau dir mal Frameworks wie Twitter Bootstrap und Foundation an. Vielleicht kommt so etwas deinem Vorhaben ja entgegen.

 

[Kevinb_91]

Wie ich es machen möchte ähm ja, genau wie in meinem ellenlangen Text beschrieben;
Eine Page deren Grundlayoutgröße (z.B. Header) 100% Der Browserbreite umfasst, sich aber NICHT verkleinert wenn man Beispielsweise das Browserfenster kleiner zieht.

- % Angaben gehen nicht, Fenster skaliert sich ja sonst mit runter
- min width, schön und gut kann ich für meinen Browser schön machen, kommt wer mit ner anderen Auflösung ist alles im arsch

... Naja einfach gesagt, soll die min-width der Seite 100% Der Seite betragen, beim kleiner ziehen aber nicht mit skalieren, sonder nein Scrollbalken soll entstehen, die Elemente der Page sollen ihre Anfangsgröße behalten.

 

[Daniel_Pixelsafari.net]

Schau Dir das hier mal an:

http://www.pageresource.com/jscript/jscreen.htm

Und den width wert dann gleich dieser dynamischen variable setzen. Müsste klappen.

 

[Kevinb_91]

Hmm das setzt aber vorraus, dass ich dann quasi jedesmal die Page auf zweierlei Weisen anpassen muss, ähnlich wie bei diesem @media Responsive Gedönse oder?

Vielleicht bin ich auch einfach nicht fähig mich so auszudrücken, dass man versteht was genau ich meine, denn ich glaube so kompliziert und ungewöhnlich ist es garnicht, was ich erreichen möchte.

Wenn ich mir zum Beispiel die Seite Amazon.de nehme und einfach mal den Header ansehe (willkürliches Beispiel), dann füllt er 100% Der Seite aus, denn bis ganz links in die Ecke gepresst ist das Amazon Logo und bis ganz rechts in die Ecke sind, was weiß ich, Einkaufswagen oder Werbung für irgendwas. Aufjedenfall ist die Page über die ganze Breite des Browsers gezogen.
Sooo.... schiebe ich meinen Browser jetzt kleiner, behält alles auf der Amazon Seite seine Originalgröße und ich kann lediglich anhand eines Scrollbalkens bestimmten, welches Teilstück der Page ich sehen möchte.
So weit so gut, gehe ich jetzt hier an den Rechner meines Kollegen, der eine andere Auflösung verwendet, behält die Page aber ihre Verhältnisse, ebenfalls ohne irgend eine Überlappung oder auftauchen von überflüssigem Leer-Rand.
Und es geht sogar soweit, dass wenn ich Zoome (Strg+Mausrad) Die Page immernoch ihre Proportionen behält. Ich erwähne das ebenfalls, da bei einer meiner Testpages, auf der ich mit minwidth und % arbeite, das ganze beim zoomen und minimieren komplett außer Rand und Band gerät.
Amazon ist jetzt vielleicht ein dummes Beispiel, da eine so populäre Website natürlich mit sowas von viel Zeit bearbeitet und für alle Kunden piko bello gemacht wird, aber es ist auch bei vielen vielen anderen Websites der Fall, denen ich jetzt nicht so hohen Zeit und Arbeitsaufwand vorraussetze.

Mfg.

Edit: Würde dann doch auch vorraussetzen, dass ich für jede gängige Auflösung (Was doch ein paar sind) Die Seitengröße neu definiere, ein wenig viel Arbeit.

 

[Tronjer]

Amazon verwendet für die Navi aber genau diese Kombination von width in Prozent und min-width in Pixeln. Erst wenn die Viewportbreite 1000px unterschreitet taucht der horizontale Scrollbalken auf. Darüber hinaus setzt die Seite auch auf Media Queries und blendet bsw. die Subnavigation je nach Breite ein und aus.

Sofern du Probleme mit überlappenden Elementen hast, liegt dein Problem eventuell in festen Pixelbreiten für Unterlemente, fehlenden Media-Queries oder Einsatz von position: relative/absolute. Du solltest wirklich über den Einsatz eines Frameworks nachdenken. Schau dir mal diese Seite an, da überlappt sich nichts.

http://foundation.zurb.com/docs/