resizing for a table

[clare]

Hello folks,

This is another call for help....please

I have created my web site using tables. Can I place any html or java or another web language into the site that makes the site resize to the screen size of the viewer. For instance this is build around 1024 by 768, but if someone with a larger screen accesses the site with a screen size of 1280 by 1024 the site will automatically be resized to that.

Did that make sence? I have treid to do a google search but have not come up with anything helpful.

Thanks in advance for any help you can give me

Clare

[winwintoo]

Hi Clare, do a goole for "table percents" and you'll find lots of advice (probably not all of it good If you use 100% for the width of your table, it wil resize to wider and narrower screens. If you want your navigation on the left to remain the same regardless of screen dimensions, I think you can set a width for them.

I'm not expert, but there is a lot written about percents as opposed to fixed widths and percents seem to be the way to go.

Hope this helps, Margaret

[chiquitita]

I am not sure if this is the answer or not, but from the way I understand the question, I think you want to set your table to 100% rather than a fixed number such as 500 pixels.

[clare]

Thanks I will try this.

I have also found some info on autostreching the table for wider screens.

My problem is that I am using my image as the background and when viewed on a larger screen it duplicates itself making the web page apear messy and un organised. If anyone has experience of auto strech that would be great. I will also make the table 100% hopefully this will stop these problems.


I have to pop out for an hour but will get onto this as soon as I get back, anymore input would be appreciated.

Thanks again, you are a bunch of stars *****

Clare

[jeaniesa]

Clare,

I've been fighting with the table layout of my site for a couple of weeks now. Well, perhaps not fighting with it, but it's taken a lot of time to understand the output from ImageReady - esp. when I decided to change some of the fixed widths to percentages.

Like Margaret and chiquitita already said, you will want to use percentages for the table to expand/contract with various screen sizes. However, like Margaret said, you can combine both fixed width and percentage cells in the same table. For example, my lefthand side it a fixed 170 pixels. I set the overall table width to be 100%, but then break that up when I move down to specify the table cell widths. I don't want the eft column to change widths with different screen sizes, so I specify the width of that column in the table to be 170 px. The other column in my table is set to 90% - meaning it will expand to the right as the window size changes. (I've set my whole table to be left justified.)

