page layout stratagies using tables with images

[Beth]

Hi guys

Im finally revamping my website. (man did I go off in left field with the last one...and I never finished it)

Anyway I am going more contemporary with this one and am using different yet similar looks for each page. Sort of magaziny looking (but hey...print is my mainstay)

I am using photoshop to do the design and then bringing that in image ready to slice and dice. BUT...I am wondering how I should slice up this page layout to get flexibility and control.

http://www.artifax-design.com/client/contents.html

As you can see, I have used alot of slices from imageready to control layout. The large cell in the middle is used to put copy in. Which works fine...but if I add too much copy...the table structure starts breaking up in browsers. So I made the table extra long to accomodate the different browsers using different res or magnifying settings.

Is this the best way.

Should I perhaps use a table that would contain 3 more tables side by side. One for the face thingy, the center table to have the logo and copy and the table on the right to have the 'contents' word plus a strip of the yellow and black with the orange squares. At least the center table could grow to accomodate the text reflow....but would the tables on the sides do this as well. I want the the beige and black to follow down both sides of the copy. Can you do this by not defining the cell hieght and using cell colours (the colours used are web colours)

What do you think would be the best way to slice this up. I would prefer that I dont have these really long tables going off the page...but it does work.

Thanks for any ideas,
Beth

[Beth]

Hi guys

Im finally revamping my website. (man did I go off in left field with the last one...and I never finished it)

Anyway I am going more contemporary with this one and am using different yet similar looks for each page. Sort of magaziny looking (but hey...print is my mainstay)

I am using photoshop to do the design and then bringing that in image ready to slice and dice. BUT...I am wondering how I should slice up this page layout to get flexibility and control.

http://www.artifax-design.com/client/contents.html

As you can see, I have used alot of slices from imageready to control layout. The large cell in the middle is used to put copy in. Which works fine...but if I add too much copy...the table structure starts breaking up in browsers. So I made the table extra long to accomodate the different browsers using different res or magnifying settings.

Is this the best way.

Should I perhaps use a table that would contain 3 more tables side by side. One for the face thingy, the center table to have the logo and copy and the table on the right to have the 'contents' word plus a strip of the yellow and black with the orange squares. At least the center table could grow to accomodate the text reflow....but would the tables on the sides do this as well. I want the the beige and black to follow down both sides of the copy. Can you do this by not defining the cell hieght and using cell colours (the colours used are web colours)

What do you think would be the best way to slice this up. I would prefer that I dont have these really long tables going off the page...but it does work.

Thanks for any ideas,
Beth

[Mickie]

Beth,

Once you get passed the orange blocks, I think you could use your side colors as a background color for a cell rather than sized gifs. This cell would then grow as the contents in the middle of the table grows ... you wouldn't have to start with such a long table. I have to admit, my preference is to have a home page where you don't have to scroll.

I also think the idea of three tables would work, but the more tables inside of tables you have, the longer the load time.

I like your design, but have a little trouble with the color of the vertical "Contents" on the right hand side. A little more contrast with the black would be good...not so much that it shouts, but enough so that it is noticed.

Where will your menu be on the content pages?

My two cents anyway.

Mickie

[Beth]

Hi Mickie

Thanks for your comments. I do appreciate them. I will try that with the cell colours. I believe I have that cell defined with a cell colour (or I did at one time) but your suggestion just might work out with some modifications to how I sliced the image in ImageReady. Worth a shot anyway.

My home page, per say, is different than this and you should not have to scroll unless you use 640 by 480 as screen res. And while I think I will try to keep those guys in mind when I design...I have pretty much resloved to using 800 by 600 as the main viewing audience.

I actually wanted the 'contents' on the side of the page to be fairly faint. And I wasnt planning on have any navigation on that page other than all the items in Site contents. I am going to have all the pages listed there kind of like the table of contents in a book. In my mind I figured that it would be redundant to have navigation buttons there. I will of course have the links in the square brakets at the bottom of the page. Do you think I need navigation on that page. I mean other that the list of contents. On the other pages, I am thinking of using a drop down menu thing.

Back to the drawing table (no pun intended)
Beth

[Beth]

Yep, that fixed the problem

http://www.artifax-design.com/client/contents2.html

Every cell on the bottom row had to NOT have the height attribute. Including the text one too.
This is pretty cool stuff for controlling layout. On to the next page now

B

[Jen Worden]

Hi Beth ...

Glad you came up with a solution. As well, you can do a combination of percentage and fixed width table/cell widths. This will allow smaller resolutions to still see everything without a horizontal scroll. However, I do agree with you that the majority of viewers have gone to 800x600.

The next step would be to start using CSS to position things - simple stuff like marginheight/topmargin (NN/IE respectively) added to your body tags, and of course, replacing font tags with font-family etc. A good habit to get into, as the font tag is now deprecated.

Love the new design!

cfn ... Jen
Jen Worden
Web Developer
www.meadoworks.com

[Mickie]

Beth,

I don't think you need any navigation buttons on that page. I was curious where they would be on subsequent pages.

There is nothing worse than coming up with a great look and then realizing you need to add one more thing. [img]/infopop/emoticons/icon_rolleyes.gif[/img]

I would also second Jen's suggestion of experimenting with style sheets. Once you get the hang of them, you'll love them!

Mickie