2011-09-24 95 views
0

有問題的佈局CSS定位是在這裏:http://www.davedaranjo.com/media.html的jQuery插件元素

這可能是與CSS標準定位的問題,但我想盡定位結合我能想到的實現這一點:

http://i.imgur.com/y1qRU.jpg

每次我試圖移動任何地方播放器的網頁上,它把自己定位在底部,甚至低於頁腳圖像。我甚至試過把內容與在左側TD中的鏈接和視頻,並在右側的播放器的表,但表中的玩家不會連坐。我也嘗試了一些定位標籤中的CSS文件,並在最好的,如果我給它一個固定的位置,它會移動,但由於佈局的其餘部分是不固定的(而不是對的,其餘網站),這不是一個可行的解決方案。

我意識到這可能是一些基本的東西,我很想念這裏,但是任何建議將是非常有益的。從插件下載文件中的css中有很多定位,我似乎無法破譯它們。

謝謝!

回答

0

你必須把你的JavaScript你想在頁面中的位置。 我想你可以像這樣定位它。

<div id="left"> 
<img src="media/MediaTextBanner.jpg" alt="" width="596" height="58"> 
<table> 
<tr> 
<td> 
<img src="media/Transcriptions.jpg" width="547" height="39"> 
<br><a href="media/mmbtab.html">TABLATURE: Me &amp; My Bass Guitar: Victor Wooten</a> 
<br><a href="media/Circles - Gwizdala - Bass Parts.pdf"> Circles: Janek Gwizdala - Bass Notes</a> 

<br><a href="media/That Stern Look - Gwizdala - Bass Parts.pdf">That Stern Look: Janek Gwizdala - Bass Notes</a> 
<br><a href="media/flyback.html">Fly Back [2009 Redux]: Dave D'aranjo/The Ocean Band</a> 
<p> 
<img src="media/VideoBanner.jpg" width="547" height="39"> 
<p> 
<iframe src="http://player.vimeo.com/video/21755863?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=0" width="398" height="224" frameborder="0"></iframe> 
<br><a href="http://vimeo.com/darangatang" target="_blank"><img src="contact/thumbs/Vimeo.jpg" width="90" height="81"></a> 
<a href="http://www.youtube.com/profile?user=DaveDaranjo" target="_blank"><img src="contact/thumbs/YouTube.jpg" width="90" height="81"></a> 
<br><img src="media/OceanBanner.jpg" width="547" height="39"> 
<br><a href="http://www.myspace.com/oceanband" target="_blank">The Ocean Band - MySpace</a> 

<br><a href="http://www.youtube.com/profile?user=theoceanbandsg" target="_blank">The Ocean Band - YouTube</a> 
<br><a href="http://www.cdbaby.com/Artist/TheOceanBand" target="_blank">The Ocean Band - CDBaby.com </a> 
</p> 
</td> 
<td position: relative; vertical-align: top;><center> 
<div id="title" align="right"></div></center> 
</td> 
</tr> 
</table> 

<center> 
<img src="/ambigram.jpg" alt="" width="113" height="61"><br> 
    <font color="CC0000"> &copy; 2011 DaveDaranjo.com<br> 

    All Rights Reserved.</font></p> 
    </center> 
</div> 

<div id="right"> 
<script type="text/javascript"> 
     $(document).ready(function(){ 
      var description = 'Solo bass work, videos, and songs from bands. '; 

         $('body').ttwMusicPlayer(myPlaylist, { 
       autoPlay:false, 
       tracksToShow:12, 
       description:description, 
       jPlayer:{ 
        swfPath:'../js' //You need to override the default swf path any time the directory structure changes 
       } 
      }); 
     }); 

    </script> 
</div> 

這會將您想要的文本和圖像置於一個框中,並將播放器置於另一個框中。 你現在有在箱子定位到浮動框,使他們能夠在CSS旁邊的海誓山盟:

#left { 
    float: left; 
} 

#right { 
    float: right; 
} 

應該這樣做!

0

我檢查你的源代碼,你仍然可以使用對齊HTML屬性。該屬性已被棄用。它不適用於HTML 4.01或XHTML 1.0,也不適用於HTML 5。

而是使用CSS規則做你的定位。使用文本對齊,填充,邊距,浮動,清除和定位規則,讓您的HTML元素顯示在您希望他們在頁面上的位置。

來源:http://www.w3schools.com/tags/att_div_align.asp