Вставка Reverbnation Widget на сайт - используя CSS для его размещения - PullRequest
0 голосов
/ 01 августа 2011

Я сталкивался с этой проблемой раньше и не мог понять ее, но в основном это просто попытка вставить две разные встраивания (встраивание на YouTube и виджет Reverbnation) и заставить их вести себя вместе.

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

Вот код для этой страницы - очень просто

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://www.w3.org/2005/10/profile">
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type" />
<link rel="icon" type="image/png" href="http://static.tumblr.com/iorl8zv/yQxlnm3r2/favicon.png" />
<title>Official Pissing Graffiti--Rock-Industrial-Meaning</title>
<script type="text/javascript">


  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24167987-1']);
  _gaq.push(['_setDomainName', 'pissinggraffiti.com']);
  _gaq.push(['_setAllowHash', 'false']);
  _gaq.push(['_trackPageview']);


  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();


</script>
</head>
<body style="background-color: #666666; background-image: url('http://static.tumblr.com/iorl8zv/Me9ljgnyz/pgbgtumb.gif')">

<h1><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="180" height="150"><param name="movie" value="http://cache.reverbnation.com/widgets/swf/43/pro_widget.swf?id=artist_470177&posted_by=&skin_id=PWPS4008&font_color=FFFFFF"></param><param name="allowscriptaccess" value="always"></param><param name="allowNetworking" value="all"></param><param name="allowfullscreen" value="true"></param><param name="wmode" value="transparent"></param><param name="quality" value="best"></param><embed src="http://cache.reverbnation.com/widgets/swf/43/pro_widget.swf?id=artist_470177&posted_by=&skin_id=PWPS4008&font_color=FFFFFF" type="application/x-shockwave-flash" allowscriptaccess="always" allowNetworking="all" allowfullscreen="true" wmode="transparent" quality="best" width="180" height="150"></embed></object><br/>
<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://www.reverbnation.com/widgets/trk/43/artist_470177//t.gif" /></h1>
<div style="color: #ffb02e"><strong>
<center>New 8-track SAXAPHONE EP, by Pissing Graffiti</center></strong></div>
<div style="text-align: center">
<iframe width="560" height="349" src="http://www.youtube.com/embed/rn1SIXPZIgM" frameborder="0" allowfullscreen=""></iframe></div><!--
<div style="text-align: center;"><a href="http://music.pissinggraffiti.com"><img alt="" src="http://static.tumblr.com/iorl8zv/vIXlngmey/cover2.jpg" /></a></div-->
<div style="color: #ffb02d">
<center><font size="6">Free EP</font></center></div>
<div style="color: #ffb02e">
<center>Join the mailing list and immediately receive a link to a .zip file containing all 8 tracks with cover art and metadata.</center>
<center><br />
</center>
<center>
<div name="holder" style="border: 3px solid #FFB02E; width: 400px">
<div name="header" style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold; text-transform: uppercase; padding-left: 4px; padding-top: 8px; text-align: left; color: #FFB02E!important; line-height: 12px">
      Join the mailing list</div>
<div style="text-align: center">
<form action="http://www.reverbnation.com/controller/fan_reach/add_email_direct/470177" target="_new" method="post"><span style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 14px; color: #fff !important">
          Email Address: </span><input name="email" type="text" style="width: 220px" />&nbsp;&nbsp;<input name="Submit" style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 9px; color: #333 !important; background-color: #FFF !important" value="SUBMIT" type="submit" /><br />
<br /></form></div></div></center>
<div><a style="color: #ffb02e" "="" href="http://blog.pissinggraffiti.com"></a>
<center><a style="color: #ffb02e" "="" href="http://blog.pissinggraffiti.com">Head over to the blog.</a>or <a style="color: #ffb02e" href="http://blog.pissinggraffiti.com/socialize">See what we're all about.</a></center></div></div>
</body>
</html>

Я чувствую себя таким идиотом, когда я публикую здесьпотому что я никогда не могу понять, как отформатировать код, чтобы он выглядел читабельным.

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

Спасибо, ребята!благословенна!

Ответы [ 3 ]

1 голос
/ 04 февраля 2012

Колонки CCS сделали всю работу за меня! Просто определил div #widgets для элементов и изменил их ширину, как только они там оказались. Не забывайте биты moz и webkit, чтобы они работали во всех браузерах.

1 голос
/ 11 января 2013

ВСТАВЬТЕ свои песни Reverbnation, используя этот код:

[gigya src="http://cache.reverbnation.com/widgets/swf/40/pro_widget.swf" 
    flashvars="id=artist_######&amp;posted_by=&amp;skin_id=PWAS1009&amp;
    font_color=12ff98&amp;auto_play=false&amp;shuffle=false" 
    type="application/x-shockwave-flash" allowscriptaccess="always"
    allowNetworking="all" allowfullscreen="true" wmode="transparent" 
    quality="best" width="100%" height="300" ]

REPLACE ###### в сегменте "id=artist_######&amp;" с вашим собственным идентификатором пользователя, который можно найти на любой из ваших личных страниц с песнями, как показано в строке адреса вашего браузера: reverbnation.com/control_room/artist/######

Вы также можете изменить стиль своего виджета, изменив число после "&amp;skin_id=PWAS" на любое число от 1000 до 1020. Эксперимент, чтобы увидеть, что вы получаете.

0 голосов
/ 02 августа 2011

Ах, вы просто хотите, чтобы виджет цитат соответствовал видео на YouTube? В этом случае обратитесь к this jsfiddle . По сути, все, что я сделал, это установил embed s, object s и iframe s для отображения inline (чтобы оставаться на одной линии друг с другом), избавился от имеющегося у вас тега <h1>, так как это блочный объект, Это может привести к разрыву строки, а также к удалению тега <br /> и перемещению виджета цитаты над видео YouTube в HTML.

...