css abgerundete grafik einfügen

.x-tra · 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

Anzeige

Knusperkeks · 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

.x-tra · 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?

bigD · 1. Februar 2009

Jo, so würd ichs machen!
Anfang - Mitte - Ende jew. ein div!

.x-tra · 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 -->

Nützliche Suchen

css abgerundete grafik einfügen

Videos zum Themenbereich