Iphone Scroller

[basilrath]

Just as little addon i decided to add an "iphone4" scroller which looks as follows

http://www.tabletennistalk.co.uk/forum/forum.php

Obviously forum blocked and i have a little issue but have temporarily got around it but looks not as nice as one would like :(

the code within the forum block is :

<style type="text/css">
#marquee{
position: relative;
z-index: 600;
top: -28.50em;
left: -7.00px;
clear: both;
}
#flv-scroller{
position: relative;
left: 25.95px;
}
#iphone{
position: relative;
z-index: 600;
top: 15.00px;
left: -10.00px;
}
</style>

<div id="iphone">
<img src="/image/iphone-ttt.png" width="260">
</div>


<div id="marquee">
<marquee width="240px" height="290px" direction="up" scrolldelay="2" scrollamount="1.5" onmouseover="this.stop()" onmouseout="this.start()">

<div id ="flv-scroller">
<iframe title="YouTube video player" width="205" height="150" src="http://www.youtube.com/embed/wLfJ2ut1-zc" frameborder="0" allowfullscreen></iframe>
</div>
<br />

<font face="arial narrow" size="2"><ul>
<font color="#ffffff">Table Tennis Talk Live Stream 1 & 2 are active on site and open to view many matches. Check them out -</font> <a href="/forum/ttt-stream.php"><font color="#ff0000">Stream 1</font></a><a href="/forum/ttt-stream2.php"><font color="#ff0000"> Stream 2</font></a>

<br /><br /><br />

<a href="http://www.ittf.com/competitions/competitions2.asp?Competition_ID=2020&category=VWcup"target=_blank><font color="#ff0000">Volkswagen Cup 2011: <a href="/forum/ttt-stream.php">Stream 1</font><br /><font color="#ffffff">Guangzhou, Guangzhou CHN, Mar 23 - Mar 24, 2011</a></font>
<br />
<font color="#ff0000">**COMPLETED MATCHES AVAILABLE NOW TO WATCH**</font>

<br /><br /><br />

<a href="http://www.ittf.com/competitions/competitions2.asp?Competition_ID=2019&category=pt"target=_blank><font color="#ff0000">Spanish Open 2011: <a href="/forum/ttt-stream.php">Stream 1</font><br /><font color="#ffffff">ITTF Pro Tour, Almeria, ESP, Apr 6 - Apr 10, 2011</a></font>
<br />
<font color="#ff0000">**Full Livestream schedule for this event:<a href="http://www.ittf.com/Protour_new/pdf/2011ESP/TVScheduleESP.pdf"target=_blank"> HERE</a>**</font>

<br /><br /><br />

<a href="http://www.ittf.com/competitions/competitions2.asp?Competition_ID=1962&category=WTTC"target=_blank><font color="#ff0000">World Table Tennis Championsips 2011: <a href="/forum/ttt-stream.php">Stream 1</font><br /><font color="#ffffff">World Table Tennis Championships, Rotterdam, NED, May 8 - May 15</a></font>
<br />
<font color="#ff0000">**Full Livestream schedule for this event: TBA</a>**</font>
<br /><br />
<center>
<img src="/image/wttc-img.gif" width="204">
</center>
<br /><br /><br />

<font color="#ffffff" size="1"><i>Full list of scheduled livestream on TTT <a href="/forum/content.php?443-ITTF-Events"target=_blank"> <font color="#ff0000">HERE</a></i></font>

<br /><br />
</ul>
</marquee>
</div>


The template rendering is the normal block_html
<li>
<div class="block smaller">
<div class="blocksubhead">
<a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>
<span class="blocktitle">{vb:raw blockinfo.title}</span>
</div>
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockbody restore">
{vb:raw content}
</div>
</div>
</div>
<div class="underblock"></div>
</li>

The problem is when you use the above code you get
http://www.tabletennistalk.co.uk/image/Untitled-1.jpg



When you use
<li>
<div class="block smaller">
<div class="blocksubhead">
<a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>

<span class="blocktitle">{vb:raw blockinfo.title}</span>



<div id="block_html_{vb:raw blockinfo.blockid}" class="blockbody restore">

{vb:raw content}

</div>
<div class="underblock"></div>
</li>

It renders as it is now in the link which looks ok but isnt as you would like

As soon as you add a </div> it looks fine block wise but extends in depth below image?

Any ideas appreciated as other than that i sorta like how its turned out:)

[x YNWA x]

Cool. I wouldnt mind putting something like this on a site I am working on at the moment. Where did u get the iphone images etc from? Looks pretty cool :)

[basilrath]

it works fine as you can see and i may have reolved the issue

I have all the info if you want it and images

[x YNWA x]

it works fine as you can see and i may have reolved the issue

I have all the info if you want it and images

Hi there
Yea it looks pretty cool. It might not fit in with my forum very well but no harm in having a look! Please do PM me detials :)

Nick