css abgerundete grafik einfügen

Dieses Thema im Forum "Webdesign" wurde erstellt von .x-tra, 1. 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 1. Februar 2009
    folgender code

    Code:
    .forabg {
     background-color: #151515;
     background-image: url("{T_THEME_PATH}/images/catpic.png");
     
    }
    produziert eine sich wiederholende grafik als balken horizontal.
    ich möchte aber zu beginn dieser und als abschluß eine abgerundete grafik einfügen.

    ich bin eigentlich ein css noob, bzw. is einfach schon ewig her.

    könnte mir jemand kurz helfen?
    so nen kleinen schubs geben?
    bitte
     

  2. Anzeige
  3. #2 1. Februar 2009
    ich regel das immer so das ich endweder 3 div's nebeneinadner floate und in den beiden enden die runde grafiken für den hintegrund nehme, aber du kannst auch einfach die beiden grafiken in den bereich packen und per css nach aussen verschieben wie es hier im board gemacht wird, nur dort ist dann das problem mit dem hintegrund den du an den ecken schlecht transparent wählen kannst da dort der wiederholte hintergrund sichbar würde!

    ALso einfach mal googlen gibt genug beispiele und man kann ja sogar per css runde ecken zaubern ;)

    Knusperkeks
     
  4. #3 1. Februar 2009
    also würde das bedeuten, dass ich noch zwei css divs mache, eine fürn anfang einen fürs ende.
    und dort wo obiges div aufgerufen wird, pack ich eins davor, und eins ans ende.

    korrekt so?
     
  5. #4 1. Februar 2009
    Jo, so würd ichs machen!
    Anfang - Mitte - Ende jew. ein div!
     
  6. #5 1. Februar 2009
    also ich habs jetzt so versucht.
    klappt aber nicht, der div tag lautet .forabganfang, und hab ihn direkt wieder nach forabg geschlossen, da ist aber nur das die anfrangsgrafik zu sehen.
    nicht wundern, wollte erstmal wenigstens eins setzen.

    achja hier die css definition

    Code:
    .forabganfang {
    background-image: url("{T_THEME_PATH}/images/enden.png");
    background-repeat: no-repeat;
    
    }
    
    .forabg {
     background-color: #bcb8ae;
     background-image: url("{T_THEME_PATH}/images/catpic.png");
     
    }



    und das ist die forumlist_body.html, geht aber nicht, wenn ich den div vor .forabg setze.
    Code:
    
    <!-- BEGIN forumrow -->
     <!-- IF (forumrow.S_IS_CAT and not forumrow.S_FIRST_ROW) or forumrow.S_NO_CAT -->
     </ul>
    
     <span class="corners-bottom"><span></span></span></div>
     </div>
     <!-- ENDIF -->
    
     <!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW or forumrow.S_NO_CAT -->
     <div class="forabganfang">
     <div class="forabg">
     </div>
     <div class="inner"><span class="corners-top"><span></span></span>
     <ul class="topiclist">
     <li class="header">
     <dl class="icon">
     <dt><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ELSE -->{L_FORUM}<!-- ENDIF --></dt>
     <dd class="topics">{L_TOPICS}</dd>
     <dd class="posts">{L_POSTS}</dd>
     <dd class="lastpost"><span>{L_LAST_POST}</span></dd>
     </dl>
     </li>
     </ul>
     <ul class="topiclist forums">
     <!-- ENDIF -->
    
     <!-- IF not forumrow.S_IS_CAT -->
     <li class="row">
     <dl class="icon" style="background-image: url({forumrow.FORUM_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
     <dt title="{forumrow.FORUM_FOLDER_IMG_ALT}">
     <!-- IF forumrow.FORUM_IMAGE --><span class="forum-image">{forumrow.FORUM_IMAGE}</span><!-- ENDIF -->
     <a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
     {forumrow.FORUM_DESC}
     <!-- IF forumrow.MODERATORS -->
     <br /><strong>{forumrow.L_MODERATOR_STR}:</strong> {forumrow.MODERATORS}
     <!-- ENDIF -->
     <!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS --><br /><strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}<!-- ENDIF -->
     </dt>
     <!-- IF forumrow.CLICKS -->
     <dd class="redirect"><span>{L_REDIRECTS}: {forumrow.CLICKS}</span></dd>
     <!-- ELSEIF not forumrow.S_IS_LINK -->
     <dd class="topics">{forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
     <dd class="posts">{forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
     <dd class="lastpost"><span>
     <!-- IF forumrow.LAST_POST_TIME --><dfn>{L_LAST_POST}</dfn> {L_POST_BY_AUTHOR} {forumrow.LAST_POSTER_FULL}
     <!-- IF not S_IS_BOT --><a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG}</a> <!-- ENDIF --><br />{L_POSTED_ON_DATE} {forumrow.LAST_POST_TIME}<!-- ELSE -->{L_NO_POSTS}<!-- ENDIF --></span>
     </dd>
     <!-- ENDIF -->
     </dl>
     </li>
     <!-- ENDIF -->
    
     <!-- IF forumrow.S_LAST_ROW -->
     </ul>
    
     <span class="corners-bottom"><span></span></span></div>
     </div>
     
     <!-- ENDIF -->
    
    <!-- BEGINELSE -->
     <div class="panel">
     <div class="inner"><span class="corners-top"><span></span></span>
     <strong>{L_NO_FORUMS}</strong>
     <span class="corners-bottom"><span></span></span></div>
     </div>
    <!-- END forumrow -->
    
     

  7. Videos zum Thema
Die Seite wird geladen...
Similar Threads - css abgerundete grafik
  1. [CSS] abgerundete ecken wie hier

    .x-tra , 21. Februar 2009 , im Forum: Webdesign
    Antworten:
    4
    Aufrufe:
    619
  2. Antworten:
    2
    Aufrufe:
    340
  3. Antworten:
    0
    Aufrufe:
    1.487
  4. Antworten:
    3
    Aufrufe:
    1.427
  5. Antworten:
    1
    Aufrufe:
    1.066