Make your site scale to the size of the browser

Hi,
I was wondering how you can make your website scale to the size of your browser? An example I found is Kampe.ca
Thanks,
Brandon

Fluid (percentage based), elastic (em based) and fixed (pixel based) sites all have their plusses and minuses. Deciding which one is appropriate for your particular project depends on the amount of content you need to display per page, target audience, devices, and personal preferences.
Liquid layouts can get unwieldy on super wide or super narrow displays. Thus, if I have a lot of content to display, I prefer to use a semi-liquid layout - % based along with min- and max-width restrictions.
Elastic sites resize text and images proportionally which some people really like. Personally I prefer being able to resize text only in my browser without it affecting page and image dimensions. That said, elastic layouts can work well for graphics heavy web sites.
Fixed-width, centered layouts IMO are the most convenient to work with. I think that's why so many web designers use them. The trick is finding the "right width" for your target audience. For most desktop and laptop users, 900 to 1100px is probably a good range. For mobile devices, 480px.
Open Source CSS Grids, Frameworks and Multi-Column Layouts
http://EZ-CSS.org
http://960.gs/
http://code.google.com/p/blueprintcss/
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-width s
Related links:
Google labs - Browser Size
http://browsersize.googlelabs.com/
Elastic sites with ems
http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Similar Messages

How to make your site DIFFERENT...

Some have auto-playing movies, or songs...
Some have "comment" sections...
Some have no menus...
What have you done to make your site different?
What have you done to make your site eyecatching?
How is this accomplished?
Many of us are finding that we have already pushed iWeb to it's apparent limits, and we need more ideas!
http://www.derekbalsley.com

Thanks all for the kind words.
Linda, as far as the images go I edited them in Photoshop.
I saved them as jpegs using the quality slider set at 8
(never less for quality reasons).
The actual image "dimensions" in general are 280pixels x 421pixels
depending on orientation and 72 ppi in image "resolution" .
I think if you keep images no larger then 450pixels for general viewing
they should load fine.
The images that are the Page Headers are however W700xH400 which is the size of the default place holders in the templates, or 700x120 for the narrow ones.
I hope this isn't getting too technical, I've even considered doing QuickTime tutorials.
Derekbalsey: I'd say use the shapes and do things like adding strokes to a shape and use white or no fill or a complimenting color to fill it.
I will be updating the site tonight, nothing major, just slight changes to the page headers and adding some photos until I get some more "pro" looking ones I hope.
We'll see ho fast those load as they will be larger.
My goal is to use simple shapes and good colors, as i don't really know how to create animations and the likes.
G4 450 dual, PBG4 1.5/ATI 128/1gig ram Mac OS X (10.4.4) http://homepage.mac.com/uhanna

How to make my site top in the search engines for a high ranking?

I am new at this, and I am planning to build a big site on iweb, but my question is where can I get information on how to make my site with high rankings? Would I have to post my site in lots of search engines, or have the hosting company help out? how do i do this?

As SEO (Search Engine Optimization) is important to you, you may want to consider alternatives to iWeb as "iWeb websites are not made to be search engine friendly" — read more here:
SEO For iWeb: How to get your iWeb Websites into Google & Other Major Search Engines
...iWeb is designed for personal sites and, as such, Apple apparently thinks there's no need for Google — you tell grandma the URL of your personal iWeb site, she painstakingly types it in and then gazes admiringly at the photos of her grandchildren.
Apple hasn't changed this approach in three iterations of iWeb but perhaps, with all the feedback it receives on this issue, there's still hope. Meanwhile, web-design apps for business sites tend to integrate search engine optimization — Sandvox Pro is an example:
http://www.karelia.com/sandvox/getyour_site_noticed_andb.html
Another advantage of Sandvox is that, when viewing your site in Safari, the text increase & decrease commands will work — they don't work for an iWeb-created site. ...For business use, it's important that customers don't turn away from your site because they consider your text too small to read.
However, if you still really want to use iWeb, this article may help:
http://www.iwebformusicians.com/SearchEngines/SEO.html
By the way, for more info about SEO in general, this blog of a web-design app (Yola) recently started a multi-part series on the subject — the first is here:
http://blog.yola.com/2009/06/15/seo-101
The rest of the series (in no particular order) can be found here:
http://blog.yola.com/category/seo/
And a video:
_Using Title Tags Effectively For Search Engine Optimization (SEO)_

The Best Way to make your iPad battery last the longest!

