Layout-verschiebung bei Verkleinerung der Browserbreite

jojo87

Hallo Zusammen.

Man nehme folgendes Layout:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>
	<title>unbenannt</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style type="text/css" media="all">
		body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			background: #DFE2E3;
		}

		#bg {
			margin-right: 85%;
			background: #000;
			height: 500px;
			width: 15%;
		}

		#wrapper {
			width: 85%;
			min-width: 900px;
			margin-left: 15%;
			top: 0;
			position: absolute;
		}

		#page {
			width: 900px;
			background: #fff;
			height: 500px;
		}	
	</style>
</head>


<body>
<div id="bg">
</div>


<div id="wrapper">
<div id="page">


</div>
</div>


</body>
</html>

Alles anzeigen

Ich möchte gerne erreichen, dass beim verkleinern der Browserbreite der Inhalt der Seite nach links "verschwindet", also der 15% breite linke Teil zuerst abgeschnitten wird.
ich habe mir schon den Wolf gegoogelt aber nichts erreicht, weiss auch nicht so wirklich, wonach ich suchen soll.

Gibt es überhaupt eine geeignete Lösung dafür? Da ja normal sich alle Elemente vom linken Rand gesehen ausrichten.

Schon mal danke für eure Bemühungen,
Jojo

synaptic

also wenn ich etwas links verschwinden lassen wollte, ahb ich das mit nem gleitenden register gemacht...
also element absolut positioniert und dann mit javascript nen negativen left-wert zugewiesen (wenn man das alles in kleinen schritten udn mit nem timeout macht, kommt ne feine bewegung zustande
kannste hier gucken... http://home.arcor.de/aviaticus.ger/pedinfoplay.html
einfach mal bei geschwister auf nen namen klicken... dann kommt der layer reingefahren... die gleiche bewegung kann man natürlich auch andersherum realisieren...

nur weiß ich nicht, ob etwas absolut positioniertes auch in dein layout reinpasst... kanns auch grad net testen, steck in der berufsschule^^

jojo87

Danke Synaptic, aber das bringt mir leider nicht sehr viel.
Mit dieser lösung müsste ich ständig den Viewport des Users auslesen und dem enstprechend den left wert verändern. Das wird mir zu umständlich und desweiteren hätt ich ganz gern auf javascript verzichtet.
Genieß die Schule

synaptic

mir fällt grad noch was ein^^
würde es gehen, daß du den zu verschiebenden bereich in nen anker packst und den dann per hover oder sowas verschiebst?
und der viewport is immer document.body.clientWidth
bei nem eventhandler like onresize kann man da direkt was werkeln^^

yeti66

jojo87,

ich sehe da zwar keinen Sinn und kann auch nicht sagen, ob ich es richtig verstanden habe, aber so könnte es gehen. Mit verschieben im klassischen Sinn hat es allerdings nichts zu tun

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>unbenannt</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css" media="all">
body {margin: 0;padding: 0;width: 100%;height: 100%;background: #DFE2E3;}
#wrapper {width: 100%;height:500px;background-color:#999999;}
#left {height: 500px;width: 20%;max-width:200px;padding:5px;display:block;}
#page {position:absolute;right: 0;top:0;width: 80%;min-width:800px;background: #fff;height:500px;float:right;}
</style>
</head>
<body>
<div id="wrapper">
  <div id="left">Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.</div>
  <div id="page">80 days around the world, we'll find a pot of gold just sitting where the rainbow's ending. Time - we'll fight against the time, and we'll fly on the white wings of the wind. 80 days around the world, no we won't say a word before the ship is really back. Round, round, all around the world. Round, all around the world. Round, all around the world. Round, all around the world.

    Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name.

    Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.</div>
</div>
</body>
</html>

Alles anzeigen

Dann würde ich mir an Deiner Stelle mal diese Lösung ansehen; mit horizontalscroll. [ http://www.csszengarden.com/?cssfile=037/037.css ]

Layout-verschiebung bei Verkleinerung der Browserbreite

Tags

Benutzer online in diesem Thema