Rahmen mit runden Ecken

discuss about sites that are just under construction or where experimental stuff is used
Post Reply
nehemia
Posts: 118
Joined: Mon 11. Sep 2006, 21:19
Location: Fürth
Contact:

Rahmen mit runden Ecken

Post by nehemia »

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
selbaer
Posts: 93
Joined: Sun 22. Jan 2006, 02:19
Location: Florida West Coast

Post by selbaer »

nehemia
Posts: 118
Joined: Mon 11. Sep 2006, 21:19
Location: Fürth
Contact:

Post by nehemia »

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! :D
Viel Spass beim Ausprobieren. :!:

Gruß.,
Martin Gohla
rizn
Posts: 74
Joined: Thu 25. May 2006, 15:12
Location: Leipzig
Contact:

RUNDE ECKEN

Post by rizn »

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
rizn
Posts: 74
Joined: Thu 25. May 2006, 15:12
Location: Leipzig
Contact:

allerdings mit grafiken

Post by rizn »

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

:oops:
User avatar
Klappstuhl28
Posts: 833
Joined: Fri 4. Mar 2005, 01:58
Location: Hamburg
Contact:

Post by Klappstuhl28 »

Hi, sehr einfach ist diese Lösung:

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

Arbeitet allerdings auch mit Grafiken.

Lars
Lars

Don't say you don't have enough time. You have exactly the same number of hours per day that were given to Helen Keller, Pasteur, Michaelangelo, Mother Teresa, Leonardo da Vinci, Thomas Jefferson, and Albert Einstein. - H. Jackson Brown -
phalancs
Posts: 793
Joined: Thu 19. Feb 2004, 05:09
Location: Germany

Post by phalancs »

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 ;)
2008
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Post by update »

wrong post :oops:
Post Reply