I have just finished reading Design Your Own Website the Right Way Using HTML & CSS, 2nd edition, Ian Lloyd, but I still don’t know why my site uploaded at productreviewsbytyler.com will not display properly. Look at the gaps between all the sections, and why won’t it align to the center despite my div align center command. Please help!!! :injured::sick:
Here is the current HTML file:
<!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" />
<meta name="Description" content="You can find product reviews here for renowned internet products. This is an unbiased site that exposes bad products and promotes the good ones." />
<meta name="Keywords" content="keyword1, keyword2,..." />
<meta name="rating" content="General" />
<meta name="revisit-after" content="14 days" />
<meta name="ROBOTS" content="All" />
<link href="style/main.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="style/dropdownmenus.css" rel="stylesheet" type="text/css" media="screen" />
<title>Atlanta Review Group™</title>
</head>
<body>
<div id="header" align="center"> </div>
<div id="lowerheader" align="center">
<div id="blueshadow">
<b><u>Home Page</u></b>
</div>
<!-- "Please Select a Page from Below" -->
<!--[if !IE]> -->
</div>
<div id="body" align="center">
<p class="redshadow">Hello, and welcome to Atlanta Review Group where we write about cool products circulating on the internet. We also work to expose the scams out there. This is some temporary text.</p>
<!-- begin Personal navigation menu -->
<ul id="pMenu">
<li><a href="http://www.atlantareviewgroup.com/health.html">health</a>
<div>
<h2>weight loss</h2>
<h3>fitness</h3>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h3>dieting</h3>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>skin care</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/insurance.html">insurance</a>
<div>
<h2>property insurance</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>auto insurance</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>health insurance</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>annuities</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/general.html">general</a>
<div>
<h2>electronics</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>style & fashion</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>food/dining</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>cars/auto</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/dating.html">dating</a>
<div>
<ul>
<li><a href="#">RealMatureSingles</a></li>
<li><a href="#">SeniorPeopleMeet</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/education.html">education</a>
<div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</div>
</li>
</ul>
<!-- end Personal navigation menu-->
</div>
<div id="footer" align="center">
<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="thanksforvisiting.swf" width="380" height="68">
<!-- <![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="380" height="68">
<param name="movie" value="thanksforvisiting.swf" />
<!--><!-- http://Validifier.com -->
</object>
<!-- <![endif]-->
</div>
<div class="blackshadow">©AtlantaReviewGroup.com</div>
<div class="blackshadow">Updated June 30, 2011</div>
</body>
</html>
Here is the CSS file:
@charset "utf-8";
/* CSS Document */
body{
background-image: url(bg.jpg);
background-position:top center;
background-color:#FFF;
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
}
#header{
background-image:url(header.jpg);
background-repeat:no-repeat;
width:635px;
height:126px;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
margin:0;
padding:0;
}
#loveheader{
background-repeat:no-repeat;
width:635px;
height:126px;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
#lowerheader{
background-image:url(lowerheader.jpg);
width:783px;
height:100px;
margin:0;
padding:0;
}
#body{
background-image:url(body.jpg);
width:783px;
text-align: center;
}
#footer{
background-image:url(footer.jpg);
width:783px;
height:82px;
text-align: center;
margin:0;
padding:0;
}
.redshadow{
color:#CCC;
font-size:16px;
font-family:Verdana, Geneva, sans-serif;
text-shadow: 0px 0px 2px #900, 0px -7px 30px #966, 0px -14px 60px;
}
#blueshadow{
font-size:24px;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
text-align:center;
vertical-align:bottom;
text-shadow:0 0 4px #09F, 0 -5px 15px #009;
margin:0;
padding-top:.8em;
}
.redshadow{
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#003;
text-shadow:0 0 2px #F60, 0 -3px 10px #900;
}
div.whitebox{
color:#000;
text-shadow:1px 1px 1px #000;
display:block;
background:#FFF;
border:6% inset #CCC;
width:70%;
height:auto;
padding:2%;
/*for IE*/
filter:alpha(opacity=50);
/*standard CSS3*/
opacity:0.5;
}
#realmaturesingles{
text-decoration:none;
font-family:Impact;
font-size:3em;
color:#CF0;
right:-6%;
top:-1em;
}
#seniorpeoplemeet{
text-decoration:none;
font-family:Tahoma, Geneva, sans-serif;
font-size:3em;
color:#FF0;
right:-39%;
top:-.2em;
}
.blackshadow{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
text-shadow:0px 2px 2px #000;
text-align:center;
color:#000;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}
#lowerheader tr td #redshadow b {
font-size: 16px;
}
p.redshadow {
color:white;
margin-left:20%;
margin-right:20%;
}