To prevent the picture you are using as the background from tiling when the window is resized, I would try putting it in a fixed width cell, but have the cells on either side of it specified in percentages so that THEY expand, but not the cell your picture is in. Another trick would be to add more canvas to the picture (the same color as the plain background color in the rest of your table) so that when the table cell expands, it just shows more of the "canvas" of the picture rather than tiling it. (Not sure if that makes sense, let me know if not and I'll try to give a better explanation.)

One site I used to better understand fixed width vs. percentage was the apple.com site. If you go to that site, you'll notice that the menu tabs are all fixed width, but if you resize your window, the ends on either side of the tabs expand with the width of your window. (They have that table centered rather than left-justified.) You can take a look at their source to see how it's done.

Hope this helps,
Jeanie

[winwintoo]

This page we're looking at is another good example. Doug correct me if i'm wrong!!

On this page, there is a table set to 100% with color black, then inside that table is another one set to 750 px that holds the actual text etc of the page.

I'm glad this discussion came up, I've been struggling with presentation too. I knew about the percentages, but didn't think of centering the inner table.

Take care, Margaret

[clare]

I think I may have found where I was Going Wrong.....

Here are my adjustments
1. start from scratch!!!
2.Produce the image in slices (PS)
3.Use 2 tables - the inside one being the detail of the page
4.Drink Vodka
5.Set the out side table to 100% width and align to centre
6. Set the inside table to align to centre leaving the size unchanged or maybe 100% width - trial and error
7.Drink more vodka and hope this sorts the whole thing out

How large should I make the outside table that will show on either side of the main area is 31px large enough?
Have I got the idea of this or am I still in the dark?

Thanks for all of your continued help
fustrated
Clare

[clare]

Its moving

I have finally got the centre table to stay in the middle of the screen. I am going to have another vodka for that one!!!

Now I just need to figure out how to make it fit on the screen!

[winwintoo]

Clare I know how you feel!!

Try this code. It produces a pretty garish display but it demonstrates how the RetouchPRO forum pages are laid out.

<body>
<table width="100%"> <!-- this is the outside table that will spread and shrink when the user makes the screen bigger or smaller-->
<tr>
<td bgcolor="red"
<table width="600" align="center"> <!-- this is the "meat" for your page it will always stay the same size -->
<tr>
<td width="150" bgcolor="#FF66FF">
This is some text
</td>
<td width="450" bgcolor="#66FFFF">
And this is some other text
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

Hope this helps Margaret

[clare]

Thanks, thats what I now have my site doing - before the program crashed! thankfully I remembered what I had done

My web nightmares seem to becoming more extreme as I couldn't find the original .psd file - it was thankfully on my laptop but not after I had had a few heart attacks realising it wasn't on my main computer.

I have just finished slicing up the image again and pasting it into a new table. Hopefully this will be the end of it, this has been driving me crazy. My problem was I was setting the outside table to align centre instead of the frame to centre - big difference.

thanks for your continued help - every piece of information brings me one step closer to my dream web site.....thanks

Clare

[clare]

Well my web nightmares certainly did not stop there!

I wanted the whole web site to resize on the fly - so if you change the size of the screen that you were using the web page became larger and smaller as you moved the page. For this I took a trip down to waterstones book shop and bought a large handful of books about DHTML XHTML and CSS, I am still consuming the data! but I have found that using css enables you to change the size on the fly - which is what I wanted to do...... this has taken all day to work out but hopefully the end product will be worth the hastle of learning a new web language.

thanks again for all your help, there will probably be more questions coming, so if you know css your help will be fantastic. One thing I will say is that once you know html the leap to css is not as confusing as I thought it would be - I am very thankful for this! ( I hope I haven't spoken to soon! )

Just out of interest is the font trebuchet avaliable on the mac and older versions of windows, if you view my current site (this uses this font) and you don't have 'trebuchet' on your system what font does your OS display? this would be really helpful to know before I go any further with the web design that is in progress.

thanks again

Clare

[winwintoo]

Hi Clare, I have Trebuchet on my Mac, so it looks like your site uses it - I'm not that good at fonts though, so can't say for sure.

I'm learning about CSS, DOM, Javascript etc all at the same time. I love programming (love it, but can't say I'm very good at it LOL) so I'm enjoying learning.

There is tons of information on the net about CSS, just do a search.

Take care, Margaret

[clare]

I didn't realise until I was at the book store what CSS does for websites! I don't really want to have to learn java as I don't have a programing background so CSS seemed to be the best way to go.
I am also enjoying learning these new tools, luckly the books I bought have a interesting perspective on the techniques used. I have bought books in the past that just say, do this do that, without any feeling or involving the reader. It makes the learning process very boring if you can't realise the potential of a product. Does that make sense?

I am glad to here that the font I intend to use is in the mac as well as the windows OS

Margret you are more adventurous than me learning Java How difficult is it to learn? If I have to I will learn it, but its good to get feedback from a student of a different technique! One more question : What does Java give you that html and css can't reproduce?

thanks again
Clare

[jrolinc]

My thoughts...

HI Clare (and everyone else)

You may know...but you may be getting JAVA and JavaScrip mixed...what you probably will be wanting to work with is JavaScript, this is mostly what is used for things like menuing systems, rollovers, etc.

I know because I am heading back to classes for this (JavaScript), as per the LVS Online classes site (www.lvsonline.com).

Anyhow...I've got a question and for the life of me can't find the thread where I read it...I think it was here at RetouchPro.

People were discussing sizes of their sites, with 800x600 being the most/widely used, so creating the site at for that resolution seems to be the best best. Someone mentioned that size you should make it, (something like 760x5xx) in order to leave room for scroll bars, etc.

Can anyone let me know where that was discussed again???

Good luck with the CSS stuff, it REALLY helps as you can change the fonts/colors/styles all in one place without having to go to each page to change things.

Another good thread to keep alive, as I know it surely helps me as I design/build my sites.

[winwintoo]

Java vs Javascript

Hi Clare, Java and Javascript are not the same thing at all. You already use a lot of Javascript on your web site!!

Javascript is interpretted by the web browser and is used to manipulate elements on the page - deal with form fields, rollover images etc. Javascript is dismissed by some "real" programmers because traditionally a "scripting" language was light-weight. Don't dismiss Javascript. Used properly, it's very powerful.

Java is a compiled language that is much more complex - and it follows, more difficult to learn. When Java is present on a web page, it is an applet that is embedded in the page - used for some games and things like that. Java in web pages seems to have fallen out of favor - largely due to performance problems. Flash is much easier to use and performs much better for the purpose of games etc.

So, forget about Java - you don't need it. You already have some experience with Javascript and you can probably find whatever you need on the many Javascript web sites. You could do your whole site without any Javascript, but it would be bland.

CSS will help you lay out your page(s) and by saving your stylesheets and linking to them in your pages, you can maintain or change a consistent look across many pages.

Having said all that, I must admit that I'm a novice at using all these web page components, but I'm learning - and I might add, I learn by trying to answer questions, so fire away.....

Take care, Margaret