Styling an Unordered List

I placed an unordered list on this page and I’m having problems styling it. Will someone please help me?
Thank you in advance

<!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" />
<title>Cascading Style Sheets (CSS)</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrap">

<div id="wrapper">

<div id="header">

<h1>Search Engine Optimization (SEO)</h1>

</div><!--end of header -->
<div id="nav">

<ul>
  <li><a href="index.htm">Home</a></li>
  <li><a href="basics.htm">SEO Basics</a></li>
  <li><a href="books.htm">SEO Books</a></li>
  <li><a href="terms.htm">Definitions</a></li>
  <li><a href="books.htm">SEO Tips</a></li>
  <li><a href="search.htm">Search Engines</a></li>
</ul>


</div><!--end of nav -->

<div id="container">

<div id="content">

<h2>Search Engines Tips</h2>

<ol type="1">
<li>Add titles to your pages</li>
<li>Link back to yourself</li>
<li>Create a sitemap</li>
<li>Search-friendly URLs</li>
<li>Avoid Flash</li>
<li>Image descriptions</li>
<li>Social media distribution</li>
<li>Content, content and more content</li>
<li>Link to others</li>
<li>Keywords, keywords, keywords</li>
</ol>

 

</div><!--end of content -->

<div id="sidebar">

<h2>What is SEO?</h2>

<p><strong>Search Engine Optimization (SEO) </strong>is the process of improving the volume or quality of traffic to a web site or a web page (such as a blog) from search engines via "natural" or un-paid ("organic" or "algorithmic") search results as opposed to other forms of search engine marketing (SEM) which may deal with paid inclusion. The theory is that the earlier (or higher) a site appears in the search results list, the more visitors it will receive from the search engine. SEO may target different kinds of search, including image search, local search, video search and industry-specific vertical search engines. This gives a web site web presence</p>

<p>As an Internet marketing strategy, <strong>SEO</strong>considers how search engines work and what people search for. Optimizing a website primarily involves editing its content and HTML and associated coding to both increase its relevance to specific keywords and to remove barriers to the indexing activities of search engines.</p>

<p>The acronym "SEO" can refer to "search engine optimizers," a term adopted by an industry of consultants who carry out optimization projects on behalf of clients, and by employees who perform SEO services in-house. Search engine optimizers may offer SEO as a stand-alone service or as a part of a broader marketing campaign. Because effective SEO may require changes to the HTML source code of a site, SEO tactics may be incorporated into web site development and design. The term "search engine friendly" may be used to describe web site designs, menus, content management systems, images, videos, shopping carts, and other elements that have been optimized for the purpose of search engine exposure.</p>

</div>

<div id="clear"></div>

</div>

<div id="footer">
<p>Designed by: </p>
</div><!--end of footer -->

</div>

</div>

</body>
</html>

* {
margin: 0;
padding: 0;
}

body {
	margin: 0px;
	padding: 0px;
	font-size: 0.85em;
	line-height: 115%;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #8caad7;
}

#wrapper {
	border: 1px solid #039;
	margin: 0px auto;
	padding: 0px;
	width: 750px;
	height: auto;
	background-color: #f4f3ee;
}

#header {
	width: 750px;
	height: 60px;
	background-image: url(images/header.png);
	background-repeat: repeat-x;
	padding-top: 15px;
}

h1 {
	font-size: 2em;
	text-align: center;
	}
	
h3 {
	font-size: 1em;
	text-align: center;
	}
	
#nav {
	width: 750px;
	height: 35px;
	background-image: url(images/nav1.png);
	background-repeat: repeat-x;
	color: #003;
	border-width: 1px;
	border-style: solid;
	border-color:  #006;
}

#nav ul { 
	margin-top: 6px;
	margin-bottom: 5px;
	margin-left: 20px;
}

#nav ul li { 
	list-style-type: none;
	display: inline;
	padding-right: 25px;
	font-weight: bold;
}

#nav a { 
	text-decoration: none;
}

#nav a:link {
	color: #FFF;
	text-decoration: none;
	font-size: 1.1em;
	font-weight: bold;
}

#nav a:visited {
	color: #FFF;
}

#nav a:hover {
	color: #FFFBF0;
	text-decoration: underline;
}

#nav a:active {
	color: #ceb6af;
}

#container { 
	width: 750px;
	height: auto;
}

#content {
	width: 480px;
	height: auto;
	background-color: #A6CAF0;
	float: right;
	margin-top: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
	padding-top: 6px;
	padding-bottom: 10px;
	border-width: 1px;
	border-style: solid;
	border-color: #004080;
}

#main-content {
	background-color:#55DF00;
	}

#sidebar {
	width: 220px;
	height: auto;
	background-color: #c2d3e8;
	float: left;
	margin-top: 15px;
	margin-left: 15px;
	margin-bottom: 15px;
	padding-top: 5px;
	padding-bottom: 10px;
	border-width: 1px;
	border-style: solid;
	border-color: #004080;
}

#wrap {
	background-image: url(images/shadow.png);
	background-repeat: repeat-y;
	background-position: center top;
}

#clear { clear: both;
	width: auto;
	height: 1px;
}


#list ul li { 
    float: center; 
	text-indent: 50px;
} 
 

#footer {
	width: 750px;
	height: 35px;
	text-align: center;
	color: #fff;
	background-color: #474c55;
	clear: both;
	background-image: url(images/footer.png);
	background-repeat: repeat-x;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #000002;
	border-bottom-color: #000002;
	font-size: 0.90em;
}

h2, h3 {
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 10px;
}

p {
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}

.book1 {
	float: left; 
	margin: 5px 10px 15px 15px; 
	}
	
.book2 {
	float: left; 
	margin: 5px 10px 15px 15px; 
	}
	
.book3 {
	float: left; 
	margin: 5px 10px 15px 15px; 
	}
	
.book-review {
	margin: 20px 15px 15px 30px;
	width: 650px;
	background: #fff;
	}

table {
	border: 1px solid #D7C88A;
	border-collapse: collapse;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif;
}

th, td {
	border:  1px solid #600;
	color: #5a5c5f;
	border-collapse: collapse;
	padding: 4px;
	text-align: left;
	background-color: #ebf0f7;
}

caption {
	background: #fff;
	font-size: 1.25em;
	border: 1px solid #00F;
	padding: 1px;
	border: thin;
	color: #00F;
}

thead th {
	background: #2A00FF;
	color: #fff;
	font-size: 1em;
}

tbody th, td {
	background: #e6eaf0;
}


I placed an unordered list on this page and I’m having problems styling it.
Hi,
The only UL I see is your top nav and it looks like you have styled it. Are you talking about your OL that has no styles.

It looks like you made an attempt but you were using UL instead, by the way there is no such animal as float:center;


