There is a puzzle. Everything on the page can be made to line up correctly except for the table which shows slightly offside no matter whether .center or .middle is used. Any help would be appreciated.
The CSS3 Code
The HTML5 Code
The CSS3 Code
Code:
body {background-color: #928dd0; font-size: 18px; color: black;}
.middle {background-color: #928dd0; width:50%; text-align: center; margin-left:auto; margin-right:auto;}
.middleshadow {color: white; text-align: center; margin-left:auto; margin-right:auto}
.imagesmall {width: 150px; height: 150px}
.center {background-color: #928dd0; width: 50%; margin-left:auto; margin-right:auto}
.centertxt {text-align: center; border: thin solid; }
p {padding-left: 4px;width: 90%; text-align: left;background-color: #928dd0;}
.indent {text-indent: 50px; width: 50%; background-color: #928dd0; margin-left:auto; margin-right:auto}
.indent2 {text-indent: 100px; width: 50%;background-color: #928dd0; margin-left:auto; margin-right:auto}
.indent3 {text-indent: 150px; width: 50%;background-color: #928dd0; margin-left:auto; margin-right:auto}
.plain {text-indent: 0}
table {background-color: #928dd0; width:50%;}
.index {text-align: center; margin-left:auto; margin-right:auto;}
.index th {text-align: center; font-size: 10pt; border: solid thin;};
.index tr {}
.index td {text-align: center; font-size: 12pt}
ul {list-style-type: none; font-size: 15px}
.para {border: thin solid; list-style-type: none; float: right; text-indent: -2em; margin: 1em; width: 300px;background-color: #928dd0;}
.para li {border: none; text-align: left; }
.navleft {border: thin solid; list-style-type: none; float: left; text-indent: -2em; margin: 1em; width: 300px;background-color: #928dd0;}
.navleft li {background-color:#928dd0 ; text-align: center; margin: 1em;}
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</meta>
<link rel="stylesheet" type="text/css" href="css2.css" />
<title></title>
<script>
</script>
</head>
<body style="background: url(images/Sea2SpaceBackground.jpg) no-repeat center center fixed;background-size: cover">
<ul class="navleft">
<li></li>
</ul>
<h2 class="middle">Principles</h2>
<table>
<tr>
<td class="centertxt"><a href="#cooperative">Cooperation</a></td>
<td class="centertxt"><a href="#interdependent">Interdependence</a></td>
<td class="centertxt"><a href="#inclusive">Inclusion</a></td>
</tr>
</table>
<table>
<tr>
<td class="centertxt"><a href="#atheistic">Atheism</a></td>
<td class="centertxt"><a href="#scientific">Scientific</a></td>
<td class="centertxt"><a href="#technological">Technological</a></td>
<td class="centertxt"><a href="#informational">Informational</a></td>
</tr>
</table>
<table>
<tr>
<td class="centertxt"><a href="#transhumanist">Transhumanist</a></td>
<td class="centertxt"><a href="#selfrealized">Self-realized</a></td>
<td class="centertxt"><a href="#futuristic">Futuristic</a></td>
</tr>
<table>
<tr>
<td class="centertxt"><a href="#energydisc">Energy Discipline</a></td>
<td class="centertxt"><a href="#resourcedisc">Resource Discipline</a></td>
<td class="centertxt"><a href="#wastedisc">Waste Discipline</a></td>
</tr>
</table>
<p class="indent"><a name="cooperative"><strong>Cooperation:</strong></p>
<p class="indent"><a name="interdependent"><strong>Inter-dependence:</strong>
</p>
<p class="indent"><a name="inclusive"><strong>Inclusion:</strong>
</p>
<p class="indent"><a name="atheistic"><strong>Atheism:</strong>
</p>
<p class="indent"><a name="scientific"><strong>Scientific:</strong>
/p>
<p class="indent"><a name="technological"><strong>Technological:</strong>
</p>
<p class="indent"><a name="informational"><strong>Informational:</strong></p>
<p class="indent"><a name="transhumanist"><strong>Transhumanist:</strong></p>
<p class="indent"><a name="selfrealized"><strong>Self-Realization:</strong>
</p>
<p class="indent"><a name="futuristic"><strong>Futurism:</strong>
</p>
<p class="indent"><a name="energydisc"><strong>Energy Discipline:</strong>
</p>
<p class="indent"><a name="resourcedisc"><strong>Resource Discipline:</strong>
</p>
<p class="indent"><a name="wastedisc"><strong>Waste Discipline:</strong>
</p>
</dl>
<h3 class="middle"><a href="sea2space.html">Panspermiation: The grand destiny</a></h3>
</body>
</html>
