logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 10-10-2011, 08:37 PM   #1
Webbedfeat
 
Join Date: Oct 2010
Posts: 19
Default Content table spacing is messed up

When I apply the template to a page, it messes up the spacing. The table is supposed to be 530px wide in a 580px wide content box, and the template makes the right padding much larger than the left padding. How do I fix this? Anybody....? Thank you.


<!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"><!-- InstanceBegin template="/Templates/PageTemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>FG2Q</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
color: #000;
border-top-color: #FFF;
border-right-color: #FFF;
padding-bottom: 10px;
padding-right: 10px;
font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #99C;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 10px;
padding-left: 10px;
padding-top: 0px;
font-weight: normal;
font-size: 42px;
}
a img {
border: none;
}

a:link {
color: #000;
text-decoration: none;
padding-right: 0px;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover, a:active, a:focus {
text-decoration: underline;
background: #99C;
padding-right: 0px;
}
.container {
width: 800px;
background: #FFFFFF;
margin: 0 auto;
border-top-color: #99C;
border-bottom-color: #99C;
}
.header {
background: #ADB96E;
}
.sidebar1 {
float: left;
width: 20px;
background: #FFF;
padding-bottom: 0px;
border-top-color: none;
border-top-style: none;
border-top: none;
border-color: #FFF;
padding-right: 10px;
}
.content {
padding: 10px 50;
width: 580px;
float: left;
border-right-style: solid;
border-color: #99C;
border-top-color: #99C;
}
.sidebar2 {
float: right;
width: 178px;
background: #FFF;
padding: 0;
}
.content ul, .content ol {
padding: 0 15px 15px 50px;
}
ul.nav {
list-style: none;
margin-bottom: 15px;
padding-right: 5px;
font-size: 12px;
}
ul.nav li {
border-bottom: 1px solid #FFF;
padding-right: 10px;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background: #99C;
padding-right: 0px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #FFF;
color: #000;
padding-right: 0px;
font-size: 12px;
}
.footer {
padding: 0;
background: FFF;
position: relative;
border-top-color: #99C;
border-top-style: solid;
border-width: thin;
}

fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 0px;
line-height: 0px;
}
.footertext {
font-size: 11px;
font-style: italic;
}
.PageSubtitle .container .header {
font-family: Cochin;
}
-->
</style>

<link href="file:///Macintosh HD/Users/Sue/Documents/Field Guide/Templates/TemplateStyle.css" rel="stylesheet" type="text/css" />
</head>

<body class="PageSubtitle">

