[CSS] abgerundete ecken wie hier

Dieses Thema im Forum "Webdesign" wurde erstellt von .x-tra, 21. Februar 2009 .

Schlagworte:
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 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?
     

  2. Anzeige
  3. #2 21. Februar 2009
  4. #3 21. Februar 2009
    Zuletzt von einem Moderator bearbeitet: 16. April 2017
    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]
     
  5. #4 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.
     
  6. #5 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..
     

  7. Videos zum Thema
Die Seite wird geladen...
Similar Threads - CSS abgerundete ecken
  1. Antworten:
    0
    Aufrufe:
    1.487
  2. Antworten:
    3
    Aufrufe:
    1.427
  3. Antworten:
    1
    Aufrufe:
    1.066
  4. css abgerundete grafik einfügen

    .x-tra , 1. Februar 2009 , im Forum: Webdesign
    Antworten:
    4
    Aufrufe:
    410
  5. Antworten:
    2
    Aufrufe:
    340