Vielen Dank für den Hinweis. Das hatte ich auch schon gesehen. Der Nachteil bei der Lösung auf die Du hinweist ist jedoch, dass man dazu Grafiken benötigt. Das wollte ich aber - wenn möglich - von vorne herein vermeiden. Ich bin mittlerweile einen wesentlichen Schritt weiter und denke die Lösung gefunden zu haben:
Rahmen mit runden Ecken und mit einem (z.B. schwarzen) Rand ohne Verwendung von Grafiken:
Ausgangspunkt ist die Seite von
NetFusion-Support. Hier habe ich mir das
Beispiel 4-5 näher angesehen.
Jetzt habe ich einfach den bei diesem Beispiel stehenden "div-Code"
in die betreffende Dateivorlage (z.B. in den Kopfbereich) kopiert, wobei ich den Code der besseren Übersicht wegen etwas abgeändert habe:
Code: Select all
<!-- Runde Ecken -->
<!-- -->
<!-- Einträge, die vor dem folgenden 'div class' gesetzt werden, erscheinen in der Textbox, jedoch über dem abgerundeten Rahmen -->
<div class="raised">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<!-- Einträge, die nach dem obigen 'div class' gesetzt werden, erscheinen in der Textbox und auch im abgerundeten Rahmen -->
<h1>Beispiel</h1>
<h2>Beispiel</h2>
<p>Dies ist normaler Text</p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
<!--
<!-- In die Textbox vor dem Tag: -->
<div class="inset">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<!-- In die Textbox nach dem Tag: -->
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
-->
Wie man beim Vergleich mit dem "div-Code" auf der oben genannten Webseite sieht, habe ich den unteren Teil des Codes fast unverändert gelassen, aber ausgeschaltet (ist nicht weiter wichtig!).
Als nächstes habe ich den CSS-Code eines der beiden Beispiele (welches ist eigentlich egal) von der Webseite in meiner Standard CSS-Datei frontend.css eingefügt und auch entsprechend abgeändert:
Code: Select all
/* Inset Randfarbe Curved */
.raised {background: transparent; width:750px;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:17pt; color:#fff;}
.raised p {padding-bottom:0.5em;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
/* Untenstehend wird die die Farbe */
/* des unteren Rahmenrandes eingestellt */
.raised .b2 {background:#000; border-left:1px solid #000; border-right:1px solid #000;}
.raised .b3 {border-left:1px solid #000; border-right:1px solid #000;}
.raised .b4 {border-left:1px solid #000; border-right:1px solid #000;}
.raised .b4b {border-left:1px solid #000; border-right:1px solid #000;}
.raised .b3b {border-left:1px solid #000; border-right:1px solid #000;}
.raised .b2b {border-left:1px solid #000; border-right:1px solid #000;}
.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#000;}
/* Untenstehend wird die Hintergrundfarbe */
/* des Rahmenblocks und die Farbe des */
/* unteren Rahmenrandes eingestellt */
.raised .b3, .raised .b4, .raised .b4b, .raised .b3b, .raised .b2b {background:#ccDDcc;}
.raised .boxcontent {display:block; background:#ccDDcc; border-left:1px solid #000; border-right:1px solid #000;}
Und das war's auch schon. Und es funktioniert tatsächlich!
Viel Spass beim Ausprobieren.
Gruß.,
Martin Gohla
