embedded object shoves footer too far down scalable window

@EvenjosAug 12.2009

I’m amateur when it comes to web dev, but trying to learn. My preferred method is to ask experts. ?

So, I’m combining Flash and HTML to make a ~~[URL=”http://abbygoldsmith.com/art/ArtMain.html”]~~new site[/URL]. Problem: The browser window only displays the embedded Flash object; the viewer has to scroll down the window in order to see the page footer. I want both Flash object and page footer to be visible without the viewer having to scroll.

What can I do to solve this? I’ve tried making a table, but that doesn’t help.

to post a comment

HTML

6 Comments(s) _↴

@EvenjosauthorAug 12.2009 — #UPDATE: I've fixed my little problem by making the height 80% instead of 100%.

HOWEVER: Is there any way to remove the padding? I'd rather not see a ton of black space above and to either side of my embedded Flash menu object.

@Eye_for_VideoAug 13.2009 — #Well you’ve got a few things to work on.

First, put your DTD first, outside the <head> tag. Then validate the page.

After that, use a style to remove the margin and padding:

[CODE]body {
 border: 0px;
 margin: 0px;
 padding: 0px; 
 }[/CODE]

As for the black on the sides of the Flash, when you resize the Flash, it will still maintain the same aspect ratio. So if you widen the Flash to get rid of the black, it will have to grow taller, to maintain the correct shapes (so the sun stays a round ball and not oblong).

Best way to get rid of the black would be to redesign the Flash to correctly fit the page (wider and shorter). You might also want to have the width of the Flash and the Footer equal. That big wide footer (100%) with a much narrower Flash menu, looks out of place. While 100% width sounds like a great idea, it doesn’t always look so great on wider monitors. At 1600 wide, it just doesn’t work as a good design strategy. A fixed or max width where the Flash and Footer are equal will give a better appearance (IMHO).

Best wishes,

Eye for Video

www.cidigitalmedia.com

@EvenjosauthorAug 13.2009 — #Thanks, Eye for Video!

Argh, I'm lost. What's a DTD? How/why do I validate the page?

I'm not sure how to add the style.

I agree that the footer would look much better if it's the same width as the Flash file. I want the flash file to remain scalable, which means the footer needs to scale with it. Is there any way to link them together so they scale together?

If that's impossible, I guess my other option would be to make them both a fixed size. My problem is that I want people on different platforms to be able to view my website. I want it to be viewable on the iPhone as well as a 1600wide monitor. What fixed size would you recommend for that?

Thanks again.

@Eye_for_VideoAug 13.2009 — #Your DocType tells your browsers which set of rules to use when it parses the page. You are currently using a XHTML doc type (or set of parsing rules). Unless you are in fact coding in XHTML, you might be better off to use an HTML doc type.

http://www.w3schools.com/tags/tag_DOCTYPE.asp

for more info.

Validate your page to check for coding errors.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fabbygoldsmith.com%2Fart%2FArtMain.html

Current page with that doctype shows 32 coding errors.

Move the <html> tag to follow your doctype declaration. Compare with your “Sitemap” page for doctype and <html> tag.

[CODE]<HTML>
 <!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" xml:lang="en" lang="en">[/CODE]

Using an external style sheet (called Cascading Style Sheet or CSS) will allow you to edit one simple page to control things like width, height, font size and color, rather than coding it in on a per line basis. For more info:

http://www.w3schools.com/css/default.asp

As for the footer and menu being equal width, well using a Flash .swf and html <table>, you will have problems. Throw in the <center> tag and you really have problems.

I salute you for wanting to make your site viewable in browsers from the iPhone to wide browsers. But your coding will need to be much more strict than it is now.

Remember that 100% width does not mean the same thing to an image (or Flash menu) as it does to simple text. Text will simply stretch out wider at the same font size. Images need to stretch in both width AND height as the browser window gets wider. That’s why your Flash doesn’t match your <table>.

Do this as an example…. Shrink the width of this very page in webdevelopers Forum, just the width. You will see that the text is set at 100%… and the text part works just fine. But notice, a scrollbar will eventually show for the width, even though all the text shows just fine (scroll the width to see the images). That’s because the images will only shrink so much, while the text works fine with the %.

So if iPhone is your target, create the Flash at that width but remember that as it increases in width, it will also increase in height (like an image). But since the iPhone is a different aspect ratio (width per height) than a computer monitor, by the time you stretch that out to 1000 px, the height may push your footer down below the monitor view.

Wishing you the very best,

EfV

@EvenjosauthorAug 19.2009 — #I'm feeling very out of my depth here.

I tried putting the DocType up above the HTML tag, but it messed up my page (got rid of scaling). So I put it back inside the HTML tag. When I validate the page, however, it says it's missing the DocType declaration.

How much do page errors really matter? I validated my homepage, and the validator comes up with 71 errors. But my homepage displays fine in IE, FF, and the iPhone.

This is more advanced stuff than I'm used to. Would anyone be willing to chat/IM with me to coach me through these issues? I'd really appreciate it ... it's hard to find a mentor.

Thanks for the info on image width vs. text width!

~Abby

@Eye_for_VideoAug 19.2009 — #Well since this is a Web Developers Forum, we do try to encourage "Best Practices". At the top of the list (or pretty close anyway), is to validage your pages. If you make the suggested changes and something screws up, it's because the code is not correct... sometimes that means not correct for that Doc Type... not that the code won't work with the correct Doc Type (your using xhtml but coding in html).

From the scope of your work, it looks like you've done your share of study and learning.... well just think of this as another opportuity to learn.

Check your private messages for a contact email if interested.

EfV

Also in #HTML _↴

Home page not working in IE 6 (makes no sense)Wiki?Number of uploads.

Success!

Help @Evenjos spread the word by sharing this article on Twitter...

Tweet This

embedded object shoves footer too far down scalable window

6 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

embedded object shoves footer too far down scalable window

6 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #HTML _↴