[COLOR=Red]#list ul li[/COLOR] { 
    float: center; 
    text-indent: 50px;
} 

You really need to just do away with all those height:auto; rules everywhere in your css. It is the default and there is no need to declare it. If you will learn to use shorthand for all your margin,padding, and border styles it will cut your css down to half it’s current size. :wink:

You could probably do away with that outer #wrap div that only has a BG image styled to it. I have not seen the image but you could probably just set the proper padding on the #wrapper div and then move the image there.

No need for empty clearing divs to contain floats either on this page. Setting overflow:hidden; on that container div (now #inner) will take the place of that empty clearing div

Give this a try -


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Search Engine Optimization (SEO)</title>

<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    font-size: 0.85em;
    line-height: 115&#37;;
    font-family: Arial, Helvetica, sans-serif;
    background: #8caad7;
}
#wrap {
    width: 100%;/*IE6/7 haslayout*/
    background: url(images/shadow.png) repeat-y center top;
}
#wrapper {
    border: 1px solid #039;
    margin: 0px auto;
    padding: 0px;
    width: 750px;
    height: auto;
    background-color: #f4f3ee;
}
h1#header {
    width: 750px;
    height: 60px;
    padding: 15px 0 0;
    background: url(images/header.png) repeat-x;
    font-size: 2em;
    text-align: center;
}
h3 {
    font-size: 1em;
    text-align: center;
}
#nav {
    height: 35px;
    background: #77F url(images/nav1.png) repeat-x;
    color: #003;
    margin: 5px 0;
    padding-left: 20px;
    border: solid #006;
    border-width: 1px 0;
    list-style: none;
}
#nav li {
    display: inline;
}
#nav a {
    padding: 0 10px;
    line-height: 35px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
}
#nav a:link {
    color: #FFF;
}
#nav a:visited {
    color: #FFF;
}
#nav a:active {
    color: #ceb6af;
}
#nav a:hover {
    color: #FFFBF0;
    text-decoration: underline;
}
#inner {
    width: 750px;
    overflow: hidden;/*contain floats*/
}
#content {
    width: 480px;
    background: #A6CAF0;
    float: right;
    margin: 15px 15px 0 15px;
    display: inline;/*fix ie6*/
    padding: 6px 0 10px;
    border: 1px solid #004080;
}
ol#tips {
    margin: 10px 0;
    padding: 0 0 0 30px;
}
#sidebar {
    width: 220px;
    background: #c2d3e8;
    float: left;
    margin: 15px 0 15px 15px;
    display: inline;/*fix ie6*/
    padding: 5px 0 10px;
    border: 1px solid #004080;
}
#footer {
    clear: both;
    height: 35px;
    background: #474c55 url(images/footer.png) repeat-x;
    border-top: 1px solid #000002;
    text-align: center;
    color: #fff;
    font-size: 0.90em;
}
h2, h3 {
    padding: 10px 0px 5px 10px;
}
h3 {
    font-size: 1em;
    text-align: center;
}
p {
    padding: 5px 10px;
}
.book1 {
    float: left;
    margin: 5px 10px 15px 15px;
}
.book2 {
    float: left;
    margin: 5px 10px 15px 15px;
}
.book3 {
    float: left;
    margin: 5px 10px 15px 15px;
}
.book-review {
    margin: 20px 15px 15px 30px;
    width: 650px;
    background: #fff;
}
table {
    border: 1px solid #D7C88A;
    border-collapse: collapse;
    text-align: center;
    font-family: Georgia, "Times New Roman", Times, serif;
}
th, td {
    border:  1px solid #600;
    color: #5a5c5f;
    border-collapse: collapse;
    padding: 4px;
    text-align: left;
    background-color: #ebf0f7;
}
caption {
    background: #fff;
    font-size: 1.25em;
    border: 1px solid #00F;
    padding: 1px;
    border: thin;
    color: #00F;
}
thead th {
    background: #2A00FF;
    color: #fff;
    font-size: 1em;
}
tbody th, td {
    background: #e6eaf0;
}

</style>

</head>
<body>

<div id="wrap">
<div id="wrapper">
    <h1 id="header">Search Engine Optimization (SEO)</h1>
    <ul id="nav">
        <li><a href="index.htm">Home</a></li>
        <li><a href="basics.htm">SEO Basics</a></li>
        <li><a href="books.htm">SEO Books</a></li>
        <li><a href="terms.htm">Definitions</a></li>
        <li><a href="books.htm">SEO Tips</a></li>
        <li><a href="search.htm">Search Engines</a></li>
    </ul><!--end nav -->

    <div id="inner">
        <div id="content">
            <h2>Search Engines Tips</h2>
            <ol id="tips">
                <li>Add titles to your pages</li>
                <li>Link back to yourself</li>
                <li>Create a sitemap</li>
                <li>Search-friendly URLs</li>
                <li>Avoid Flash</li>
                <li>Image descriptions</li>
                <li>Social media distribution</li>
                <li>Content, content and more content</li>
                <li>Link to others</li>
                <li>Keywords, keywords, keywords</li>
            </ol>
        </div><!--end content -->
        <div id="sidebar">
            <h2>What is SEO?</h2>
            <p><strong>Search Engine Optimization (SEO) </strong>is the process of improving the volume or quality of traffic to a web site or a web page (such as a blog) from search engines via "natural" or un-paid ("organic" or "algorithmic") search results as opposed to other forms of search engine marketing (SEM) which may deal with paid inclusion. The theory is that the earlier (or higher) a site appears in the search results list, the more visitors it will receive from the search engine. SEO may target different kinds of search, including image search, local search, video search and industry-specific vertical search engines. This gives a web site web presence</p>
            <p>As an Internet marketing strategy, <strong>SEO</strong>considers how search engines work and what people search for. Optimizing a website primarily involves editing its content and HTML and associated coding to both increase its relevance to specific keywords and to remove barriers to the indexing activities of search engines.</p>
            <p>The acronym "SEO" can refer to "search engine optimizers," a term adopted by an industry of consultants who carry out optimization projects on behalf of clients, and by employees who perform SEO services in-house. Search engine optimizers may offer SEO as a stand-alone service or as a part of a broader marketing campaign. Because effective SEO may require changes to the HTML source code of a site, SEO tactics may be incorporated into web site development and design. The term "search engine friendly" may be used to describe web site designs, menus, content management systems, images, videos, shopping carts, and other elements that have been optimized for the purpose of search engine exposure.</p>
        </div>
    </div><!--end inner -->

    <div id="footer">
        <p>Designed by: </p>
    </div><!--end footer -->

</div><!--end wrapper -->
</div><!--end wrap -->

</body>
</html>

