Re: Online Symbol "ÜBER" den Avatar legen
Verfasst: 07.07.2012 10:49
z.B.
so sieht es bei mir aus (ich habe eine tabellenbasierten Style, ist aber übertragbar):
HTML-Template (trans.gif ist ein transparentes Bild):
css-Dateien:
... jetzt reicht's auch mit dem leidigen Thema (ist eine reine css-Sache !)
viel Glück
so long
- indem du die images als Hintergrundbild einbindest(css)
- den images ein "display:inline-block" verpasst
so sieht es bei mir aus (ich habe eine tabellenbasierten Style, ist aber übertragbar):
HTML-Template (trans.gif ist ein transparentes Bild):
Code: Alles auswählen
<tr>
<td class="avatar">
<!-- IF postrow.POSTER_AVATAR -->
<!-- IF postrow.U_POST_AUTHOR -->
<a class="avatar" href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a>
<!-- ELSE -->
{postrow.POSTER_AVATAR}
<!-- ENDIF -->
<!-- ENDIF -->
</td>
<td class="online2">
<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST -->
<div class="online2"><a href="{postrow.U_POST_AUTHOR}"><img src="{T_THEME_PATH}/images/trans.gif" width="96" height="90" alt="" /></a></div>
<!-- ENDIF -->
</td>
</tr>
Code: Alles auswählen
td.avatar, td.avatar2
{
background-image: url({T_THEME_PATH}/images/bg_avatar_schatten.png);
background-position: left 0px;
background-repeat: no-repeat;
}
.avatar
{
height: 96px;
width: 96px;
}
div.online2
{
background-image: url("{IMG_ICON_USER_ONLINE_SRC}");
background-repeat: no-repeat;
background-position: 2px 0px;
z-index: 3;
position: relative;
width: 96px;
height: 96px;
left: -98px;
}
td.online2
{
margin: 0px;
padding: 0px;
}
a.avatar
{
display: block;
padding: 0px;
height: 94px;
}
viel Glück
so long