After checking many sources and also discussions here -- this is one article that pretty much sums up the best way to make your iPad battery last the longest!
It basically comes down to JUST ONE THING (mainly) -- and that is simply REDUCING YOUR CHARGE CYCLE COUNT! And how do you do that? Well, very simply KEEP IT PLUGGED IN as much as possible. And then, doing what Apple says by doing just one full discharge - once a month.
There are about 1000 charge cycles available for the iPad, at which point you should have 80% of the battery life left. SO ... Anything you do to slow down getting to that 1000 charge cycles, makes your iPad battery last longer. Keeping it plugged in "all the time" (or, as much as possible - since it is a portable object) slows down the process of getting to that "lessening of battery capacity". It's simply all about "charge cycles" - which then translates into "reduced battery capacity".
Here's an article to pay close attention to:
Best Practices for iPad Battery Charging
http://www.ilounge.com/index.php/articles/comments/best-practices-for-ipad-batte ry-charging/

Here's another site that is usually posted here that you would be interested in: http://batteryuniversity.com

How can you make your persona show on the top and bottom? Also can you make it bigger at the top to show more of the picture?

How can you make your persona show on the top and bottom?
Also can you make it bigger at the top to show more of the picture?

Add extra empty toolbars if you want to see more of the persona.<br />
You can create extra toolbars to get extra space via View > Toolbars > Customize<br />
You have to put something on a toolbar (drag a Space item onto it) before closing the Customize window because empty toolbars are automatically removed.<br />
See http://kb.mozillazine.org/Toolbar_customization

Hello, I'm from Belgium and I just bought the iPad 2. I watched a lot of movies and I saw that it's possible to make your own movie with the iPad, but which app do you need to make movies. Greetings, Lars

Hello, I'm from Belgium and I just bought the iPad 2. I watched a lot of movies and I saw that it's possible to make your own movie with the iPad, but which app do you need to make movies. Greetings, Lars

Hier kun je er meer over lezen; http://www.wikihow.com/Use-the-Cameras-on-Your-iPad-2
En hier kun je meer informatie vinden over de iPad; www.iPadforum.tk

How do I make a site appear in the Permissions Manager?

I forbid all sites to set cookies. The sites where I have an account are the exceptions. I'm finding it hard to make a site appear in the Permissions Manager. I tried lots of things. Like placing a bookmark in a bookmark folder, creating a bookmark manually, copying and pasting a bookmark from folder to folder, visiting a site lots of times.

Visit a site, click the site icon in the address bar, click More Information, click Permissions, set the permissions for the site that you're visiting.

Swf files that scale with the browser

I uploaded a swf file with dreamweaver as a stand alone window and it works fine. How do I get the swf file to scale larger or smaller as the user adjusts their browser window larger and smaller? I would like to get the swf file to scale along with the browser window. I posted this in dreamweaver but was told this is an action script issue.

I found a simple solution, and I believe it is what you are looking for.
1. In Flash, go to File>Publish Settings
2. Click on the HTML Tab
3. Where is says Dimensions, select Percent
4. Though it is probably default, make sure the width and height are both set to 100.
5. Click ok then go to File>Publish
Now your movie should scale with the browser window.
If you do not have Flash, then you can simple work with this sample code below:
<object width="100%" height="100%" id="xyz" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
    <param name="movie" value="xyz.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="xyz.swf" quality="high" bgcolor="#ffffff" width="100%" height="100%" name="xyz"
    align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash"
    pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
Notice how width and height are set to "100%"? That's all you need.

How would I get the Body element background to open at the scale of the browser window

How would I get the Body element background to open at the scale of the browser window? I hear that by using an HTML tag or CSS rule I could scale a background that is placed in the body element without using javascript is this true?