Is this page sharing the same css as the page in your AP thread?

There is really no need to be wrapping divs around your top UL either, you will notice that I just hooked the #nav styles to the UL and eliminated the div.

I did the same with the header, it was changed to h1#header.

I’m just trying to show you how to write lean html so you don’t develop a bad habit of divitis while you are learning. :slight_smile:

As far as your thread title and the original question:

The universal reset at the top of your css removed the default margin/padding from the OL and all I did was just restate them.


[B]ol#tips[/B] {
    margin: 10px 0;
    padding: 0 0 0 30px;
}

            <ol id=[B]"tips"[/B]>
                <li>Add titles to your pages</li>
                <li>Link back to yourself</li>
                <li>Create a sitemap</li>
                <li>Search-friendly URLs</li>
                <li>Avoid Flash</li>
                <li>Image descriptions</li>
                <li>Social media distribution</li>
                <li>Content, content and more content</li>
                <li>Link to others</li>
                <li>Keywords, keywords, keywords</li>
            </ol>

Thank you for your help. I’m sorry I was tired last night. I did mean the OL (tips). No, this is not part of my AP assignment.

One more question. How can I add some “spacing” around this table? I thought that I would add margins in the CSS code for the table and that didn’t work.

HELP!

<!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" />
<title>SEO Terms and Definitions)</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 0.85em;
    line-height: 115%;
    font-family: Arial, Helvetica, sans-serif;
    background: #8caad7;
}

#wrap {
    width: 100%;/*IE6/7 haslayout*/
    background: url(images/shadow.png) repeat-y center top;
}

#wrapper {
    border: 1px solid #039;
    margin: 0px auto;
    padding: 0px;
    width: 750px;
    height: auto;
    background-color: #f4f3ee;
}

h1#header {
    width: 750px;
    height: 60px;
    padding: 15px 0 0;
    background: url(images/header.png) repeat-x;
    font-size: 2em;
    text-align: center;
}

h3 {
    font-size: 1em;
    text-align: center;
}

#nav {
    height: 35px;
    background: #77F url(images/nav1.png) repeat-x;
    color: #003;
    margin: 5px 0;
    padding-left: 20px;
    border: solid #006;
    border-width: 1px 0;
    list-style: none;
}

#nav li {
    display: inline;
}

#nav a {
    padding: 0 10px;
    line-height: 35px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
}

#nav a:link {
    color: #FFF;
}

#nav a:visited {
    color: #FFF;
}

#nav a:active {
    color: #ceb6af;
}

#nav a:hover {
    color: #FFFBF0;
    text-decoration: underline;
}

#inner {
    width: 750px;
    overflow: hidden;/*contain floats*/
}

#content {
    width: 480px;
    background: #A6CAF0;
    float: right;
    margin: 15px 15px 0 15px;
    display: inline;/*fix ie6*/
    padding: 6px 0 10px;
    border: 1px solid #004080;
}

ol#tips {
    margin: 10px 0;
    padding: 0 0 0 30px;
}

#sidebar {
    width: 220px;
    background: #c2d3e8;
    float: left;
    margin: 15px 0 15px 15px;
    display: inline;/*fix ie6*/
    padding: 5px 0 10px;
    border: 1px solid #004080;
}

#footer {
    clear: both;
    height: 35px;
    background: #474c55 url(images/footer.png) repeat-x;
    border-top: 1px solid #000002;
    text-align: center;
    color: #fff;
    font-size: 0.90em;
}

h2, h3 {
    padding: 10px 0px 5px 10px;
}

h3 {
    font-size: 1em;
    text-align: center;
}

p {
    padding: 5px 10px;
}

.book1 {
    float: left;
    margin: 5px 10px 15px 15px;
}

.book2 {
    float: left;
    margin: 5px 10px 15px 15px;
}

.book3 {
    float: left;
    margin: 5px 10px 15px 15px;
}

.book-review {
    margin: 20px 15px 15px 30px;
    width: 650px;
    background: #fff;
}

table {
    border: 1px solid #D7C88A;
    border-collapse: collapse;
    text-align: center;
    font-family: Georgia, "Times New Roman", Times, serif;
}

th, td {
    border:  1px solid #600;
    color: #5a5c5f;
    border-collapse: collapse;
    padding: 4px;
    text-align: left;
    background-color: #ebf0f7;
}

caption {
    background: #fff;
    font-size: 1.25em;
    border: 1px solid #00F;
    padding: 1px;
    border: thin;
    color: #00F;
}

thead th {
    background: #2A00FF;
    color: #fff;
    font-size: 1em;
}

tbody th, td {
    background: #e6eaf0;
}
 
</style>
</head>

<body>

<div id="wrap">

<div id="wrapper">

<div id="header">

<h1>SEO Terms and Definitions</h1>

</div><!--end of header -->
<div id="nav">

<ul>
  <li><a href="index.htm">Home</a></li>
  <li><a href="basics.htm">SEO Basics</a></li>
  <li><a href="books.htm">SEO Books</a></li>
  <li><a href="terms.htm">Definitions</a></li>
  <li><a href="search.htm">Search Engines</a></li>
</ul>


</div><!--end of nav -->

<div id="container">

<table summary="CSS Property Groups">
<caption>SEO Terms and Definitions</caption>

<thead>
<tr>
<th id="property" scope="col">SEO Terms</th>
<th id="description" scope="col">Definition</th>
</tr>
</thead>
<tbody>
<tr class="row">
<th scope="row">Log File</th>
<td>This is a file created by a web server or proxy server which contains all   information about the activity on that server</td>
</tr>
<tr>
<th scope="row">PPC (Pay Per Click)<br /></th>
<td>Search engines where advertisers pay present the results of that search every   time someone clicks on your link. The major PPC search engines today are Google   Adwords, Overture and Espotting.</td>
</tr>

<tr>
<th scope="row">Crawler / Spider / Robot / Spider<br /></th>
<td>A program designed to crawl the web by following links between pages. Is the   usual form used by the major search engines to find pages later part of their   databases</td>
</tr>

<tr>
<th scope="row">Click Through Rate (CTR) </th>
<td>Ratet for clickks is the number of times a link is followed by sailors, divided   by the number of times that the link is shown (in turn called printing).</td>
</tr>

<tr>
<th scope="row">Content</th>
<td>Information available on one page including images, texts and any other   information provided regardless of its format.</td>
</tr>

<tr>
<th scope="row">Dynamic Content:</th>
<td>Pages generated usually from the information in a database and the demands made   by the navigator. This kind of content usually has the character &quot;?&quot; Within the   URL.</td>
</tr>

<tr>
<th scope="row">IP Address </th>
<td>Internet Protocol Address: identifies a computer connected to the Internet.</td>
</tr>

