✔ DIV mit runden Ecken und Transparenz

[Sven Puschner]

Hallo,
ich möchte gern einen Bereich mit runden Ecken erstellen, bei dem die Außenseite der Ecken jedoch transparent ist. Ich habe dem Container "content" einen Hintergrund zugewiesen der vertikal wiederholt wird - leider ab dem ersten Pixel :-(
Kann man einen oberen und unteren Abstand bei wiederholendem Background angeben oder weiß jemand eine andere Lösung?
Hier mein Ansatz:

<div id="content">	
		<div id="content-ol">
		<div id="content-or">
		<div id="content-ul">
		<div id="content-ur">
                         [INHALT]
                </div>
                </div>
                </div>
                </div>
        </div>

Stylesheet:

div#content {		background:url('../images/Content-mitte.png') 			transparent repeat-y; }
div#content-ol {	background:url('../images/Content-oben-links.png') 		transparent no-repeat top left;  }
div#content-or {	background:url('../images/Content-oben-rechts.png') 	transparent no-repeat top right;   }
div#content-ul {	background:url('../images/Content-unten-links.png') 	transparent no-repeat bottom left;   }
div#content-ur {	background:url('../images/Content-unten-rechts.png') 	transparent no-repeat bottom right;   }

Der Link zur Seite: www.spansberg.de
Vielen Dank schonmal für jede Hilfe!
MfG, der Sven

 

[chmee]

Nimm doch einfach

#css3
border-radius:10px;

http://www.css3.info/preview/rounded-border/

Quäle Dich nicht mehr mit diesen Grafikhacks

mfg chmee

 

[Sven Puschner]

Hmm, habe ich schon gelesen. Unterstützen das denn alle Browser? Habe echt keine Lust mehr Weichen als nötig zu bauen..

 

[chmee]

https://developer.mozilla.org/de/CSS/border-radius

Unten die Liste Browser-Kompatibilität. In der Regel alle, wobei wir wieder mal bei IE kleiner 9 aufpassen müssen.

mfg chmee

 

[Sprint]

Der einzige Browser, der noch eine Sonderbehandlung braucht, ist der IE8. Und den kannst du z.B. mit der Erweiterung CSS3PIE auf Kurs bringen. Eine bzw. zwei Zeilen in der CSS Anweisung reichen dann aus. Glück für die Versionen 6 und 7, daß die auch damit arbeiten können. Ansonsten würde ich die beiden einfach ignorieren. IE7 hat noch einen Marktanteil von max. 4%, der 6er ist quasi ausgestorben.

 

[javaDeveloper2011]

Hi,

div#content{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -khtml-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    behavior: url(PIE.htc);
    
    background-color: black;
    border: solid 1px white;
    
    width: 902px;
    margin-left: 48px;
    margin-top: 0px;
    margin-bottom: 40px;
}

...PIE.htc muss halt im Verzeichniss der jewailigen HTML-Datei ligen.

Um Ladezeit zu sparen würde ich auch das Weiße inhalt-div und das transparente div mit CSS3 machnen.
(Mit PIE garantiert bis IE6 identisch dargestellt!)

div#inhalt{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -khtml-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    behavior: url(PIE.htc);
    
    background-color: white;
    border: solid 1px black;
    
    width: 100%;
    margin-bottom: 40px;
}

div#content{    
    background-color: black;
    opacity: 0.4;
    -moz-opacity: 0.4;
    -khtml-opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity = 40)";
    filter: alpha(opacity = 40);
    
    width: 902px;
    margin-left: 48px;
    margin-top: 0px;
    margin-bottom: 40px;
}

bei inhalt-or, inhalt-ol, ...
kannst du dann sowohl CSS als auch überflüssige divs entfernen.

Gruß javaDeveloper2011

 

[Sven Puschner]

Das klingt super und wenn ich auch noch die DIVs loswerde, umso besser.
Vielen dank für eure Mühe! Werds dann gleich mal umsetzen..