"Runde Ecken"

[Marc]

Hallo zusammen,

ein Problem, an dem ich derzeit nicht weiterkomme, sind Überschriften in Rahmen mit runden Ecken...

So etwas:

Eigentlich sollte das nicht so schwer sein...?

Irgendwie habe ich aber ne Denksperre...

Danke für Eure Hilfe!

Folgendes habe ich (unter anderem) probiert:

-------------------------------------------
HTML:

<div id="marginal">
 <div class="part">
  <img src="images/margH1Oben.gif" alt="" />
  <h1>Test Test Test Test Test Test Test</h1>
  <img src="images/margH1Unten.gif" alt="" />
 </div>
</div>
-------------------------------------------

-------------------------------------------
CSS:

div#marginal {
 float:right;
 width:208px;
 margin:0 12px 0 4px;
 padding:0;
 background-color:#eee; /* nur zu Testzwecken */
/* border:1px solid #0f0; */
}

div#marginal img.borderH1 {
 display:block;
 width:208px;
 margin:0;
 border:0;
 padding:0;
}

div#marginal h1 {
 border-left:1px solid #377692;
 border-right:1px solid #377692;
 color:#377692;
 background-color:#fff;
}
-------------------------------------------

CSS und HTML sind selbstverständlich valid, DOCTYPE ist XHTML1.0 strict...

Das vorläufige Ergebnis sieht wie folgt aus:

-------------------------------------------
FF:

-------------------------------------------

Herzlichen Dank für Eure Hilfe!!!

Viele Grüße,
Marc.

[Ole]

Hi Marc

du mußt das Rad nicht neu erfinden, das ganze geht sogar ohne Bilder

Deine Stichworte sind "Nifty Corners" (hier mal ein Beipiel, bei google wirst du noch mehr dazu finden.

Btw. in CSS 3 sind runde Ecken vorgesehen.

so long
Ole
(8-)>

[Ole]

ich nochmal..

"Snazzy Borders" ist das andere Stichwort.

[Marc]

Hallo Ole,

ich nochmal..

"Snazzy Borders" ist das andere Stichwort.

Super, vielen Dank! Das ist ja echt klasse: runde Ecken ohne Grafiken. Genial...

Hat mir sehr geholfen!

Viele Grüße,
Marc.

[Hundefhrer]

Hi Marc

du mußt das Rad nicht neu erfinden, das ganze geht sogar ohne Bilder

Naja. Warum nicht gleich Layouttabellen und Spacer-Gifs?

[Marc]

Hallo zusammen,

Hi Marc

du mußt das Rad nicht neu erfinden, das ganze geht sogar ohne Bilder

Naja. Warum nicht gleich Layouttabellen und Spacer-Gifs?

Kennst Du noch eine bessere Alternative? Besonders elegant ist diese Unmenge an Code wirklich nicht...

Viele Grüße,
Marc.

[Mathias Brodala]

Hallo Marc.

Kennst Du noch eine bessere Alternative? Besonders elegant ist diese Unmenge an Code wirklich nicht...

Wenn es im IE funktionieren soll, führt kein Weg am zusätzlichen Markup vorbei. Mein Favorit für die Generierung runder Ecken wird unter anderem beim W3C erklärt.

Einen schönen Donnerstag noch.

Gruß, Mathias