How do i keep everything centrelise my website in different size of screens?
I have created a very simple site by using microsoft web publisher and I am very pleased with it when viewed on my 17inch screen.
But when it’s viewed on smaller screens it’s all bunched up!
So my question is two fold; how do I keep everything centralised and how do I optimise it to work with different sized screens?
5 Responses
Who Dares Wins
10 Mar 2010
fathead
10 Mar 2010
You need to use CSS (cascading style sheets.) These will allow you to define different ways of presenting the page content based upon browser capabilities and goal. Google for "introduction CSS" and you will find some sites with examples.
Albert
10 Mar 2010
This requires some html. I think you can edit the html in publisher if I’m not mistaken.
<body style="text-align: center">
<div style="width: 800px;
margin: auto;
text-align: left">
(your data)…………
</div>
</body>
Note: Your width could be set to change dynamically by replacing 800px (pixels) with percentages ie. 80% so that the data will fit 80% of the window. They will resize automatically when you maximize or minimize your window.
Szandrah
10 Mar 2010
It really depends on how your code looks. Microsofts programs are not known for writing good code so even if your website looks good in one browser it can look really bad in another one or on a different sized monitor.
Here is how I use to center content on my websites:
I put a <div> around all the page content, just inside the <body> tag. This <div> is given an ID (wrapper, for instance) and in my style sheet I do the following:
wrapper {
position: relative;
width: 600px;
left: 50%;
margin-left: -300px; }
This tells the <div> to be 600 pixles wide. The width can be set to anything, of course, but be sure it is an even number. I then position the left part of the <div> in the middle of the page by setting the left position to 50%. To pull back the <div> the right amount I set a negative left margin. The margin should equal half the width of the div.
This method centers a <div> (or any other block element) correctly on all modern browsers, including Explorer.
Good luck!
yasserhy
10 Mar 2010
Screen size has nothing to do with centralizing your page! every code logic simply subtract the view area from the screed width .. then divide the result by two!
check your code for errors and bugs.
and usually, you should design your web sites using the 800*600 standards. Not that it has anything to do with centralization, rather you make sure that your web site will show in the display area without having the user use the bottom scroll bar.
Always optimise your web page to to the smallest screen – such as 800 pixel width.
regarding keeping it central:
<div align="center">
wdw