Author Topic: Center the iframe to the page as it is resized.  (Read 8453 times)

Offline hidden

  • Checking the place out
  • *
  • Posts: 8
Center the iframe to the page as it is resized.
« on: January 12, 2009, 07:56:08 PM »
I want my iframe to be centered on the page even when a person resizes their browser. My background image is set to be centered, so it slides around as I resize the browser window. My iframe is set to center using <p align=center> but it's centered to my page, it doesn't move.

The closest example I see on your tutorial is iframe 6. It recenters itself as I resize my browser.
My web page is  h**p://www.harbormall.net/trivani/index_files/TrivaniBlog.htm

Is it possible for an iframe to recenter itself based on the size of the browser like a background does?

Thanks

Offline hidden

  • Sami
  • Administrator
  • Senior Member
  • *****
  • Posts: 5924
  • Not a geek. Just a Nerd.
    • CSB Tutorials
Re: Center the iframe to the page as it is resized.
« Reply #1 on: January 12, 2009, 08:50:16 PM »
On my sample page, I have a centered DIV code that surrounds the iframe code. 
My sample is on a page that was built before css, but this div code is still valid:

<div style="text-align:CENTER; margin-top:3px; ">
iframe code
</div>

I recommend you adjust your iframe code to have % height and % width.  Right now you have % only for height.
Having a % width would help the iframe to be more flexible.

Let me know how it goes.

« Last Edit: January 12, 2009, 08:56:11 PM by Samrc »
-Samantha
TNG: "Sometimes, you can make no mistakes, do everything right, and still lose" - Capt Picard to Data
(:turtle: In memory of Turtle: May 22, 1944 - Nov 24, 2007  GURU, mentor, and really nice guy! :turtleleft: )

Offline hidden

  • Checking the place out
  • *
  • Posts: 8
Re: Center the iframe to the page as it is resized.
« Reply #2 on: January 13, 2009, 03:22:06 PM »
I've played around with this, and I decided I need to center everything on the site. I put <center> near the top after </head>.
I also put </center> at the end before </body>

Everything moves as I wanted as I resize the page, however it is the left hand margin that is centered. So the whole site (except the background) is off center. very strange.

Offline hidden

  • Sami
  • Administrator
  • Senior Member
  • *****
  • Posts: 5924
  • Not a geek. Just a Nerd.
    • CSB Tutorials
Re: Center the iframe to the page as it is resized.
« Reply #3 on: January 13, 2009, 08:24:59 PM »
Well, I have a very difficult time reading your web page code.  Must be templated....
It appears that you have two things that conflict, like the iframe itself earlier.

The page that you are pulling that blog into is causing the problem. I set my monitor to 800x600 and 1024x768 for testing.  No matter which size, the Blogger page directly fit fine on my monitor, centering properly.  But your TrivaniBlog.htm  is pushing the blog to the right, forcing a LONG scroll bar on the bottom.

So I concentrated on that page.  It has a navbar in the header that is currently set to 1220x80!
You are telling the browser that this section of the page is 1220 wide, no matter how wide the resolution of the monitor.  So anything that you CENTER inside that section will center on that 1220 width.  At lower resolutions (most people have less than 1220) they will be off-center.
I found this definition: 
<DIV style="MARGIN-TOP: 44px; Z-INDEX: 14; MARGIN-LEFT: 1px; WIDTH: 1220px; POSITION: absolute; HEIGHT: 8050px">

When the blog comes into this page it shifts to the right side.
AND the background image you were using is 1450x1100 so it does not fit the center of the other setting either.
The center point is different at each level.

Are you building this website online through a service?  Some of them have set templates (google pages for example) that are purposely fixed, or have VERY few ways to adjust/finesse pages.  Not knowing what building software you are using, I can't give you specific instructions only general recommendations that may or may not work:

1) if your page TrivaniBlog.htm has a left border, turn it off.  (I can not break that page into parts so I can't see if you have a white empty left border or not)  

2) Set your blog page to LEFT alignment not centered.  Let TrivaniBlog.htm do the centering.

3) If you can adjust the header size that may also help.
-Samantha
TNG: "Sometimes, you can make no mistakes, do everything right, and still lose" - Capt Picard to Data
(:turtle: In memory of Turtle: May 22, 1944 - Nov 24, 2007  GURU, mentor, and really nice guy! :turtleleft: )

Offline hidden

  • Checking the place out
  • *
  • Posts: 8
Re: Center the iframe to the page as it is resized.
« Reply #4 on: January 14, 2009, 12:45:40 AM »
I'm using MSPublisher 2007. Most of the code means nothing to me, and searches on the web tell me many people don't like publisher because of it's messy code. It sure is easy to use (until I try to center the page).

I got frustrated and pulled out an old version of Adobe GoLive that I had. I went ahead and rebuilt that particular page from scratch. It seems to be working at the moment.

