| basilrath |
04-02-2011 03:33 PM |
Iphone Scroller
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 :
PHP Code:
<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
PHP Code:
<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
PHP Code:
<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:) |
More Information