<tr>
<th scope="row">Directories</th>
<td>SDatabases are made by humans. Web pages indexed and are found in directories or   subdirectories cataloging at their own discretion. The largest and most   important are Yahoo and Open Directory Project.</td>
</tr>

<tr>
<th scope="row">Doorway Page</th>
<td>Page designed and optimized for a browser and a particular keyword. The use of   multiple pages of this type allows the same content is positioned properly in   different browsers. This strategy is highly penalized by the major search   engines.</td>
</tr>

<tr>
<th scope="row">Deep Links<br /></th>
<td>are links to pages that are several levels below the domain root.<br /></td>
</tr>

<tr>
<th scope="row">Cross Links</th>
<td>Link consists of multiple websites in order to improve search engine   positioning. If detected by search engines domains can be penalized.</td>
</tr>

<tr>
<th scope="row">Filters</th>
<td>Specialized software to detect fraudulent practices or penalized by search   engines. If the filter detects a search engine one of these practices directly   apply a penalty to the website.</td>
</tr>

<tr>
<th scope="row">Frames</th>
<td>Most search engines can manage web sites with frames (frames). Although   difficulties have yet to try a website for 'frames' that one without 'frames'.</td>
</tr>

<tr>
<th scope="row">HTML</th>
<td>Hyper Text Markup Language is the language used to write static pages for the   World Wide Web and to specify links to pages and objects.</td>
</tr>

<tr>
<th scope="row">Javascript</th>
<td>Known script programming language that has broad support in browsers and Web   development tools with this language you can write scripts.</td>
</tr>

<tr>
<th scope="row">Keywords</th>
<td>Found on Web pages that describes the product, service or information presented   by Web sites. Placed into the Meta tag &quot;Keywords&quot;. Many search engines obviate   the meta tag &quot;keywords&quot; due to misuse that has been made of them, so it is very   important to clarify the standards used by search engines and directories.</td>
</tr>

<tr>
<th scope="row">Link Popularity Or League</th>
<td>It is a measure of the importance of an Internet website based on the number of   external links is the website. It is one of the most important factors used by   the major search engines to sort the results presented to sailors. The   popularity of leagues (link popularity) defines how important a website. Search   engines believe that if many sites have links to your site, its content must be   of high quality. Conclusion: the higher the popularity of links, the higher the   position in Google. Another important thing is that a connection of a website   with a 'link popularity' very high at your site has a connection higher than a   site that borders low.</td>
</tr>

<tr>
<th scope="row">Site Map</th>
<td>The availability of a site map has two advantages: it is much easier for   visitors to find their way around the site, and makes it much easier for a   search engine indexes your site.</td>
</tr>

<tr>
<th scope="row">Meta Search</th>
<td>Websites specializing in consulting various search engines simultaneously and   present the information in a comprehensible and orderly.</td>
</tr>

<tr>
<th scope="row">Meta Tags</th>
<td>They are HTML tags that contain keywords for which your website will be found.   The met tags are very important when positioning a Web site because search   engines rank pages according to the met tags they find. The most used are the   title, description and keywords.</td>
</tr>

<tr>
<th scope="row">Search Engines</th>
<td>A search engine or unbuscador is a system that seeks and indexes websites and   allows users to find what is on those sites through keywords. One Stat lets you   know from which search engines visitors are coming to your site.</td>
</tr>

<tr>
<th scope="row">Domain Name</th>
<td>This is the text name corresponding to an IP number from a computer connected to   the Internet.</td>
</tr>

<tr>
<th scope="row">Indexed Pages</th>
<td>This number represents the total number of pages visited and indexed by Google   in its website. This number can conclude to what extent the site is indexed by a   search engine.</td>
</tr>

<tr>
<th scope="row">WebSite Optimization<br /></th>
<td>A thorough analysis of the HTML code, tags, keywords, web statistics, etc.That   is, the design, structure and contents that make up a Web page in order to bring   it to the top of search engines, or the first results of search engines, most   popular.</td>
</tr>

<tr>
<th scope="row">Optimization For Search Engines</th>
<td>The process of modification and analysis of web pages to get to position the   page in the highest positions within the major search engines. The analysis is   comprehensive because it includes labels and tags titles, codes and Web design.   Check out our promotions website optimization or search engine optimization.</td>
</tr>

<tr>
<th scope="row">Page Rank</th>
<td>The Google Page Rank is numerical value assigned by Google to each page present   in its database. This value is calculated by Google using special algorithms   based on qualitative and quantitative evaluation of the external links on each   website.</td>
</tr>

<tr>
<th scope="row">Entry Pages</th>
<td>Indicates the number of times a page is the first to be seen within the route of   a visitor clicks on your site. Typically the home page should have a high   number, if not the top of the list.</td>
</tr>

<tr>
<th scope="row">Exit Pages</th>
<td>Indicates the number of times a page is the first to be seen within the route of   a visitor clicks on your site. Typically the home page should have a high number   in this list, unless you have a lot of dynamic content on your site that users   see only one time.</td>
</tr>

<tr>
<th scope="row">Search Keywords / Phrases:</th>
<td>These are the words that users employ search engines in order to reach a   website. One Stat lets you know what search words your visitors are using to   find your site. As the list of keywords can increase you know that keywords   important to find your site are ignored by search engines and added to the META   KEYWORD tag of each page to improve the performance of your site in search   engines.</td>
</tr>

<tr>
<th scope="row">Relevance</th>
<td>Affinity of a page including a listing of results of a search with the subject   or information sought by a navigator</td>
</tr>

<tr>
<th scope="row">Titles Different Pages</th>
<td>Each page on a website has its own subject, it is very important that the title   of the pages tells whether your context contains. A search engine can judge by   its title page.</td>
</tr>

<tr>
<th scope="row">Unique Vistors</th>
<td>Unique visitors are day visitors only on a given day. A visitor can only be a   first-time visitor or a visitor nonreturner. Unique visitors are counted only   once during the period several times while accessing a website. Number of   visitors accessing our website over a specific period of time from a particular   IP address.</td>
</tr>




</tbody>
</table>

</div><!--end of container -->


<div id="footer">
<p>Designed by: Karen Whalen</p>
</div><!--end of footer -->

</div>

</div>

</body>
</html>

Welll yes that should work, however you could also style #container
#container{margin:/whatever/}

Well since the table is the only child of the #container element, you could just simply set margins on that element :).

Something like this? It didn’t work.
Thanks

table {
border: 1px solid #D7C88A;
border-collapse: collapse;
margin: 5px 5px 10px 15px;
text-align: center;
font-family: Georgia, “Times New Roman”, Times, serif;
}

I did this and it didn’t work:

#container {
margin: 15px 15px 10px 15px;
}

