CSS Layout Incorrect

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&trade;</title>
</head>
<body>
<div id="header" align="center">&nbsp;</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 &amp; 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">&copy;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%;
}

Use margin: 0 auto to center elements, rather than align=“center”.

To romove the gaps, remove the default margins on your elements. E.g.

html, body, 
h1, h2, h3, h4, h5, h6, p, img,
form, fieldset, legend, label, textarea,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {
    margin: 0;
    padding: 0;
}

img {
    border: 0;
    vertical-align: bottom;
}

Thanks for your AwEsOmE Post, ralph.m! :smiley:

There is an accumulation of little things. None are serious, but they add up to a broken page.

The align attribute doesn’t work as you think it does, and has not been a part of html since 1998, anyway. Lose it, and never go looking for it. :wink:

Wrap your whole page in a div, and give the div a width and set {margin: 0 auto;}. That will constrain the width of all descendants, and center them in one move.

Google “margin collapse”, and study the articles. Either set {margin-top: 0;} on the first element in the separated div, and {margin-bottom: 0;} on the last, or set {padding: 1px 0;} on the div itself. The explanation will be in the articles you find.

Your #pMenu has float child elements and must be made to enclose them. Set {display: table;}. Most times, we use the overflow property, but you have dropdowns that preclude that. See Enclosing Float Elements for an explanation of your options.

Set your flash thingie to run once and freeze. You cannot imagine how annoying the constant animation is.

I imagine I will have forgot something, but this will get you going in the right direction.

//edit: I did forget something. The a element in the list items need to be {display: block;}. --gt

cheers,

gary

Off Topic:

Thanks Gary. I should have mentioned a centered wrapper. (I’m also ashamed that you caught me advocating a CSS reset. :smiley: )

I see ralph.m slipped in while I was fiddling around. That’s what I get for going for a quick snack of my homemade, buttered raisin-cinnamon bread. Ahhh!

//edit: Rats! He did it again. BTW, you should be ashamed. :smiley: See the following. --gt

I’m going to take an opposing position on the resets, Ralph. They will apply globally, and will need to be over-ridden piecemeal. To be honest, I don’t think they have any place in web development. See my arguments at Global resets considered harmful.

cheers,

gary

