• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV+Bildschirmauflösung

Status
Für weitere Antworten geschlossen.
S

Sabine

Neues Mitglied
Hallo,

habe eine Webseite in html mit <divs> gestaltet. Die Seite ist auf 1024x768 optimiert und sieht hier auch 1A aus.

Bei hoheren Bildschirmauflösungen erscheint alles zu klein, ist aber noch zentriert(so soll es sein) und relativ an seinem Platz, d.h. es ist nichts "verrutscht". Gibt es eine Möglichkeit den gesamten Seiteninhalt in ein neues Div, oder eine Tabelle, o.ä. zu packen und bei höheren Auflösungen entsperchend automatisch zu skalieren (die Seite basiert auf jpegs und gifs, und da ist noch Reserve in der Auflösung) ?
Was ist hierbei am besten mit unterschiedlichen Browsern kompatibel und funktioniert am besten?
Könntet Ihr mir da hml-mäßig was posten?

vielen Dank für eure Hilfe,
Sabine
 
HTML mäßig weiss ich nicht wie du die Auflösung rausbekommst, wüsste nicht dass das geht, aber mit JavaScript gehts, kannst dann je nach Auflösung z.b. ein anderes CSS einbinden.
 
Hi,

vermute mal du hast die Größen in Pixel (px) angegeben.
Weil Pixel eine Größe relativ zur Bildschirmauflösung ist wird bei höherer Auflösung alles kleiner, es sind ja dann auch mehr Pixel da (z.B. 1280x1024 Pixel).

Das kannst du umgehen indem du entweder die Größeneinheit % oder noch besser em nimmst.

Layouts mit % sind sogenannte flüssige Layouts, wenn du für #wrapper width:90%; angibst wird dein Layout immer 90% der Bildschirmbreite einnehmen, weil sich die 90% immer auf die Breite des Elternelements beziehen (<body>!).

Nachteile:
-Bei breiten Viewports wird dein Layout auch in die Breite gezogen.
-Hintergrundbilder wachsen beim zoomen der Seite nicht mit.
-Der IE kommt mit %-Angaben für padding/margin öfter mal nicht
klar.
-Man kann immer nur glatte %-Zahlen angeben, der IE ignoriert die
Angaben hinterm Komma (Punkt in dem Fall).

Layouts mit em sind sogenannte elastische Layouts.
em ist eine Größe relativ zur Schriftgröße.
Gibst du alles in em an, wächst beim zoomen alles mit, d.h. dein Layout bleibt intakt egal wie du zoomst.
Nachkommastellen sind auch kein Problem im IE.

Nachteile:
Hintergrundbilder wachsen beim zoomen nicht mit.

Gruß
Klaus
 
Hi,

Hier ist eine Seite, bei der das alles so klappt, wie ich mir das vorstelle, aber ich weiss nicht, wie es funktioniert:
Zum Vergrößern anklicken....

Ist mit Frametechnik einer Technik von vorgestern gemacht, außerdem jede Menge Javascript drin (hat aus Sicherheitsgründen eh ein Teil der User abgeschaltet).
 
DIV+Auflösung

Hallo Klaus,
habe alles in PX angegeben, mein Menü, die Bilde,etc...
Die Seite soll auch auf Widescreens funktionieren und den Inhalt nicht verzerren.. Hintergrundbilder habe ich keine, das ist also kein Problem.Kann man nicht auch proportional skalieren, bzw. die Höhe der Monitorauflösung als anhaltspunkt nehmen? Unen habe ich eine Seite gepostet, bei der das gut funktioniert, weis aber nicht, wie das hier zusammenhängt...
Gruß,
Sabine
 
JS+Auflösung

Ich gehe davon aus, das bei den Leuten, die sich meine Seite anschauen JS aktivisrt ist, würde es also in Kauf nehmen, wenn es bei einigen funktioniert, bei anderen nicht.
Wie kann man das mit JS lösen?Mit avavailable width+height wird ja nur das Fenster an die Auflösung angepasst, aber nicht der Inhalt. Und der soll ja auch nicht verzerrt werden.Die Skalierung müsste proportional sein und sich an der Bildschirmhöhe orientieren.
...Sabine
 