table {
border: 1px solid #D7C88A;
border-collapse: collapse;
margin: 15px 15px 10px 15px;
text-align: center;
font-family: Georgia, “Times New Roman”, Times, serif;
}

Do you have an online example? I don’t see a reason why it should be doing that (you have floats specified in your CSS, though the corrosponding HTML isn’t in there from what I see)

Hi,
I will be glad to help but you are going to have to pay attention and read my posts carefully, it looks like you are just catching bits and pieces.

You have taken the css that I reworked but you did not adjust the html accordingly. The styles don’t interact with the html properly now. You still have all those unnecessary divs around the h1 and the top nav and you still have that central div named #container.

No need for empty clearing divs to contain floats either on this page. Setting overflow:hidden; on that container div (now #inner) will take the place of that empty clearing div
I renamed it because wrap, wrapper, and container are common names for the main outermost wrapping div. I changed it to #inner so it would be a little more descriptive of what it actually is. :wink:

As far as your ? about the table margins. It just needs a margin.

table {
   [COLOR=Blue] margin:5px 10px 10px;[/COLOR] [COLOR=DarkGreen]/*5px top to join with #nav 5px bottom margin for (10px total top)*/[/COLOR]
    border-collapse: collapse;
    text-align: center;
    font-family: Georgia, "Times New Roman", Times, serif;
}

Look through the html and css to understand how they work together. :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SEO Terms and Definitions)</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

body {
    font: 85%/1.3 Arial, Helvetica, sans-serif;
    background: #8caad7;
}

#wrap {
    width: 100%;/*IE6/7 haslayout*/
    background: url(images/shadow.png) repeat-y center top;
}

#wrapper {
    width: 750px;
    margin: 0 auto;
    background: #f4f3ee;
    border: 1px solid #039;
}

h1#header {
    width: 750px;
    height: 60px;
    padding: 10px 0 0;
    background: url(images/header.png) repeat-x;
    font-size:2em;
    text-align: center;
}

#nav {
    height: 35px;
    margin: 5px 0;
    padding-left: 20px;
    background: #77F url(images/nav1.png) repeat-x;
    border: solid #006;
    border-width: 1px 0;
    color: #003;
    list-style: none;
}

#nav li {
    display: inline;
    margin:0 5px;
}

#nav a {
    padding: 0 5px;
    line-height: 35px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
}

#nav a:link {
    color: #FFF;
}

#nav a:visited {
    color: #FFF;
}

#nav a:active {
    color: #ceb6af;
}

#nav a:hover {
    color: #FFFBF0;
    text-decoration: underline;
}

#inner {
    width: 750px;
    overflow: hidden;/*contain floats*/
}

#content {
    width: 480px;
    background: #A6CAF0;
    float: right;
    margin: 15px 15px 0 15px;
    display: inline;/*fix ie6*/
    padding: 6px 0 10px;
    border: 1px solid #004080;
}

ol#tips {
    margin: 10px 0;
    padding: 0 0 0 30px;
}

#sidebar {
    width: 220px;
    background: #c2d3e8;
    float: left;
    margin: 15px 0 15px 15px;
    display: inline;/*fix ie6*/
    padding: 5px 0 10px;
    border: 1px solid #004080;
}

#footer {
    clear: both;
    height: 35px;
    background: #474c55 url(images/footer.png) repeat-x;
    border-top: 1px solid #000002;
    text-align: center;
    color: #fff;
    font-size: 0.90em;
}

h2, h3 {padding: 10px 0px 5px 10px;}

h3 {
    font-size: 1em;
    text-align: center;
}

p {padding: 5px 10px;}

table {
    margin:5px 10px 10px; /*5px top to join with #nav 5px bottom margin for (10px total top)*/
    border-collapse: collapse;
    text-align: center;
    font-family: Georgia, "Times New Roman", Times, serif;
}

th, td {
    border: 1px solid #039;
    color: #5a5c5f;
    padding: 4px;
    text-align: left;
    background: #ebf0f7;
}

caption {
    background: #fff;
    font-size: 1.25em;
    border: 1px solid #039;
    padding: 1px;
    /*border: thin;*/
    color: #00F;
}

thead th {
    background: #2A00FF;
    color: #fff;
    font-size: 1em;
}

tbody th, td {
    background: #e6eaf0;
}
 
</style>
</head>

<body>

<div id="wrap">

<div id="wrapper">

<h1 id="header">SEO Terms and Definitions</h1>

<ul id="nav">
  <li><a href="index.htm">Home</a></li>
  <li><a href="basics.htm">SEO Basics</a></li>
  <li><a href="books.htm">SEO Books</a></li>
  <li><a href="terms.htm">Definitions</a></li>
  <li><a href="search.htm">Search Engines</a></li>
</ul>

<div id="inner">

<table summary="CSS Property Groups">
<caption>SEO Terms and Definitions</caption>

