Redsun9
Citizen
Registered: 05-2006
Province: World
Posts: 124
Karma: 2 (+2/-0)
|
ReplyQuote
|
|
Background Picture, Table and CSS
Hi Lesigner Girl,
Long time no see, hope everything is ok for you and TOI.
I have a non-rb board issue lesa, but i believe subject is not a specific one, hope you can understand with my long explains and may help me
I have a problem on my phpbb board, it's a tec. issue and it's about the codes. I'll explain it step by step...
In one of my board i tried to add a "offline image" for a background for "online image". System has its online image but no offline image. So i think best thing for make it visible is using background picture... with same size and same height with the online one.
Normally when a member online it seems like this, under the message body...
And its template code ise like this:
table width="18" border="0" cellspacing="0" cellpadding="0" height="18">
<tr>
<td valign="middle" nowrap="nowrap">
{postrow.displayed.ONLINE_IMG}
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.WWW_IMG} {postrow.displayed.AIM_IMG} {postrow.displayed.YIM_IMG} {postrow.displayed.MSN_IMG} {postrow.displayed.SKYPE_IMG}
<script type="text/javascript" language="JavaScript"><!--
if ( navigator.userAgent.toLowerCase().indexOf('mozilla') != -1 && navigator.userAgent.indexOf('5.') == -1 && navigator.userAgent.indexOf('6.') == -1 ) {
document.write('{postrow.displayed.ICQ_IMG}');
} else {
document.write('</td><td> </td><td valign="top" nowrap="nowrap"><div style="position:relative"><div style="position:absolute">{postrow.displayed.ICQ_IMG}</div></div>');
}
//-->
</script>
<noscript>{postrow.displayed.ICQ_IMG}</noscript>
</td>
</tr>
</table>
</td>
</tr>
This point {postrow.displayed.ONLINE_IMG} is the online image's formula, so i think using this image with same sizes as online one.
Now i think with the help of css we can make a background-offline image for our online image, so if a member logout, it appears, because the online one disappears...
I used a class called offline with this code:
.offline {
display : block;
background : url(http://acmilanturkiye.com/forumtuslari/offline.png) no-repeat center 0%;
margin: 0;
padding: 0;
}
and put this to the template as i give before.
<div class="offline>{postrow.displayed.ONLINE_IMG}</div>
result was negative...offline image comes... but not as a background... it breaks something... here is the picture of it...
I know something missing in css code or may be try with html table, i don't know what can be the problem lesigner girl?
Thank you...
Last revised by Redsun9, 9/24/2009, 9:33 pm
|
9/24/2009, 9:26 pm
|
Link to this post
PM Redsun9
ICQ
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
|
ReplyQuote
|
|
Re: Background Picture, Table and CSS
Hi Redsun
The div is creating a new line. The "Offline" image is centered within that line because that's what you told it to do in the CSS, while the "Online" image is left-aligned as I assume the rest of the buttons are.
If I am to assume that {postrow.displayed.ONLINE_IMG} will cause an image to show up if someone is online, but not display anything at all when they are offline, then you might be on the right track. Try adding float:left; and the image dimensions (width and height) to .offline and see if that works.
Last revised by Lesigner Girl, 9/24/2009, 9:51 pm
|
9/24/2009, 9:50 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|
Redsun9
Citizen
Registered: 05-2006
Province: World
Posts: 124
Karma: 2 (+2/-0)
|
ReplyQuote
|
|
Re: Background Picture, Table and CSS
yes! exactly it works lesigner girl, now it seems ok
thank you very much again, i put a space with html nbsp character between online/offline and profil cause they stick eachother, now there is a space.
Last revised by Redsun9, 9/24/2009, 10:18 pm
|
9/24/2009, 10:16 pm
|
Link to this post
PM Redsun9
ICQ
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
|
ReplyQuote
|
|
Re: Background Picture, Table and CSS
You're welcome, Red.
Instead of using &nbsp;, add margin-right to .offline, using as many px as you need to make the gaps match.
|
9/25/2009, 12:37 am
|
Link to this post
PM Lesigner Girl
Read Blog
|