nicht angemeldet
Hallo Community,
ich erstelle gerade unter
casa.taijiworld.eu
ein Mittelalter-Template. Leider, ganz egal wie ich es anstelle, schaffe ich es nicht, dass das die Pergamentrolle sich automatisch in der Länge dem Inhalt anpasst.
Die Rolle ist mit drei JPEGs realisiert. Wobei Oben und Unten fix sind und das Mittelteil sich mit repeat-y in der Vertikalen wiederholen soll.
Das Duplizieren an sich ist klar. Dennoch: Momentan ist es immer so, dass der Content aus seiner Box herausragt in den unteren Teil der Rolle hinein, bzw. darüber hinaus.
Das ist aber nicht das Verhalten, das ich erreichen will.
Hat jemand eine Idee?
Über Vorschläge bin ich mehr als Dankbar, ich arbeite seit einer Woche Fieberhaft an einer Lösung....
Der Code: <body id="body">
<div id="wrapper">
<div id="logo"><img src="http://casa.taijiworld.de/templates/medieval/images/logo3.jpg" width="745" height="137" alt="logo" />
</div>
<div id="ritter"><pre>adsf
adf
adf
adf
afda
fda
fda
dfa
dsf</pre></div>
<div id="o-rolle"></div>
<div id="inhalt">
<div id="content"><?php mosMainBody(); ?></div>
<div id="menu"><?php mosLoadModules ( 'left' ); ?></div>
</div>
<div id="u-rolle"></div>
</div>
</body><body id="body">
<div id="wrapper">
<div id="logo"><img src="http://casa.taijiworld.de/templates/medieval/images/logo3.jpg" width="745" height="137" alt="logo" />
</div>
<div id="ritter">
<pre>adsf
adf
adf
adf
afda
fda
fda
dfa
dsf</pre></div>
<div id="o-rolle"></div>
<div id="inhalt">
<div id="content"><?php mosMainBody(); ?></div>
<div id="menu"><?php mosLoadModules ( 'left' ); ?></div>
</div>
CSS TEIL
.menu {
bottom: auto;
width: 150px;
float: left;
top: 70px;
left: 40px;
margin left: 40px;
position: absolute;
}
#body {
min-width: 950px;
text-align:center;
background-color: #000000;
}
#wrapper {
margin: 0 auto;
width: 950px;
text-align: left;
position: relative;
}
#logo {
background-color:#000000;
width: 950px;
}
#ritter {
background-image: url(../images/ritter.gif);
width: 250px;
height: 468px;
background-color: #CCCCCC;
background-repeat: no-repeat;
right: 0px;
position: absolute;
top: 137px;
}
#o-rolle {
position: relative;
left: 0px;
margin: 0;
top: 0px;
background-image: url(../images/o-rolle.jpg);
width: 698px;
height: 85px;
background-repeat: no-repeat;
}
#u-rolle {
position: relative;
background-image: url(../images/u-rolle.jpg);
background-repeat: no-repeat;
height: 87px;
width: 700px;
left: 0px;
margin: 0;
}
#inhalt {
position: relative;
background-image: url(../images/m-rolle.jpg);
background-repeat: repeat-y;
width: 700px;
left: 0px;
max-height: 1000px;
padding-bottom: 0px;
}
#content{
position: absolute;
float: left;
left: 200px;
}
<div id="u-rolle"></div>
</div>
</body>