The most reliable solution is to use small image slices or tiles and repeat them down and across the page or container division.
CSS EXAMPLE:
body {
background: url(your_image.jpg) repeat;
More on background images:
http://alt-web.com/Backgrounds.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Some secure sites recommend closing the browser. Is closing the tab the same as closing the browser?

Secure sites recommend closing the browser. Is closing just the tab effectively the same?

you can try disabling ipv6 support in firefox & see if that helps - [https://support.mozilla.org/en-US/kb/Server%20not%20found#w_ipv6]

Hello! The new version of Firefox I have a problem with opening the site VKontakte. The browser displays the following error: "Firefox has determined that the s

Hello!
The new version of Firefox I have a problem with opening the site VKontakte. The browser displays the following error: "Firefox has determined that the server redirects the request for this address in a way that it will never end." How to solve this problem? Please excuse me for my English.
Sincerely, Vsevolod.

You're welcome

How do you get your site to appear the same in all web browsers?

There are some things that show up differently in Safari than they do in IE and Firefox, how do I get everything to jive the same? I think it is in the code which I am not an expert on. My website was a template that I purchased online and most of the code was already built in. I have some of my links in Safari showing white when you rollover them but when I look in IE and Firefox they're not there. Can anyone offer any suggestions on how to fix this?
Thanks

Actually what you are learning here is to create a stylesheet for all of your web pages. Including all of your styles inline in the page's code is very cumbersome.
Each of your pages needs code that refers to your stylesheet:
<style type="text/css" media="all">
@import url("../../css/content.css");
</style>
<style type="text/css" media="print">
@import url("../../css/content_print.css");
</style>
This assumes that your stylesheets (in my case, one for print, one for browsers) are located in a folder called /css which is a habit I have for neatness.
One thing that Dreamweaver does very well is keeps track of your styles and helps you edit styles to suit. I'm using CS3 which doesn't really allow you to look at the result of rollovers from within the application, but I keep Firefox handy for previewing. Problem is, once you create a style for a "visited" link, you can no longer see the result of the style for unvisited links in your browser unless you clear your browsers cache. Dreamweaver CS3 always shows links in their unvisited state.
There is other code I use to make Microsoft's non-compliant browsers do the right thing, though rollovers, visited, and such all tend to work the same in all browsers, save the most antediluvian.


The above code handles issues with Microsoft's intransigence pretty well, and my sites tend to look really uniform. But in the case of menus, I often have to write a completely different stylesheet to wrestle with Internet Exploder:
This is stylesheet reference for my menus:
<style type="text/css" media="all">
@import url("../css/menu/menu.css");
</style>

Then I craft the changes for Internet Exploiter 6 in a separate stylesheet.
This should give you an idea of how powerful an external stylesheet can be. You can use "if" statements to handle the differences between the Microsoft non-compliant browsers and the more modern and compliant browsers, like Safari, Firefox and Opera.
You can see the result in any browser at http://www.readingsbykaren.com

How to get my text and graphics to scale with the browser dynamically?

Hi there!
I've run into an issue where, with my design - I'm trying to get text and graphics to scale and move with the browser as someone adjusts it. (As opposed to it moving and falling apart as the browser window gets too small.)
http://www.richardsuchit.com is where it's posted at the moment.
I'd it to maintain it's position in the center of the browser window no matter how small or large, just to adjust in size, rather in position. I wonder if this is possible?
Looking forward to your answers! Thanks.
-Richard

Hi
Here is a sample file of text that re-sizes according to your window size.
https://www.dropbox.com/s/z7hqxejysuxs597/Sample.zip
Regards
Susanta Kumar Muduli

How can you make your Facetime work when the error message comes up saying, "The server encountered an error processing registration. Please try again later." I am using the Facetime app on my MacBook Pro 13" Inch

Please answer my question quickly!!!

Hey radyslav,
There's an article that applies to your situation, I'd follow the steps within here:
FaceTime, Game Center, Messages: Troubleshooting sign in issues
http://support.apple.com/kb/TS3970
Take care,
Delgadoh

How do you get your site removed from the reported attack sites list?

Hi,
Our site https://mail.ccgs.nsw.edu.au/owa appears to be on the 'reported attack sites' or reported web forgeries' lists and is getting blocked in Firefox. This is a mater of urgency as we use Firefox as our web browser in this organization and there is a site wide outage, none of our staff can use their webmail. How do we get removed from this list?
When we have the site in the "Allowed Sites" list it still does not load.
When we un-tick "Block reported attack sites" and "Block reported web forgeries" the site works. Though we do not want to untick these for our users for security purposes.
Regards

I am not seeing this problem currently with that URL. Firefox refreshes the site list from Google quite frequently. You can check for new files in the following folder and if they are not getting refreshed, I suppose you could try deleting them.
C:\Users\''username''\AppData\Local\Mozilla\Firefox\Profiles\''profilename''\safebrowsing
Note that this is under the Local branch (location of cache) and not the Roaming branch (location of preferences, extensions, etc.)

Make your site scale to the size of the browser

Similar Messages

Maybe you are looking for