Special Postbit

[Valker]

Hey Guys !

im writing my own special template for vb4 and well it will be soon finished. But i?m stuck on the Postbit.

here is my actual work:



at first it might look quiet good but the onlienstatus messes up the username the rank and vizeversa. The image is about 58x65px...so you can see, the username is pressed at the top, wile the rank to the bottom, so there is a gap of this 58 px in height.
Widht ist just the same. I could float the image to the left but is presses the username 65px to the right.... i tried z-index, tried to rebuild it .... it doesnt work...


here?s the code:

		<div class="userinfo<vb:if condition="!$show['avatar']">_noavatar</vb:if>">
			<div class="contact">
				<vb:if condition="$show['avatar']">
					<a class="postuseravatarlink" href="{vb:link member, {vb:raw post}}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">
						<vb:if condition="$post.avatarurl">
							<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />
						<vb:else />
							<img src="{vb:stylevar imgdir_misc}/unknown.gif" />
						</vb:if>
					</a>
				</vb:if>
				<div class="username_container">
					<vb:if condition="$post['userid']">
						{vb:raw memberaction_dropdown}
						{vb:raw post.onlinestatus}

					<vb:else />
						<span class="username guest">{vb:raw post.username}</span>
					</vb:if>
					<span class="usertitle">
						{vb:raw post.usertitle}
					</span>
					<vb:if condition="$post['rank']">
						<span class="rank">{vb:raw post.rank}</span>
					</vb:if>

                                        {vb:raw template_hook.postbit_userinfo_left}
					<vb:if condition="$show['reputation']">
						<span class="postbit_reputation" id="repdisplay_{vb:raw post.postid}_{vb:raw post.userid}">{vb:raw post.reputationdisplay}</span>
					</vb:if>
					<vb:if condition="$post['userid']">
						<div class="imlinks">
							{vb:raw post.icqicon} {vb:raw post.aimicon} {vb:raw post.msnicon} {vb:raw post.yahooicon} {vb:raw post.skypeicon}
						</div>
					</vb:if>
				</div>
			</div>
			<vb:if condition="$post['userid']">
				<div class="userinfo_extra">
					<dl class="userstats">
						<vb:if condition="$post['joindate']"><dt>{vb:rawphrase join_date}</dt> <dd>{vb:raw post.joindate}</dd></vb:if>
						<vb:if condition="$post['field2']"><dt>{vb:rawphrase location_perm}</dt> <dd>{vb:raw post.field2}</dd></vb:if>
						<vb:if condition="$post['age']"><dt>{vb:rawphrase age}</dt> <dd>{vb:raw post.age}</dd></vb:if>
						<dt>{vb:rawphrase posts}</dt> <dd>{vb:raw post.posts}</dd>	
						{vb:raw template_hook.postbit_userinfo_right_after_posts}
					</dl>
					<vb:if condition="$show['infraction'] OR $show['reppower']">
					<dl class="user_rep">
	
						<vb:if condition="$show['infraction']">
							<dt>{vb:rawphrase infractions}</dt> 
							<dd>{vb:raw post.warnings}/{vb:raw post.infractions} ({vb:raw post.ipoints})</dd>
						</vb:if>
						<vb:if condition="$show['reputation']">
							<vb:if condition="$show['reppower']">
								<dt>{vb:rawphrase reppower}</dt> 
								<dd id="reppower_{vb:raw post.postid}_{vb:raw post.userid}">{vb:raw post.reppower}</dd> 
							</vb:if>
						</vb:if>
					</dl>
					</vb:if>
					{vb:raw template_hook.postbit_userinfo_right}
				</div>
			</vb:if>
		</div>
	</div>

my questions: is there someone who has build such postbits with an diagonal onlinestatuses?
Can someone help me to build such ? Or, have someone seen such postbit allready somewhere? So i can oriantate in making one by my own ?

sry for my english right now, got 50?C in my room ;/

[kh99]

What do you have for CSS for class "rank"? Maybe it's got a clear:left or clear:both?

[Valker]

its

clear: both;
display: block;
font-size: 12px;

[Lynne]

Is the online status image and actual image you are adding to the postbit using an <img> tag or are you just going to make it a background image using CSS? If you use CSS, then I don't think you will have the issue you are talking about since you can't 'bump' into a background image or have it affect the text in that div.

[Valker]

hm its a <img>...well i gonna try the css method today

--------------- Added [DATE]1314466056[/DATE] at [TIME]1314466056[/TIME] ---------------

so i finally fixed the problem with z-index. css background-image was an good idea but not quit different from img.

But i?ve got another "problem" encontered now.

Couse onlinestus and Username + Rank stack together, like is wanted to, even the Avatar overlappes.

I fixed it with an margin-top at the avatar section.

...might imagine my problem ... XD

When a User got no avatar, postbit_legacy will show none.

Here?s my code:

<vb:if condition="$show['avatar']">

<div class="usercenter">
<a class="postuseravatar_custom" href="{vb:link member, {vb:raw post}}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">
<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />
</a>
</div>

</vb:if>

Is there a "if" condition when there is no avatar ? or how can i fix this issue ?