<div class="container">
<div class="header"></div> <hr />
<div class="sidebar1">
<p>&nbsp;</p>
<!-- end .sidebar1 --></div>
<!-- InstanceBeginEditable name="EditRegion3" -->
<link href="../../../Templates/TemplateStyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.Nameref {
font-family: "Century Gothic";
font-size: 12px;
font-style: normal;
line-height: 1px;
font-variant: normal;
text-align: right;
bottom: 10px;
}
</style>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
color: #000;
border-top-color: #FFF;
border-right-color: #FFF;
padding-bottom: 10px;
padding-right: 10px;
font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #99C;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 10px;
padding-left: 10px;
padding-top: 0px;
font-weight: normal;
font-size: 42px;
}
a img {
border: none;
}
a:link {
color: #000;
text-decoration: none;
padding-right: 0px;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover, a:active, a:focus {
text-decoration: underline;
background: #99C;
padding-right: 0px;
}
.container {
width: 800px;
background: #FFFFFF;
margin: 0 auto;
border-top-color: #99C;
border-bottom-color: #99C;
}
.header {
background: #ADB96E;
}

.sidebar1 {
float: left;
width: 20px;
background: #FFF;
padding-bottom: 0px;
border-top-color: none;
border-top-style: none;
border-top: none;
border-color: #FFF;
padding-right: 10px;
}
.content {
padding: 10px 50;
width: 580px;
float: left;
border-right-style: solid;
border-color: #99C;
border-top-color: #99C;
}
.sidebar2 {
float: right;
width: 178px;
background: #FFF;
padding: 0;
}
.content ul, .content ol {
padding: 0 15px 15px 50px;
}
ul.nav {
list-style: none;
margin-bottom: 15px;
padding-right: 5px;
font-size: 12px;
}
ul.nav li {
border-bottom: 1px solid #FFF;
padding-right: 10px;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background: #99C;
padding-right: 0px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #FFF;
color: #000;
padding-right: 0px;
font-size: 12px;
}
.footer {
padding: 0;
background: FFF;
position: relative;
clear: both;
border-top-color: #99C;
border-top-style: solid;
border-width: thin;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 0px;
line-height: 0px;
}
.footertext {
font-size: 11px;
font-style: italic;
}
.PageSubtitle .container .header {
font-family: Cochin;
}
-->
</style>
<link href="file:///Macintosh HD/Users/Sue/Documents/Field Guide/Templates/TemplateStyle.css" rel="stylesheet" type="text/css" />
<div class="container">
<div class="header"></div> <hr />
<div class="sidebar1">
<p>&nbsp;</p>
<!-- end .sidebar1 --></div>
<div class="content">
<table border="0" cellpadding="0" cellspacing="0" table="table">
<tr>
<td width="130" rowspan="2"><a href="../../0Violet/StartHere.html"><img src="../../0Violet/StartHereimages/SquareIconViolet.jpg" width="130" height="130" /></a></td>
<td width="398"><h1>Square</h1></td>
</tr>
<tr>
<td class="PageSubtitle">Click on the icon that's the most like your mystery block. </td>
</tr>
</table>
<hr />
<table width="530" border="1" align="left" cellpadding="10" cellspacing="10">
<tr>
<td><a href="../../Green/1.0Square/1ACtrSq/1ACenterSquare.html"><img src="SquareinSquareBlue.jpg" alt="Center Square" width="130" height="130" /></a><br />
<span class="Linklabel">Center Square</span><br /></td>
<td><a href="../../Green/1.0Square/1BOffSq/1BOffsetSquare.html"><img src="OffsetSquareIconBlue.jpg" alt="Offset Square" width="130" height="130" /></a><br />
<span class="Linklabel">Offset Square</span><br /></td>
<td><a href="../../Green/1.0Square/1CSqOnPt/1CSquareonPoint.html"><img src="SqonPtIconBlue.jpg" alt="Square on Point" width="130" height="130" align="top" /></a><br />
<span class="Linklabel">Square on Point</span><br /></td>
</tr>
<tr>
<td class="Linklabel"><p><a href="../../Green/1.0Square/1DChkbd/1Dcheckerboard.html"><img src="Checkerboard3x3Blue.jpg" alt="Nine-patch" width="130" height="130" /></a><br />
<span class="Linklabel">Checkerboard</span></p>
<table border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td align="right" valign="bottom"><span class="Nameref">This is it! <img src="../../../ButtonStar.jpg" width="20" height="19" alt="This is it!" /></span></td>
</tr>
</table>
<p class="Linklabel">&nbsp;</p></td>
<td><p><a href="../../Green/1.0Square/1ESqDiag/1ESquaresDiagonal.html"><img src="SgleIrishChainIconBlue.jpg" alt="Single Irish Chain" width="130" height="130" align="top" /></a><br />
<span class="Linklabel">l Lines<span class="Nameref">
<br /></span></span></p>
<table border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td align="right" valign="bottom"><span class="Linklabel">This is it!</span><span class="Nameref"> <img src="../../../ButtonStar.jpg" width="20" height="19" alt="This is it!" /></span></td>
</tr>
</table>
<p class="Linklabel"></p></td>
<td><p><img src="ConcSqIconBlue.jpg" alt="Concentric Squares" width="130" height="130" align="top" /><br />
<span class="Linklabel">Concentric</span><span class="Linklabel"><br />
<br />
</span></p></td>
</tr>
<tr>
<td>&nbsp;<br />
<br /></td>
<td>&nbsp;<br />
<br /></td>
<td><br />
<br /></td>
</tr>
</table>
<br />
<!-- end .content --></div>
<div class="sidebar2"> /*etc.*/
Webbedfeat is offline   Reply With Quote
Old 10-13-2011, 05:32 AM   #2
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

You have left and right sidebars (which are empty) on that page. The right sidebar is set wider than the left sidebar. But the real problem is you need to learn about CSS-based layout and how to design without tables.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:55 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com