I'm learning a lot with your help. GoLive is old, and isn't even supported by Adobe anymore. The only Adobe alternative is Dreamweaver which looks like a lot more program than I need. What do you recommend?

Offline hidden

  • Sami
  • Administrator
  • Senior Member
  • *****
  • Posts: 5924
  • Not a geek. Just a Nerd.
    • CSB Tutorials
Re: Center the iframe to the page as it is resized.
« Reply #5 on: January 14, 2009, 10:45:35 AM »
Ok...That's why the code looked so convoluted!

Though all of the microsoft OFFICE products (word, excel, powerpoint, publisher, access) CAN make a web page, they should not be used to make full websites.  The HTML code they write is so over worked the pages can take 2-5 times longer to load, even for simple pages.  Yes we have all made pages with those programs at some point but in the long run you are far better off using a real website building software.

SO...what type and which would be best for you?

Choosing web software is totally personal.  We each have different abilities and we don't think alike.  The basic concepts are the same but each program has it's strengths and weaknesses.  You will need to try them on and see if they fit YOU.  I might be able to help narrow it down.

A) online site builders.  Don't use one of these.  Though very easy and fast to build they have great limitations and the worst is when the service drops or pricing changes, you are STUCK.  The web pages have to stay on the server where built because you can not edit them any where else.

B) Website software installed on your machine.  Better choice than online for portability.  You can move the site to a new host if need be (hate doing it but it is possible).

Now you have a choice to decide if you want an HTML EDITOR or an HTML GENERATOR.

1) Editors:  CuteHtml and programs like it allow you to write your own HTML/PHP, etc code.  Some offer a split window or second window that you can see the code and the general layout as you build.  Even Notepad is a basic HTML editor.  Some of these are free, some paid.  For you, this is not your best option.

2) Generators: TONS of these!  An HTML generator is a program that allows you to work in an interactive environment and may or may not allow you to edit the code directly.  Some allow you to insert code snippets while building the rest of the page for you. Others allow you to direct access the code to TWEAK.  Most of these are paid for if you want something that does more than just a simple web page, if you want any control at all.
I have used a few "freebies" while assisting folks but was unimpressed with any of them for more than the minimum web page.
So.... which of the hundreds of programs would be right for you?   I can't tell you that. 
I can tell you that we are looking at several programs here at samisite forum as replacement for other discontinued software.  One of them may be a good fit for you. On the main page of the forum, there are SEVERAL pieces of software with their own sections and links to reviews about the products.  Most of the software has a we have listed have a trial periods for testing before purchase.
- Dreamweaver is professional grade web building software with a large $$ and steepest learning curve.  We have users of Dreamweaver here at samisite but it is not in the price range for most of our visitors.  Most of our folks don't want that heavy grade software.  The other ADOBE products are very interesting but again, pricey.
- Microsoft Expression Web is professional grade web building software that costs far less.  Has some features I LIKE and some quirks that just drive me nuts because I am not on a WINDOWS server.  I prefer Linux server.  (see my comments on it)
- Site Spinner (virtualmechanics.com) seems to be the most popular choice so far.   You might give it a try, 15 day free trial. $49 for standard, $99 for pro.   I will be making tutorials for this product to add to samisite and they have a large forum on their website so this program seems to offer quite a bit for the money, seems to be stable and have a future, with ease of use. NO FRAMES but Iframes can be used.   (The pro version even allows users to make MOBILE websites for phones so I purchased it on sale 40% off in December. Haven't had the chance to work with it yet.)
- And others that have been listed, tested and tried.  I own a few of the ones listed but am still actively using a program that is discontinued most often. Sadly I can not recommend it to you as I know YOU would like it!

No one at this site, or because of this site makes money or any compensation for talking about these programs. We are just seeking alternatives and testing programs to support other folks as they leave the software we have been using.  Several of us have used many pieces of software over the years so we have a good basic understanding of websites.  We have no motive other than we like to help folks and are always glad to see a new person come on board!  Even for just the games.   :D

« Last Edit: January 14, 2009, 10:50:41 AM by Samrc »
-Samantha
TNG: "Sometimes, you can make no mistakes, do everything right, and still lose" - Capt Picard to Data
(:turtle: In memory of Turtle: May 22, 1944 - Nov 24, 2007  GURU, mentor, and really nice guy! :turtleleft: )

Offline hidden

  • Checking the place out
  • *
  • Posts: 8
Re: Center the iframe to the page as it is resized.
« Reply #6 on: January 14, 2009, 04:00:50 PM »
Wow. You are the most helpful "web builder person" I've come across yet! :D I have been frustrated many times by trying to figure out an upgrade for my Adobe GoLive (which I like very much). I only need to add a page or update a site one or two times a year. It's not my main focus, so I don't have a lot of time or money to put into it.

I'm going to look at SiteSpinner's trial. I'm definitely a fan of your website and forum. Thank you very much.

 :thankyousign: