chrisj1963
asked on
Wordpress CSS issue with flowplayer - please help
Hi -
I have this wordpress page here: http://soniclibrarian.net/wp2010/player2/
There is css at the top that controls the attributes of the player.
Notice that the the American Idol Image and the player button are out of position (the image is not aligned at the top of the video space. I have attached the player php page (which includes the CSS)
Can someone please help me position the image and player button properly?
Thanks
I have this wordpress page here: http://soniclibrarian.net/wp2010/player2/
There is css at the top that controls the attributes of the player.
Notice that the the American Idol Image and the player button are out of position (the image is not aligned at the top of the video space. I have attached the player php page (which includes the CSS)
Can someone please help me position the image and player button properly?
Thanks
<?php /* Template Name: Test3
*/ ?>
<?php
/* Short and sweet */
define('WP_USE_THEMES', false);
require('./wp-blog-header.php');
?>
<?php get_header(); ?>
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="/js/jquery-1.4.2.min.js"></script>
<script src="/js/jquery-ui-1.8.4.custom.min.js"></script>
<script src="/js/flowplayer-3.2.2.min.js"></script>
<script src="/js/flowplayer.playlist-3.0.8.js"></script>
<script src="/js/jquery.jplayer.min.js"></script>
<meta charset="UTF-8" />
<title>Sonic Librarian : Great Music and Licensing for Television and Film | Music Licensing</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://soniclibrarian.net/wp2010/wp-content/themes/twentyten/style.css" />
<link rel="pingback" href="http://soniclibrarian.net/wp2010/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="Sonic Librarian : Great Music and Licensing for Television and Film » Feed" href="http://soniclibrarian.net/wp2010/feed/" />
<link rel="alternate" type="application/rss+xml" title="Sonic Librarian : Great Music and Licensing for Television and Film » Comments Feed" href="http://soniclibrarian.net/wp2010/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="Sonic Librarian : Great Music and Licensing for Television and Film » Home Comments Feed" href="http://soniclibrarian.net/wp2010/home/feed/" />
<link rel='stylesheet' id='contact-form-7-css' href='http://soniclibrarian.net/wp2010/wp-content/plugins/contact-form-7/styles.css?ver=2.3.1' type='text/css' media='all' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://soniclibrarian.net/wp2010/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://soniclibrarian.net/wp2010/wp-includes/wlwmanifest.xml" />
<link rel='index' title='Sonic Librarian : Great Music and Licensing for Television and Film' href='http://soniclibrarian.net/wp2010/' />
<link rel='next' title='About' href='http://soniclibrarian.net/wp2010/about-2/' />
<meta name="generator" content="WordPress 3.0.1" />
<link rel='canonical' href='http://soniclibrarian.net/wp2010/' />
<style type="text/css">
body { background-color: #020202; background-image: url('http://soniclibrarian.net/wp2010/wp-content/uploads/2010/08/lights2.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; }
</style>
<link rel="stylesheet" type="text/css" href="/css/playlist.css"/>
<link type="text/css" href="/css/ui-darkness/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
<style>
/* container has a background image */
a.player {
display:block;
width:400px;
height:300px;
text-align:center;
color:#fff;
text-decoration:none;
cursor:pointer;
background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.15), rgba(6, 6, 6, 0.15)) transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgba(73, 122, 173, 0.15), endColorstr=rgba(6, 6, 6, 0.15)); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(73, 122, 173, 0.15)), to(rgba(6, 6, 6, 0.15))); /* for webkit browsers */
-moz-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
-webkit-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
}
a.player:hover {
background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.4), rgba(6, 6, 6, 0.4)) transparent;
}
/* splash image */
a.player img {
border:0 none;
}
.clip-box {
padding-left: 20px;
padding-right: 20px;
width: 245px;
}
a.player {
margin-top:0px;
}
.clips a{
display: block;
height: 69px;
color: #b3b3b3;
text-decoration: none;
cursor: pointer;
background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.15), rgba(6, 6, 6, 0.15)) transparent;
-moz-box-shadow:0 0 30px rgba(100, 118, 173, 0.5);
-webkit-box-shadow:0 0 30px rgba(100, 118, 173, 0.5);
box-shadow: 0 0 30px rgba(100, 118, 173, 0.5);
padding-bottom: 6px;
outline: none;
}
.clip {
display: block;
height: 69px;
color: white;
text-decoration: none;
cursor: pointer;
background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.15), rgba(6, 6, 6, 0.15)) transparent;
-moz-box-shadow:0 0 30px rgba(100, 118, 173, 0.5);
box-shadow:0 0 30px rgba(100, 118, 173, 0.5);
-webkit-box-shadow:0 0 30px rgba(100, 118, 173, 0.5);
padding-bottom: 6px;
}
#player_container {
position:relative;
border: 0px solid darkgray;
padding:3px;
background-color: #;
height: 20px;
margin-left: 5px;
}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding:0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0px;}
#icons .widget-area .ui-widget ul ul {margin-left:.1em;}
ul#icons #volume-min {
margin:2px 140px 2px 364px;
}
#sliderVolume {
position:absolute;
top:30px;
left:480px;
width:120px;
height:.4em;
}
#sliderVolume .ui-slider-handle {
height:.8em;
width:.8em;
}
#bars_holder {
position:absolute;
top:8px;
left:57px;
width:135px;
}
#sliderPlayback .ui-slider-handle {
width:.6em;
}
#loaderBar.ui-progressbar {
height:.2em;
background-color: #019240;
border: .1em solid #b3b3b3;
}
#jplayer_playlist
{
padding-top: 10px;
margin-left: 8px;
}
.jplayer_playlist_current {
background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.3), rgba(6, 6, 6, 0.3)) transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgba(73, 122, 173, 0.3), endColorstr=rgba(6, 6, 6, 0.3)); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(73, 122, 173, 0.3)), to(rgba(6, 6, 6, 0.3))); /* for webkit browsers */
}
#jplayer_playlist a {
color: #b3b3b3;
text-decoration: none;
}
#jplayer_playlist a:hover {
color:#0d88c1;
}
#jplayer_playlist a.jplayer_playlist_current {
color:#0d88c1;
}
#primary a {
outline: none;
}
#primary a:hover {
text-decoration: none;
}
#jplayer_playlist ul {
color: #666;
list-style: square inside;
}
</style>
<script>
$(function() {
// setup player without "internal" playlists
$f("player2", "/swf/flowplayer-3.2.2-0.swf", {
clip: {baseUrl: 'http://soniclibrarian.net/splash_media/'}
// use playlist plugin. again loop is true
}).playlist("div.petrol", {loop:true});
var global_lp = 0;
var playItem = 0;
// Local copy of jQuery selectors, for performance.
var jpPlayTime = $("#jplayer_play_time");
var jpTotalTime = $("#jplayer_total_time");
$("#jquery_jplayer").jPlayer({
ready: function() {
displayPlayList();
playListInit(false); // Parameter is a boolean for autoplay.
},
customCssIds: true
})
.jPlayer("onProgressChange", function(lp,ppr,ppa,pt,tt) {
var lpInt = parseInt(lp);
var ppaInt = parseInt(ppa);
global_lp = lpInt;
$('#loaderBar').progressbar('option', 'value', lpInt);
$('#sliderPlayback').slider('option', 'value', ppaInt);
})
.jPlayer("onSoundComplete", function() {
playListNext();
});
$("#pause").hide();
function showPauseBtn()
{
$("#play").fadeOut(function(){
$("#pause").fadeIn();
});
}
function showPlayBtn()
{
$("#pause").fadeOut(function(){
$("#play").fadeIn();
});
}
$("#jplayer_previous").click( function() {
playListPrev();
$(this).blur();
return false;
});
$("#jplayer_next").click( function() {
playListNext();
$(this).blur();
return false;
});
function displayPlayList() {
$("#jplayer_playlist ul").empty();
for (i=0; i < myPlayList.length; i++) {
var listItem = (i == myPlayList.length-1) ? "<li class='jplayer_playlist_item_last'>" : "<li>";
listItem += "<a href='#' id='jplayer_playlist_item_"+i+"' tabindex='1'>"+ myPlayList[i].name +"</a></li>";
$("#jplayer_playlist ul").append(listItem);
$("#jplayer_playlist_item_"+i).data( "index", i ).click( function() {
var index = $(this).data("index");
if (playItem != index) {
playListChange( index );
} else {
$("#jquery_jplayer").jPlayer("play");
}
$(this).blur();
return false;
});
}
}
function playListInit(autoplay) {
if(autoplay) {
playListChange( playItem );
} else {
playListConfig( playItem );
}
}
function playListConfig( index ) {
$("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current").parent().removeClass("jplayer_playlist_current");
$("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").parent().addClass("jplayer_playlist_current");
playItem = index;
$("#jquery_jplayer").jPlayer("setFile", myPlayList[playItem].mp3, myPlayList[playItem].ogg);
}
function playListChange( index ) {
playListConfig( index );
$("#jquery_jplayer").jPlayer("play");
}
function playListNext() {
var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
playListChange( index );
}
function playListPrev() {
var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
playListChange( index );
}
$("#play").click(function() {
$("#jquery_jplayer").jPlayer("play");
showPauseBtn();
return false;
});
$("#pause").click(function() {
$("#jquery_jplayer").jPlayer("pause");
showPlayBtn();
return false;
});
$("#stop").click(function() {
$("#jquery_jplayer").jPlayer("stop");
showPlayBtn();
return false;
});
$("#player_progress_ctrl_bar a").live( "click", function() {
$("#jquery_jplayer").jPlayer("playHead", this.id.substring(3)*(100.0/global_lp));
return false;
});
// Slider
$('#sliderPlayback').slider({
max: 100,
range: 'min',
animate: true,
slide: function(event, ui) {
$("#jquery_jplayer").jPlayer("playHead", ui.value*(100.0/global_lp));
}
});
$('#loaderBar').progressbar();
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
</head>
<body class="home page page-id-12 page-template page-template-homecustom-php">
<!-- #header -->
<div id="container">
<!-- configure entries inside playlist using standard HTML -->
<div class="clip-box clips petrol" style="float:left">
<!-- single playlist entry -->
<a href="american-idol.mp4" class="first">
<div style="float:left;padding-right:6px;"><img src="/images/splash/am_idol.png"/></div>
SHOW: American Idol<br/>
CLIENT: FOX<br/>
SONG: "Generation Hope"
</a>
<a href="greys-scarletina-taikosis.flv" class="first">
<div style="float:left;padding-right:6px;"><img src="/images/splash/grey1.png"/></div>
SHOW: Greys' Anatomy<br/>
CLIENT: ABC<br/>
SONG: "Scarletina, Taikosis"
</a>
<a href="bambi.flv" class="first">
<div style="float:left;padding-right:6px;"><img src="/images/splash/bambi.png"/></div>
SHOW: Bambi Film Trailer
<br/>
SONG: "Winners Circle, With Heart & Soul, A New Beginning"
</a>
<a href="bigloser1.flv" class="first">
<div style="float:left;padding-right:6px;"><img src="/images/splash/bigloser1.png"/></div>
SHOW: Biggest Loser<br/>
CLIENT: NBC<br/>
SONG: "Closer To You"
</a>
</div>
<!-- player container and a splash image (play button) -->
<a class="player plain" id="player2" style="float:left">
<img src="/images/idol_play.jpg" />
</a>
<!-- let rest of the page float normally -->
<br clear="all"/>
</div>
<div id="primary" class="widget-area" role="complementary">
<!-- <li id="linkcat-3" class="widget-container widget_links"><h3 class="widget-title">SEARCH OUR MUSIC</h3>
<ul class='xoxo blogroll'>
<li><a href="http://www.soniclibrarian.net/search/" title="Click here to use our custom search tool.">CLICK TO SEARCH</a></li>
</ul>
</li> -->
<!-- search button -->
<a class="btnContinue" href="http://www.soniclibrarian.net/search">SEARCH MUSIC NOW</a>
<script>
var myPlayList = [
{name:"Resurrection Connection",mp3:"http://soniclibrarian.net/splash_media/SL056_01 Resurrection Connection.mp3"},
{name:"Firefly Mist",mp3:"http://soniclibrarian.net/splash_media/SL057_01 Firefly Mist.mp3"},
{name:"Mr Hyde",mp3:"http://soniclibrarian.net/splash_media/SL047_04 Mr Hyde .mp3"},
{name:"Castles Of Wonderment",mp3:"http://soniclibrarian.net/splash_media/SL050_07 Castles of Wonderment.mp3"},
{name:"Momentous Celebration",mp3:"http://soniclibrarian.net/splash_media/SL044_05 Momentous Celebration.mp3"},
{name:"Chump Change",mp3:"http://soniclibrarian.net/splash_media/SL002_02 ChumpChange.mp3"},
{name:"Scarletina",mp3:"http://soniclibrarian.net/splash_media/SL011_02 Scarletina.mp3"},
{name:"Reign Of Kayra",mp3:"http://soniclibrarian.net/splash_media/SL025_01 ReignOfKayra.mp3"},
{name:"Frumunda Thunda",mp3:"http://soniclibrarian.net/splash_media/SL031_02 FrumundaThunda.mp3"},
{name:"Pop The Hood",mp3:"http://soniclibrarian.net/splash_media/SL029_18 PopTheHood.mp3"},
{name:"Ding Dong",mp3:"http://soniclibrarian.net/splash_media/SL053_02 Ding Dong.mp3"},
];
</script>
<p> </p>
<div id="jquery_jplayer"></div>
<div id="player_container">
<ul id="icons" class="ui-widget ui-helper-clearfix">
<li id="play" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span></li>
<li id="pause" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-pause"></span></li>
<li id="stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span></li>
</ul>
<!-- Sliders -->
<div id="bars_holder">
<div id="sliderPlayback"></div>
<div id="loaderBar"></div>
</div>
</div>
<div id="jplayer_playlist">
<ul><!-- The function displayPlayList() uses this unordered list --></ul>
</div>
<div style="display:none;">
<li id="text-5" class="widget-container widget_text"><h3 class="widget-title">RECENT CREDITS</h3> <div class="textwidget"><p>The Apprentice<br />
Law & Order<br />
Lost<br />
Who Do You Think You Are?<br />
The Bachelor<br />
Grey's Anatomy<br />
The Office<br />
24<br />
Bones<br />
Medium<br />
Chuck<br />
Modern Family<br />
NCIS<br />
The Biggest Loser<br />
The Curious Case of Benjamin Button<br />
Extreme Makeover</p>
</div>
</li>
</div>
</div><!-- #primary .widget-area -->
</div> <!-- #main -->
<div id="footer" role="contentinfo">
<div id="colophon">
<div id="footer-widget-area" role="complementary">
<div id="first" class="widget-area">
<ul class="xoxo">
<li id="text-6" class="widget-container widget_text">
<h3 class="widget-title">ABC PROMOS</h3>
<div class="textwidget">
<p>Lost : Grey's Anatomy : Modern Family : Desperate Housewives </p>
<h3 class="widget-title">FOX PROMOS</h3>
<p>American Idol : House : 24 : The Simpsons </p>
<h3 class="widget-title">CBS PROMOS</h3>
<p>CSI : Survivor : NCIS : Medium : The Big Bang Theory </p>
<h3 class="widget-title">NBC PROMOS</h3>
<p>Biggest Loser : ER : 30 Rock : Heroes : Today Show</p>
</div>
</li>
</ul>
</div><!-- #first .widget-area -->
<div id="second" class="widget-area">
<ul class="xoxo">
<li id="text-7" class="widget-container widget_text">
<h3 class="widget-title">TRAILERS</h3>
<div class="textwidget">
<p>10,000BC : Cinderella : The Curious Case Of Benjamin Button : Rambo : Kung Fu Panda : Akeelah And The Bee : The Little Mermaid</p>
<h3 class="widget-title">IN SHOW</h3>
<p>The Office : The Oprah Winfrey Show : 48 Hours Mystery : Pimp My Ride : NBC Primetime Preview : Keeping Up With The Kardashians : Real World/Road Rules : Diet Tribe</p>
<h3 class="widget-title">CONTACT</h3>
<p><a href="mailto:arthur@soniclibrarian.com">arthur@soniclibrarian.com</a> / <a href="mailto:erik@soniclibrarian.com">erik@soniclibrarian.com</a>
<br />
818. 634. 4977 / © 2010 by Sonic Librarian. ARR.
</p>
</div>
</li>
</ul>
</div><!-- #second .widget-area -->
</div><!-- #footer-widget-area -->
<!-- <div id="site-info">
<a href="http://soniclibrarian.net/wp2010/" title="Sonic Librarian : Great Music and Licensing for Television and Film" rel="home">
Sonic Librarian : Great Music and Licensing for Television and Film </a>
</div> --> <!-- #site-info -->
<!--
<div id="site-generator">
<a href="http://wordpress.org/"
title="Semantic Personal Publishing Platform" rel="generator">
Proudly powered by WordPress. </a>
</div> --> <!-- #site-generator -->
</div><!-- #colophon -->
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>
<?php get_footer(); ?>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER