CSS-Box mit abgerundeten Ecken

[Kabelsalat]

Schönen guten Abend,

Mir ist bewusst, dass es unzählige Tutorials für dutzende Ansätze gibt, aber ich konnte keine Lösung ausmachen, welche alle folgenden Anforderungen erfüllt:

-> Voll skalierbar (ohne Limit)
-> Die Ecken sollen beim skalieren entweder die ursprüngliche Größe beibehalten oder sich ebenfalls anpassen
-> Kein Javascript
-> Wenn möglich nur CSS
-> Für die Kanten sollen transparente Grafiken (png) verwendet werden.
-> Die gesamte Box (grün) soll für den Inhalt zur Verfügung stehen und nicht nur der gelb markierte Bereich

http://www.forum-3dcenter.org/vbulletin/attachment.php?attachmentid=27030&stc=1


Da ich zeitweise doch etliche Schwierigkeiten - insbesondere mit dem IE - hatte, könnte dem ein oder anderen mein Ansatz gerade recht kommen und vielleicht findet ihr auch noch die ein oder andere Möglichkeit etwas zu verbessern:


<div style="background-color:White;margin-top:15px;margin-bottom:15px;">
<div style="margin-left:15px;margin-right:15px;background-color:White;height:15px;position:relative;bottom:15px;">
<img src="../Eigene Dateien/Eigene Bilder/episource/Ecken/olw15.png" alt="&nbsp;" style="position:absolute;left:-15px;" />
<img src="../Eigene Dateien/Eigene Bilder/episource/Ecken/orw15.png" alt="&nbsp;" style="position:absolute;right:-15px;" />
</div>
<div style="position:relative;margin-top:-30px;margin-bottom:-30px;z-index:1;">
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
<br />
<br />
<br />
Inhalt
<br />
<br />
<br />
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
</div>
<div style="margin-left:15px;margin-right:15px;background-color:White;height:15px;position:relative;top:15px;">
<img src="../Eigene Dateien/Eigene Bilder/episource/Ecken/ulw15.png" alt="&nbsp;" style="position:absolute;left:-15px;" />
<img src="../Eigene Dateien/Eigene Bilder/episource/Ecken/urw15.png" alt="&nbsp;" style="position:absolute;right:-15px;" />
</div>
</div>


Fertig sieht das ganze dann z.B. so aus:

http://www.forum-3dcenter.org/vbulletin/attachment.php?attachmentid=27031&stc=1
(Hier wurde zusätzlich noch eine Padding-Angabe verwendet, die das Herausragen des Inhalts verhindert)


Abschließend noch ein paar Anmerkungen:
-> Die src-Attribute der Image-Tags müssen angepasst werden
-> In eine "wirkliche" HTML-Seite eingebettet, sollten die CSS-Attribute nicht Inline deklariert werden.
-> Für skalierende Ecken sollten die Bilder großzügig dimensioniert werden, da es sonst schnell zu hässlichen "Treppenstufen" kommt. Außerdem müssen die Größenangaben relativ erfolgen (für das img-Tag sind Breiten- und Höhenangabe ebenfalls notwendig).
-> Für andere Radien als 15px müssen die entsprechenden Größenangaben angepasst werden.



Grüße vom Bodensee

Kabelsalat




PS: Durch Einsatz eines kleinen, serverseitigen Scripts (oder Browserweichen im HTML-Code), lässt sich auch der IE mit Hilfe von DX-Filtern zur korrekten Anzeige transparenter PNGs animieren.

[MadMan2k]

also ich verwende auf meiner Seite -moz-border-radius.
wird zwar nur vom gecko-renderer interpretiert, aber da es eh nur ne spielerei ist, ist es nicht weiter tragisch.
Später wird es als border-radius sowieso CSS3 standard sein.

http://www.madman2k.net/images/ff-cairo.jpg

[Gast]

Später wird es als border-radius sowieso CSS3 standard sein.
Sehr sehr viel später...
Dann wird auch XHTML2 bzw. HTML5 fertig sein, alle Browser das korrekt umsetzen und Duke Nukem Forever fertig sein...

[darph]

makePNGWork - behaviors sind schon was feines :)

/*
Alpha PNG support for IE

Self-removing expression trick from: http://dean.edwards.name/my/misbehaviors/
\*/
img {
filter:expression(
this.makePNGWork
? "" :
(
this.src.substr(this.src.length-4)==".png"
?
(
(!this.complete)
? "" :
this.runtimeStyle.filter=
("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"')")+
(this.onbeforeprint="this.runtimeStyle.filter='';this.src='"+this.src+"'").substr(0,0)+
String(this.makePNGWork=true).substr(0,0)+
(this.src="blank.png").substr(0,0)
)
:
this.runtimeStyle.filter=""
)
);
}

[Kabelsalat]

Meine Lösung (kommt ohne Javascript aus):


#region licence

#endregion

using System;
using System.Web;

namespace epiSource.Web.Controls
{
public class PngImage: System.Web.UI.WebControls.Image
{
protected override void OnInit(EventArgs e)
{
if (HttpContext.Current.Request.Browser.Browser.ToLower() == "ie")
{
Style.Add("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + ImageUrl + "', sizingMethod='image')");
ImageUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "epiSource.Web.Controls.blank.gif");
}

base.OnInit(e);
}
}
}

[darph]

also ich verwende auf meiner Seite -moz-border-radius.
wird zwar nur vom gecko-renderer interpretiert, aber da es eh nur ne spielerei ist, ist es nicht weiter tragisch.
Später wird es als border-radius sowieso CSS3 standard sein.


Was ganz anderes... der rote Balken liegt über den PopUps - stimmt da was mit dem z-index nicht?

Meine Lösung (kommt ohne Javascript aus)
Wie wird das eingebunden? Auch als CSS Eigenschaft?

[Kinman]

Würd mich auch mal interessieren wie das eingebunden wird. Sind damit 8Bit Alpha möglich?

mfg Kinman

[MadMan2k]

Was ganz anderes... der rote Balken liegt über den PopUps - stimmt da was mit dem z-index nicht?
browser, version? sollte wie auf den screenshots aussehen. Die PNG workarounds kann man sich übrigens eigentlich sparen, da der IE7 das von selbst können wird.

[Kabelsalat]

Die PNG workarounds kann man sich übrigens eigentlich sparen, da der IE7 das von selbst können wird.

... aber laut meiner Web-Statistik verwenden die meisten User den IE6 und ich denke, dass wird sich so schnell auch nicht ändern.

Übrigens: Für die Entwicklung des Layouts habe ich auch -moz-border-radius verwendet, aber als dauerhafte Lösung war es aus zwei Gründen nie gedacht:
-> Funktioniert nur mit dem FF
-> Funktioniert nur so lange, bis die CSS3-Eigenschaft unterstützt wird

Wie wird das eingebunden? Auch als CSS Eigenschaft?

Nein, dass ganze ist ein serverseitiges ASP.Net Webcontrol. Lässt sich aber auch mit PHP, JSP und vielem mehr realisieren. Bei Zeiten sollte man evtl. den IE7 "normal" behandeln...

Sind damit 8Bit Alpha möglich?

Der verwendete Filter sollte mit einem 8Bit Alpha-Kanal klar kommen.

[darph]

browser, version? IE6 und due IE7 vom 20.

[MadMan2k]

k, konnte fehler nachvollziehen - werd ich irgendwann demnächst fixen...

[Kabelsalat]

@MadMan: Wo wurde das Foto im Header deiner Seite geschossen?

[MadMan2k]

athen

[Kabelsalat]

Oh... damit hatte ich nicht gerechnet^^