SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    bellmore
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New a Quick Fix for Centering a Webpage.

    Our website www.mmprint.com needed and overhaul and I have decided to use CSS for design. I've pretty much got it down but I can't figure out a simple attribute from some reason.

    Take a look at our original site, notice how the entire site is centered in the browser windows no matter what size it is. Now take a look at this, www.mmprint.com/indexcss.htm (prototype) Does anyone know how to center everyting in one shot to mimic the original site? Is it the page margins?

    Please help

    Cliff

  2. #2
    SitePoint Evangelist Redivider's Avatar
    Join Date
    Nov 2003
    Location
    PA
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A quick fix would be to wrap the entire body contents in a DIV tag, like this:

    Code:
    <body>
    <div align="center">
    
    Everything else...
    
    </div>
    </body>

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    bellmore
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, it didn't work.

    Any other idea's, I really need a solution for this one.


    Thanks for the time

  4. #4
    SitePoint Member reh3363's Avatar
    Join Date
    Aug 2004
    Location
    Las Vegas, NV
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a way to accomplish centering without extra markup. Just change #wrapper to whatever your container name is.

    Code:
    body {
    text-align: center;
    }
    
    #wrapper {
    margin: 0 auto; text-align: left;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    bellmore
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Though will this center every element on the page....?

  6. #6
    SitePoint Member reh3363's Avatar
    Join Date
    Aug 2004
    Location
    Las Vegas, NV
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The text-align: left in the #wrapper div will will align everything inside the div to the left.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Also have a look at the faq thread as this is explained in detail as it is a common question

    Paul

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    bellmore
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried it out but it didn't work....

    Anythign else?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Tried it out but it didn't work.
    Then you didn't do it right Did you read the FAQ? It will answer all your questions.

    Paul

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Whats all that rubbish outside the body tag at the bottom?

    Because you have absolutely place your wholepage some distance from the windows edge (for some strange reason) then when you use the centreing techniques mentioned above the page will be centred but you will still have the massive margins on the page.

    You need to have your page sitteing against the left edge of the window and then it will centre correctly.

    I've only done this quickly so may have missed a px or 2 somewhere but it gives you the general idea.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <TITLE>New York Printing Service - The Marsid-M&M Group printing company </TITLE>
    <meta name="TITLE" content="New York Printing Services - The Marsid M&amp;M Group Printing Company - Since 1973" />
    <meta name="Description" content="New York based printing company providing nationwide color printing services with Free Shipping. Color printing of brochures, postcards, catalogs, stationery, and all business essentials" />
    <meta name="Keywords" content="printing companies,printing services New York,color printing,postcard printing,printing companies New York,digital printing New York,brochure printing,New York,postcard printing New York,brochures,full color printing,printing company New York,digital printing,printing service New York,NY,NYC,Manhattan,printing NY,online printing companies,color printing New York,online printing,business card printing,brochures,commercial printing New york,full color,printing,color printing NY,postcards,postcard printing New York,mailing services,fulfillment,printing services New Jeresy,York,poster printing,large format printing,business card printing New York, printers New York,commercial printing,printing Virgina,printing services" />
    <meta name="Robots" content="index,follow">
    <meta name="Googlebot" content="index,follow">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    h3 {
     font-weight: bolder;
     color: #000000;
     font-family: Arial;
     font-size: 18px;
    }
    p {
     font-family: Arial;
     font-size: 12px;
     line-height: 18px;
     color: #666666;
    }
    h2 {
     font-family: Arial;
     font-size: 16px;
     font-weight: bold;
     color: #000000;
    }
    body {
     background-image: url(index_files/verticalbgfade.jpg);
     font-family: Arial;
     font-size: 12px;
     font-style: normal;
     color: #999999;
     position: relative;
    }
    p {
     font-family: Arial;
     font-size: 12px;
     color: #006699;
    }
    a {
     list-style-position: outside;
     list-style-type: square;
     font-family: Arial;
     font-size: 12px;
     line-height: 22px;
     font-weight: bold;
    }
    .welcomebar {
     position: absolute;
     border: thin ridge;
     left: 163px;
     top: 136px;
     width: 755px;
     background-image: url(index_files/MainBarpurple.jpg);
     height: 28px;
    }
    .MediaWindow {
     border-top-width: thin;
     border-right-width: thin;
     border-bottom-width: thin;
     border-left-width: thin;
     border-top-style: none;
     border-right-style: ridge;
     border-bottom-style: ridge;
     border-left-style: ridge;
     position: absolute;
     left: 163px;
     top: 168px;
     background-image: url(ondemandprinting.swf);
     width: 755px;
     height: 141px;
    }
    .Buttons {
     position: absolute;
     top: 311px;
     right: 100px;
     left: 164px;
     visibility: visible;
     z-index: 10;
     width: 757px;
     border: thin none;
    }
    .bodyarea {
     background-color: #FFFFFF;
     border: thin ridge;
     position: absolute;
     top: 311px;
     right: 100px;
     height: 708px;
     width: 755px;
     left: 163px;
     z-index: 1;
    }
    .IntroP {
     position: absolute;
     left: 177px;
     width: 652px;
     height: 156px;
     top: 350px;
     z-index: 14;
    }
    .Navlinks {
     position: absolute;
     left: 9px;
     width: 137px;
     height: 242px;
     top: 171px;
    }
    .Estimatepic {
     border-top-width: thin;
     border-right-width: thin;
     border-bottom-width: thin;
     border-left-width: thin;
     border-top-style: none;
     border-right-style: none;
     border-bottom-style: ridge;
     border-left-style: none;
     position: absolute;
     height: 28px;
     width: 150px;
     top: 137px;
     left: 2px;
     background-image: url(index_files/Printed-products.gif);
    }
    .NavBarleft {
     border: thin ridge;
     position: absolute;
     height: 276px;
     width: 150px;
     background-color: #FFFFFF;
     left: 0px;
     top: 136px;
    }
    .NavBarmid {
     background-color: #FFFFFF;
     border: thin ridge;
     position: absolute;
     width: 150px;
     left: 0px;
     height: 153px;
     top: 424px;
    }
    .Newsletterpic {
     border-top-width: thin;
     border-right-width: thin;
     border-bottom-width: thin;
     border-left-width: thin;
     border-top-style: none;
     border-right-style: none;
     border-bottom-style: ridge;
     border-left-style: none;
     position: absolute;
     height: 28px;
     width: 150px;
     background-image: url(index_files/newsletters.gif);
     top: 426px;
     left: 2px;
    }
    .logobar {
     position: absolute;
     border: thin ridge;
     width: 918px;
     left: 0px;
     top: 28px;
     height: 90px;
     background-image: url(index_files/Marsidlogobar.gif);
    }
    .connector1 {
     position: absolute;
     background-image: url(index_files/Hconnector.gif);
     height: 5px;
     width: 9px;
     top: 147px;
     left: 154px;
     background-repeat: no-repeat;
    }
    .connector2 {
     position: absolute;
     height: 7px;
     width: 9px;
     background-image: url(index_files/Hconnector.gif);
     background-repeat: no-repeat;
     left: 154px;
     top: 435px;
    }
    .emailsignupbox {
     background-color: #FFFFFF;
     position: absolute;
     height: 35px;
     width: 100px;
     left: 36px;
     top: 472px;
    }
    .emailsignuptext {
     background-color: #FFFFFF;
     position: absolute;
     height: 35px;
     width: 142px;
     left: 6px;
     top: 460px;
    }
    a:link {
     color: #000000;
     text-decoration: none;
    }
    a:visited {
     text-decoration: none;
     color: #000000;
    }
    a:hover {
     text-decoration: underline;
     color: #0033FF;
    }
    a:active {
     text-decoration: none;
     color: #000000;
    }
    body {
     margin-top: 40px;
     text-align:center;
     min-width:921px;
    }
    #wrapper{
     text-align:left;
     position:relative;
     width:921px;
     margin-left:auto;
     margin-right:auto;
    }
    </style>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    	document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    <body>
    <div id="wrapper">
    <div class="IntroP"> 
      <h2>Commercial Printing Services Made Simple, </h2>
      <P>The Marsid-M&amp;M Groupis a leading New York color printing company offering 
    	nationwide printing services. We have provided commercial printing in Long 
    	Island, NY and Manhattan for over 30 years with only the most personalized 
    	service and superior quality printing. Our online nationwide printing services 
    	are paramount, every order is treated with the highest priority and our specialized 
    	staff are trained to produce only the best quality printing of all business 
    	essentials, marketing materials, and promotional products.<a href="http://www.mmprint.com/profile.htm"> 
    	>>company profile </a></P>
    </div>
    <div class="MediaWindow">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...rsion=6,0,29,0" width="755" height="142">
    	<param name="movie" value="Flash/ondemandprinting.swf">
    	<param name="quality" value="high">
    	<embed src="Flash/ondemandprinting.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="755" height="142"></embed></object>
    </div>
    <div class="NavBarleft"></div>
    <div class="Navlinks"> 
      <div><a href="<A href="http://www.mmprint.com/postcards.html">Postcards</a></div">http://www.mmprint.com/postcards.html">Postcards</a></div>
      <div><a href="<A href="http://www.mmprint.com/brochures.html">Brochures</a></div">http://www.mmprint.com/brochures.html">Brochures</a></div>
      <div><a href="<A href="http://www.mmprint.com/catalogs.html">Catalogs</a></div">http://www.mmprint.com/catalogs.html">Catalogs</a></div>
      <div><a href="<A href="http://www.mmprint.com/newsletters.html">Presentation">http://www.mmprint.com/newsletters.html">Presentation Folders 
    	</a></div>
      <div><a href="<A href="http://www.mmprint.com/cards.html">Business">http://www.mmprint.com/cards.html">Business Cards</a></div>
      <div><a href="<A href="http://www.mmprint.com/reports.html">Newsletters</a></div">http://www.mmprint.com/reports.html">Newsletters</a></div>
      <div><a href="<A href="http://www.mmprint.com/stationary.html">Stationery">http://www.mmprint.com/stationary.html">Stationery </a></div>
      <div><a href="<A href="http://www.mmprint.com/Posters.html">Posters">http://www.mmprint.com/Posters.html">Posters &amp; Signs </a></div>
      <div><a href="<A href="http://www.mmprint.com/banners.html">Sell">http://www.mmprint.com/banners.html">Sell Sheets &amp; Flyers 
    	</a></div>
      <div><a href="<A href="http://www.mmprint.com/signs.html">Journals</a></div">http://www.mmprint.com/signs.html">Journals</a></div>
      <a href="<A href="http://www.mmprint.com/links.htm">&gt;&gt">http://www.mmprint.com/links.htm">&gt;&gt; more </a> </div>
    <div class="Estimatepic"></div>
    <div class="bodyarea"></div>
    <div class="connector1"></div>
    <div class="connector2"></div>
    <div class="NavBarmid"> 
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    <div class="Newsletterpic"></div>
    <div class="welcomebar"></div>
    <div class="Buttons"><a href="http://www.mmprint.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','index_files/AltHomepage.gif',1)"><img src="index_files/Homepage.gif" name="Image13" width="100" height="22" border="0"></a><a href="http://www.mmprint.com/profile.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','index_files/AltAboutus.gif',1)"><img src="index_files/Aboutus.gif" name="Image5" width="100" height="22" border="0"></a><a href="http://www.mmprint.com/info.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','index_files/altinfocenter.gif',1)"><img src="index_files/infocenter.gif" name="Image6" width="100" height="22" border="0"></a><a href="http://www.mmprint.com/promo.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','index_files/AltPromo.gif',1)"><img src="index_files/Promos.gif" name="Image7" width="100" height="22" border="0"></a><a href="http://www.mmprint.com/sendfiles.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','index_files/Altuploadfiles.gif',1)"><img src="index_files/Upload-Files.gif" name="Image8" width="100" height="22" border="0"></a><a href="http://www.mmprint.com/Testimonials.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','index_files/AltTestimonials.gif',1)"><img src="index_files/Testimonials.gif" name="Image9" width="100" height="22" border="0"></a><a href="http://www.mmprint.com/contact.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','index_files/altcontactus.gif',1)"><img src="index_files/Contactus.gif" name="Image10" width="100" height="22" border="0"></a><a href="http://chat.boldchat.com/chat/visito...did=2818255412" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','index_files/altlivechat.gif',1)"><img src="index_files/livechat.gif" alt="Online Chat Available Mon-Fri 8:30 - 5:30 EST" name="Image11" width="55" height="22" border="0"></a></div>
    <div class="logobar"></div>
    <div id="Layer1" style="position:absolute; left:6px; top:510px; width:137px; height:58px; z-index:15" class="emailsignupbox"> 
      <form name="ccoptin" action="http://ccprod.roving.com/roving/d.jsp" target="_blank" method="post">
    	<input name="email address" type=text id="email address" size=20>
    	<input type=hidden name="m" value="1011289463041">
    	<input type=hidden name="p" value="oi">
    	<input type=submit name="Submit" value="Submit">
      </form>
    </div>
    <div class="emailsignuptext"> Sign-up to be notified of our new promotions and 
      printing specials </div>
    </div>
    </body>
    </html>
    You have 27 errors still in that code that also need to be tidied up but I didn't have time to do that as well

    Paul

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    bellmore
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, and everyone else, thank you for the help on this, but it's not quite right. Please take a look at the orignial site www.mmprint.com expand the window and shrink it again, notice how the entire webpage centers itself automatically.

    Thats what I'm going for.... how can this be acheived using CSS and without centering the text?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The code I posted would have done that but it seems to have been corrupted when I pasted it in so I'll try pasting again. The css was alright and if you just took that out and added the wrapper div your page would have centred.

    I'll try pasting again:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <TITLE>New York Printing Service - The Marsid-M&M Group printing company </TITLE>
    <meta name="TITLE" content="New York Printing Services - The Marsid M&amp;M Group Printing Company - Since 1973" />
    <meta name="Description" content="New York based printing company providing nationwide color printing services with Free Shipping. Color printing of brochures, postcards, catalogs, stationery, and all business essentials" />
    <meta name="Keywords" content="printing companies,printing services New York,color printing,postcard printing,printing companies New York,digital printing New York,brochure printing,New York,postcard printing New York,brochures,full color printing,printing company New York,digital printing,printing service New York,NY,NYC,Manhattan,printing NY,online printing companies,color printing New York,online printing,business card printing,brochures,commercial printing New york,full color,printing,color printing NY,postcards,postcard printing New York,mailing services,fulfillment,printing services New Jeresy,York,poster printing,large format printing,business card printing New York, printers New York,commercial printing,printing Virgina,printing services" />
    <meta name="Robots" content="index,follow">
    <meta name="Googlebot" content="index,follow">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    h3 {
     font-weight: bolder;
     color: #000000;
     font-family: Arial;
     font-size: 18px;
    }
    p {
     font-family: Arial;
     font-size: 12px;
     line-height: 18px;
     color: #666666;
    }
    h2 {
     font-family: Arial;
     font-size: 16px;
     font-weight: bold;
     color: #000000;
    }
    body {
     background-image: url(index_files/verticalbgfade.jpg);
     font-family: Arial;
     font-size: 12px;
     font-style: normal;
     color: #999999;
     position: relative;
    }
    p {
     font-family: Arial;
     font-size: 12px;
     color: #006699;
    }
    a {
     list-style-position: outside;
     list-style-type: square;
     font-family: Arial;
     font-size: 12px;
     line-height: 22px;
     font-weight: bold;
    }
    .welcomebar {
     position: absolute;
     border: thin ridge;
     left: 163px;
     top: 136px;
     width: 755px;
     background-image: url(index_files/MainBarpurple.jpg);
     height: 28px;
    }
    .MediaWindow {
     border-top-width: thin;
     border-right-width: thin;
     border-bottom-width: thin;
     border-left-width: thin;
     border-top-style: none;
     border-right-style: ridge;
     border-bottom-style: ridge;
     border-left-style: ridge;
     position: absolute;
     left: 163px;
     top: 168px;
     background-image: url(ondemandprinting.swf);
     width: 755px;
     height: 141px;
    }
    .Buttons {
     position: absolute;
     top: 311px;
     right: 100px;
     left: 164px;
     visibility: visible;
     z-index: 10;
     width: 757px;
     border: thin none;
    }
    .bodyarea {
     background-color: #FFFFFF;
     border: thin ridge;
     position: absolute;
     top: 311px;
     right: 100px;
     height: 708px;
     width: 755px;
     left: 163px;
     z-index: 1;
    }
    .IntroP {
     position: absolute;
     left: 177px;
     width: 652px;
     height: 156px;
     top: 350px;
     z-index: 14;
    }
    .Navlinks {
     position: absolute;
     left: 9px;
     width: 137px;
     height: 242px;
     top: 171px;
    }
    .Estimatepic {
     border-top-width: thin;
     border-right-width: thin;
     border-bottom-width: thin;
     border-left-width: thin;
     border-top-style: none;
     border-right-style: none;
     border-bottom-style: ridge;
     border-left-style: none;
     position: absolute;
     height: 28px;
     width: 150px;
     top: 137px;
     left: 2px;
     background-image: url(index_files/Printed-products.gif);
    }
    .NavBarleft {
     border: thin ridge;
     position: absolute;
     height: 276px;
     width: 150px;
     background-color: #FFFFFF;
     left: 0px;
     top: 136px;
    }
    .NavBarmid {
     background-color: #FFFFFF;
     border: thin ridge;
     position: absolute;
     width: 150px;
     left: 0px;
     height: 153px;
     top: 424px;
    }
    .Newsletterpic {
     border-top-width: thin;
     border-right-width: thin;
     border-bottom-width: thin;
     border-left-width: thin;
     border-top-style: none;
     border-right-style: none;
     border-bottom-style: ridge;
     border-left-style: none;
     position: absolute;
     height: 28px;
     width: 150px;
     background-image: url(index_files/newsletters.gif);
     top: 426px;
     left: 2px;
    }
    .logobar {
     position: absolute;
     border: thin ridge;
     width: 918px;
     left: 0px;
     top: 28px;
     height: 90px;
     background-image: url(index_files/Marsidlogobar.gif);
    }
    .connector1 {
     position: absolute;
     background-image: url(index_files/Hconnector.gif);
     height: 5px;
     width: 9px;
     top: 147px;
     left: 154px;
     background-repeat: no-repeat;
    }
    .connector2 {
     position: absolute;
     height: 7px;
     width: 9px;
     background-image: url(index_files/Hconnector.gif);
     background-repeat: no-repeat;
     left: 154px;
     top: 435px;
    }
    .emailsignupbox {
     background-color: #FFFFFF;
     position: absolute;
     height: 35px;
     width: 100px;
     left: 36px;
     top: 472px;
    }
    .emailsignuptext {
     background-color: #FFFFFF;
     position: absolute;
     height: 35px;
     width: 142px;
     left: 6px;
     top: 460px;
    }
    a:link {
     color: #000000;
     text-decoration: none;
    }
    a:visited {
     text-decoration: none;
     color: #000000;
    }
    a:hover {
     text-decoration: underline;
     color: #0033FF;
    }
    a:active {
     text-decoration: none;
     color: #000000;
    }
    body {
     margin-top: 40px;
     text-align:center;
     min-width:921px;
    }
    #wrapper{
     text-align:left;
     position:relative;
     width:921px;
     margin-left:auto;
     margin-right:auto;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div class="IntroP"> 
      <h2>Commercial Printing Services Made Simple, </h2>
      <P>The Marsid-M&amp;M Groupis a leading New York color printing company offering 
    	nationwide printing services. We have provided commercial printing in Long 
    	Island, NY and Manhattan for over 30 years with only the most personalized 
    	service and superior quality printing. Our online nationwide printing services 
    	are paramount, every order is treated with the highest priority and our specialized 
    	staff are trained to produce only the best quality printing of all business 
    	essentials, marketing materials, and promotional products.<a href="http://www.mmprint.com/profile.htm"> 
    	>>company profile </a></P>
    </div>
    <div class="MediaWindow">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...rsion=6,0,29,0" width="755" height="142">
    	<param name="movie" value="Flash/ondemandprinting.swf">
    	<param name="quality" value="high">
    	<embed src="Flash/ondemandprinting.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="755" height="142"></embed></object>
    </div>
    <div class="NavBarleft"></div>
    <div class="Navlinks"> 
      <div><a href="<A href="http://www.mmprint.com/postcards.html">Postcards</a></div">http://www.mmprint.com/postcards.html">Postcards</a></div>
      <div><a href="<A href="http://www.mmprint.com/brochures.html">Brochures</a></div">http://www.mmprint.com/brochures.html">Brochures</a></div>
      <div><a href="<A href="http://www.mmprint.com/catalogs.html">Catalogs</a></div">http://www.mmprint.com/catalogs.html">Catalogs</a></div>
      <div><a href="<A href="http://www.mmprint.com/newsletters.html">Presentation">http://www.mmprint.com/newsletters.html">Presentation Folders 
    	</a></div>
      <div><a href="<A href="http://www.mmprint.com/cards.html">Business">http://www.mmprint.com/cards.html">Business Cards</a></div>
      <div><a href="<A href="http://www.mmprint.com/reports.html">Newsletters</a></div">http://www.mmprint.com/reports.html">Newsletters</a></div>
      <div><a href="<A href="http://www.mmprint.com/stationary.html">Stationery">http://www.mmprint.com/stationary.html">Stationery </a></div>
      <div><a href="<A href="http://www.mmprint.com/Posters.html">Posters">http://www.mmprint.com/Posters.html">Posters &amp; Signs </a></div>
      <div><a href="<A href="http://www.mmprint.com/banners.html">Sell">http://www.mmprint.com/banners.html">Sell Sheets &amp; Flyers 
    	</a></div>
      <div><a href="<A href="http://www.mmprint.com/signs.html">Journals</a></div">http://www.mmprint.com/signs.html">Journals</a></div>
      <a href="<A href="http://www.mmprint.com/links.htm">&gt;&gt">http://www.mmprint.com/links.htm">&gt;&gt; more </a> </div>
    <div class="Estimatepic"></div>
    <div class="bodyarea"></div>
    <div class="connector1"></div>
    <div class="connector2"></div>
    <div class="NavBarmid"> 
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    <div class="Newsletterpic"></div>
    <div class="welcomebar"></div>
    <div class="Buttons"><a href="http://www.mmprint.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','index_files/AltHomepage.gif',1)"><img src="index_files/Homepage.gif" name="Image13" width="100" height="22" border="0"></a><a href="http://www.mmprint.com/profile.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','index_files/AltAboutus.gif',1)"><img src="index_files/Aboutus.gif" name="Image5" width="100" height="22" border="0"></a><a href="http://www.mmprint.com/info.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','index_files/altinfocenter.gif',1)"><img src="index_files/infocenter.gif" name="Image6" width="100" height="22" border="0"></a><a href="http://www.mmprint.com/promo.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','index_files/AltPromo.gif',1)"><img src="index_files/Promos.gif" name="Image7" width="100" height="22" border="0"></a><a href="http://www.mmprint.com/sendfiles.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','index_files/Altuploadfiles.gif',1)"><img src="index_files/Upload-Files.gif" name="Image8" width="100" height="22" border="0"></a><a href="http://www.mmprint.com/Testimonials.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','index_files/AltTestimonials.gif',1)"><img src="index_files/Testimonials.gif" name="Image9" width="100" height="22" border="0"></a><a href="http://www.mmprint.com/contact.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','index_files/altcontactus.gif',1)"><img src="index_files/Contactus.gif" name="Image10" width="100" height="22" border="0"></a><a href="http://chat.boldchat.com/chat/visito...did=2818255412" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','index_files/altlivechat.gif',1)"><img src="index_files/livechat.gif" alt="Online Chat Available Mon-Fri 8:30 - 5:30 EST" name="Image11" width="55" height="22" border="0"></a></div>
    <div class="logobar"></div>
    <div id="Layer1" style="position:absolute; left:6px; top:510px; width:137px; height:58px; z-index:15" class="emailsignupbox"> 
      <form name="ccoptin" action="http://ccprod.roving.com/roving/d.jsp" target="_blank" method="post">
    	<input name="email address" type=text id="email address" size=20>
    	<input type=hidden name="m" value="1011289463041">
    	<input type=hidden name="p" value="oi">
    	<input type=submit name="Submit" value="Submit">
      </form>
    </div>
    <div class="emailsignuptext"> Sign-up to be notified of our new promotions and 
      printing specials </div>
    </div>
    </body>
    </html>
    Paul

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hmmm the message board is corrupting the code!!

    heres the css:
    Code:
    <style type="text/css">
    h3 {
    font-weight: bolder;
    color: #000000;
    font-family: Arial;
    font-size: 18px;
    }
    p {
    font-family: Arial;
    font-size: 12px;
    line-height: 18px;
    color: #666666;
    }
    h2 {
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    }
    body {
    background-image: url(index_files/verticalbgfade.jpg);
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    color: #999999;
    position: relative;
    }
    p {
    font-family: Arial;
    font-size: 12px;
    color: #006699;
    }
    a {
    list-style-position: outside;
    list-style-type: square;
    font-family: Arial;
    font-size: 12px;
    line-height: 22px;
    font-weight: bold;
    }
    .welcomebar {
    position: absolute;
    border: thin ridge;
    left: 163px;
    top: 136px;
    width: 755px;
    background-image: url(index_files/MainBarpurple.jpg);
    height: 28px;
    }
    .MediaWindow {
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: none;
    border-right-style: ridge;
    border-bottom-style: ridge;
    border-left-style: ridge;
    position: absolute;
    left: 163px;
    top: 168px;
    background-image: url(ondemandprinting.swf);
    width: 755px;
    height: 141px;
    }
    .Buttons {
    position: absolute;
    top: 311px;
    right: 100px;
    left: 164px;
    visibility: visible;
    z-index: 10;
    width: 757px;
    border: thin none;
    }
    .bodyarea {
    background-color: #FFFFFF;
    border: thin ridge;
    position: absolute;
    top: 311px;
    right: 100px;
    height: 708px;
    width: 755px;
    left: 163px;
    z-index: 1;
    }
    .IntroP {
    position: absolute;
    left: 177px;
    width: 652px;
    height: 156px;
    top: 350px;
    z-index: 14;
    }
    .Navlinks {
    position: absolute;
    left: 9px;
    width: 137px;
    height: 242px;
    top: 171px;
    }
    .Estimatepic {
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: ridge;
    border-left-style: none;
    position: absolute;
    height: 28px;
    width: 150px;
    top: 137px;
    left: 2px;
    background-image: url(index_files/Printed-products.gif);
    }
    .NavBarleft {
    border: thin ridge;
    position: absolute;
    height: 276px;
    width: 150px;
    background-color: #FFFFFF;
    left: 0px;
    top: 136px;
    }
    .NavBarmid {
    background-color: #FFFFFF;
    border: thin ridge;
    position: absolute;
    width: 150px;
    left: 0px;
    height: 153px;
    top: 424px;
    }
    .Newsletterpic {
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: ridge;
    border-left-style: none;
    position: absolute;
    height: 28px;
    width: 150px;
    background-image: url(index_files/newsletters.gif);
    top: 426px;
    left: 2px;
    }
    .logobar {
    position: absolute;
    border: thin ridge;
    width: 918px;
    left: 0px;
    top: 28px;
    height: 90px;
    background-image: url(index_files/Marsidlogobar.gif);
    }
    .connector1 {
    position: absolute;
    background-image: url(index_files/Hconnector.gif);
    height: 5px;
    width: 9px;
    top: 147px;
    left: 154px;
    background-repeat: no-repeat;
    }
    .connector2 {
    position: absolute;
    height: 7px;
    width: 9px;
    background-image: url(index_files/Hconnector.gif);
    background-repeat: no-repeat;
    left: 154px;
    top: 435px;
    }
    .emailsignupbox {
    background-color: #FFFFFF;
    position: absolute;
    height: 35px;
    width: 100px;
    left: 36px;
    top: 472px;
    }
    .emailsignuptext {
    background-color: #FFFFFF;
    position: absolute;
    height: 35px;
    width: 142px;
    left: 6px;
    top: 460px;
    }
    a:link {
    color: #000000;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #000000;
    }
    a:hover {
    text-decoration: underline;
    color: #0033FF;
    }
    a:active {
    text-decoration: none;
    color: #000000;
    }
    body {
    margin-top: 40px;
    text-align:center;
    min-width:921px;
    }
    #wrapper{
    text-align:left;
    position:relative;
    width:921px;
    margin-left:auto;
    margin-right:auto;
    }
    </style>
    add this html around the whole page content:
    Code:
    <body>
    <div id="wrapper">
    <div class="IntroP"> 
    rest of page etc.......
    ....
    ....
     
    </div><! wrapper closing div -->
    </body>
    Also adjust the dimension on your inline style as folllows:

    Code:
    <div id="Layer1" style="position:absolute; left:6px; top:510px; width:137px; height:58px; z-index:15" class="emailsignupbox">
    That should be it with any luck

    Paul

  14. #14
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hmmm the message board is corrupting the code!!
    <offtopic>

    You know what they say about people blaming strange occurances on other developers? User error, couldn't resist Paul, lol.

    </offtopic>
    Ryan Butler

    Midwest Web Design

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ryan
    User error
    lol Thanks Ryan I'll remember that next time you have a problem

    I did think it was me until I posted again and the same error came up. The message borad is adding an extra a=href into the code that isn't in my original!.

    <div><a href="<A href="http://www.mmprint.com/postcards.html">Postcards</a></div>

    Paul

  16. #16
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    bellmore
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so how about a fix for my problem...?

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    so how about a fix for my problem...?
    So how about reading my posts above

  18. #18
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    bellmore
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok Paul, I've done what you said to in the FAQ, the browser now repositions the page as the window is resized however it's still not perfectly centered.. Take a look. http://www.mmprint.com/indexcss.htm I apologize though I am new to this, guess I didn't have it as down as I had hoped.

    Your help on this would be appreciated.

  19. #19
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    lol Thanks Ryan I'll remember that next time you have a problem
    Oh, no, hopefully that does not mean I have messed in my own mess can. Cause I'll probably be ringing on your door next week sometime. Brain is too tired at the moment.
    Ryan Butler

    Midwest Web Design

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi mmprint,

    Use the css and the snippet of html that I pasted in post #13 above.

    I changed all your absolute positioning to start at zero because you have absolutely placed everthing with a great big margin. If you have placed something 150px from the left side of the window then it is never going to get any neaerer to that edge even when wrapped in a centering div.

    In the css I posted I worked out what offsets you used and reduced all the elements by that amount so that your whole layout was sitting tight to the left windows edge.

    Then and only then can you add the centralising technique. It will work with what you've got but its counting the left offset as part of the page so you are always getting a big blank space on the left.

    Compare my css to yours and look at all the absolote elements and you will see that the left column starts at left:0 insted of Left:154px (or whatever it was).

    Hope that all makes sense,. I didn't want to have to do it again as I've done it three times now. (2 times the message board mangled my code).

    I think you should be able to work it out now (I'm going offline now - back tomorrow)

    Paul

  21. #21
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    bellmore
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul... Thank you! it worked, I really appreciate the help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •