Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

CSS - minimale Fenstergröße bestimmen





Frage

Hallo, ich versuche eine Seite mit CSS zu machen. Bin gerade beim Grungerüst. Ein Bild sollte ganz unten Links sein, und eins ganz oben rechts. Das habe ich auch bisher geschaft. Jetzt habe ich mal geschaut, wie sich das ganze verhaltet, wenn man den Browser-Fenster immer weiter verkleinert. Die Bilder kommen immer näher aneinander, bis das eine mit dem höheren "z-index" den anderen überlappt. Um das zu verhindern, würde ich gerne eine mindestgröße für das Browser-Fenster festlegen. Also z.B. 500px x 600px. Ich habe es im Body eingegeben, aber es funktioniert nicht. Weiß einer wie ich das machen muss? [b]Hier der Html-Code:[/b] <html> <head> <title>www.filep-design.de</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <div id=backlinks> </div> <div id=backrechts> </div> </body> </html> [b]Hier der CSS-Code:[/b] body { background-color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; WIDTH: 500px; HEIGHT: 600px; } #backlinks { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; z-index: 10; BACKGROUND: url(material/face.jpg) no-repeat left bottom; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 233px; PADDING-TOP: 0px; POSITION: absolute; BOTTOM: 0px; HEIGHT: 300px } #backrechts { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 2; BACKGROUND: url(material/g_logo.jpg) no-repeat right top; RIGHT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 300px; PADDING-TOP: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 195px } Danke schon mal Struggle

Antwort 1 von Toadie

Du willst verhinder, dass jemand sein Browserfenster nach belieben verkleinern kann?

Wenn überhaupt dann wird man dafür JavaScript einsetzen müssen.

Antwort 2 von Struggle

hm, das prob is, dass wenn jemand sein fenster sehr verkleinert, überlappen die beiden bilder. Kann man da nicht irgendwie nen Stopp reinmachen?

Antwort 3 von rabies

Besser wäre ein "wrapper", den man auf eine bestimmte Größe (Breite, Höhe) begrenzt. Also praktisch ein div-Layer, dem Du eine bestimmte Breite gibst. Dann würden bei der fixen Breite dann, wenn das Fenster weit genug zusammengeschoben ist, Scrollbalken kommen.

Schön wäre hier die Verwendung von min-width und min-height. Tut der IE aber nicht.


Du solltest eher daran denken, dass man es nicht wirklich jedem recht machen kann. Wenn jemand meint, mit einem Browserfenster surfen zu müssen, dass auf 200x300 Pixel zurechtgeschoben ist, würde ich sagen, dass das dann einfach sein Pech ist, wenn´s nicht mehr passend aussieht.

--rabies.

Antwort 4 von rfb

@rabies:
Zitat:
mit einem Browserfenster surfen zu müssen, dass auf 200x300 Pixel zurechtgeschoben
du solltest der Handykultur Rechnung tragen, da gibt es sowas.

@Struggle:
letztlich müsstest du dich mal entscheiden, ob die Bilder wichtig sind - dann gehören sie nicht in den Hintergrund - oder unwichtig - dann kanns dir egal sein was der Userbrowser damit macht.
So wie du sie derzeit einbindest sind es unwichtige Layoutbildchen und die behandelt der Browser genau so. U.u. sind sie per Browsereinstellungen sogar unsichtbar.
Eine Mindestgröße macht nur Sinn, wenn du sie - wie rabies vorschlägt - scrollbar gestaltest, denn du kannst nie voraussetzen, dass das ansonsten in den Bildschirm passt. Dazu gibts die CSS-Eigenschaft overflow: http://www.css4you.de/overflow.html.