Centering content

Page 1 of 1

4 Replies - 351 Views - Last Post: 16 September 2012 - 08:02 PM

#1 longr59  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 20-September 07

Centering content

Posted 16 September 2012 - 06:58 PM

I inherited a site from a previous developer and and having issues centering the content on the page. It is all aligning left. Below is the code for one of the pages. Any help is greatly appreciated.

<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>MacLeod's Lumber &amp; Hardware</title>
		<style type="text/css">
			<!--
			body {
				background-color: #000099;
			}
			
			{ display:table; height:100%; margin:0 auto; padding:0; border-collapse:collapse; }
			
			a:link {
				color: #FFFFFF;
				text-decoration: none;
			}
			
			a:visited {
				color: #FFFFFF;
				text-decoration: none;
			}
			
			a:hover {
				color: #FF0000;
				text-decoration: underline;
			}
			
			a:active {
				color: #FF0000;
				text-decoration: none;
			}
			
			body,td,th {
				color: #FFFFFF;
			}
			
			.style6 {
				font-family: Arial, Helvetica, sans-serif;
				font-weight: bold;
				font-size: x-large;
			}
			
			.style7 {
				font-family: Arial, Helvetica, sans-serif;
				font-size: x-small;
			}
			-->
		</style>
	</head>

	<body>
		<div id="Layer2" style="position: absolute; left: 21px; top: 20px; width: 225px; height: 75px; z-index: 17"><img src="images/address_etc.png" width="225" height="75" /></div>
		
		<div id="Layer3" style="position: absolute; left: 218px; top: 361px; width: 600px; height: 50px; z-index: 18"><img src="images/building_quote.png" width="600" height="50" /></div>
	
		<div id="Layer9" style="position: absolute; left: 665px; top: 436px; width: 70px; height: 107px; z-index: 19"><a href="index_contacts.html"><img src="images/buttons/contact.png" width="100" height="103" border="0" /></a></div>
	
		<div id="Layer10" style="position: absolute; left: 852px; top: 420px; width: 99px; height: 121px; z-index: 20"><a href="index_directions.html"><img src="images/buttons/compass.png" width="95" height="117" border="0" /></a></div>
		
		<div id="Layer11" style="position: absolute; left: 469px; top: 439px; width: 103px; height: 99px; z-index: 21"><a href="index_info.html"><img src="images/buttons/info.png" width="100" height="100" border="0" /></a></div>
	
		<div id="Layer5" style="position: absolute; left: 26px; top: 8px; width: 1000px; height: 353px; z-index: 2"><img src="images/Mac_Logo.png" width="1000" height="357" /></div>
		
		<div id="Layer4" style="position: absolute; left: 98px; top: 539px; width: 120px; height: 26px; z-index: 1">
			<div align="center" class="style6"><a href="index_products.html">Products</a></div>
		</div>
	
		<div id="Layer6" style="position: absolute; left: 456px; top: 539px; width: 127px; height: 19px; z-index: 3">
		  <div align="center" class="style6"><a href="index_info.html">Information</a></div>
		</div>
	
		<div id="Layer7" style="position: absolute; left: 663px; top: 539px; width: 98px; height: 19px; z-index: 4">
		  <div align="center" class="style6"><a href="index_contacts.html">Contacts</a></div>
		</div>
	
		<div id="Layer12" style="position: absolute; left: 816px; top: 539px; width: 173px; height: 19px; z-index: 5">
		  <div align="center" class="style6"><a href="index_directions.html">Directions</a></div>
		</div>
	
		<div id="Layer13" style="position: absolute; left: 916px; top: 69px; width: 75px; height: 50px; z-index: 6"><img src="images/buttons/MasterCard_home.png" width="75" height="50" />
		</div>
	
		<div id="Layer14" style="position: absolute; left: 916px; top: 15px; width: 75px; height: 47px; z-index: 7"><img src="images/buttons/visa_lg.jpg" width="75" height="47" /></div>
	
		<div id="Layer15" style="position: absolute; left: 916px; top: 127px; width: 75px; height: 48px; z-index: 8"><img src="images/buttons/discover_lg.png" width="75" height="48" /></div>
	
		<div id="Layer16" style="position: absolute; left: 38px; top: 99px; width: 193px; height: 19px; z-index: 22">
		  <div align="center"><strong>Quotes Cheerfully Given... Call Today!!!</strong> </div>
		</div>
	
		<div class="style7" id="Layer17" style="position: absolute; left: 68px; top: 640px; width: 904px; height: 19px; z-index: 9">
		  <div align="center">copyright MacLeod's Lumber &amp; Hardware 2010 - 2011. All rights reserved. </div>
		</div>
	
		<div id="Layer18" style="position: absolute; left: 361px; top: 613px; width: 318px; height: 25px; z-index: 10">
		  <div align="center">New York Lumber &amp; Hardware </div>
		</div>
	
		<div id="Layer19" style="position: absolute; left: 12px; top: 659px; width: 973px; height: 101px; z-index: 11">
		  <p>.</p>
		</div>
	
		<div id="Layer20" style="position: absolute; left: 286px; top: 539px; width: 101px; height: 19px; z-index: 12">
		  <div align="center" class="style6"><a href="index_services.html">Services</a></div>
		</div>
	
		<div id="Layer22" style="position: absolute; left: 287px; top: 439px; width: 100px; height: 100px; z-index: 14"><a href="index_services.html"><img src="images/buttons/services.png" width="100" height="100" border="0" /></a></div>
	
		<div id="Layer1" style="position: absolute; left: 785px; top: 28px; width: 115px; height: 100px; z-index: 15"><img src="images/hours.png" width="115" height="100" /></div>
	
		<div id="Layer8" style="position: absolute; left: 111px; top: 443px; width: 96px; height: 96px; z-index: 1"><a href="index_products.html"><img src="images/buttons/pro_master.png" width="94" height="94" border="0" /></a></div>
	
		<div id="Layer21" style="position: absolute; left: 32px; top: 140px; width: 54px; height: 50px; z-index: 23"><a href="http://www.facebook.com/pages/MacLeods-Lumber-Hardware/147519008645378#!/pages/MacLeods-Lumber-Hardware/147519008645378?sk=wall"><img src="FB_layer.png" width="51" height="51" border="0" /></a></div>
	
	</body>
