[CSS] abgerundete ecken wie hier

.x-tra · 21. Februar 2009

abgerundete ecken wie hier

bin in css nicht so bewandert, deshalb frage ich hier.
und zwar über den boxen, wie hier bei den topics oben, möchte ich um eine forenbox zwar keinen rahmen, aber zumindest oben einen rand machen.
d.h. eine class in welcher sich eine 1px breite grafik wiederholt, und an den enden sich jeweils eine linke und rechte endgrafik befindet, welche dann abgerundet ist.

das gleiche dann auch für unter der jeweiligen box.

wie würde das css-code-technisch aussehen?
kann mir da jemand helfen, bzw. soetwas posten?

Anzeige

pleq · 21. Februar 2009

AW: abgerundete ecken wie hier

GRML -.-

css runde ecken - Google-Suche

°EraZoR° · 21. Februar 2009

AW: abgerundete ecken wie hier

wenn du dir den QuellCode ansehen würdest, bzw. ma rechtsklick auf eine Ecke machst, siehst du, dass die Ecken hier Grafiken sind...
Der Obere Teil des Kastens setzt sich zB so zusammen...
Grafik - Div Layer mit repeat BG - Grafik
https://www.xup.in/000/board.raidrush.ws/a_rr_style/misc/cat_top_ls.gif - https://www.xup.in/000/board.raidrush.ws/a_rr_style/misc/cat_back.gif - https://www.xup.in/000/board.raidrush.ws/a_rr_style/misc/cat_top_rs.gif

Und schon hast deine Runden ecken..

//EDIT:
eigeninitiative FTW....
[g]selfthtml background-image[/G]
[g]selfthtml background-repeat[/G]

.x-tra · 22. Februar 2009

AW: abgerundete ecken wie hier

ich möchte das ja auch mit den 3 pics machen....
funktiontiert aber irgendwie nicht.

css...

Code:

.tc {
 background-image: url("{T_THEME_PATH}/images/tc.gif");
 background-repeat: repeat-x;
 height: 20px;
 width: auto;
 
}

.tl {
 background-image: url("{T_THEME_PATH}/images/tl.gif");
 background-repeat: no-repeat;
 height: 20px;
 width: 20px;

}

.tr {
 background-image: url("{T_THEME_PATH}/images/tr.gif");
 background-repeat: no-repeat;
 height: 20px;
 width: 20px;

}

html...

Code:

<div class="tc">
 <div class="tl"></div>
 <div class="tr"></div>
 </div>

hab auch bisschen mit postion rumprobiert, aber ausser dem hintergrund, und der linken ecke.....
geht nix....
die rechte ecke ist einfach nicht zu sehen.

dazu muss ich sagen, dass das div tag tc nur ein 20px hoher balken sozusagen ist, und an deren ende jeweil tl und tr stehen sollen, oberhalb des foreninhaltes sozusagen.

°EraZoR° · 22. Februar 2009

AW: abgerundete ecken wie hier

Float: left ist das Zauberwort...

Code:

.tc {
 background-image: url("{T_THEME_PATH}/images/tc.gif"); <!-- Hier musst du die größe angeben, da der sonst nit dargestellt wird... -->
 background-repeat: no-repeat;
 height: 20px;
 width: 100px;
 float: left;
 
}

.tl {
 background-image: url("{T_THEME_PATH}/images/tl.gif");
 background-repeat: repeat-x;
 height: 20px;
 width: 20px;
 float: left;
}

.tr {
 background-image: url("{T_THEME_PATH}/images/tr.gif");
 background-repeat: no-repeat;
 height: 20px;
 width: 20px;
 float: left;
}

Code:

<div class="tc"></div>
<div class="tl"></div>
<div class="tr"></div>

Und dann einfach stumpf die Layer nebeneinander setzen..
der TC ist zB die Rundung Links, der TL die Repeat Grafik in der Mitte und der TR die Rundung Rechts..

Nützliche Suchen

[CSS] abgerundete ecken wie hier

Videos zum Themenbereich