Jump to content
Sign in to follow this  
dbonser

Centering web page

Recommended Posts

I have a web page that I created that is aligning to the left (it is a set width because of all of the different resolution sizes). How can I make the entire page center on the background?

Share this post


Link to post
Share on other sites

If the content is inside a wrapper div, in your CSS you can try something like: #wrapper { width: 960px; /*fixed width*/ margin-right: auto; margin-left: auto;} Probably posting your code would be a good idea giving others the opportunity in helping you further.

Edited by Don E

Share this post


Link to post
Share on other sites

here is my code. I have not done anything with css yet nor have I ever used wrapper. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style>ul{ list-style-type: none; margin: 0; padding: 10; overflow: hidden; margin-right: auto;}li{float:left;}a{display:block;width:165px;background-color:#dddddd;}.MS_WH_ZoneContent{padding:3px;overflow-x:hidden}.auto-style1 { padding: 3px;}</style><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Welcome</title><style type="text/css">.auto-style2 { font-family: Arial, Helvetica, sans-serif; font-size: small;}</style></head><body ><div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><p><img alt="MSE" height="100" src="mustardseed03.jpg" width=960px /></p><ul> <li><a href="home.html">Home</a></li> <li><a href="About Us.html">About Us</a></li> <li><a href="Shaklee.html">Shaklee</a></li> <li><a href="Contact Us.html">Contact Us</a></li> <li><a href="Blog.html">Sitemap</a></li></ul><table style="width: 960px; text-align: center;"> <tr> <td style="width: 187px" class="auto-style2"><em>Mustard Seed Enterprise, LLC"if you have faith of a mustard seed, you can say to this mountain, move and it will move from here to there." </em></td> <td style="width: 773px"> <div align="left" style="FONT-SIZE: 16px"> <font color="#558492" face="Georgia, Garamond, serif" size="5"> <strong><em> MUSTARD SEED ENTERPRISES, LLC</em></strong></font></div> <br /> </td> </tr></table><p><img alt="Mustard Seed" height="54" src="800px-Wild_Mustard2.jpg" style="float: left" width="55" /><br /><table> <tr> <td style="WIDTH: 48.5%" vAlign="top"> <div class="auto-style1"> <div style="width: 518px"> Mustard Seed Enterprises is a small central Iowa business, which offers IT consulting and Project Management skills. We are here to help you with your computer hardware or softwarecomputer needs in a consulting capacity. </div> </div> </td> </tr></table> <img alt="Mustard Seed" height="54" src="800px-Wild_Mustard2.jpg" style="float: left" width="55" /><br /><table> <tr> <td style="WIDTH: 48.5%" vAlign="top"> <div class="auto-style1"> <div> Our company can provide you with over 20 years of PC experience. This includes 15 years of Quality Assurance including software testing and leading teams of software testers. </div> <br> <div> We have experience in the Quality Assurance area doing both software testing, and coordinating the certifiation drawings to apply for obtainine certificates to use the products in Hazardous Locations in the United States, Canada and other areas of the world. </div><br> <div> We have worked with various companies to create and improve processes so that certification for ISO can be obtained for those businesses. </div><br> <div> <br /> In addition we have experience in writing technical documentation and online help using HTML code for ease of users in using various software packages. </div><br> <div> If you have a need that we can assist you with, please contact us and we will give you a free estimate for the project. Please contact us using the Contact Us tab.<br /> </div> </td> <td></td> <td style="WIDTH: 48.5%" vAlign="top"> <div class="auto-style1"> <br /> <div> <b>Mustard Seed Enterprises, LLC</b><br /> (641) 751-4645<br /> 2684 Zeller Ave.</div> <div> Marshalltown, IA 50158<br /> <a href="

Share this post


Link to post
Share on other sites

From the looks of it, you did your layout with tables. According to today's standard, use div's, sections, etc to layout your page and only use tables for displaying tubular data. With div's, you can use padding, margin, floating, etc to do your layout. As many would suggest on this board, do not use the CSS positioning to layout your page but only if it's absolutely necessary, especially absolute positioning. You're already using div's in a lot of places with your tables, it shouldn't be difficult to rearrange things around. But just a suggestion. :) IF you really don't want to do any re-do, just add a "wrapper" around everything and give it a width of 960px to try and center everything. CSS:

#wrapper {   width: 960px;   margin-right: auto;   margin-left: auto;}

<body><div id="wrapper">all your tables and divs in here </div></body>

Note: Adding: margin: 0 auto; to the first table style attribute should center that table on the page.(Same as doing: margin-left: auto; margin-right: auto;)

Edited by Don E

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...