centering a web page on a browser

Topic

New Reply

I have read that it is smart to design a webpage for a 640X480 monitor. I disagree as I find most monitors have a higher resolution. Nonetheless, I want to write for something will fit all monitors and not stretch out of proportion on wide screens. What I would like to do is have it centered such as you see at http://www.amxevents.com/index.php – I would like to know how to do that… any advice?

I did one before for a friend (http://www.crepechalet.com) but used frames with % and it fills whatever screen it is on. That was my first attempt at coding a webpage and this time I want to make one that is good.

Thanks in advance.

Reply | Quote

Replies

What I would like to do is have it centered such as you see at http://www.amxevents.com/index.php – I would like to know how to do that… any advice?

Due to differences between browsers, you need to adopt a dual strategy. Something along these lines (air code!):

HTML:

Code:

  

	
Big heading
	

A paragraph
  

CSS:

Code:

body {text-align:center;min-width:750px}
#content {text-align:left; width:750px; margin:0 auto;}

What that does is:

[*]Center the “text” in the body (forces centering in older versions of IE)
[*]Set a minimum width on the body so that a horizontal scroll bar appears at less than 750 pixels (recent browsers)
[*]Fixes the internal content text alignment to the left
[*]Set the width for the content (if you skip this, it will fill the entire width)
[*]Set margins left and right to “auto” which forces centering in modern browsers

Does it work?

Reply | Quote

Thanks. What does ‘air code’ mean?

I will post back after I have tried it and let you know if it works for me.

Reply | Quote

To write “air code” means that you just write down what you think should work, without actually testing it.

Reply | Quote

What does ‘air code’ mean?

What Hans said. It also may mean “I have that around here somewhere and can’t find it at the moment, but this is how I think it’s done.”

(I should add, it’s an analogy to air guitar, but hopefully more useful. No offense intended to any air guitarists.)

Reply | Quote

Coding seemed to be a weak point of mind and it takes a good deal of time to really be good at it. I like the idea similar to a layout desktop publishing, what you see is what you get concept. Fortunately I discovered WYSIWYG Web Builder a very affordable web builder that require almost no knowledge of html to build. It is a web design solution that makes web building easy and fun. Centering pages for one thing requires only to select from a drop down list. Really you can do a lot more even create professional looking website without really trying. Give it a whirl, there’s a fair chance you will be hooked.

Reply | Quote

I discovered WYSIWYG Web Builder a very affordable web builder that require almost no knowledge of html to build.

Thanks for mentioning this. Their site uses the same formula described in this thread to center the page.

One problem this software shares with many other WYSIWYG tools is incomplete standards support. The pages generated by their software use a lot of old style tags, event as they make extensive use of CSS. They also omitted the DOCTYPE, so they are using each browser’s different quirks mode, with the likely result that the pages will display differently. Hopefully they will update the software over time to solve these problems. I recognize that it’s not easy, or everyone would have done it already.

Another hard problem is making pages that print correctly in all browsers: Firefox has problems printing pages with position:absolute and certain overflow settings. The software makes liberal use of these style properties to lay out the pages, so it would be a good idea to also offer a printable version.

Reply | Quote

As I said coding is a weak point of mind. I look at codes (source code of web pages) more for curiosity than debugging the codes for error most of the time. As a newbies in web design I find it easier to do things visually if I could help it without the complexity of codes that I must admit buffles me everytime.
The application I mentioned above offers that with ease to a level I could easily grasp. More time to design or even change the designs and having fun at the same time is a good deal. The application allows custom code or html attributes that are not implemented to be infused as well so coders could still tailor their web pages to their likings.

I looked at the codes generated on the websites I created and the first line of code mentioned the DOCTYPE and looking at the page properties of those pages from the application it does support HTML 4.01 Transitional and XHTML 1.0 Transitional so I guess it does generate codes that are serviceable. The application was recently upgraded with many new exciting features and hopefully conforming more closely to standards.

I must admit and I am guilty of this, that provisions for printing webpages are taken into consideration almost always on the last stage or after it been uploaded to the server after users have complained that they cannot correctly render the pages for print. So far the websites I created seem to scale well on print pages for popular browser I tried to test it with IE6/7, Maxthon, and even Firefox. Safari though seemed to be hard to please thus far. Because the applications allows me to easily clone pages, I could easily redesign or even refine the layout so I could satisfy the print requirement for pages I design.

For me and other newbies this probably is simpler and for you who can code this could be a blessing because you can concentrate on refining the codes to have that perfect website, finally.

Thanks for pointing out the print issue now I have to look at those pages so that I could satisfy my Safari clients.

Reply | Quote