PDA

View Full Version : Centering Template using CSS


Hig
03-13-2006, 01:49 PM
Hi,

I am a newbie to DW and have a question. I followed the "Center Content with Css" info and everything looks great in DW. When I preview in Safari however, my template is in the default upper left location. What could I have done wrong.

Thanks,
Keith

gmcrone
03-13-2006, 02:14 PM
Post your HTML & CSS code so we can see it. Or a link to your page. please

Mike...

dthomsen8
03-13-2006, 03:38 PM
Hi,

I am a newbie to DW and have a question. I followed the "Center Content with Css" info and everything looks great in DW. When I preview in Safari however, my template is in the default upper left location. What could I have done wrong.

Thanks,
Keith

Are you working on a MAC? Have you tried any other browsers?

You should post your URL if the site is online.

Hig
03-14-2006, 11:06 AM
Thanks.

html


<!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>Brookwooo Orthopedics</title>



<link href="brookwood css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
font-size: 14px;
font-family: Georgia, "Times New Roman", Times, serif;
}
-->
</style>
</head>

<body>
<table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">images/index_01.gif</td>
<td rowspan="2">images/index_02.gif</td>
</tr>
<tr>
<td colspan="2">images/index_03.gif</td>
</tr>
<tr>
<td>images/index_04.gif</td>
<td colspan="2" valign="top"><p class="style1"></p>
<p class="style1"></p>
<p class="style1">Brookwood Orthopedics is committed to excellence by pledging to provide the highest quality of orthopedic care possible. Along with the treatment of immediate or chronic problems, we strive to integrate the doctrine of prevention in all our treatment plans as a way to alleviate possible future difficulties.</p>
<p class="style1">We are pleased to have you as a patient. If you have any questions, always feel free to contact our office and our trained staff will assist you in any way possible. </p></td>
</tr>
<tr>
<td colspan="3">images/index_06.gif</td>
</tr>
<tr>
<td colspan="3">images/index_07.gif</td>
</tr>
<tr>
<td>images/spacer.gif</td>
<td>images/spacer.gif</td>
<td>images/spacer.gif</td>
</tr>
</table>

<map name="Map" id="Map"><area shape="rect" coords="1,2,78,38" href="index.html" target="_self" alt="" />
<area shape="rect" coords="77,2,224,36" href="http://www.brookwoodorthopedic.com/patientforms.html" target="_self" />
<area shape="rect" coords="226,2,299,37" href="http://www.brookwoodorthopedic.com/exercises.html" target="_self" />
<area shape="rect" coords="299,1,355,37" href="http://www.brookwoodorthopedic.com/about.html" target="_self" />
<area shape="rect" coords="354,3,409,37" href="http://www.brookwoodorthopedic.com/links.html" target="_self" />
<area shape="rect" coords="409,3,486,38" href="http://www.brookwoodorthopedic.com/contact.html" target="_self" />
</map></body>
</html>



css

body {
text-align : center ;
min-width : 770px ;
}
div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}



I have tried safari, netscape and firefox. Again, thanks for any assistance.

Keith

Please use code tags when posting code

gmcrone
03-14-2006, 11:35 AM
Right after the body tag insert <div id="wrapper">
Then right after </map> insert </div>

You don't have a wrapper div in your HTML.

Also your image map will screw up your layout as it uses absolute positinig for the coords.
Don't use an image map

Mike...

Hig
03-14-2006, 06:41 PM
Can this code be in the css file or does it have to be in the page html?




Sorry about the code post. Lesson learned.

Creative Insanity
03-14-2006, 06:49 PM
It is just that code tags make it easier to read where the code is and your comments :)

gmcrone
03-15-2006, 03:52 AM
It has to be in the HTML file.

Your CSS file tells your browser to look for a div wrapper tag and apply the CSS to it, if it is not in the HTML code, then the CSS is ignored.

Mike...