<thead>
<tr>
<th id="property" scope="col">SEO Terms</th>
<th id="description" scope="col">Definition</th>
</tr>
</thead>
<tbody>
    <tr>
        <th scope="row">Log File</th>
        <td>This is a file created by a web server or proxy server which contains all   information about the activity on that server</td>
    </tr>
    <tr>
        <th scope="row">PPC (Pay Per Click)</th>
        <td>Search engines where advertisers pay present the results of that search every   time someone clicks on your link. The major PPC search engines today are Google   Adwords, Overture and Espotting.</td>
    </tr>
    <tr>
        <th scope="row">Crawler / Spider / Robot / Spider</th>
        <td>A program designed to crawl the web by following links between pages. Is the   usual form used by the major search engines to find pages later part of their   databases</td>
    </tr>
    <tr>
        <th scope="row">Click Through Rate (CTR) </th>
        <td>Ratet for clickks is the number of times a link is followed by sailors, divided   by the number of times that the link is shown (in turn called printing).</td>
    </tr>
    <tr>
        <th scope="row">Content</th>
        <td>Information available on one page including images, texts and any other   information provided regardless of its format.</td>
    </tr>
    <tr>
        <th scope="row">Dynamic Content:</th>
        <td>Pages generated usually from the information in a database and the demands made   by the navigator. This kind of content usually has the character &quot;?&quot; Within the   URL.</td>
    </tr>
    <tr>
        <th scope="row">IP Address </th>
        <td>Internet Protocol Address: identifies a computer connected to the Internet.</td>
    </tr>
    <tr>
        <th scope="row">Directories</th>
        <td>SDatabases are made by humans. Web pages indexed and are found in directories or   subdirectories cataloging at their own discretion. The largest and most   important are Yahoo and Open Directory Project.</td>
    </tr>
    <tr>
        <th scope="row">Doorway Page</th>
        <td>Page designed and optimized for a browser and a particular keyword. The use of   multiple pages of this type allows the same content is positioned properly in   different browsers. This strategy is highly penalized by the major search   engines.</td>
    </tr>
    <tr>
        <th scope="row">Deep Links<br /></th>
        <td>are links to pages that are several levels below the domain root.<br /></td>
    </tr>
    <tr>
        <th scope="row">Cross Links</th>
        <td>Link consists of multiple websites in order to improve search engine   positioning. If detected by search engines domains can be penalized.</td>
    </tr>
    <tr>
        <th scope="row">Filters</th>
        <td>Specialized software to detect fraudulent practices or penalized by search   engines. If the filter detects a search engine one of these practices directly   apply a penalty to the website.</td>
    </tr>
    <tr>
        <th scope="row">Frames</th>
        <td>Most search engines can manage web sites with frames (frames). Although   difficulties have yet to try a website for 'frames' that one without 'frames'.</td>
    </tr>
    <tr>
        <th scope="row">HTML</th>
        <td>Hyper Text Markup Language is the language used to write static pages for the   World Wide Web and to specify links to pages and objects.</td>
    </tr>
    <tr>
        <th scope="row">Javascript</th>
        <td>Known script programming language that has broad support in browsers and Web   development tools with this language you can write scripts.</td>
    </tr>
    <tr>
        <th scope="row">Keywords</th>
        <td>Found on Web pages that describes the product, service or information presented   by Web sites. Placed into the Meta tag &quot;Keywords&quot;. Many search engines obviate   the meta tag &quot;keywords&quot; due to misuse that has been made of them, so it is very   important to clarify the standards used by search engines and directories.</td>
    </tr>
    <tr>
        <th scope="row">Link Popularity Or League</th>
        <td>It is a measure of the importance of an Internet website based on the number of   external links is the website. It is one of the most important factors used by   the major search engines to sort the results presented to sailors. The   popularity of leagues (link popularity) defines how important a website. Search   engines believe that if many sites have links to your site, its content must be   of high quality. Conclusion: the higher the popularity of links, the higher the   position in Google. Another important thing is that a connection of a website   with a 'link popularity' very high at your site has a connection higher than a   site that borders low.</td>
    </tr>
    <tr>
        <th scope="row">Site Map</th>
        <td>The availability of a site map has two advantages: it is much easier for   visitors to find their way around the site, and makes it much easier for a   search engine indexes your site.</td>
    </tr>
    <tr>
        <th scope="row">Meta Search</th>
        <td>Websites specializing in consulting various search engines simultaneously and   present the information in a comprehensible and orderly.</td>
    </tr>
    <tr>
        <th scope="row">Meta Tags</th>
        <td>They are HTML tags that contain keywords for which your website will be found.   The met tags are very important when positioning a Web site because search   engines rank pages according to the met tags they find. The most used are the   title, description and keywords.</td>
    </tr>
    <tr>
        <th scope="row">Search Engines</th>
        <td>A search engine or unbuscador is a system that seeks and indexes websites and   allows users to find what is on those sites through keywords. One Stat lets you   know from which search engines visitors are coming to your site.</td>
    </tr>
    <tr>
        <th scope="row">Domain Name</th>
        <td>This is the text name corresponding to an IP number from a computer connected to   the Internet.</td>
    </tr>
    <tr>
        <th scope="row">Indexed Pages</th>
        <td>This number represents the total number of pages visited and indexed by Google   in its website. This number can conclude to what extent the site is indexed by a   search engine.</td>
    </tr>
    <tr>
        <th scope="row">WebSite Optimization<br /></th>
        <td>A thorough analysis of the HTML code, tags, keywords, web statistics, etc.That   is, the design, structure and contents that make up a Web page in order to bring   it to the top of search engines, or the first results of search engines, most   popular.</td>
    </tr>
    <tr>
        <th scope="row">Optimization For Search Engines</th>
        <td>The process of modification and analysis of web pages to get to position the   page in the highest positions within the major search engines. The analysis is   comprehensive because it includes labels and tags titles, codes and Web design.   Check out our promotions website optimization or search engine optimization.</td>
    </tr>
    <tr>
        <th scope="row">Page Rank</th>
        <td>The Google Page Rank is numerical value assigned by Google to each page present   in its database. This value is calculated by Google using special algorithms   based on qualitative and quantitative evaluation of the external links on each   website.</td>
    </tr>
    <tr>
        <th scope="row">Entry Pages</th>
        <td>Indicates the number of times a page is the first to be seen within the route of   a visitor clicks on your site. Typically the home page should have a high   number, if not the top of the list.</td>
    </tr>
    <tr>
        <th scope="row">Exit Pages</th>
        <td>Indicates the number of times a page is the first to be seen within the route of   a visitor clicks on your site. Typically the home page should have a high number   in this list, unless you have a lot of dynamic content on your site that users   see only one time.</td>
    </tr>
    <tr>
        <th scope="row">Search Keywords / Phrases:</th>
        <td>These are the words that users employ search engines in order to reach a   website. One Stat lets you know what search words your visitors are using to   find your site. As the list of keywords can increase you know that keywords   important to find your site are ignored by search engines and added to the META   KEYWORD tag of each page to improve the performance of your site in search   engines.</td>
    </tr>
    <tr>
        <th scope="row">Relevance</th>
        <td>Affinity of a page including a listing of results of a search with the subject   or information sought by a navigator</td>
    </tr>
    <tr>
        <th scope="row">Titles Different Pages</th>
        <td>Each page on a website has its own subject, it is very important that the title   of the pages tells whether your context contains. A search engine can judge by   its title page.</td>
    </tr>
    <tr>
        <th scope="row">Unique Vistors</th>
        <td>Unique visitors are day visitors only on a given day. A visitor can only be a   first-time visitor or a visitor nonreturner. Unique visitors are counted only   once during the period several times while accessing a website. Number of   visitors accessing our website over a specific period of time from a particular   IP address.</td>
    </tr>
</tbody>
</table>

</div><!--end inner -->


<div id="footer">
<p>Designed by: Karen Whalen</p>
</div><!--end footer -->

</div>

</div>

</body>
</html>

My other pages changed since I copied the new CSS code.
home.htm and books.htm are offset and not centered.
books.htm - the header is not styled anymore
HELP!

* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 0.85em;
    line-height: 115%;
    font-family: Arial, Helvetica, sans-serif;
    background: #8caad7;
}

#container {
	margin: 15px 15px 10px 15px;
	}
	
#wrap {
    width: 100%;/*IE6/7 haslayout*/
    background: url(images/shadow.png) repeat-y center top;
}

