Expression Web layer issue

[jimmys]

Hi, I've been doing a bit of web design for a friend of mine. I'm new to this type of thing, but thought I'd done enough research to be able to produce a half-decent website using MS Expression Web.

I designed the site using layers (see the site below) for various parts of the site, including the green frog feet images which are positioned inside the layer (you'll see what I mean when you click the link).

When the home page is viewed in 1024 x 768 screen resolution, everything appears as I want it to.

However, viewed any larger or smaller and the frog feet overlap the text at various points. I thought I'd used absolute positioning for the layers and that they would move along with the screen no matter how large or small.

I've run out of ideas (as I say, I'm pretty new to home web design) as to how to correct this screen size issue. I don't want to look an idiot when somebody views my site in anything other than 1024 x 768.

My friend's site is at the following link

http://www.rookieskids.co.uk/

Should layers be avoided for this sort of thing? The reason I used them was because I wanted full control over the layout and didn't want to rely on wrap-around text type appearances.

Any help would be greatly appreciated.

Thanks

James

[VHG]

I have done a little bit of web design, but never used layers.

The problem you have (as you probably know) is that the "feet" are in a fixed position relative to the top left of the browser window, but the text reflows s the user resizes the window.

I would have thought this is asking for trouble (as you seem to be getting).

My suggestion (based on limited web design) is to move the text AND feet to the same page and put the text and feet in their own little "div" areas (almost like "boxing" them in).

You could "break" the page down both vertically and horizontaly into many "div" boxes.

Where there is text and feet combined, split that section into 3 divs. The "left" div can have the left foot, the centre div the text, the right div the right foot.

You could have multiple sets of these 3 divs down the page, to cope with the different layout sizes you have.

So the "Welcome to Rookies" title could be one set of 3 divs across the page, the "Ball Pools" list could be another set of 3 divs across the page.

The text in between them could perhaps be a single div right across the page.

If you did this, ALL the text AND the pictures would reflow, but because each "div" was separate they would never overlap.

[VHG]

Found some Expressoin vieos here about layers and CSS that may help

http://www.learnexpression.com/

[VHG]

This is what I mean about having three "divs" or columns across the page.

http://www.manisheriar.com/holygrail/index.htm

So you could have one Foot in the pink area on the left, and the other foot in the mauve area on the right, and your text in the white area in the middle.

If you see that example, as the browser window is made smaller and larger the column widths reflow with each other.

You could set a minimum size so each div area never goes below a certain width (and loses the text or feet)

[VHG]

Another idea occured to me.

You could set the feet as a background, so the text could be on top.

I believe with the background you can make it "faint" so it does not appear so strong and stop you reading the text.

You may have to make the text a different colour to make it readable over the feet, maybe a lighter colour.

[jimmys]

Thanks very much for those suggestions. It's very frustrating but hopefully one of your solutions will sort it out.

I'll give it a go when fully rested (tomorrow probably) to avoid any mistakes born of frustration/exhaustion and then let you know how it went.

Thanks again

James

[VHG]

btw, it may be worth asking on a specific forum for expression web where the experts hang out.

Microsoft host a forum called microsoft.public.expression.webdesigner

You can view it on the web here

http://groups.google.co.uk/group/microsoft.pub lic.expression.webdesigner/topics?hl=en

Or if you want to view it via a "newsreader" (such as in Outlook Express) you need to point your Outlook to msnews.microsoft.com

If you have never used a newseader before let me know and I will help trying to set set it up for you (or on the Google page I linked to above see the top right where is says "Learn more about Usenet groups".