phpwcms Support Forum

Ich versuche verzweifelt auf meiner Seite runde Ecken mit einem Rand ringsrum hinzubekommen (zunächst erstmal im Kopfbereich, damit ich lerne...), was mir aber irgendwie nicht gelingen will.

Ich benutze dazu den Code aus dem Vorschlag von webbe.de
und versuche ihn entsprechend anzupassen. Leider hab ichs trotz stundenlangem

Rumbasteln bisher nicht hingekriegt.

Ich habe den Code:

Code: Select all

<div class="box">
      <b class="top">
        <b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>
      </b>
      <h1>Runde Ecken</h1>
      <p>Runde Ecken ohne Bilder.</p>
      <b class="bottom">
        <b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b>
      </b>
    </div>

in den Kopfbereich von meiner Vorlage geschrieben. Das dazugehörige CSS-Script:

Code: Select all

.box { width: 15em; background: #9BD1FA;}
    .box h1, .box p {margin: 0 10px;}
    .box h1 {font-size:150%; color:#ffffff; }
    .box .top, .box .bottom{display:block;background: #dddddd;}
    .box .top b, .box .bottom b{display:block;height: 1px; overflow: hidden; background: #9BD1FA;}
    .box .r1{margin: 0 5px;}
    .box .r2{margin: 0 3px;}
    .box .r3{margin: 0 2px;}
    .box .top .r4, .box .bottom .r4{margin: 0 1px;height: 2px;}

habe ich in die frontend.css unten angefügt.

Kann mir vielleicht irgendjemand beim Anpassen helfen, dass ich das Ding endlich zum Laufen bring?! Vielen Dank im voraus.

Gruß,
Martin Gohla

benutze doch die such funktion

http://www.phpwcms.de/forum/viewtopic.p ... 59&start=0

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

Klau dir die runden Ecken doch von meiner Seite...
http://www.beatwars.de

gleich auf der ersten Seite

zur Erläuterung:
du benötigst eine Tabelle mit 3 Spalten/3 Zeilen

wenn wir von folgendem Zellenschema ausgehen
123
456
789
musst du sie wie folgt füllen:
1---Grafik Ecke oben links
2---nur Hintergrundfarbe auf zb weiss setzen und einen SPACER benutzen, sonst baut der Browser eine falsche Zellhöhe, weil NIX drin ist
3---Grafik Ecke oben links
4---siehe 2 (Spacer sollte hier nicht notwendig sein)
5---DEIN EIGENTLICHER INHALT
6---siehe 4
7---Grafik Ecke unten links
8---siehe 2
9---Grafik Ecke unten rechts

allerdings benötigst du grafiken, habe erst jetzt gelesen, dass du ohne grafiken arbeiten willst

Hi, sehr einfach ist diese Lösung:

http://www.neuroticweb.com/recursos/css ... ?idioma=en

Arbeitet allerdings auch mit Grafiken.

Lars

wieso sollte man soetwas ohne grafiken lösen wollen??? Das erscheint mir völlig sinnlos und unnötig kompliziert - immer diese css fetischisten :S:S

wrong post

phpwcms Support Forum

Rahmen mit runden Ecken

Rahmen mit runden Ecken

RUNDE ECKEN

allerdings mit grafiken