Wie Funktioniert das mit den Runden Ecken ?

[Feuerball]

Hallo,
ich Suche verzweifelt den gesamten code HTML und CSS wie man das mit den Runden Ecken oben und unten in prosilver machen kann.

Die Bilder habe ich gefunden, das war nicht schwer aber den Code ?

kennt jemand den kompletten Code dafür ?

[oxpus]

Also runde Ecken in prosilver werden z. B. so erstellt (hier mal am Beispiel der Forenliste auf dem Index aus der forumlist_body.html):

Code: Alles auswählen

Oben (Kopf):
<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>

Unten (Fuß):
	<span class="corners-bottom"><span></span></span></div>
</div>

Damit wird zum einen gesagt, wie der gesamte Block aussehen soll (äusseres div mit class="forabg") und dann kommen die Anweisungen für die Rundungen.
Und diese werden in den CSS-Anweisungen so definiert:

Code: Alles auswählen

bidi.css:
.rtl .forabg {
	width: 99%;	/* fix for IE6 */
}

colours.css:
.forabg {
	background-color: #0076b1;
	background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}

common.css:
.forabg {
	background: #b1b1b1 none repeat-x 0 0;
	margin-bottom: 4px;
	padding: 0 5px;
	clear: both;
}

für den äusseren Rahmen und die Rundungen kommen so ins Spiel:

Code: Alles auswählen

colours.css:
span.corners-top {
	background-image: url("{T_THEME_PATH}/images/corners_left.png");
}

span.corners-top span {
	background-image: url("{T_THEME_PATH}/images/corners_right.png");
}

span.corners-bottom {
	background-image: url("{T_THEME_PATH}/images/corners_left.png");
}

span.corners-bottom span {
	background-image: url("{T_THEME_PATH}/images/corners_right.png");
}

common.css:
span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}

span.corners-top {
	background-image: none;
	background-position: 0 0;
	margin: 0 -5px;
}

span.corners-top span {
	background-image: none;
	background-position: 100% 0;
}

span.corners-bottom {
	background-image: none;
	background-position: 0 100%;
	margin: 0 -5px;
	clear: both;
}

span.corners-bottom span {
	background-image: none;
	background-position: 100% 100%;
}

Su siehst also schon, dass das alles nicht einfach ist, zumal es ja auch mit jedem Browser funktionieren soll.
Wenn die Browser alle CSS 3 beherrschen würden, würde eine CSS-Anweisung

Code: Alles auswählen

.element {
	-moz-border-radius-topleft: 0.5em;
	-moz-border-radius-topright: 0.5em;
	-moz-border-radius-bottomleft: 0.5em;
	-moz-border-radius-bottomright: 0.5em;
}

ausreichen, wobei allerdings die Rundungen nicht sooooo wirklich rund wären, wie man auf meiner Startseite auf http://www.oxpus.net sehen kann (und das eben nur auf Firefox und ggf. noch Opera).

[Feuerball]

aaaaaua, so kompliziert ist das.

Naja dann muß ich mal gucken ob ich damit klar komme wie ich das brauche.

Dank dir erstmal.

wegen deinen Runden Ecken auf oxpus.net, kannste mal hier nach gucken, die sind ohne Grafik. Vielleicht hilf dir das.

Ich brauche aber das mit Grafiken deshalb hatte ich gefragt wie das bei prosilver gemacht wurde.

[oxpus]

Ja, auch eine Variante, die aber noch mehr HTML-Code und damit langsamere Ladezeiten mit sich bringt