Don’t bust on the resets, they have their proponents. (Gary, I [URL=“http://sixrevisions.com/css/should-you-reset-your-css/”]quoted you in Part 3 of that article, and linked to that comment.) Me, I use a very limited reset tweaked and trimmed for my own purposes, but those who do not will not hear me making fun.

Wow, Michael! That’s quite an article, and quite fairly covers all the bases. I do appreciate the mention.

cheers,

gary

Now, it has been a number of years since I went through Ian’s book – but I am fairly certain he does NOT tell you to use a tranny doctype, META’s that nothing actually uses, robots meta that doesn’t do anything, multiple stylesheets for only one media type, and non-semantic markup with dozens of deprecated attributes and presentational classes, abuse of DIV and heading tags inside the menu list, flash for stupid little elements that do more to annoy the user than enhance the experience, or the dozen other things that say “time to throw away the HTML and start over clean”.

…and for the life of me I STILL can’t figure out what the devil you are trying to do inside that menu other than abuse heading tags and slap things in there any old way.

… and I’m trying to figure out how the devil it validates since I’m seeing unclosed tags and closing tags for elements that aren’t even open here!

I am guessing WILDLY here, but I suspect your markup should be more along these lines:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="Description"
	content="Product reviews for renowned Internet products featuring unbiased reviews expositing bad products and promoting the good ones."
/>

<meta
	name="Keywords"
	content="weight loss, dieting, skin care, insurance, electronics, fashion, dining, cars, auto, dating"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Atlanta Review Group&trade;
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Atlanta Review Group
	</h1>

	<p class="standout">
		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>

	<ul id="mainMenu">
		<li>
			<a href="http://www.atlantareviewgroup.com/health.html">health</a>
			<ul>
				<li>
					<div>
						<span>Weight Loss</span>
						<ul>
							<li>
								<span>Fitness</span>
								<ul>
									<li><a href="#">under construction</a></li>
								</ul>
							</li><li>
								<span>dieting</span>
								<ul>
									<li><a href="#">under construction</a></li>
								</ul>
							</li>
						</ul>
					</div><div>
						<span>skin care</span>
						<ul>
							<li><a href="#">under construction</a></li>
						</ul>
					</div>
				</li>
			</ul>
		</li><li>
			<a href="http://www.atlantareviewgroup.com/insurance.html">insurance</a>
			<ul>
				<li>
					<span>property insurance</span>
					<ul>
						<li><a href="#">under construction</a></li>
					</ul>
				</li><li>
					<span>auto insurance</span>
					<ul>
						<li><a href="#">under construction</a></li>
					</ul>
				</li><li>
					<span>health insurance</span>
					<ul>
						<li><a href="#">under construction</a></li>
					</ul>
				</li><li>
					<span>annuities</span>
					<ul>
						<li><a href="#">under construction</a></li>
					</ul>
				</li>
			</ul>
		</li><li>
			<a href="http://www.atlantareviewgroup.com/general.html">general</a>
			<ul>
				<li>
					<span>electronics</span>
					<ul>
						<li><a href="#">under construction</a></li>
					</ul>
					<span>style &amp; fashion</span>
					<ul>
						<li><a href="#">under construction</a></li>
					</ul>
					<span>food/dining</span>
					<ul>
						<li><a href="#">under construction</a></li>
					</ul>
					<span>cars/auto</span>
					<ul>
						<li><a href="#">under construction</a></li>
					</ul>
				</li>
			</ul>
		</li><li>
			<a href="http://www.atlantareviewgroup.com/dating.html">dating</a>
			<ul>
				<li><a href="#">RealMatureSingles</a></li>
				<li><a href="#">SeniorPeopleMeet</a></li>
			</ul>
		</li><li>
			<a href="http://www.atlantareviewgroup.com/education.html">education</a>
			<ul>
				<li><a href="#">under construction</a></li>
			</ul>
		</li>
	</ul>
	
	<div id="footer">
		&copy;AtlantaReviewGroup.com<br />
		Updated June 30, 2011
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>	

</body></html>

Swinging an axe at the pointless “home page” text and the equally useless/annoying/broken flashtard nonsense in the footer.

You may have gone through the book, but I think you failed to grasp it’s intent; either that or I need to go back and check, and take it OFF my recommendation list. Either that, or I’m completely misunderstanding you – are you basically saying that after reading the book you don’t understand why your old outdated 1997 style code doesn’t work; if so then you missed that the intent of Ian’s book is to teach you a better way to build a site from the ground up, NOT to shlep along old code and broken/outdated methodologies.

Okay, well I took out the flash animation, changed the home page text, removed align=“center” attributes. I was able to get the gaps removed, but the page still won’t align to center.

Current markup:


<!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" />
<meta http-equiv="Content-Language" content="en" />
<link href="style/main.css" rel="stylesheet" type="text/css" media="screen,projection,tv" />
<link href="style/dropdownmenus.css" rel="stylesheet" type="text/css" media="screen" />
<title>Atlanta Review Group&trade;</title>
</head>
<body>
<div style="width:100%; margin:0 auto;">
<div id="header">&nbsp;</div><!-- end header div -->
<div id="lowerheader">
	<div id="blueshadow">
      <b><u>Welcome to Atlanta Review Group</u></b>
    </div>
</div><!-- end lowerheader div -->
<div id="body">
<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 &amp; 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><!-- end body div -->
</div><!-- end wrapping div -->
<div id="footer">&nbsp;</div><!-- end footer div -->
<div class="blackshadow">&copy;AtlantaReviewGroup.com</div>
<div class="blackshadow">Updated June 30, 2011</div>
</body>
</html>

The styles:


@charset "utf-8";
/* CSS Document */

html, body, 
h1, h2, h3, h4, h5, h6, p, img,
form, fieldset, legend, label, textarea,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {
    margin: 0;
    padding: 0;
}

body{
	background-image: url(bg.jpg);
	background-position:top center;
	background-color:#FFF;
	background-repeat: no-repeat;
	margin:0 auto;
}

#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%;
}

I need to make a better graphic design for my page. It’s so gray and bland.

And I removed the useless <meta> tags.

I have also removed the presentational <u> and <b> markup from the XHTML. Why won’t it align to center still?

If you want the divs to center, you need to change the margin on #header and #lowerheader from margin: 0 to margin:0 auto;

@etidd:

Did you not even look at my post? I gave you simple corrections that, except for one item, will fix your page with its present markup.

If you don’t quite understand someone’s instructions, ask for clarification.

gary

N.B. Your structure is in need of improvement. Do study DS’s post. --gt