PDA

Click to See Complete Forum and Search --> : resizable site

niha
12-17-2007, 05:09 AM
Hi everyone,
I am trying to make my site resizable so when the user clicks ctrl and scroll in or out the site is resized but not destorted, the images gets resizable as well as text and everything else in proportion.
please see this example to underdstand better what i am looking for www.ikea.it

any ideas ?? i m not so good with css but i am a fast learner.
thanks n advance.
Niha
Fang
12-17-2007, 06:38 AM
That is browser functionality, it works in all sites.
Compguy Pete
12-17-2007, 10:46 PM
I'll just add that this is also because of the quality of the images....

if you crush every byte out of the images on your site you wont be able to do this effect with the look your after.
niha
12-18-2007, 08:36 AM
is it how the site is planned as well ? i mean divs instead of tables cuz when i do the same zoom function for www.fundstore.it i dont get the same results. if i use mozilla. while ikea.it using mozilla gets the desired results.

thanks in advance
Niha
Compguy Pete
12-18-2007, 09:50 AM
that site is only using javascript and no HTML.

I dont see you running into this type of issue.
niha
12-18-2007, 09:59 AM
i didt get it sorry??
TJ111
12-18-2007, 10:04 AM
They use relative sizing for everything, that is (em) as opposed to (px). So things liek font-size, page-height/width, margins, padding, etc are all declared as (em) in the CSS/styles.

A list apart has a great article (http://alistapart.com/articles/howtosizetextincss) on this, and it can be applied to all elements.
niha
12-18-2007, 11:12 AM
ok great as i am ignorant when it comes to css how can i write my css using the em measurements... do u suggest a program that do that°?
thanks alootttt
TJ111
12-18-2007, 12:18 PM
It's easy, just for a sample, pretend this is your HTML:

<body>
<div id="container">
<div id="menu">
<ul>
<li><a>Home</a></li>
<li><a>Other Page</a></li>
</ul>
</div>
<div id="content">
<h3>This is My Page</h3>
<p>A paragraph</p>
</div>
</div>
</body>

Then to set it up using em's:

* { /*remove browser defaults*/
margin: 0;
padding: 0;
}
body {
font-size: 100%; /*100% = 16px in all browsers with the default styles*/
}
/*now just use em's for everything, just convert px to em for exact layouts
1em = 16px*/
#container {
width:50em; /*800px wide*/
margin:0.25em auto; /*4px margin top/bottom and centered*/
}
#menu {
float:left;
width:10em; /*160px wide*/
height:100%; /*keep #content from wrapping*/
}
#content {
width:40em; /*640px*/
height: 100%;
}
#content h3 {
margin: 0.625em 0; /* 10px margin/16px default = .625em*/
font-size: 1em; /*16px text is pretty good for a header*/
font-weight:bold;
}
#content p {
margin: 0.3125em 0; /*5px margin top and bottom*/
font-size: 0.75em; /*12px font*/
}
/*etc, etc*/


Basically, for every size you define in your css. Take the # of pixels you want it to be by default and divide it by 16. That's your em. Now when a user browses with a different default text size (ie ppl with disabilities), or people ctrl+scroll, your entire page will adjust like the one you linked.

Personally I only do it for text and text margins, I think the entire page resizing is a little much.