</html>

This post has been edited by longr59: 16 September 2012 - 07:33 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Centering content

#2 Mina-no-Hime  Icon User is offline

  • D.I.C Head

Reputation: 98
  • View blog
  • Posts: 176
  • Joined: 23-August 12

Re: Centering content

Posted 16 September 2012 - 07:11 PM

You need to tell us what element in that you're trying to align.

Also, you could really do with some indentation. Because that code block is a nightmare to try to read through.
Was This Post Helpful? 0
  • +
  • -

#3 longr59  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 20-September 07

Re: Centering content

Posted 16 September 2012 - 07:25 PM

I am trying to get the entire page to center in the browser window. I updated the code block to be a little neater and easier to follow. Sorry for not doing it earlier.
Was This Post Helpful? 0
  • +
  • -

#4 Mina-no-Hime  Icon User is offline

  • D.I.C Head

Reputation: 98
  • View blog
  • Posts: 176
  • Joined: 23-August 12

Re: Centering content

Posted 16 September 2012 - 07:35 PM

Well, for starters you're going to run into issues with all of your Layer# divs (Layer2, Layer3, etc) because each of them have an absolute position specified in their style attributes. Personally, I think it needs to be completely restructured -- the elements that are presently there are terribly mishandled, and are going to make maintaining a decent layout a nightmare. For instance, right now each individual item in the page is wrapped (pointlessly) in a DIV tag, but they are all handled separately. It reeks of the use of a WYSIWYG editor, and probably not a very new one.

Take a look at 960gs, it may help with recreating the layout for this page. Looking at it, what you have present seems like it won't be too major a task to restructure and redesign.
Was This Post Helpful? 0
  • +
  • -

#5 longr59  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 20-September 07

Re: Centering content

Posted 16 September 2012 - 08:02 PM

The person I took this over from was a graphic designer and used dreamweaver to drop and drag. I did notice the issues you pointed out but was hoping to work around it in the short term. I will be doing a from scratch rebuild of the site in the near future and did not want to invest much time in fixing this layout. I will look at the link you provided and see what I can come up with. Thank You for your help.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1