Ecken abrunden

[Tobi44]

Hallo,

gibt es ein Script, welches die Ecken abrunden kann? Weiss jetzt nicht ob es günstiger mit JS oder CSS wäre.

Jemand ne Idee? Handelt sich um diese Seite. Die weißen Ecken sollen halt abgerundet werden.

 

[threadi]

Runde Ecken solltest Du der Kompatiblität wegen mit abgerundeten Grafiken machen. Für moderne Browser wie Firefox kann man auch einige CSS-Eigenschaften verwenden. Das hat aber alles überhaupt nichts mit JavaScript oder "Scripten" zu tun.

 

[iplay]

Hi.

Es gibt auch ne möglichkeit es mit css und html zu machen, ohne grafiken zu benutzen.

Html:

<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>

css:

.box { width: 100%; background: #9BD1FA;}
.box h1, .box p {margin: 0 10px;}
.box h1 {font-size:150%; color:#ffffff; }
.box .top, .box .bottom{display:block;background: #ffffff;}
.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;}

probiers mal aus...

getestet in ie und ff.

Liebe Grüße

iplay

 

[Asterixus]

Hi.

Es gibt auch ne möglichkeit es mit css und html zu machen, ohne grafiken zu benutzen.

Html:

<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>

css:

.box { width: 100%; background: #9BD1FA;}
.box h1, .box p {margin: 0 10px;}
.box h1 {font-size:150%; color:#ffffff; }
.box .top, .box .bottom{display:block;background: #ffffff;}
.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;}

probiers mal aus...

getestet in ie und ff.

Liebe Grüße

iplay

Funktioniert, ist aber eher von abzuraten.


Du kannst statt jeglichem anderen Element (div) für das Layout auch <fieldset> benutzen (ist zwar nicht dafür da, aber was soll's). Fieldset ist im IE7 (und 6, bin mir aber nicht sicher) mit runden Ecken.
Im CSS:

fieldset {
  -moz-border-radius: 11px;
  -khtml-border-radius: 11px;
  -webkit-border-radius: 11px;
}

das macht die Ecken in vielen Browsern rund.

 

[crash]

Ich find' das mit <b> hässlich. Lieber ein bisschen-DIV-Salat veranstalten, dass ist war nicht so übersichtlich, aber wenigstens nicht so hacked.

 

[iplay]

Es ist ja auch nur ne Möglichkeit es ohne Grafiken zu machen.
Ich hab ja nicht gesagt, dass es perfekt ist.

Liebe Grüße

iplay

 

[Tobi44]

fieldset {
  -moz-border-radius: 11px;
  -khtml-border-radius: 11px;
  -webkit-border-radius: 11px;
}

das macht die Ecken in vielen Browsern rund.

Aber ich kann ja nicht nur das einbauen. Davon werden ja keine Ecken rund. Was muss ich denn da noch anpassen/verändern?

 

[fiedel]

Aber ich kann ja nicht nur das einbauen. Davon werden ja keine Ecken rund. Was muss ich denn da noch anpassen/verändern?

Was wird denn dann rund, wenn nicht die Ecken??
Du musst natürlich anstatt "fieldset" "table" schreiben bzw. mit dem Attribut class noch genauer zuordnen.