Hi,

Die Seite soll auch auf Widescreens funktionieren und den Inhalt nicht verzerren
Zum Vergrößern anklicken....
dann nimm em.

Unen habe ich eine Seite gepostet, bei der das gut funktioniert, weis aber nicht, wie das hier zusammenhängt...
Zum Vergrößern anklicken....
Ich auch nicht. Bei frametechnik sieht man nicht so viel (Der Suchmaschinenroboter übrigens auch nicht!:-)).

Seite ist auch technisch schlecht gemacht, d.h. ist nicht valide , Schrift läßt sich im IE nicht skalieren (Schriftgröße in px), usw.

Schaut optisch schick aus aber unter der Motorhaube läuft ein Rasenmähermotor sozusagen.:mrgreen:

Kann man nicht auch proportional skalieren, bzw. die Höhe der Monitorauflösung als anhaltspunkt nehmen?
Zum Vergrößern anklicken....
Dann wären wir wieder bei Pixel.
Am perfektesten gehts nur mit em.

Zu Scriptlösungen, siehe mein voriges posting
 
em

O.k.Also nehme ich ein sozusagen ein übergeordnetes Container Div, und gebe als höhe z.b.80% an und positionier alle anderen Divs darin.
-Was gebe ich dann bei der Breite des Containersan, wenn sie proportional sein soll?
-Passen sich dann alle anderen Divs, die in dem Container liegen dem container an?
...
 
Hi,

wenn du alles in % machst sind die %-Angaben immer im Verhälnis zum Elternelement:
Code: 
<body>
            <div id="wrapper">
             <div id="inhalt"></div><!--Ende #inhalt-->
             </div><!--Ende #wrapper-->
             </body>

Wenn #wrapper width:80% hat nimmt er 80% des Bildschirms ein, weil body=viewport.
Denn body ist das Elternelement von #wrapper.

Wenn #inhalt width:80% hat nimmt #inhalt 80% der Breite von #wrapper ein.
Denn #wrapper ist das Elternelement von #inhalt.

Verstehst du das Prinzip?
 
wrapper

Glaube schon, das ich das verstehe.

Aber muß ich, wenn sich das Ganze nur auf dir Höhe des Bildschirms beziehen soll und die Breite proportional mitgehen soll, die width-Angabe einfach leer lassen, oder gibt es da ein "proportional-Tag":-)

in etwa so:
#wrapper{ height: 80%; width: "proportional-Tag"; align: center; position: relative; visibility: visible; }
oder geht das automatisch, also besser so?
#wrapper{ height: 80%; align: center; position: relative; visibility: visible; }
...Sabine
 
Hi,

für #wrapper solltest du eine fixe Breite angeben damit dein Layout die gewünschte Größe im Viewport hat.
Ein <div> ist ein Blockelement und die werden immer so breit wie es geht, d.h. ohne Breitenangabe werden sie so breit wie <body>.

Code: 
 #wrapper{ height: 80%; align: center; position: relative; visibility: visible; }
Diese Angaben brauchst du nicht.

Die Höhe wird durch den Inhalt + padding/margin bestimmt,

align:center; ist nicht richtig:
Textausrichtung mit text-align:left/center/right.

#wrapper wird mit:
Code: 
#wrapper  { margin: 0 auto;  }
zentriert.

visibility:visible heißt das etwas sichtbar sein soll, aber das ist es eh schon.

position:relative wozu du das brauchst verstehe ich nicht.
Ist normal überflüssig, oder was ist deine Absicht damit??
 
wrapper

so, jetzt habe ich wieder etwas herumprobieren können: Der Inhalt, bzw. die ganzen DIVS in meinem Wrapper passen sich nicht seiner Größe an. Das muß ich dann wohl alles auf % umstellen, oder? -Ich habe ziemlich viele Seiten mit ziemlich vielen Divs. Ich arbeite mit Golive und wenn ich das alles einzeln einstellen würde, dann wäre ich wahrscheinlich in einem Monat noch nicht fertig. Weiß jemand, ob das auch anders als einzeln geht?Und muß dann die Position der einzelnen elemente "relativ" sein?
Gruß,
Sabine
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben