Online Symbol "ÜBER" den Avatar legen

[Perlchamp]

z.B.

• indem du die images als Hintergrundbild einbindest(css)
• den images ein "display:inline-block" verpasst

wo liegt dein Problem ?

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>

css-Dateien:

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;
}

... jetzt reicht's auch mit dem leidigen Thema (ist eine reine css-Sache !)

viel Glück
so long

[Talk19zehn]

Offline, - Onlinestatus anzeigen

Hi Akio, inhaltlich geht´s dir doch um die Anzeige / Ausgabe der Onlinegrafik bzw. um die Ausgabe vom Status ( offline, online ) ?

Es werden in deinem Standarddesign Prosilver Klassen angewendet, die mir Firebug jedoch nicht aufzeigt:
forumpostbodydings
avatar_dings
Wurden diese direkt in der stylesheet.css hinterlegt? Sprich, überlagern sodann die eigentlichen CSS-Notationen? Ich möchte das Thema auch im Detail nun nicht aufgreifen, sondern dir ggf. einen weiteren Lösungsweg vorschlagen.

Wenn du das Style Prosilver in seiner Breite änderst, --> in deinem Falle --> feste Breite, die einer Relation entspricht.... - ( also keine denkbaren 350px )...

brauchst du normalerweise m.E. keine weiteren Korrekturen, da das Mini-Profil, vgl. postprofile, im Standard mit 22% ausgerichtet ist. Du hast es hingegen auf
width: 158px;
begrenzt.

Natürlich sind Avatare, die ein riesiges Maß vorgeben ein Problem, wenn die Breite zudem gar nicht ausreicht. Die Avatargröße wäre demnach besser auf ein Maß zu begrenzen, welches das Layout besichert. Postbody würde ebenso automatisch korrekt berechnet werden, wenn der Standard genutzt würde. Zumindest sind es meine Erfahrungswerte, sofern ich nicht massiv im stylesheet abweiche. Ausnahmen bestätigen also die Regel.

Insofern kommst du mit dem Platz und Angaben, wie Padding oder Margin nicht rechnerisch hin, wenn du nicht in den zur Anwendung kommenden Klassen oder IDs konform änderst.
Von daher würde ich deine Änderungen jener Bereiche rückabwickeln wollen, um zukünftig keine hausgemachte Problematik zu erzeugen ( positiv gemeint ).

Darum parallel ein noch anderer Lösungsansatz zum Thema: Offline, - Onlinestatus anzeigen:
Probiere das Konstrukt von Sniper_E bitte bei Bedarf aus. Ich meine, jene Modifikation ist mehr als gut , die dein Problem im nächsten Schritt lösen könnte, sofern du auf Standards zurücksetzt.
http://phpbbacademy.com/community/viewt ... =0#p129558

Evtl. ist das Einbinden der entsprechenden Grafiken ... ---> /theme/images/offline.png ---> /theme/images/online.png
in deinem Falle nachzuholen/ zu ändern? Erstrebenswert kann es außerdem bei der Anwendung sein, Avatare von gleicher Größe zu nutzen.

Meines Erachtens ist bei jener benannten Anwendung von Sniper_E ergänzend jene Zeile in der viewtopic_body.html ( Prosilver ) in Folge und von Fall zu Fall zu ersetzen:
Suche:

Code: Alles auswählen

	<div id="p{postrow.POST_ID}" class="post <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->">

Ersetze:

Code: Alles auswählen

	<div id="p{postrow.POST_ID}" class="post"> <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF -->

BTW:
Was du ggf. modifiziert hast, entzieht sich meiner Kenntnis, da dein Style Prosilver augenscheinlich einer größeren Umbaumaßnahme unterzogen wurde.

Gruß