Sunday, December 11, 2011

How do I edit HTML so that my page will stay the same even if the window size changes?

I'm making a website with HTML. It's not really that complicated, but when I make my window smaller everything gets messed up. Pictures move around, as do headings and text. My horizontal frame that contains my navigation bar gets so small that you can no longer see more than half of the links. I want to know how to fix this, so my pages will stay the same regardless of window size. Thank you.How do I edit HTML so that my page will stay the same even if the window size changes?
There is no such thing as a fraction of a pixel. Use of 10.45% works. You can use percents in place of fixed units, but you need to dump (remove) any absolute positioning for your pages. Most people do not surf with real small browser windows so try to make it work at a minimum with/height that is to be expected on the Internet. Take a read of following site:



http://www.alistapart.com/articles/holyg鈥?/a>



RonHow do I edit HTML so that my page will stay the same even if the window size changes?
you should define any sizes by portion instead of pixels......



for e.g: if you want an ';object'; to be 10.24px width you should define it as 10%



get in touch via IM, I am also trying to solve the same problem maybe we can get to a conclusion
I believe it has to do with positioning,

weather it is relative or absolute

Its been a while since i did html and css

But i believe it is done by putting this in

%26lt;Style= position:absolute%26gt;

Im not 100% sure, but thats how i made my pages and they always stayed the same size regardless of the window's they were in
Always place things in a table with a fixed width and center that table on the screen and presto the page stays the same on all resizes.
Define the table size with pixel values...
You need to design your site as a ';liquid layout'; that is, using % for all your widths. You need to be careful with your images as well.

Go to www.web2coders.com and take the ';table v div challenge';. Download the code at the end of the show: it contains many tricks to develop liquid layouts...

Good luck.
As others have said, using percentages for your widths/heights in your CSS/HTML will help.



However, you should also specify the min-width css attribute on anything which causes trouble - set this to the smallest number of pixels permissible, and it'll help stop things shrinking and messing up the output.
Thre are a couple ways actually and it all depends on how you are setting up the site. If you are using frames to split up a page you can set their width/height to remain constant in the %26lt;frameset%26gt;



Ex: In this example the right frame would always remain 300 pixels wide no matter how large or small someone makes the browser window. The left frame simply takes up the rest of the space (if any).



%26lt;frameset cols=';300,*';%26gt;

%26lt;frame src=';frame_a.htm';%26gt;

%26lt;frame src=';frame_b.htm';%26gt;

%26lt;/frameset%26gt;



If you are not using %26lt;frameset%26gt; or any of that then %26lt;table%26gt; is the simplest way to go. Once you define the width or height of a table it remains that size, again, no matter what size or shape someone makes their browser window.



Ex:

%26lt;table width=600%26gt;%26lt;tr%26gt;%26lt;td%26gt;%26lt;/td%26gt;%26lt;/tr%26gt;%26lt;/table%26gt;



You can also play with the sections inside the table (%26lt;td%26gt;%26lt;th%26gt;etc) and set them to have fixed widths as well. There are a ton of good examples and explanations at www.w3schools.com that can help you out even more.



Good luck and happy coding.

No comments:

Post a Comment