[gelöst] Fixes Layout mit scrollbarem Inhalt

[nockenfell]

Ich habe folgende Anforderungen:

Ein fixes Layout in der Breite und Höhe. Der Inhalt kann jedoch grösser werden und sollte somit gescrollt werden können.

Ein Beispiel um dies zu erledigen wäre z.B. ein iframe. Dieses will ich jedoch nicht gebrauchen und frage mich auch, ob das überhaupt gehen würde mit CMSms. Nun frage ich mich, ob es auch eine Möglichkeit mit Stylesheets gibt, einen Container zu erstellen, der Scrollbar ist. Ich meine sowas schon mal gesehen zu haben, vermag mich aber nicht zu erinnern wie genau.

Hat einer von euch schon mal sowas gemacht oder eine Idee nach was ich suchen müsste?

[Pulli]

Ich habe folgende Anforderungen:

Ein fixes Layout in der Breite und Höhe. Der Inhalt kann jedoch grösser werden und sollte somit gescrollt werden können.

Ein Beispiel um dies zu erledigen wäre z.B. ein iframe. Dieses will ich jedoch nicht gebrauchen und frage mich auch, ob das überhaupt gehen würde mit CMSms. Nun frage ich mich, ob es auch eine Möglichkeit mit Stylesheets gibt, einen Container zu erstellen, der Scrollbar ist. Ich meine sowas schon mal gesehen zu haben, vermag mich aber nicht zu erinnern wie genau.

Hat einer von euch schon mal sowas gemacht oder eine Idee nach was ich suchen müsste?

ja habe demnächst auch eine seite fertig, wo das realisiert ist. will ich jetzt aber noch nicht zeigen, daher...frag mal nicmare...der weiß das !! 

[Jos]

Wenn ich es richtig verstehe, kannst du einfach die container-div ein style mitgeben wie

Code: Select all

overflow:auto;

[nockenfell]

Wenn ich es richtig verstehe, kannst du einfach die container-div ein style mitgeben wie

Code: Select all

overflow:auto;

Das dürfte es sein. Ev kann nicmare oder ein anderer noch einen Kommentar dazu abgeben. Ich werde mich damit versuchen.

[nicmare]

hehe. ja. die richtung stimmt. dem div also feste dimensionen zuweisen und dann overflow-y:auto;
so kommen die scrollbars nur wenn wirklich der inhalt länger wird. und auch nur auf der y-achse

[nockenfell]

Hat vorzüglich geklappt. Einzig mit dem IE 6 habe ich noch Darstellungsprobleme. (von IE <6 wollen wir mal nicht reden)

Ev hat einer eine Idee:
http://home.blattertech.ch/kleinabend/index.html
http://home.blattertech.ch/kleinabend/index2.html

Das Floaten klappt hier dem anschein nach nicht so wie es soll.

[antibart]

iedoublefoatmargin-bug (oder so ähnlich)

der ie 6 braucht in den gefloateten Boxen noch ein display:inline; , weil er sonst den doppelten Wert für die Dimension berechnet (also 5px = 10px) .. und dann passts natürlich nicht mehr.

[nicmare]

das:

Code: Select all

div#menu {
	width : 205px;
	float : left;
}
div#rahmen {
	margin-left : 205px;
	padding : 10px;
	height : 498px;
	background : #cccccc;
}

ist sowieso blöd. weil dann kriegst du probleme wenn du in rahmen selbst elemente floatest!
mach es lieber so:

Code: Select all

div#menu {
	width : 205px;
	float : left;
}
div#rahmen {
	width : 730px;
	float : left;
	padding : 10px;
	height : 498px;
	background : #cccccc;
}

und
overflow-y : auto;
sonst kann es passieren dass du auch horizontale scrollbalken kriegst

[nockenfell]

Danke für die Antworten. Ich komme erst morgen wieder daran am Layout zu arbeiten. Ich werde mir dann die einzelnen Tipps anschauen.

[mike-r]

und
overflow-y : auto;
sonst kann es passieren dass du auch horizontale scrollbalken kriegst

das ist imho nicht zu empfehlen, sollten horizontale Scrollbalken entstehen, so hat man im Content etwas "falsch" gemacht. Hinzu käme dann, dass bei überbreitem Inhalt der Text im Unsichtbaren verschwindet. In so einem Fall wäre ein Scrollbalken ganz nützlich.

Hier mal, wie sowas aussehen kann:
http://www.soar-music.de (bisschen aufgehybscht mit JS-Scrollbalken...)

[antibart]

Den Zusatz -y hab ich auch noch nie benutzen müssen. Meistens soll der Content ja eh nicht bis an den Rand des Scrollbars gelangen, weil das nicht gut aussieht.

Es bietet sich also an, den Content besser in ein weiters div innerhalb des scrollbereichs zu platzieren. Padding-right ginge evtl. auch noch. Wenn die Dimensionen fix sind und stimmen, dürfte es eigentlich keinen horizontalen Srollbar geben.

[nicmare]

Hier mal, wie sowas aussehen kann:
http://www.soar-music.de (bisschen aufgehybscht mit JS-Scrollbalken...)

yea. jquery rockt !

[nockenfell]

Hier mal, wie sowas aussehen kann:
http://www.soar-music.de (bisschen aufgehybscht mit JS-Scrollbalken...)

yea. jquery rockt !

Allerdings nicht mit Safari 4. Hier wird weder der Scrollbalken angezeigt, noch lässt sich der Inhalt scrollen.

[nicmare]

das liegt an mike-r! das script funzt sonst auch in safari4

[nockenfell]

ist sowieso blöd. weil dann kriegst du probleme wenn du in rahmen selbst elemente floatest!
mach es lieber so:

Code: Select all

div#menu {
	width : 205px;
	float : left;
}
div#rahmen {
	width : 730px;
	float : left;
	padding : 10px;
	height : 498px;
	background : #cccccc;
}

und
overflow-y : auto;
sonst kann es passieren dass du auch horizontale scrollbalken kriegst

Wenn ich dem Rahmen float:left zuordne, verschiesst es diesen komplett. Das Menü und der Rahmen sind auf der gleichen Ebene parallel neben einander.

Code: Select all

<div <div id="main">
<div id="menu">
Inhalt Menü
</div>
<div id="rahmen">
<div id="content">Inhalt</div>
</div>

das Content-Div ist der Inhalt des Rahmens.

overflow-y will ich nicht unbedingt einsetzen, da ich lieber einen horizontalen Scrollbalken in kauf nehme als das ein Teil des Contents abgeschnitten wird.