Bild unter Section

[Lythis]

Hallo liebes Forum,

ich bin noch ein totaler html und css anfänger und sitze gerade an folgendem Problem fest:

ich habe vor meine "Section" wie eine Schriftrolle aussehen zu lassen.
anfangs wollte ich dass sich die breite automatisch an die breite des browsers anpasst.
mit width 80% lies sich das gut machen allerdings gab es nur unschöne verformungen was den Rahmen der Section anging (da es n bild war).

ok also feste größe definiert.

nun sah es schon ganz hübsch aus, leider klappt es nicht so ganz mit dem unterem Ende.
der gesamte text der Section wird unter das Abschlussbild angeheftet und nicht zwischen dem oberen und unterem Bild.

als nächste Frage hätte ich noch, wie ich es mache dass links und rechts die Rahmenbilder sich nach unten wiederholen.

hier mal meine html:
<section>
<div id="txtfeld">
<img class="txto" src="txto.png" border="0">
<img class="txtlinks" src="txtli.png" border="0">
<img class="txtrechts" src="txtre.png" border="0">
<img class="txtu" src="txtu.png" border="0">

<article>
<p><img src="raggi1.png" alt="Bild von Ragnaros" title="Raggi die Wuz!" />
<h2> News </h2>
<p> hier erscheinen die News/Infos</p>
<p>infoinfoinfoinfoinfo</p>
<p>newsnewsnewsnewsnews</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
</p>
</article>
<article>
<h2> Dies ist ein weiterer Infobereich</h2>
<p> hier stehen &auml;ltere news</p>
</article>
</section>

und zur totalen verwirrung die css datei:

section{
float: left;
width: 840px;
}
.txtlinks{
position: static;
float: left;
margin-top: -5px;
}
.txtrechts {
position: static;
float: right;
margin-top: -5px;
margin-right: -10px;
}
.txto{
position: static;
}
.txtu{
float: left;
margin-bottom: 0px;
}
article {
margin-left: 20px;
margin-right: 30px;
padding: 30px;
background-color: #FFCD84;
margin-top: -10px;
margin-bottom: 0px;
min-width: 450px;
}
article h2{
font-style: oblique;
font-size: 20px;
padding-bottom: 5px;
}
article p{
font-family: Times;
font-size: 20px;
text-align: left;
padding-bottom: 3px;
padding-left: 5px;
}
article img{
border: #000000 5px ridge;
float: right;
width: 320px;
height: 240px;
text-align: right;
}

 

[Lythis]

ok hab das Problem mal lokalisieren können, das Bild ist schuld welches ich in der Section rechts neben der Schrift anzeigen lassen möchte.
das rutscht unter das Abschlussbild und verschiebt somit alles.... kann wer helfen?

edit: ok hab das problem gefunden, hab die 2 bilder nun jeweils am anfang und ende der section rangehängt, nun stimmts soweit...
allerdings ist nun die sidebar nach unten unter das abschlussbild des Textfeldes weggerutscht.
Mit float-right scheints nicht zu gehn. könnte es zwar mit margin nach oben verschieben aber diese lösung ist sehr suboptimal.
hier mal der html code:

</body>
<div id="center">
<img id="txto" src="txto.png" alt="" title="" width="810px" />
<section>
<div id="txtfeld">
<img class="txtlinks" src="txtli.png" border="0">
<img class="txtrechts" src="txtre.png" border="0">
</div>
<article>
<p><img src="raggi1.png" alt="Bild von Ragnaros" title="Raggi die Wuz!" />
<h2> News </h2>
<p> hier erscheinen die News/Infos</p>
<p>infoinfoinfoinfoinfo</p>
<p>newsnewsnewsnewsnews</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
</article>
<article>
<h2> Dies ist ein weiterer Infobereich</h2>
<p> hier stehen &auml;ltere news</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
</article>
</section>
<img id="txtu" src="txtu.png" alt="" title="" width="810" />
<aside>
<h2>Dies ist eine Sidebar</h2>
<p>hier kommen links und kurzinfos rein</p>
<p>oder auch nicht, je nachdem was halt<br> so anliegt.</p>
</aside>
</div>


CSS:
.txto{
position: absolute;
float: left;
}
.txtu{
position: absolute;
float: left;
}
section{
float: left;
width: 800px;
margin-bottom: -1px;
}
#center {margin-right: auto;
margin-left:auto;
position:relative;
width:1000px;
text-align:left;}
.txtlinks{
position: static;
float: left;
margin-top: -5px;
}
.txtrechts {
position: static;
float: right;
margin-top: -5px;
margin-right: -10px;
}
article {
text-align: left;
margin-left: 20px;
margin-right: 30px;
padding: 30px;
background-color: #FFCD84;
margin-top: -10px;
margin-bottom: 0px;
min-width: 450px;
}
article h2{
font-style: oblique;
font-size: 20px;
padding-bottom: 5px;
}
article p{
font-family: Times;
font-size: 20px;
text-align: left;
padding-bottom: 3px;
padding-left: 5px;
}
article img{
border: #000000 5px ridge;
float: right;
width: 300px;
height: 240px;
}
aside {
background-color: #93B0FF;
position: absolute;
text-align: center;
border-radius: 5px;
float: right;
border-style: solid;
padding: 10px;
width: 300px;
margin-left:820px;
}


hoffe es kann wer helfen

 

[threadi]

Verwirrend - ja, das ist es. Es wäre prima wenn Du Quellcode hier im Forum mit Code-Tags umgeben könntest. Und für deinen speziellen Fall wäre auch ein Link zur Seite interessant um sich das Aussehen überhaupt vorstellen zu können.