Inserting Reverbnation Widget on site - using CSS to place it
I've run into this problem before and couldn't figure it out, but it's basically just trying to insert two different embeds (youtube embed and a Reverbnation widget) and have them behave together.
I can get them to sit on top of each other... but when I insert them they take up the whole width of the page. I know there's gotta be a way to limit the width of the widget right?
Here's the code for the page - real simple
<!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!im开发者_JAVA技巧portant; 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" /> <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>
I feel like such an idiot when I post here because I can never figure out how to format the code so it looks readable.
I appreciate any help you can give. I read through the W3 school tut and everytime I think I get it...i don't and my page disappears.
Thanks guys! have a blessed one!
CCS columns did the job for me! Just defined a #widgets div for the elements and tweaked their widths once they were in there. Don't forget the 'moz' and 'webkit' bits so it works on all browsers.
EMBED your Reverbnation songs using this code:
[gigya src="http://cache.reverbnation.com/widgets/swf/40/pro_widget.swf"
flashvars="id=artist_######&posted_by=&skin_id=PWAS1009&
font_color=12ff98&auto_play=false&shuffle=false"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowNetworking="all" allowfullscreen="true" wmode="transparent"
quality="best" width="100%" height="300" ]
REPLACE ###### in the "id=artist_######&" segment with your own user id code which may be found at any of your personal song pages as seen in the location bar of your browser: reverbnation.com/control_room/artist/######
You can also change the style of your widget by changing the number after "&skin_id=PWAS" to any number between 1000 and 1020. Experiment to see what you get.
Ah, you just want the quote widget to be in line with the YouTube video? In that case, refer to this jsfiddle. Basically all I did was set embeds, objects and iframes to display inline (to stay in line with each other), got rid of the <h1> tag you had, since it's a block object, which would cause a line break, as well as deleted a <br /> tag, and moved the quote widget above the YouTube video in the HTML.
加载中,请稍侯......
精彩评论