Results 1 to 2 of 2

Thread: Centering webpage made with "APdivs", not tables?

  1. #1

    Centering webpage made with \"APdivs\", not tables?

    OK so I created my website using solely AP divs. Why? Because I wanted it up and running ASAP, and watched some Lynda.com videos, and that's what they started out with. Since I have little time to sit around and learn right now, I just went ahead and did it using AP divs. Eventually I'll learn the right way to do things, but at least for now I need to center it with the way I've got it. Here's my code for the template for all of the web pages:

    Code:
    <!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=utf-8" /> <title>ProImage Detailing</title>  <style type="text/css"> <!-- --> </style><link href="ProImageCSS.css" rel="stylesheet" type="text/css" /><style type="text/css"> <!-- #apDiv5 { 	position:absolute; 	left:47px; 	top:218px; 	width:501px; 	height:362px; 	z-index:4; } #apDiv6 { 	position:absolute; 	left:44px; 	top:16px; 	width:350px; 	height:44px; 	z-index:5; } #apDiv7 { 	position:absolute; 	left:72px; 	top:60px; 	width:316px; 	height:23px; 	z-index:6; } a:link { 	color: #000; 	text-decoration: none; } a:visited { 	text-decoration: none; 	color: #000; } a:hover { 	text-decoration: underline; } a:active { 	text-decoration: none; } #apDiv8 { 	position:absolute; 	left:826px; 	top:-2px; 	width:204px; 	height:77px; 	z-index:7; } #apDiv9 { 	position:absolute; 	left:826px; 	top:66px; 	width:276px; 	height:41px; 	z-index:8; } #apDiv10 { 	position:absolute; 	left:825px; 	top:101px; 	width:277px; 	height:31px; 	z-index:9; } #apDiv11 { 	position:absolute; 	left:32px; 	top:238px; 	width:150px; 	height:34px; 	z-index:10; } #apDiv12 { 	position:absolute; 	left:72px; 	top:190px; 	width:148px; 	height:24px; 	z-index:10; 	font-weight: bold; 	font-size: 18px; } #apDiv14 { 	position:absolute; 	left:36px; 	top:213px; 	width:225px; 	height:355px; 	z-index:11; } #apDiv15 { 	position:absolute; 	left:280px; 	top:213px; 	width:225px; 	height:355px; 	z-index:12; } #apDiv16 { 	position:absolute; 	left:522px; 	top:213px; 	width:225px; 	height:355px; 	z-index:13; } #apDiv17 { 	position:absolute; 	left:762px; 	top:213px; 	width:225px; 	height:355px; 	z-index:14; } #apDiv18 {	position:absolute; 	left:30px; 	top:258px; 	width:296px; 	height:355px; 	z-index:11; } #apDiv19 {	position:absolute; 	left:30px; 	top:258px; 	width:296px; 	height:355px; 	z-index:11; } #apDiv20 {	position:absolute; 	left:30px; 	top:258px; 	width:296px; 	height:355px; 	z-index:11; } #apDiv21 { 	position:absolute; 	left:316px; 	top:190px; 	width:154px; 	height:24px; 	z-index:15; 	font-size: 18px; 	font-weight: bold; } #apDiv22 { 	position:absolute; 	left:549px; 	top:190px; 	width:166px; 	height:21px; 	z-index:16; 	font-size: 18px; 	font-weight: bold; } #apDiv23 { 	position:absolute; 	left:800px; 	top:190px; 	width:148px; 	height:23px; 	z-index:17; 	font-size: 18px; 	font-weight: bold; } #apDiv24 { 	position:absolute; 	left:25px; 	top:207px; 	width:129px; 	height:31px; 	z-index:18; } #apDiv25 { 	position:absolute; 	left:316px; 	top:214px; 	width:155px; 	height:14px; 	z-index:18; 	font-size: 10px; 	text-align: center; } #apDiv26 { 	position:absolute; 	left:557px; 	top:214px; 	width:150px; 	height:16px; 	z-index:19; 	font-size: 10px; 	text-align: center; } #apDiv27 { 	position:absolute; 	left:798px; 	top:214px; 	width:152px; 	height:14px; 	z-index:20; 	font-size: 10px; 	text-align: center; } --> </style></head>  <body> <div style="text-align: center; margin-left: auto; margin-right: auto;">  <div id="apDiv2"><a href="index.html">HOME</a> | SERVICES | GALLERY | MEET US | CONTACT</div> <div id="apDiv3"></div> <div class="Header" id="apDiv6">ProImage Detailing</div> <div class="Beneath_Header" id="apDiv7">Mobile detailing- We come to you! </div> <div id="apDiv8"><img src="ProImage Logo WoBSmall.jpg" width="198" height="78" alt="Logo" /></div> <div id="apDiv9">   <p>Contact@ProImageDetailing.com</p> </div> <div id="apDiv10">502-514-9622</div> <div id="apDiv13"></div> <div id="apDiv4">   <p class="Beneath_Header">&nbsp;</p> </div> <div id="apDiv1"></div> <p class="Beneath_Header">&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <h3>&nbsp;</h3> </div> </body> </html>
    So, what's the solution?
    I've done some searching and <center> is apparently deprecated.

    Thanks!

    Scott

  2. #2
    Throm-Ka Hermie's Avatar
    Join Date
    Jul 2006
    Location
    Nijverdal, Holland
    Posts
    5,354
    Welcome to the cafe hockeyplay. There's a lot of code in there, that i think isn't necessary. There's a few links to a css file and there is css on the page!

    <!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=utf-8" /> <title>ProImage Detailing</title> <style type="text/css"> <!-- --> </style><link href="ProImageCSS.css" rel="stylesheet" type="text/css" /><style type="text/css"> <!-- #apDiv5 { position:absolute; left:47px; top:218px; width:501px; height:362px; z-index:4; } #apDiv6 { position:absolute; left:44px; top:16px; width:350px; height:44px; z-index:5; } #apDiv7 { position:absolute; left:72px; top:60px; width:316px; height:23px; z-index:6; } a:link { color: #000; text-decoration: none; } a:visited { text-decoration: none; color: #000; } a:hover { text-decoration: underline; } a:active { text-decoration: none; } #apDiv8 { position:absolute; left:826px; top:-2px; width:204px; height:77px; z-index:7; } #apDiv9 { position:absolute; left:826px; top:66px; width:276px; height:41px; z-index:8; } #apDiv10 { position:absolute; left:825px; top:101px; width:277px; height:31px; z-index:9; } #apDiv11 { position:absolute; left:32px; top:238px; width:150px; height:34px; z-index:10; } #apDiv12 { position:absolute; left:72px; top:190px; width:148px; height:24px; z-index:10; font-weight: bold; font-size: 18px; } #apDiv14 { position:absolute; left:36px; top:213px; width:225px; height:355px; z-index:11; } #apDiv15 { position:absolute; left:280px; top:213px; width:225px; height:355px; z-index:12; } #apDiv16 { position:absolute; left:522px; top:213px; width:225px; height:355px; z-index:13; } #apDiv17 { position:absolute; left:762px; top:213px; width:225px; height:355px; z-index:14; } #apDiv18 { position:absolute; left:30px; top:258px; width:296px; height:355px; z-index:11; } #apDiv19 { position:absolute; left:30px; top:258px; width:296px; height:355px; z-index:11; } #apDiv20 { position:absolute; left:30px; top:258px; width:296px; height:355px; z-index:11; } #apDiv21 { position:absolute; left:316px; top:190px; width:154px; height:24px; z-index:15; font-size: 18px; font-weight: bold; } #apDiv22 { position:absolute; left:549px; top:190px; width:166px; height:21px; z-index:16; font-size: 18px; font-weight: bold; } #apDiv23 { position:absolute; left:800px; top:190px; width:148px; height:23px; z-index:17; font-size: 18px; font-weight: bold; } #apDiv24 { position:absolute; left:25px; top:207px; width:129px; height:31px; z-index:18; } #apDiv25 { position:absolute; left:316px; top:214px; width:155px; height:14px; z-index:18; font-size: 10px; text-align: center; } #apDiv26 { position:absolute; left:557px; top:214px; width:150px; height:16px; z-index:19; font-size: 10px; text-align: center; } #apDiv27 { position:absolute; left:798px; top:214px; width:152px; height:14px; z-index:20; font-size: 10px; text-align: center; } --> </style></head> <body> <div style="text-align: center; margin-left: auto; margin-right: auto;"> <div id="apDiv2"><a href="index.html">HOME</a> | SERVICES | GALLERY | MEET US | CONTACT</div> <div id="apDiv3"></div> <div class="Header" id="apDiv6">ProImage Detailing</div> <div class="Beneath_Header" id="apDiv7">Mobile detailing- We come to you! </div> <div id="apDiv8"><img src="ProImage Logo WoBSmall.jpg" width="198" height="78" alt="Logo" /></div> <div id="apDiv9"> <p>Contact@ProImageDetailing.com</p> </div> <div id="apDiv10">502-514-9622</div> <div id="apDiv13"></div> <div id="apDiv4"> <p class="Beneath_Header">&nbsp;</p> </div> <div id="apDiv1"></div> <p class="Beneath_Header">&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <h3>&nbsp;</h3> </div> </body> </html>
    Straighten that out and it would be ok, I guess.

Posting Permissions

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