nicht angemeldet
Scrollbar bei float:right und Übergröße
Hallo!
Ich baue gerade eine Seite, die rechtsbündig ausgerichtet ist. Ich habe also ein DIV mit float:right, in dem alles drin steht.
Nun hat dieses DIV eine feste Breite, und wenn der Benutzer sein Browserfenster verkleinert oder eine kleine Auflösung hat, passt es nicht mehr ins Fenster. Der Haken dabei: Firefox blendet dabei keinen horizontalen Scrollbar ein. Der linke Bereich des DIVs verschwindet einfach hinter dem linken Fensterrand und ist unerreichbar. Der IE gibt mir einen Scrollbalken.
Kann man da was machen?
-- snorri
-
Liebe(r) snorri,
Nun hat dieses DIV eine feste Breite, und wenn der Benutzer sein Browserfenster verkleinert oder eine kleine Auflösung hat, passt es nicht mehr ins Fenster. Der Haken dabei: Firefox blendet dabei keinen horizontalen Scrollbar ein. Der linke Bereich des DIVs verschwindet einfach hinter dem linken Fensterrand und ist unerreichbar. Der IE gibt mir einen Scrollbalken.
overflow: scroll;erzwingt in jedem Fall einen Scrollbalken. Probiere aber im Firefox zuerstoverflow: auto;!Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hallo Felix,
Äh nee, das war nicht das, was ich meinte. Nicht das DIV soll einen Scrollbar bekommen, sondern die Seite selbst!
Wenn mein Browserfenster 1024 Pixel breit ist und ein 2000 Pixel breites DIV anzeigen soll, blendet es einen horizontalen Scrollbar ein. Wenn dieses DIV aber mit float:right formatiert ist, dann nicht mehr.
Und wenn ich den body selbst mit overflow:scroll ausstatte, blendet er zwar einen Scrollbar ein, aber der scrollt nicht. Probiers mal aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head><body style="overflow:scroll;">
<div style="width:15000px; background-color:#FF0000; float:right;">bla</div>
</body>
</html>-- snorri
-
-
Hallo snorri,
Kann man da was machen?
Ja, schaun mer mal ;-)
(Weil die Möglichkeit besteht, dass nach einer Lösung dieser Aufgabe im Archiv gesucht wird, bin ich mal wieder sehr ausführlich - der entscheidende Hinweis steht im vorletzten Absatz ;-))
Du möchtest ein Blockelement, das eine feste Grösse hat, am rechten Rand des Viewport positionieren. Falls der Viewport nun kleiner als das Element ist, willst Du sicherstellen, dass (mittels Scrollbars) der Inhalt erreichbar bleibt.
Wenn Du das Element nun mit "float:right;" aus dem Textfluss nimmst, wirkt sich (sicher im Firefox, wahrscheinlich auch in anderen Geckos) seine Grösse nicht auf das Elternelement aus - Deine Vorgabe, dass der Inhalt erreichbar bleiben muss, ist somit nicht erfüllt.
Also braucht es eine Lösung, in der das Element im Textfluss bleibt.
Frage: Durch welche Eigenschaften zeichnet sich ein Element aus, das am rechten Rand des Viewport dargestellt wird?
Antwort: Durch einen festen Aussenabstand nach recht und einen flexiblen nach links.Nun muss nur noch dem Browser eben dieses mitgeteilt werden ;-)
Langer Rede, kurzer Sinn:
"margin-right:x;margin-left:auto;" (wobei x=gewünschter Abstand zum rechten Viewportrand) sieht erfolgversprechend aus.Das Austesten in den diversen Browsern überlasse ich großzügig Dir ;-)
Bitte poste die Ergebnisse in diesem Thread, damit andere Suchende die Informationen im Archiv finden können.HTH
gruesse
rainer groth--
(--> einer der letzten bauhaeusler <--)
wer die FAQ nicht beachtet, bekommt von mir keine antwort - basta !
Self-Code: ie:{ fl:( br:> va:) ls:& fo:| rl:° n4:& ss:( de:] js:| ch:? mo:? zu:}
Self-Code-URL: http://emmanuel.dammerer.at/selfcode.html-
Hallo Rainer,
danke für Deine ausführliche Antwort. Leider funktioniert das ebenfalls nur im IE, der Firefox blendet keinen Scrollbar ein.
-- snorri
-
Hallo snorri,
..., der Firefox blendet keinen Scrollbar ein.
Verwunderlich, denn folgendes Beispiel liefert in meinem Firefox 1.0.7 den von Dir gewünschten Effekt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
<!--
#inhalt{width:1500px;border:solid 1px #F00;margin-right:0;margin-left:auto;}
//-->
</style>
</head>
<body>
<div id="inhalt">test</div>
</body>
</html>gruesse
rainer groth--
(--> einer der letzten bauhaeusler <--)
wer die FAQ nicht beachtet, bekommt von mir keine antwort - basta !
Self-Code: ie:{ fl:( br:> va:) ls:& fo:| rl:° n4:& ss:( de:] js:| ch:? mo:? zu:}
Self-Code-URL: http://emmanuel.dammerer.at/selfcode.html-
Hallo Rainer,
verdammt, Du hast recht! Jetzt habe ich dummerweise meinen Test von vorhin bereits weggeworfen und weiss nicht mehr, was ich vorhin falsch gemacht haben könnte. Vielleicht habe ich das float:right drin gelassen oder sowas ... wie dem auch sei, es funktioniert! Tausend Dank!
-- snorri
-
-
-
-
Tach,
Nun hat dieses DIV eine feste Breite, und wenn der Benutzer sein Browserfenster verkleinert oder eine kleine Auflösung hat, passt es nicht mehr ins Fenster. Der Haken dabei: Firefox blendet dabei keinen horizontalen Scrollbar ein. Der linke Bereich des DIVs verschwindet einfach hinter dem linken Fensterrand und ist unerreichbar.
mit float nimmst du das Element aus dem normalen Fluß, der Body ist also genauso breit wie das Browser-Fenster, da er keine weiteren Kindelemente hat.
Kann man da was machen?
Du könntest dem dem Body eine passende Größe verpassen.
mfg
Woodfighter-
Hallo Woodfighter,
das ist eine interessante Idee. Für die kleinen Monitore funktionier es auch, aber leider nun nicht für die großen:
Als ich dem Firefox einen body mit width=1000px gegeben habe, sagte er: OK, dann ist der body aber IMMER nur tausend Pixel breit -- auch wenn du einen viel breiteren Monitor hast. D.h. align=right schiebt das DIV nicht mehr nach ganz rechts, sondern nur mit dem rechten Rand an die 1000 Pixel.
-- snorri
-
Tach,
Als ich dem Firefox einen body mit width=1000px gegeben habe, sagte er: OK, dann ist der body aber IMMER nur tausend Pixel breit -- auch wenn du einen viel breiteren Monitor hast. D.h. align=right schiebt das DIV nicht mehr nach ganz rechts, sondern nur mit dem rechten Rand an die 1000 Pixel.
äh ja logisch, jetzt, wo du es sagst. Bevor wir da jetzt weiter rumdoktorn, verfolge lieber Rainers Idee, die ist sowieso sinnvoller; noch sinnvoller wäre wahrscheinlich eine nicht feste Breite für das div.
mfg
Woodfighter
-
-