#wrapper {
    border: 1px solid #039;
    margin: 0px auto;
    padding: 0px;
	margin: 5px 5px 10px 15px;
    width: 750px;
    height: auto;
    background-color: #f4f3ee;
}

h1#header {
    width: 750px;
    height: 60px;
    padding: 15px 0 0;
    background: url(images/header.png) repeat-x;
    font-size: 2em;
    text-align: center;
}

h3 {
    font-size: 1em;
    text-align: center;
}

#nav {
    height: 35px;
    background: #77F url(images/nav1.png) repeat-x;
    color: #003;
    margin: 5px 0;
    padding-left: 20px;
    border: solid #006;
    border-width: 1px 0;
    list-style: none;
}

#nav li {
    display: inline;
}

#nav a {
    padding: 0 10px;
    line-height: 35px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
}

#nav a:link {
    color: #FFF;
}

#nav a:visited {
    color: #FFF;
}

#nav a:active {
    color: #ceb6af;
}

#nav a:hover {
    color: #FFFBF0;
    text-decoration: underline;
}

#inner {
    width: 750px;
    overflow: hidden;/*contain floats*/
}

#content {
    width: 480px;
    background: #A6CAF0;
    float: right;
    margin: 15px 15px 0 15px;
    display: inline;/*fix ie6*/
    padding: 6px 0 10px;
    border: 1px solid #004080;
}

ol#tips {
    margin: 10px 0;
    padding: 0 0 0 50px;
	color: #000;
	font-size: 1.25em;
}

#sidebar {
    width: 220px;
    background: #c2d3e8;
    float: left;
    margin: 15px 0 15px 15px;
    display: inline;/*fix ie6*/
    padding: 5px 0 10px;
    border: 1px solid #004080;
}

#footer {
    clear: both;
    height: 35px;
    background: #474c55 url(images/footer.png) repeat-x;
    border-top: 1px solid #000002;
    text-align: center;
    color: #fff;
    font-size: 0.90em;
}

h2, h3 {
    padding: 10px 0px 5px 10px;
}

h3 {
    font-size: 1em;
    text-align: center;
}

p {
    padding: 5px 10px;
}

.book1 {
    float: left;
    margin: 5px 10px 15px 15px;
}

.book2 {
    float: left;
    margin: 5px 10px 15px 15px;
}

.book3 {
    float: left;
    margin: 5px 10px 15px 15px;
}

.book-review {
    margin: 20px 15px 15px 30px;
    width: 650px;
    background: #fff;
}

table {
    border: 1px solid #D7C88A;
    border-collapse: collapse;
	margin: 15px 15px 10px 15px;
    text-align: center;
    font-family: Georgia, "Times New Roman", Times, serif;
}

th, td {
    border:  1px solid #600;
    color: #5a5c5f;
    border-collapse: collapse;
    padding: 4px;
    text-align: left;
    background-color: #ebf0f7;
}

caption {
    background: #fff;
    font-size: 1.25em;
    border: 1px solid #00F;
    padding: 1px;
    border: thin;
    color: #00F;
}

thead th {
    background: #2A00FF;
    color: #fff;
    font-size: 1em;
}

tbody th, td {
    background: #e6eaf0;
}
 

<!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" />

<title>SEO Reference Books</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrap">

<div id="wrapper">

<div id="header">

<h1>SEO Reference Books</h1>

</div><!--end of header -->

<div id="nav">

<ul>
  <li><a href="index.htm">Home</a></li>
  <li><a href="basics.htm">SEO Basics</a></li>
  <li><a href="books.htm">SEO Books</a></li>
  <li><a href="terms.htm">Definitions</a></li>
  <li><a href="search.htm">Search Engines</a></li>
</ul>

</div><!--end of nav -->

<div id="container">

<div class="book-review">
<h2>The Art of SEO</h2>

<a href="http://www.booksamillion.com/product/9780596518868?id=4733724387189"><img class="book1" src="images/book1.png" width="140" height="170" alt="The Art of SEO" /></a>
<p>A well-designed, easy-to-navigate website is useless if no one can find it. If your company is going to succeed in the web economy, optimizing your site for search engine visibility is essential. In this book, four of the most noted experts in the field of search engine optimization (SEO) provide you with proven guidelines and cutting-edge techniques for planning and executing a comprehensive SEO strategy. The authors clearly explain SEO fundamentals, while correcting many common misconceptions. If you are new to SEO, you'll get a complete and thorough SEO education, as well as an array of effective tactics, from basic to advanced. Seasoned practitioners will find this book useful as a complete reference to SEO best practices.</p>
</div><!--end of book 1 -->

<div class="book-review">

<h2>SEO Warrior</h2>

<a href="http://www.booksamillion.com/product/9780596157074?id=4733730277127"><img class="book2" src="images/book2.png" width="140" height="170" alt="SEO Warrior" /></a>
<p>How can you make it easier for people to find your website? And how can   you convert casual visitors into active users? &quot;SEO Warrior&quot; shows you   how it's done through a collection of tried and true techniques, hacks,   and best practices. Learn the nuts and bolts of SEO theory, the   importance of keyword strategy, and how to avoid and remedy search   engine traps. </p>

<p>You'll also learn about search engine marketing (SEM) practices, such as Google AdWords, and how you can use social networking to increase your visibility. Ideal for web developers, savvy marketers, webmasters, and anyone else interested in SEO, this book serves not only as an SEO tutorial, but also as a reference guide for implementing effective SEO techniques</p>

</div><!--end of book 2 -->

<div class="book-review">

<h2>SEO Search Engine Optimization Bible</h2>
<a href="http://www.booksamillion.com/product/9780470175002?id=4733730277127"><img class="book1" src="images/book3.png" width="140" height="170" alt="SEO Bible" /></a>

<p>his in-depth Bible delivers the holy grail of online marketing: how to   influence search engine results to drive online shoppers to specific Web   sites; the process is called search engine optimization (SEO) and it is   a hot topic One-stop resource offers readers what they need to plan and   implement a successful SEO program, including useful tips on finding   the shortest routes to success, strategy suggestions, and sidebars with   more information and additional resources Features interviews with   executives from top search companies, plus appendices on creating   successful listings with Google, MSN, Yahoo , and others Topics include   creating an SEO plan; managing keywords; maximizing pay-per-click   strategies; understanding the role of links and linking; robots,   spiders, and crawlers; maintaining SEO; analyzing success rates; and   much more</p>

</div><!--end of book 3 -->

</div><!--end of container -->

<div id="footer">
<p>Designed by:</p>
</div><!--end of footer -->

</div>

