PDA

View Full Version : Need image overlay Help!


dreamDUDE
04-07-2011, 10:35 PM
Hey Guys and Gals,

I was hoping someone could help me out here. I have been trying to figure this out for the last 24 hours and I'm at a stand still. I'm sure it will be something simple for you guys.

My Problem:

I am creating a website and I need an image specifically that's a video box (I have that part set up already) to overlay another image, so that when it is clicked. The video box action takes effect.

I need the image in a specific position, I will illustrate with a picture attached.

Any help you guys can provide would benefit me greatly.

Thanks.

johnMoss
04-09-2011, 09:17 PM
You have a couple options:
1) The image above needs to be a background of it's own div. Then create another div separate and outside of this one. Insert your video into the second div and use CSS negative top margins to push it up and over the background image. Tinker with your margins & you'll get it just right.

2) If you go look at the flash forum here, the thread labeled flash led to a small litany of resource sites. Amongst them was this one:
http://activeden.net/

You should check out that link. There's a dirt cheap flash program that turns the pages as in an actual page flip, and you can insert video onto the pages. It's pretty cool & you may like it for what you're trying to do...

dreamDUDE
04-12-2011, 03:48 AM
See I'm not too sure on how to do that.

This is my page here:

http://celloh.webs.com/tmp/Home.html

I'm still learning when it comes to coding and have been having trouble with div's and all.

That activeden site is great! I will be using it at some point but for this project I just need the video on the right page.

If you could help me a bit further after looking at that code it would be truly appreciated.

Thanks, seriously.

dreamDUDE
04-19-2011, 08:41 PM
I have made some progress!

BUT

First off I do thank you for your suggestions but alas I am a noob at this.

I tried recoding of sorts in a way that was much easier for me, as well as changed some design ideas around.


If you check here:


http://celloh.webs.com/tmp/Home.html


You can see I am soo close to getting what I need. I cant get the video box to move over the way I want it too.


I have been reading up on positioning in divs but i think something in my code is stopping me and I am completely stumped.


IF ANYONE CAN HELP, PLEASE DO!


I have been trying to figure this out coming up on a month now and I just cant seem to get it right.


I am going to slice up the other buttons in photoshop as that seems simple enough to do (I found a video tutorial)


Again though, I do need help trying to position the videobox (the two guys in the screen cap) on the right page of the book with the current code I have or something that is easily editable.


I know I am asking alot here but if someone could guide me I would be extremely grateful. I am reading up as much as I can to further my knowledge on this but like I said before I am STUMPED!


Thanks for taking the time out to read this all!


-dreamdude

gentleone
04-19-2011, 10:54 PM
Because of your design and how you want to place your content in it requires really some coding skills. I think you start to run before you even learn to walk. Start at the beginning which is the basics of HTML and CSS. Some keywords for you are:
CSS box modal,
normal flow,
floats,
block level elements,
inline elements.

If you start to understand these basics then you can build simple layouts. If you're getting good at it, then you can start thinking to tackle a design like you have now to get it cross browser.

johnMoss
04-19-2011, 10:55 PM
There are a whole host of things that need to be addressed but to at least get you to what you're after:

1) go into your page and get rid of these attributes to apDiv1:

position:relative;
left:363px;
top:93px;
width:528px;
height:272px;
z-index: 2"


2) Add #apDiv1 to your videobox css page and then use proper code to position it. You can play with the margin settings, even using negative values, to put it precisely where you want it. Which is still a slap-happy approach to doing it, but it's effective...

left:363px; should be margin-left:363px; for example.
You can then use a negative margin-top setting to put it right over the page where you want it.
I know you're fired up to get this puppy up & running, but you really need to stop for two shakes and get at least a modicum of training in what you're doing if you want to use dreamweaver. I know also that's not what you want to hear but it's fair to say you'll wind up digging a deeper hole for yourself and don't feel bad, I most certainly have been down that path.