Design CSS: Mitte scrollbar machen

Grüsse Euch.

Mein eÜberlegung steht wie folgt.
Wenn man auf unsere Gilden Homepage geht und dort in irgendeiner weise nach unten scrollt geht die ganze Seite mit. Nun steht bei mir die Überlegung das nur der mittlere Bereich wandert. So das quasi der Header und auch das Hintergrundbild stehen bleibt. So wäre es möglich der Seite einen anderen Hintergrund zu geben, der dann zudem auch noch stehen bleibt wärend man den mittleren contend scrollen kann.

www.klingenahoi.de.tl ist die seite

und hier unser Code:

body {
margin: 20px 0;
background: #405152 url(http://img.webme.com/pic/g/gildekreativ/content_bg_rpt.jpg);
text-align: justify;
font: normal small Georgia, "Times New Roman", Times, serif;
color: #A1A9AA;
}

h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
color: #ABECF5;
}

h3 {
font-size: 1.3em;
padding-top: .4em;
}

ul {
margin-left: 0;
padding-left: 0;
list-style-position: inside;
}

a {
color: #ABECF5;
}

a:hover {
text-decoration: none;
color: #FFFFFF;
}

/* Menu */

#menu {
width: 610px;
height: 40px;
margin: 0 auto;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu li {
display: inline;
}
#nav_container {
width: 702px;
margin: auto;
}
li.nav_element{
display: block;
float: left;
width: 115px;
height: 20px;
padding: 10px 1px 0 1px;
background: url(http://img.webme.com/pic/k/klingenahoi/puffpuff.gif) no-repeat center top;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 0.7em;
font-weight: bold;}

li.nav_element:hover{
background-image: url(http://img.webme.com/pic/k/klingenahoi/botton1.gif);
color: #FFFFFF;
}


/* Header */

/* Header */

#header {
width: 1115px;
height: 162px;
margin: 0 auto;
background: url(http://img.webme.com/pic/k/klingenahoi/navigation_bg.png) repeat-x;
}

#header * {
text-transform: uppercase;
text-decoration: none;
}

#header h1 {
float: left;
font-size: 2em;
}

#header h2 {
float: right;
padding-top: .25em;
font-size: 1.6em;
}

/* Content */

#content {
width: 664px;
margin: 0 auto;
padding: 20px;
background: #405152 url(http://img.webme.com/pic/g/gildekreativ/content_bg_rpt.jpg);
border: 5px solid #2D3939;
border-top: none;
}

#colOne {
float: left;
width: 450px;
}

#colTwo {
float: right;
width: 180px;
}

/* Footer */

#footer {
text-align: center;
font-size: smaller;
}

Zugegeben er ist recht einfach gestrickt.
Sollte es eine Möglichkeit geben würden wir uns freuen wenn uns einer helfen kann. Ggf wäre es auch nett wenn einer unseren Code diesbezüglich umstricken könnte, ohne das das eigendliche Design leiden müsste ^^

Gruss euer Klingensturm

Hey,

Eigentlich ist das ganz einfach. Ihr gebt eurem Content eine feste Höhe (z.B. height: 400px; ) und fügt ihm noch den Wert overflow: auto zu, der falls der Inhalt die Größe der Klasse überschreitet scrollbar macht.
Ich würde dir aber deine bisherige Art empfehlen, da diese Variante allgemein nicht so schön ist und auf die Dauer auch nervig ist. Nichts desto trotz der komplette Code:

Den neuen Code habe ich fett markiert, den anpassbaren Wert rot hervorgehoben.

mfg
______________
THE JOY OF NOT BEING SOLD ANYTHING

joa ich danke dir. ich werds mal austesten und dann sehen was passiert. ^^

soweit getestet^^

nun steht der mittlere bereich rechts neben der navigation. (zumindest wenn ichs drinne lassen würde jetzt) vielleicht noch eine idee wie ich die beiden wieder zusammen setzen könnte? weil im prinzip wars richtig. nur soll ja auch das coolmenü bleiben.

ich überfliege grade auch den code und versuchs irgendwie zu lösen. (auf meiner testseite ^^ )

ich möcht ab nächsten monat ja auch die werbung ausblenden lassen. da mich der fette banner zugegebener massen en bissle nervt^^
aber dazu komm ich dann nächsten monat *kichert*