/CSS Hintergrundgrafik mit abgerundeten Ecken

[Fabian St.]

Hi!

Ich habe im Moment das Problem, dass ich eine Hintergrundgrafik in Form eines Rechtecks habe, dass am linken Ende gerundete gerundete Ecken aufweist. Da der Container, in dem sich die Grafik befindet, verschiedenen groß sein kann, hat die Grafik insgesamt eine Breite von 1500px und wird eben bei Bedarf einfach abgeschnitten. Das Problem dabei ist natürlich, dass ich dann eben rechts keine abgerundete Ecken habe.

Aus diesem Grund kam mir dann die Idee, einfach ein div im im relativ positionierten Container, mit right:0; und top:0; absolut zu positionieren und dem dann eine Hintergrundgrafik zuzuweisen. Diese Hintergrundgrafik ist dann eine einfach ein abgerundeter Rahmen in der Höhe der Grafik mit einer offenen linken Seite. Auf diese Weise hat dann auch das Ende der ersten Hintergrundgrafik abgerundete Ecken.

Skizze zum besseren Verständnis:
  _____________________________________
/
|
| Hintergrundgrafik 1
\_____________________________________

__
  \   |
  | Hintergrundgrafik 2
__/

Mir erscheint jedoch diese Art und Weise das zu realisieren ziemlich umständlich. Hätte jemand eine Idee, wie man dies besser machen könnte?

Grüße,
Fabian St.

[Joern Bock]

Schau Dir das mal an - kannst Du eventuell anpassen: http://www.alistapart.com/articles/onionskin/
Ansonsten kann ich Dich nur auf CSS3 vertrösten: http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius

[Fabian St.]

Hi!

Schau Dir das mal an - kannst Du eventuell anpassen: http://www.alistapart.com/articles/onionskin/

Nein, das behandelt nicht mein Problem.

Ansonsten kann ich Dich nur auf CSS3 vertrösten: http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius

Ja, darauf warte ich auch schon sehnsüchtigst ;-)

Grüße,
Fabian St.

[Elya]

Hallo Fabian,

Aus diesem Grund kam mir dann die Idee, einfach ein div im im relativ positionierten Container, mit right:0; und top:0; absolut zu positionieren und dem dann eine Hintergrundgrafik zuzuweisen. Diese Hintergrundgrafik ist dann eine einfach ein abgerundeter Rahmen in der Höhe der Grafik mit einer offenen linken Seite. Auf diese Weise hat dann auch das Ende der ersten Hintergrundgrafik abgerundete Ecken.

Es muß vielleicht nicht unbedingt ein div sein, vielleicht hast du ja ein anderes Element in dem Container, dem Du den Hintergrund zuweisen kannst. Sehr weit entfernt von dem Sliding-Doors-Klassiker von alistapart.com scheint mir Deine Lösung nicht zu sein.

Gruß aus Köln-Ehrenfeld,

Elya

[Fabian St.]

Hi Elya!

Es muß vielleicht nicht unbedingt ein div sein, vielleicht hast du ja ein anderes Element in dem Container, dem Du den Hintergrund zuweisen kannst. Sehr weit entfernt von dem Sliding-Doors-Klassiker von alistapart.com scheint mir Deine Lösung nicht zu sein.

Die Idee mit einem anderen Element, das sowieso bereits im Container enthalten ist, ist mir bereits auch gekommen, jedoch ist dies leider nicht der Fall. Darin befindet sich nur eine Überschrift erster Ordnung, die sich am ganz linken Rand befindet. Die von dir zitierten Sliding-Doors bauen genau auf dieses Prinzip - ein Teil der Hintergrundgrafik befindet sich im li, der andere Teil im a.

Ansich wäre ja ein <div>&nbsp;</div> nicht schlimm, nur gefällt mir eben der Gedanke eines komplett sinnlosen, leeren Elements, das nur Layout-Zwecke hat, in meiner Seite überhaupt nicht :-(

Grüße,
Fabian St.

[Elya]

Hallo Fabian,

Die Idee mit einem anderen Element, das sowieso bereits im Container enthalten ist, ist mir bereits auch gekommen, jedoch ist dies leider nicht der Fall. Darin befindet sich nur eine Überschrift erster Ordnung, die sich am ganz linken Rand befindet.

Und dehnt sich die h1 nicht bis zum rechten Rand aus, wie das ordentliche Blockelemente meistens tun? ;-) Dann könntest Du den Hintergrund doch innerhalb h1 rechts positionieren - wobei ich natürlich die Höhe der beiden Elements nicht kenne...

Gruß aus Köln-Ehrenfeld,

Elya

[Fabian St.]

Hi Elya!

Und dehnt sich die h1 nicht bis zum rechten Rand aus, wie das ordentliche Blockelemente meistens tun? ;-) Dann könntest Du den Hintergrund doch innerhalb h1 rechts positionieren - wobei ich natürlich die Höhe der beiden Elements nicht kenne...

Manchmal sieht man denn Wald vor lauter Bäumen nicht ;-) Vielen Dank Elya! Jetzt muss ich mich nur noch mit Gimp anfreunden, dann sollte dem nichts weiter im Weg stehen...

Grüße,
Fabian St.

[Gernot Back]

Hallo Fabian,

das kennen wir aber doch schon:

http://aktuell.de.selfhtml.org/tippstricks/css/runde_ecken/index.htm

oder habe ich dich falsch verstanden?

Gruß Gernot

[Fabian St.]

Hi!

das kennen wir aber doch schon:

http://aktuell.de.selfhtml.org/tippstricks/css/runde_ecken/index.htm

oder habe ich dich falsch verstanden?

Ich kenne diesen Artikel, jedoch gefällt mir ansich einfach die Verschachtelung der vielen unnützigen divs nicht, da sie von der Semantik her gesehen einfach keinen Sinn haben.

Grüße,
Fabian St.