</div>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Search Engine Optimization (SEO)</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<div id="wrap">
<div id="wrapper">
    <h1 id="header">Search Engine Optimization (SEO)</h1>
    <ul id="nav">
        <li><a href="index.htm">Home</a></li>
        <li><a href="basics.htm">SEO Basics</a></li>
        <li><a href="books.htm">SEO Books</a></li>
        <li><a href="terms.htm">Definitions</a></li>
        <li><a href="books.htm">SEO Tips</a></li>
        <li><a href="search.htm">Search Engines</a></li>
    </ul><!--end nav -->
 
    <div id="inner">
        <div id="content">
            <h2>Search Engines Tips</h2>
            <ol id="tips">
                <li>Add titles to your pages</li>
                <li>Link back to yourself</li>
                <li>Create a sitemap</li>
                <li>Search-friendly URLs</li>
                <li>Avoid Flash</li>
                <li>Image descriptions</li>
                <li>Social media distribution</li>
                <li>Content, content and more content</li>
                <li>Link to others</li>
                <li>Keywords, keywords, keywords</li>
            </ol>
        </div><!--end content -->
        <div id="sidebar">
            <h2>What is SEO?</h2>
            <p><strong>Search Engine Optimization (SEO) </strong>is the process of improving the volume or quality of traffic to a web site or a web page (such as a blog) from search engines via "natural" or un-paid ("organic" or "algorithmic") search results as opposed to other forms of search engine marketing (SEM) which may deal with paid inclusion. The theory is that the earlier (or higher) a site appears in the search results list, the more visitors it will receive from the search engine. SEO may target different kinds of search, including image search, local search, video search and industry-specific vertical search engines. This gives a web site web presence</p>
            <p>As an Internet marketing strategy, <strong>SEO</strong>considers how search engines work and what people search for. Optimizing a website primarily involves editing its content and HTML and associated coding to both increase its relevance to specific keywords and to remove barriers to the indexing activities of search engines.</p>
            <p>The acronym "SEO" can refer to "search engine optimizers," a term adopted by an industry of consultants who carry out optimization projects on behalf of clients, and by employees who perform SEO services in-house. Search engine optimizers may offer SEO as a stand-alone service or as a part of a broader marketing campaign. Because effective SEO may require changes to the HTML source code of a site, SEO tactics may be incorporated into web site development and design. The term "search engine friendly" may be used to describe web site designs, menus, content management systems, images, videos, shopping carts, and other elements that have been optimized for the purpose of search engine exposure.</p>
        </div>
    </div><!--end inner -->
 
    <div id="footer">
        <p>Designed by: </p>
    </div><!--end footer -->
 
</div><!--end wrapper -->
</div><!--end wrap -->
 
</body>
</html>

My other pages changed since I copied the new CSS code.
home.htm and books.htm are offset and not centered.
books.htm - the header is not styled anymore
HELP!
Of course their not, you did not sync the html up properly.

Did you read my last post?

Look through the html files carefully in your last post, the last one is correct.

This one is correct


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Search Engine Optimization (SEO)</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<div id="wrap">
<div id="wrapper">
    [B]<h1 id="header">[/B]Search Engine Optimization (SEO)[B]</h1>[/B]
    [B]<ul id="nav">[/B]
        <li><a href="index.htm">Home</a></li>
        <li><a href="basics.htm">SEO Basics</a></li>
        <li><a href="books.htm">SEO Books</a></li>
        <li><a href="terms.htm">Definitions</a></li>
        <li><a href="books.htm">SEO Tips</a></li>
        <li><a href="search.htm">Search Engines</a></li>
    [B]</ul>[/B]<!--end nav -->
 
    [B]<div id="inner">[/B]
        <div id="content">
            <h2>Search Engines Tips</h2>
            <ol id="tips">
                <li>Add titles to your pages</li>
                <li>Link back to yourself</li>
                <li>Create a sitemap</li>
                <li>Search-friendly URLs</li>
                <li>Avoid Flash</li>
                <li>Image descriptions</li>
                <li>Social media distribution</li>
                <li>Content, content and more content</li>
                <li>Link to others</li>
                <li>Keywords, keywords, keywords</li>
            </ol>
        </div><!--end content -->
        <div id="sidebar">
            <h2>What is SEO?</h2>
            <p><strong>Search Engine Optimization (SEO) </strong>is the process of improving the volume or quality of traffic to a web site or a web page (such as a blog) from search engines via "natural" or un-paid ("organic" or "algorithmic") search results as opposed to other forms of search engine marketing (SEM) which may deal with paid inclusion. The theory is that the earlier (or higher) a site appears in the search results list, the more visitors it will receive from the search engine. SEO may target different kinds of search, including image search, local search, video search and industry-specific vertical search engines. This gives a web site web presence</p>
            <p>As an Internet marketing strategy, <strong>SEO</strong>considers how search engines work and what people search for. Optimizing a website primarily involves editing its content and HTML and associated coding to both increase its relevance to specific keywords and to remove barriers to the indexing activities of search engines.</p>
            <p>The acronym "SEO" can refer to "search engine optimizers," a term adopted by an industry of consultants who carry out optimization projects on behalf of clients, and by employees who perform SEO services in-house. Search engine optimizers may offer SEO as a stand-alone service or as a part of a broader marketing campaign. Because effective SEO may require changes to the HTML source code of a site, SEO tactics may be incorporated into web site development and design. The term "search engine friendly" may be used to describe web site designs, menus, content management systems, images, videos, shopping carts, and other elements that have been optimized for the purpose of search engine exposure.</p>
        </div>
    [B]</div><!--end inner -->
[/B] 
    <div id="footer">
        <p>Designed by: </p>
    </div><!--end footer -->
 
</div><!--end wrapper -->
</div><!--end wrap -->
 
</body>
</html>

I told you in my last post that there is a div called #inner and you also keep wrapping divs around that top UL. If you want to change the h1 back to a header div then go ahead but there is no need for that if the h1 is all that there would be in the header. That is why I styled the h1 with the header ID.

In my last post I have the #inner styles in my css -

[B]#inner [/B]{
    width: 750px;
    overflow: hidden;/*contain floats*/
}

Go back and read this whole thread over again, I have explained all the changes I made.

Here are the files that I have been working with in this thread.
I added them to the online folder that I set up for you in your other thread.

http://www.css-lab.com/test/karen/seo-tips.html
http://www.css-lab.com/test/karen/seo-terms.html
http://www.css-lab.com/test/karen/seo.css

Hopefully that will clear things up and pull both pages together sharing the same css. :slight_smile:

My other pages changed since I copied the new CSS code.
home.htm and books.htm are offset and not centered.
books.htm - the header is not styled anymore

I had asked you in post#3 if this was going to be sharing the same css as the pages in your other thread.

Is this page sharing the same css as the page in your AP thread?

In post#4 you replied - No!

No, this is not part of my AP assignment.

The book pages were from your other thread!