CSS Wahnsinn 3 Grafiken in einem div?

[darkangelbhv]

Ein hallo euch allen und zwar habe ich ein Problemchen und zwar müsste ich in einem Div 3 Grafiken anzeigen lassen. Bisher habe ich es mit 2 Grafiken geschafft, aber da es mehrere inhalte für das div gibt, gibt es auch überall unterschiedliche höhen. Und wie könnte man das am besten realiesieren? richtig mit einer wiederholenden mitte, das Problem was dabei entsteht ist das die mitlere grafik dann die oberste überlappt und nicht mehr passt, zudem muss noch eine dritte "abschluss Grafik" hinzukommen.

derzeit habe ich es so geregelt:

div.moduletable {
width: 220px;
	background: url(../images/psnewz_breit_02.gif);
	background-repeat: repeat-y;
	background-position: 0 100%;
	padding-bottom: 20px;
	margin-top: 0px;
	padding-top: 0px; 
}
div.moduletable h3 {
	padding-top: 12px;
	color: orange;
	width: 220px;
	height: 32px;
	margin-bottom: 0px;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	padding-left: 30px;
	background-image: url(../images/psnewz_breit_01.gif);
	background-repeat: no-repeat;

Herrauskommen soll folgendes:

Überschrift Grafik
eine wiederholende mittlere Grafik

und eine abschluss Grafik

dabei darf die mittlere natürlich nicht die obere und untere Grafik überlappen.


MFG

 

[miss.moxy]

Also ohne ein weiteres Tag wirst du das nach meinem bisherigen Wissensstand nicht schaffen…
Also zB um den Inhalt auch noch einen Tag legen, den du ansprechen kannst…

Quick & Dirty-Gedanke:

<style>
.moduletable {
background: url(bild_unten.jpg) bottom no-repeat;
padding-bottom: 15px; /* height bild_unten */
width: 200px;
}
.moduletable h3 {
background: url(bild_oben.jpg) top no-repeat;
height: 30px; /* evtl. height bild_oben */
margin: 0;
}
.moduletable p {
background: url(bild_mitte.jpg);
margin: 0;
}
</style>


<div class="moduletable">
<h3>blablabla</h3>
<p>Dies ist ein Typoblindtext. An ihm kann man sehen, 
ob alle Buchstaben da sind und wie sie aussehen. 
Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks 
oder Handgloves, um Schriften zu testen.</p>
</div>

So oder so ähnlich könnte es funktionieren – vielleicht ein Denkanfang…
(ich habs nichmal getestet )





P.S.: du kannst in der Kurzformschreibweise die Formatierungen für den Hintergrund zB zusammenfassen klick… geht auch für border, margin, padding usw.

 

[Birke]

Leg halt in Deinen Haupt-DIV drei einzelne DIVs. Dann dürfte sich da nix mehr überlappen.

 

[nuz:y]

Ich versteh nicht ganz dein Problem, wie wäre es mit:

<div class="moduletable">
<img src="bild01" />
<img src="bild02" />
<img src="bild03" />
</div>

bzw. was möchtest du denn in dem DIV eigentlich darstellen?

 

[dms]

Also ohne ein weiteres Tag wirst du das nach meinem bisherigen Wissensstand nicht schaffen…

Stimmt. Theoretisch wäre es mit den CSS-Pseudoklassen :before und :after möglich, aber da macht der IE die Augen zu.

div.moduletable:before {
   content:url(oben.png);
   display:block;
}

div.moduletable:after {
   content:url(unten.png);
   display:block;
}

div.moduletable {
   background:url(mitte.png) repeat-y;
}

Nifty Corners Cube sei da noch erwähnt.