resize browser

[shimshon]

Hi,

thanks to 'speed' I could solve my validation problem,I went on and visited his site - following question went up my mind:

when I resize my screen (IE) while looking at my site in the beginning everything looks fine but if I keep going on mkeing it smaller things disapear and the hole site is not readable.

I did the same thing with speed's site, but no matter how small I made the screen you could see everything!!

This is indead very cool and I now would like to know what I have to do to have the same effect.

thanks
shimshon

[paulhiles]

What speed has done with his design is to use a fluid design layout (sometimes known as liquid design). If you check the coding, you'll find that widths have been set using percentages or em sizes, rather than fixed pixel widths. This means the page will automatically adjust to a visitor resizing their browser.

Paul

[shimshon]

cool,

how do I do it, are there any converters or something? probably will have to change all my css

thanks
shimshon

[speed]

I'm assuming it was http://www.tolranet.co.uk that site actually uses a fixed width layout.

I simply set a width on a <div> that contains all the elements that make up the page and make sure it stays centred. All the information keeps it's position but on a narrow screen you need to scroll left/right.

Your current layout is a fluid design as paulhiles described.

[shimshon]

Any tips on what changes I have to do to get a good liquid design? Or maybe some tutorials or links?

[speed]

The main problems with your sites fluid design is that the left and right menus push in over the white content area.

I think you can fix it by setting the left and right blue columns to a fixed pixel width rather than a percentage, if not then take a look in http://www.webproworld.com/viewtopic.php?t=28852 there were references to several CSS 3 col layouts that don't suffer this problem.

That is about the only change you can make.

On the homepage the width of the banner at the bottom of the page will be the limiting factor on the minimum width.

[shimshon]

I did the changes you told me, it gotbetter but I'm still not satisfied, I think I have a problem in the left columm..,

[speed]

When I just looked the blue borders that the menus are overlaid on are still variable width. I'm referring to the blue bars that the left and right menus float over.

In a fluid design you don't always want everything fluid some bit need to be fixed width, in your case that is the left and right navs, so all widths related to them need to be set to a fixed width. You can use px or em but not %.

Only had time for a very quick look but I think the following might help:

#content {
margin: 0 15% 0 25%;
padding: 0 0 5% 0;
color: #000;
background-color: #fff;
}

The 15% and 25% in the margin need to be px values, and these need to match px values you set on the width of the <div>s holding the left and right menus.

Hope that's making sense.

[shimshon]

It's getting better,
the rihgt and the left colum are now behaving like there should (at least I think so) but now the colum in the middle is behaving strange! Any suggestion?

Thanks for all the help
Shimshon

[speed]

I'm not quite sure what you've done here but you seem to have a fixed width layout when I thought you were after a fluid one.

Assuming you still want to go fluid, back up your css file then try:

Delete:
html {
width: 100%;
}

Delete width: 990px from body
Delete width: 400px from #content h1

Change #content to:

#content {
margin: 0 155x 0 242px;
padding: 0 0 5% 0;
color: #000;
background-color: #fff;
}

Change #navish to:

#navish {
background-color: #0066FF;
position: relative;
float: right;
width: 155px;
z-index: 3;
color: #000;
font-size: 12px;
padding: 0;
}

I've only tried it with a part copy of your homepage so you'll need to check everything very carefully. You'll probably need to tweak some things, but it should point you in the right direction.