Позиционирование CSS для элемента плагина jquery

Рассматриваемый макет находится здесь: http://www.davedaranjo.com/media.html

Вероятно, это проблема стандартного позиционирования с помощью css, но я пробовал каждую комбинацию позиционирования, которую только мог придумать, чтобы добиться этого:

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

Каждый раз, когда я пытаюсь переместить проигрыватель в любое место на странице, он позиционируется внизу, даже ниже изображения нижнего колонтитула. Я даже пытался поместить контент в таблицу со ссылками и видео слева, а плеер справа, но плеер даже не сидит в таблице. Я также пробовал несколько тегов позиционирования в файле css, и в лучшем случае он будет двигаться, если я дам ему фиксированное положение, но поскольку остальная часть макета не фиксирована (и не находится на остальной части сайт), это не жизнеспособное решение.

Я понимаю, что это, вероятно, что-то фундаментальное, что мне здесь не хватает, но любые предложения были бы чрезвычайно полезны. В css много позиционирования из файлов загрузки плагинов, и я не могу их все расшифровать.

Благодарю вас!


plugins html jquery css positioning
person Kimbie P.    schedule 24.09.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я проверил ваш исходный код, и вы все еще используете атрибут align HTML. Этот атрибут устарел. Он не работает в HTML 4.01 или XHTML 1.0, а также не работает в HTML 5.

Вместо этого используйте правила CSS для выравнивания. Используйте правила выравнивания текста, отступов, отступов, плавающих элементов, очистки и позиционирования, чтобы ваши HTML-элементы отображались там, где вы хотите, на странице.

Источник: http://www.w3schools.com/tags/att_div_align.asp

person Mark Kramer    schedule 24.09.2011

arrow_upward
0
arrow_downward

вы должны поместить свой 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;
}

Это должно сделать это!

person Klingstedt    schedule 24.09.2011