völlig variabler Rahmen mit Bildelementen

[Gast]

Hallo ihr,
ich möchte gerne einen Rahmen aus acht Elementen bauen (vier Ecken und vier Seitenteile). Eine Grundidee habe ich schon, nur leider haperts jetzt bei den Seitenteilen.

Hier die Idee und ein Stück Quellcode: html-Datei

<div id="con">

<div class="mo">
    <div class="mu">
        <div class="mr">
            <div class="ml">
                <div class="ro">
                    <div class="lo">
                        <div class="ru">
			    <div class="lu">
				<div class="inhalt">
				    Eine Box mit variablem Rahmen und viel Text...
				</div>
			    </div>
			</div>
	            </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

Ist zwar nicht sonderlich schön, aber es funktioniert

Die css-Datei für die Rahmen befindet sich hier: css-Datei

Nach meiner Überlegung müsste es mit einer for-Schleife realisierbar sein. Jedoch weiß ich nicht, wie ich es umsetzten soll... Habt ihr einen guten Einfall bzw. ein kleines Beispiel dafür?

[Ingo]

AW: völlig variabler Rahmen mit Bildelementen

Hi,

Nach meiner Überlegung müsste es mit einer for-Schleife realisierbar sein.

wie kommst Du nur auf so eine merkwürdige Idee?
Du musst nur das CSS entsprechend ändern:

.mo {
        background:url("mittel_oben.gif") top center repeat-x;
}
.mu {
        background:url("mittel_unten.gif") bottom center repeat-x;
}
.mr {
        background:url("mittel_rechts.gif") center left repeat-y;
}
.ml {
        background:url("mittel_links.gif") center right repeat-y;
}

Gruß
Ingo

[Zembris]

AW: völlig variabler Rahmen mit Bildelementen

Ähm… glaube, dass ich so etwas ähnliches bei Java oder C++ mal gemacht habe.
Aber Danke, muss ich nachher mal umsetzten!

[mi-schi]

AW: völlig variabler Rahmen mit Bildelementen

Echt witzig, aber genau das gleiche Problem hat mich mind. einen Monat beschäftigt.
Alle Lösungen, die irgendwo geschrieben wurden, funktionieren nämlich nicht.
Die von Selfhtml ist Mist, da man eine riesige Grafik für den Hintergrund + Ecke braucht.
Die Lösung, dass man die Ecken mit "top left" positioniert ist auch Mist, da der Internet-Explorer (6), eben das Problemkind, immer ein oder zwei Pixel meist unterhalb der Grafik einen Strich mit dranpappt.
Die Lösung, die bei wirklich allen Browsern funktioniert ist die:

#top {margin-bottom:1em; line-height:1em; font-size:1em; color:#000000; background:#ccdceb url(images/top.gif) top right no-repeat;}
#bottom {display:block; padding:1em; background:url(images/bottom.gif) bottom left no-repeat;}

<div id="top"><div id="bottom">
wichtig, und der Trick ist eben, das die Ecken "innen" transparent sind und "außen" die Hintergrundfarbe haben:
http://cms.mi-schi.com/cms/images/top.gif
</div></div>

Wer noch mehr wissen möchte, oder eine andere Lösung hat, ich kann natürlich auch noch ausführlicher beschreiben. Ich denke mal, ich habe alle Varianten ausprobiert.

[LFS-Nr-3305]

AW: völlig variabler Rahmen mit Bildelementen

google mal nach "css + sliding doors"