action: 'Boxen' mit runden Ecken. Wie am besten erstellen?

Hallo schon wieder :)

Ich möchte gerade etwas eigentlich sehr simples erstellen: 2 nebeneinanderstehende Boxen mit Inhalt. Die Boxen sollen abgerundete Ecken haben. So soll's aussehen:

http://www.djdwarf.de/raver/boxes.gif

Nun 2 Fragen:

1. Wie lege ich die Boxen am besten an? Div ist ungünstig, da dieser ja Umbruch erzeugt und ich ungern mit absoluten Positionen arbeiten möchte, bzw. das in diesem Fall ausgeschlossen ist. Bei Span bekomme ich Problem beim Umbruch des Textes in der linken Box mit <br />. Wie geht man das am besten an?

2. Die abgerundeten Ecken wäre ja soooo schön einfach erstellt mit "-moz-border-radius:10px;", das ich eben erst entdeckt habe. Aber nein, der IE stellt sich da mal wieder doof. Klasse! Ich verfluche die Ganze IE Meute ... buuaaahh *fluch* *fluch*! .. so weiter im Text. Ist wirklich der einzige weg 4 kleine Grafiken (für jede Ecke) anzulegen und diese dan in 4 DIVs zu als HG-Grafik zu stecken und diese wiederum dann in den Ecken zu positionieren? Wie bekommt man am saubersten diese runden Ecken zustande?

Vielen Dank für eure Hilfe!

Gruß,
Sascha

  1. Hallo Sascha,

    komfortable und ohne Images gehts so:
    http://www.html.it/articoli/niftycube/index.html

    oder so:

    <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: 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;}

    Oooooder mit Vererbungen auch so:

    <li class="round_corners">
      <div>
        <div>
          <div>
            Inhalt des Elements
          </div>
        </div>
      </div>
    </li>

    CSS:
    .round_corners {
      background: url(pfad/top_left.jpg) top left no-repeat;
    }

    .round_corners div {
      background: url(pfad/top_right.jpg) top right no-repeat;
    }

    .round_corners div div {
      background: url(pfad/bottom_left.jpg) bottom left no-repeat;
    }

    .round_corners div div div  {
      background: url(pfad/top_right.jpg) bottom right no-repeat;
    }

    1. Moin!

      Hallo Sascha,

      komfortable und ohne Images gehts so:
      CSS:
      .round_corners {
        background: url(pfad/top_left.jpg) top left no-repeat;
      }

      ^^^^^^^^^^^^^^^^^
      Ohne(!) Images? Wirklich OHNE???

      1. ^^^^^^^^^^^^^^^^^

        Ohne(!) Images? Wirklich OHNE???

        Klar, geht auch ganz ohne!
        Du lagerst einfach soviele Boxen mit unterschiedlicher Verlagerung übereinander, bis Du den gewünschten Radius erreicht hast.

        Angenommen Du legst 3 Boxen übereinander. Mit unterschiedlichen margin-Werten kannst Du die jeweiligen Seitenabstände der drei Schichten festlegen.

        Die unterste Schickt hat z.b. 3 pixel margin zu jeder horizontalen.

        Schicht 2, hat 2 Pixel margin zu jeder horizontalen.

        Die oberste Box hat einen margin von nur 1 Pixel und liegt damit einen Pixel über dem Content.

        Grafisch sähe das so aus:
           _Schicht 1_
          __Schicht 2__
         ___Schicht 3___

        Und unten dann nochmal dasselbe.

        1. Klar, geht auch ganz ohne!
          Du lagerst einfach soviele Boxen mit unterschiedlicher Verlagerung übereinander, bis Du den gewünschten Radius erreicht hast.

          Sicher! Radius 25px wären also ca50 divs... Super Idee.

          Mir ging es eher darum, daß Dein Beispiel 4 Images verwendet.

          -- Skeeve

          1. Sicher! Radius 25px wären also ca50 divs... Super Idee.

            Mir ging es eher darum, daß Dein Beispiel 4 Images verwendet.

            -- Skeeve

            <li class="round_corners">
              <div>
                <div>
                  <div>
                    Inhalt des Elements
                  </div>
                </div>
              </div>
            </li>

            CSS:
            .round_corners {
              background: url(pfad/top_left.jpg) top left no-repeat;
            }

            .round_corners div {
              background: url(pfad/top_right.jpg) top right no-repeat;
            }

            .round_corners div div {
              background: url(pfad/bottom_left.jpg) bottom left no-repeat;
            }

            .round_corners div div div  {
              background: url(pfad/top_right.jpg) bottom right no-repeat;
            }

  2. Lieber Sascha,

    wo genau bist Du in http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/ nicht weitergekommen?

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    1. Lieber Sascha,

      wo genau bist Du in http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/ nicht weitergekommen?

      Liebe Grüße aus Ellwangen,

      Felix Riesterer.

      ok, erwischt, ich hätte erstmal richtig suchen sollen. Entschuldigung!

      Danke für eure Vorschläge. So einfach wie ich's mir erhofft hatte, ist's wohl nicht möglich. Ich werde etwas herumprobieren und mir dann eine Variante rauspicken. Danke!

      Gruß,
      Sascha

  3. Hallo Sascha!

    Bezüglich der abgerundeten Ecken:
    Es gibt im Wesentlichen drei Grundtechniken

    1. Javascript + Image(s) Beispiel
     2. CSS + Image(s) (Beispiel hierzu wurde ja bereits verlinkt)
     3. CSS Beispiel

    Jede Variante hat so ihre speziellen Vor- & Nachteile.
    Ansonsten ist aber auch u.a. Google dein Freund - unter Suchbegriffen wie "rounded corners" oder "snazzy borders" solltest du eigentlich fündig werden.

    Gruß Gunther