Jump to content

Centering web page

dbonser

By dbonser
in HTML/XHTML

Recommended Posts

Don E Invested Member

Don E

Posted
Posted

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.

Link to comment
Share on other sites
dbonser Newbie

dbonser

Posted
  • Author
Posted

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="

Link to comment
Share on other sites
Don E Invested Member

Don E

Posted
Posted

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;)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...