N-Bomb(Nerd) Posted January 23, 2012 Share Posted January 23, 2012 Hello, I mainly work with php and I don't know much about css (I can understand some of the basics), but I need something for a project that I'm working on. I basically have this div that's has the following size: height: 398px; width: 650px; Within that div I'm trying to create an example mockup of a video player.. almost like something you would see if you embedded a YouTube video. Just to show you how bad I am at css -- here's the code I've been trying to get to work now for a few hours (4++ hours): <html> <head> <style type="text/css"> #video_player #background { float: left; position: absolute; } #video_player #title { position: relative; background: url("http://i.imgur.com/ms7ho.png") repeat; height: 35px; width: 100%; } #video_player #title span { float: left; position: absolute; color: white; padding-left: 15px; padding-top: 6px; padding-bottom: 5px; font: 16px arial,sans-serif; } #video_player #spinner { position: absolute; height: 100%; width: 100%; } #video_player #controls { height: 35px; width: 100%; } </style> </head> <body> <div id="video_player" style="border: #d2d2d2 1px solid; width: 650px; height: 398px;"> <div id="background"><img src="http://i.imgur.com/otRCm.jpg" width="630px" height="398px" /></div> <div id="title"><span>Rihanna - Only Girl (In The World)</span></div> <div id="spinner"></div> <div id="controls"><span>the video player controls go here at the bottom</span></div> </div> <script type='text/javascript' src="http://fgnass.github.com/spin.js/spin.js"></script> <script type='text/javascript'> var opts = { lines: 12, // The number of lines to draw length: 7, // The length of each line width: 4, // The line thickness radius: 20, // The radius of the inner circle color: '#000', // #rgb or #rrggbb speed: 1.5, // Rounds per second trail: 60, // Afterglow percentage shadow: true // Whether to render a shadow }; var target = document.getElementById('spinner'); var spinner = new Spinner(opts).spin(target); </script> </body> </html> As you can tell.. I can't quite get everything to align properly in in their correct "layers" (not sure of the correct term.. I think "overlap correctly" might of worked better there). I've been trying to use firefox, chrome, and ie to text cross-compatibility, but it's turning out to be hard. The spinner script is supposed to add the spinner into the middle of the div.. so I royally messed that up. Ideally, at the bottom of the video player I want to have an example set of controls, but I'm just wondering how hard that would be to incorporate. I would really appreciate some help on this. I'm a total noob when it comes to css. :'( Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.