Online Symbol "ÜBER" den Avatar legen

[Akio]

also hab das jetzt so:

Code: Alles auswählen

.avatardingsbums {
	width: 170px;
	height: 220px;
	margin: 10px;
	background: url({postrow.POSTER_AVATAR}) no-repeat center;
}

.online {
	width: 58px;
	height: 58px;
	margin-left: 112px;
	background-image: url(icon_user_online.gif);
	background-repeat: no-repeat;
}

Code: Alles auswählen

<dt>
	<!-- IF postrow.POSTER_AVATAR -->
		<div class="avatardingsbums"><!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF -->
			<div class="<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->"></div>
		</div>
	<!-- ENDIF -->
	<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
</dt>

Meine Vorlage:

Code: Alles auswählen

<div style="width: 170px; height: 220px; background: url(bg9.png) no-repeat center; margin: 10px;">
	<div style="width: 58px; height: 58px; margin-left: 112px; background-image: url(icon_user_online.gif);"></div>
</div>

http://www.hellsing-anime.de/phpBB3/vie ... f=1&t=3475

Sieht am ende nich so toll aus... was hab ich falsch gemacht?

[Perlchamp]

hi,
fast richtig ...
du musst BEIDE jeweils in einen div-container stecken und links floaten:

Code: Alles auswählen

<dt>
       <!-- IF postrow.POSTER_AVATAR -->
          <div class="avatardingsbums"><div class="avatar"><!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --></div>
             <div class="avatar2<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->"></div>
          </div>
       <!-- ENDIF -->
       <!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
    </dt>

...
und die Klassen:

Code: Alles auswählen

.avatar
{
  width:90px;height:90px;z-index:1;float:left;position:relative;top:0px;left:0px;
}
.avatar2
{
  width:90px;height:90px;z-index:1;float:left;position:relative;top:0px;left:0px;
}
.online
{
  width:90px;height:90px;z-index:5;float:left;position:relative;left:-90px;
}

... ungetestet

Viel Glück
so long

[Akio]

ah muss ich? versteh den sinn grad nich wieso da gefloatet werden muss... allerdings kenn iuch mich auch nich aus mit dem template kram also in meiner testfile hats super geklappt ohne floaten, aber ich werds mal so übernehmen =) Vielen dank für deine hilfe bisher werde feedback geben obs so klappt oder nicht =)

[Akio]

Leider sieht es mit deinem code noch schlimmer aus als mit meinem oO
hier vorschau: http://www.mywebexile.de/totalschaden.png

[Perlchamp]

hi,
ich denke, du kennst dich mit css aus ?
das online-Hintergrundbild z.B. wird wiederholt (repeat). Dies mal bitte ändern. Dann musst du die div-container natürlich von den Größenangaben her an deine Avatare bzw. Seitenleiste anpassen.
Auch das Verrücken nach links (left:-90px) musst du an deine Spalte/Avatare/Style/Online-Bild anpassen.
"Spiele" etwas damit rum, dann wird auch bei dir die Sonne aufgehen ...

Tipp:
verpasse den Div-Containern zum Testen eine Border(Rahmen) von 2px, so dass du die Änderungen (Größe und Positionierung) jedesmal auch sehen kannst.

viel Glück
so long

[Akio]

Soweit klappt das jetzt halbwegs.. Problem ist nur das bei Leuten die ein "NICHT" 200px hohes avatar nutzen das Online Icon verschoben angezeigt wird...

Und in der Gallery werden die Kommentare fehlerhaft angezeigt und ich raff grad nicht wieso...
http://www.hellsing-anime.de/phpBB3/gal ... image_id=1

[Perlchamp]

dann lege die Höhe des div-containers allgemein auf 200px fest ...
du kannst ja ein 200px hohes Hintergrundbild bzw. einen z.b. graunen Hintergrund wählen mit z.b. rotem Rand, der vom Avatar bedeckt wird. Ist der Avatar kleiner, sieht man den Rest des Hintergrundes ...

so long

[Akio]

Dann ist aber die user info bei 100x100px so weit unterhalb des avatares...
denke die einzige effektive lösung ist den avatar als bg image aus zu geben irgendwie,
ich mach mal neuen topic auf und frage wie das geht heut abend.

Trotzdem danke ich dir

[Perlchamp]

wenn du einen div-container hast (spalte), in dem die 2 anderen div-container platziert sind, dann floate einen nach links, den anderen nach rechts (online), dann ist das Problem doch gelöst !

so long

[Akio]

versteh ich grade ned, wie soll man irgendwas anständig floaten wenn da ne img file drin is?