Page Layout

If you go to www.ign.com you'll see that theres a menu on top and bottom.  They somehow blended them together though.  I have no idea what this is called or how to do it, any help is appreciated.
ShackmanAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

zs6phdCommented:
Don't see what you mean at www.ign.com?
I see a menu bar: " home | ign | games..." etc.  In the body of the page there are headings for "ign games", "ign for men" etc, but these seem to be the body of the page and do not exactly match the menu bar.
0
ShackmanAuthor Commented:
Sorry, i dont know much of the termenology for stuff.  I mean at the very left and very top, they blended those 2 blue borders together.  Howd they do they that, and whats it called to have those frame-like menus at the top and left?
0
zs6phdCommented:
Partial answer:  If you feel strong enough, have a look at the source code which comes down to you on www.ign.com.  In IE you can see this by selecting View/Source.  In this case there is a lot of open white space - presumably this is a feature of the tool they use to generate the page.  I'm not familiar enough with these tools to tell where it comes from - It could be a commercial package or an inhouse-developed code generator.  Definitely not FP!

The basic answer to your question is as follows:  Its all done with tables.  First, you need to produce the graphic components, in this case the top bar and the side bar separately. Obviously, the picture must run continuously from one to the other.  The 3D shading shows that this is not done with a simple tool like MS Image Composer.  The two (or more) parts of the graphic are then placed in table cells.  When you browse the page you don't see the join between the two parts of the graphic.

If you look at the source code, and look only at the table elements, to get the big picture, you will see how the top bar and the lower parts fit together.

Here's a neat trick to decompose a page: In IE 5, save the page to your hard drive.  It will save all the components as well. Then, Open this page in FP 2000.  This will immediately show you how the page was put together.

You will see that the left-hand part of the border is in fact the page background, which allows it to extend to the bottom of the page, no matter how long the page may be. It is behind the top piece of the border as well, but is hidden - You can see this by deleting the large graphic in the top table.

Hope this is useful.

Peter
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development Software

From novice to tech pro — start learning today.