• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 239
  • Last Modified:

Web Page Header and Footer

I am creating a page layout for a website that I am putting together.  This might not be possible, and obviously I can't think of how to do it.  I have an image that makes up the header of the page that I created using Macromedia Fireworks.  I want to be able to create a layout that uses 100% of the width rather than a fixed width design.  This will solve some of the problems that I am having with the CMS program that I am using.  The problem is the header and the footer.  Is there a way either using html (more likely solution in my mind), or the graphic itself to make it so no matter what resolution a person is viewing the page in the dimensions (not the size) will stay the same.  This way the image will be of the same quality and not look distorted.

If you would like to view the current page please visit http://www.dmkmarketing.net/dnnv3/.

Thank you for any help you can provide.
Kevin
0
kmcbrearty
Asked:
kmcbrearty
  • 3
  • 2
1 Solution
 
Lobo042399Commented:
Hi Kevin,

I believe what you want to do is possible either with JavaScript or using Flash. The way I understand it is... You want a fixed space left and right of the header, and the header itself to stretch both vertically and horizontally depending on the width of the viewer's browser window, right? You can do it by setting up a 100% width table with 3 columns: the first column would be a fixed width, the second would be x, and the third would be a fixed width again. The Flash header, placed in the center cell, will stretch together with the page and will not lose its proportions.

The problem with that approach is that the rest of the page, the body, will also shift horizontally and your text and boxes will go all out of whack... unless you put the header alone in one Table and the rest of the page in a separate one with a fixed width in pixels. In that case you'd have to get rid of the blue outline that you currently have all around the page body.

Good Vibes!

Lobo
0
 
BinylkumarCommented:
Hi Kevin,
       Exactly I can't understand your problem...But seeing that You want your Layout to be streached to 100%..Normaly a layout will designed based on 800x600 resolution view..on seeing this in 1024x768 resolution view it will seen remain to fit exact.

you can use this method...
       a. give the table width and height to 100%
       b. you can have a transparent gif image as a spacer by giving width and height to the image...to maintain the exact fit...

To fit a table exact to the resolution of the browser(800x600,1024x768.....)....First This Table is based on your sample webpage...
(this is for outer border blue line...that is according to your layout..)

1. Draw a table with 3 rows and 3 cols having 100% width and height
2. On the top left corner(1st Row-1st column) put the left curved image piece of the the blue border...
3. Next on the same row I mean next to the 1st column give bgcolor as blue...
4. On the same row right corner(1st Row-3rd column) put the right curved image piece of the the blue border...
5. Now come to 2nd row 1st column..set bgcolor as blue...
6. On the same row (2nd Row-2nd column) draw a table 3 rows 1 column with 100% width and height...(this table holds the header and footer..I mean the top row is for placing the header image...and the bottom row is for footer image...center row is for contents...)
7. On the same row (2nd row 3rd column) set the bgcolor as blue...
8. Now come to the 3rd row (1st Row-1st column) put the left bottom curved image piece of the vlue border...
9. Next on the same row I mean next to the 1st column give bgcolor as blue...
10. On the same row right corner(3rd Row-3rd column) put the right bottom curved image piece of the the blue border...
11. now you have to adjust the percentage of the each column to fit exactly (100%)...You can set the width of the first column according to the size of the curved image..for example you can set 2%..like that the 3rd column...2% remaining 94% to the center TD...

Now you can view the table that exaclty streach according to the resolution view of the browser window...

bye
Binylkumar
0
 
kmcbreartyAuthor Commented:
Lobo,

I think that I might be able to get your solution to work for me in a way that I will like.  That being said I have never used javascript or flash and have no idea how to accomplish it.  I think flash would probably be the better option for me since I don't know java and wouldn't have to learn a programming language but I don't know how to do it.

Kevin
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Lobo042399Commented:
Hi Kevin,

If I had to choose between Java and Flash I'd go for the later as well. Assuming that your header is a simple image with no navigation all you really need to do is create a new document in Flash at the right size, import the picture, and Publish the SWF. Simple as that.  If navigation is to be included Flash comes with excellent built in how-to's to create quick buttons.

Good Vibes!

Lobo
0
 
kmcbreartyAuthor Commented:
Lobo,

I haven't had a whole lot of time this week to work on this.  My wife has been having some problems this week.  With your last post I think I can work with it to get it to work.  My biggest problem was getting started.  I couldn't figure out how to get the graphics into flash but I think that I can figure it out from here.  I didn't want to keep you hanging.

Thank you,
Kevin
0
 
Lobo042399Commented:
Hi Kevin,

Thanks for the points and the A.

Importing a graphic into a Flash animation is quite simple. First you create a new Flash document at the proper size. Don't bother with frame rates because it'll be a static image.
With your blank document open, go to File>Import>Import to Stage (Ctrl-R) and select your image. Center it appropriately. You can go to Modify>Align and make sure that To Stage is checked, and then hit Ctrl-Alt-2 to center it horizontally, and Ctrl-Alt-5 to center it vertically. Save your file.

Now to Publish you SWF file. Go to File>Publish Settings. Under the Formats Tab, make sure that only Flash is checked, and click on the yellow folder icon to choose a name and location where to save it. Then hit the Publish button, and after that hit OK. That's it!

To bring the file into your HTML. In Dreamweaver, go to Insert>Media>Flash and select your SWF file from there. That ensures that Dreamweaver will insert the necessary code and link to download the Flash Player if the viewer's browser doesn't have it yet.

Good Vibes!

Lobo
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now