Resizing div container - html

I'm fiddling around with this 3D object viewer for my website, I want to embed the viewer in my website, but it pops up on the page way too big.. Can some one tell me how I change the scale of this div?
<div id="fyu_9y1p82ic59" class="fyu_container fyu_vertical fyu_nomax"></div><script src="https://fyu.se/embed?v=3.0"></script><script>FYU.add("9y1p82ic59", "fyu_9y1p82ic59", {autoplay:1});</script>
Now I tried changing the div height, but this doesn't change the size of the actual player, it just cuts off the entire bottom part of it. How do I fix this?
Click here for picture

Related

Adobe Edge Animate: Is there a way to use CSS media queries to resize an image?

I'm using Adobe Edge Animate and I'm really having trouble with all the different screen sizes and resolutions. I see that Adobe is coming out with new products which may address this issue. Basically all I'm tryng to do is have an image display (like a banner for example) that fills the width of the user's screen. I see the following questions, but answers are old and I know that there has been a lot of development in this area. Any ideas greatly apprciated.
Stackoverflow questions
From the splash screen. In the Properties tab change the switch next to the width to make it 100%. Select the Max W parameter and change this to too. All these tweaks will make the layout responsive. Next drag the image onto the stage and position in the top-left corner. In Properties click on Use Presets for Responsive Layout and choose the Center Background Image option, then Apply. This means the image will stay central whenever the stage morphs. Drag the bottom-right corner handle so the image fits over the entire background. Notice the image doesn’t scale or stretch but stays in the centre. In the Position and Size tab is an expand button; click this and add a Max W of (how many px your image is). Change the width to 100% and press Enter. It will jump right back to 75% but it has accepted the change. Click on the resize marker and drag to the left to see what happens when the stage is resized to a smaller layout. As you can see, the background is clipped but the image resizes to fit.
Here is a link to the tutorial I think this will better answer your question if you do this tutorial. http://www.webdesignermag.co.uk/tutorials/create-a-responsive-animation-with-adobe-edge-animate/

How do I make the top portion of my page remain a different color than the body even when I zoom-in or out?

I've seen similar questions to do this but so far I can't find any that address the obvious. On my website the top portion is a different color than the body which I created using a div and setting a color to that div. Two simple questions.
How do I get that div to fill the entire portion of the header of the screen regardless if I zoom in or out?
And how do I keep my title and menu bar from falling out when I zoom-in the browser?
I have gotten close so many times but there is always a compromise. Either the div fills the entire header but when I zoom in the text falls out and causes the div to wrap around the page or the menu wraps and it's just gotten frustrating. I hope what I wrote made sense but if not here is a clear example of what I want to accomplish. http://carlodiego.businesscatalyst.com/index.html#home
Notice on this page that if you zoom in or out the top portion remains filled with the same color.
How do I get that div to fill the entire portion of the header of the
screen regardless if I zoom in or out?
simply make the add css with width:100% && margin:auto

<div> with FLASH content covering entire screen | ENABLE CONTENT BELOW?

I am wondering it its possible to have a flash file contained in a <div> that covers the entire screen. I have already done that but my question is...
Can you still have the flash content in the <div> and have it transparent and use the html buttons below the <div>?
I would like to keep the flash layer active all the time but how can I use the buttons below? I can't even copy or highlight text.
Thanks for your time.
If the div covers the whole screen are the buttons below the screen and no longer visible or did you place the buttons so they are not below the div but are fixed in place at the bottom of the screen? In which case you should be able to give them a higher z-index than the div containing the flash. That way they are on top of the flash div and should be clickable.
<div id="flash" style="z-index:1;">
<div id="buttons" style="position:fixed; bottom:0px; z-index:4;">
You can also make the flash div clickable to show/hide the buttons that you've placed with fixed position in case the flash really does take up the whole screen. No need to make the flash transparent.

Auto Position and Scale Embed iFrame

Hello I'm trying to make a very simple website consisting of a background image and a floating youtube video. My problem is that I need the youtube video to be on a specific place and resize to fill that determined space regardless of resolution or browser window.
The video needs to go in the dark area middle left; I'm not too sure what to do I haven't coded in a while. I've got the background to resize adequetly but other than that. I've tried to follow these guides.
http://css-tricks.com/fluid-width-youtube-videos/
I would appreciate any help. You can find the image here
http://i.stack.imgur.com/rkYos.jpg
Put the iframe into a div and position it absolute where you want
http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/
make sure you set the z-index to a higher positive value to make it stay "on top"
See also https://stackoverflow.com/search?q=absolute+position+div

How do I stop div and table elements from overlapping the header/footer?

I have a problem I haven't found an answer to in similar questions:
I have a site that dynamically resizes a horizontal scrolling image gallery and some text as you resize the browser. That part I have working OK, I just can't seem to get proper control of each respective element.
Take a look: http://john-godwin.co.uk/testsite
If you resize the browser, the large text overlaps the gallery before the gallery starts shrinking, and if you resize the browser small enough, the gallery eventually overlaps the footer as well.
Does anyone know what changes I need to make to the code to make everything stay within a boundary and resize respective of the other elements without encroaching into each elements space?
Thanks in advance.
The CSS can be found in http://john-godwin.co.uk/testsite/css/style.css
Remove z-index:500; in the .content class