Layout möglich?

Layout möglich?

Beitragvon midav » 22.12.2009, 20:24

Hallo,

ich versuche gerade ein Layout in CSS umzusetzen und komme nicht weiter.

5 Bilder sollen in einer Reihe (von links nach rechts) auf der Seite erscheinen. Originalauflösung (Höhe) der Bilder ist, sagen wir mal, 800px. Damit man alles zu sehen bekommt, soll mit dem unteren Balken *horizontal* gescrollt werden.
Soweit so gut. Nun möchte ich für alle Bildschirmauflösungen eine Betrachtung ermöglichen. Das heisst - die Bilder sollen in einer Reihe bleiben und bei kleineren Browserfenstern mit herunter skaliert werden. Wenn Browserfenster grösser ist, sollen die Bilder bis 800px und nicht höher dargestellt werden.

Wie würdet Ihr es anlegen? Geht das überhaupt mit CSS?
midav
neu hier
 
Beiträge: 2
Registriert: 22.12.2009, 19:56

Re: Layout möglich?

Beitragvon sejuma » 23.12.2009, 08:22

Das geht nicht mit CSS. Dazu müsstest du per javascript die Bildschirmauflösungen auslesen.
Davon abgesehen sind die Bildschirmauflösungen jedoch nicht der richtige Bezugspunkt.
Vielmehr kommt es darauf an, wie groß der tatsächliche Viewport (Bildschirmfenster) des Benutzers ist - unabhängig von der Bildschirmauflösung. Und diese Größe hängt wiederum von den ganz persönlichen Einstellungen jedes einzelnen ab. Z.B. ob die Favoritenleiste geöffnet geöffnet ist und welche Breite sie einnimmt, wie hoch die obere Symbolleiste ist, bzw. wie groß das Fenster überhaupt aufgezogen wird.

Somit ein recht hoffnungsloses Unterfangen.
Bild
sejuma
Vielposter
 
Beiträge: 787
Registriert: 15.07.2009, 17:46

Re: Layout möglich?

Beitragvon midav » 23.12.2009, 13:30

Hallo,

danke für die Antwort. Es ging mir schon um die Grösse des Browserfensters, hab's nur schlecht formuliert.
Hier ist eine akzeptable Lösung mit einem kleinen Schönheitsfehler - Scrollbalken ist im DIV und nicht unten im Browserfenster.

Für Bilder mit 550px hoch Originalauflösung:

Code: Alles auswählen
<head>
  <style type="text/css">
    img  { display: inline; max-height: 550px; height: 90% }
  </style>
</head>

<body>
  <div style="overflow-x:scroll">
    <div style="width:3000px;">
      <img src="bild1.jpg">
      <img src="bild2.jpg">
      <img src="bild3.jpg">
      <img src="bild4.jpg">
    </div>
  </div>
</body>
midav
neu hier
 
Beiträge: 2
Registriert: 22.12.2009, 19:56


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Layout möglich?"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste

cron