I’m building a site from scratch and I really want to make this thing W3C compliant. So I’m starting bare-bones and adding in one element at a time and testing W3c validation as I go.
So far I got all my div tags laid out the way I want them. This initial design is validating W3C and is my starting point.
I’ll paste the initial validated code for reference, also an actual link to the site for reference too
http://www.divineenergysource.com/W3C-1-clean-passed.php (if links gets taken down PM me for links).
<?php require_once("wp/wp-blog-header.php"); ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>w3c?</title>
<?php
// Include WordPress
define('WP_USE_THEMES', false);
require('wp/wp-load.php');
query_posts('showposts=4');
?>
<link rel="stylesheet" href="css/w3c.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">Logo</div><!--close header div-->
<div id="nav"> Menu
<div id="menu">
<ul>
<li class="home"><a href="index.php" title="Home"></a></li>
<li class="about"><a href="comingsoon.php" title="About"></a></li>
<li class="chat"><a href="comingsoon.php" title="Live Broadcast"></a></li>
<li class="forum"><a href="comingsoon.php" title="Forum"></a></li>
<li class="guestbook"><a href="comingsoon.php" title="Schedule"></a></li>
<li class="blog"><a href="comingsoon.php" title="Blog"></a></li>
<li class="links"><a href="comingsoon.php/" title="Store"></a></li>
<li class="contact"><a href="comingsoon.php" title="Contact Us"></a></li>
</ul>
<div id="search_form">
<div class="headersearchcontainleft"></div>
<div class="headersearchcontainright"></div>
</div><!--close search form-->
</div><!-- close menu -->
</div><!--close nav-->
<div id="center_content1_container">
<div id="left_column"> Left Sidebar1
<div id="recent_blog_post_title"></div><!--close recent_blog_post_title-->
<div id="box_for_WP">
<div id="wp_recent_blogpost_text"><span class="class1">
</span></div><!--close wp_recent_blogpost_text-->
</div><!--close box_for_WP-->
</div><!-- close left column-->
<div id="center_column">
<div id="youtube">Center Content1</div><!--close youtube div-->
<div id="HS_scroll_pics2">
<div class="sc_menu2">Featured</div><!--close sc menu2 div-->
</div><!--close HS scroll pics 2 div-->
</div><!--close center column div-->
<div id="right_column">Right Sidebar1</div><!--close right column div-->
</div><!-- close center content1 container-->
<div id="center_content2_container">
<div id="money_post">Middle Bar Misc</div><!--close money post-->
</div><!--close center_content2_container div-->
<div id="center_content3_container">
<div id="left_column2_container">
<div id="top_left">Lower Left sidebar2
<div id="box2_for_WP">
<div id="wp_recent_blogpost2_text"><span class="class1"></span></div><!--close wp_recent_blogpost_text-->
</div><!--close box_for_WP-->
</div><!-- close top left -->
<div id="bottom_left">Misc ads lower right</div><!-- close bottom left-->
</div><!--close left column2_container-->
<div id="center_column_videowall">
<div id="videowall_box">Lower Content2
</div><!--close video wall box-->
</div><!--close center column videowall div-->
<div id="right_column2_container">
<div id="top_right">Lower Right sidebar2</div><!-- close top right-->
<div id="bottom_right">misc ads lower right</div><!-- close bottom right-->
</div><!--close right column2 container div-->
</div><!--close center_content3_container div-->
<div id="footer"> Footer
<div id="footer_nav"><span class="class1"></span> </div><!--close footer nav-->
<div id="terms_of_use_etc"><span class="class3"></span></div><!-- close terms of use div-->
<div id="copyright">©test w3c</div>
</div><!-- close footer-->
</div><!--close wrapper div-->
</body>
</html>
So with that out the way - now, I’m adding my elements to my foundation and I already got an error / W3C issue that I have no idea how to fix.
Little bit of detail on the error; I’m going to be pulling excerpts of WordPress post from various specific categories. It took me awhile to figure out how to do this but eventually I found this page
http://codex.wordpress.org/The_Loop (if links gets taken down PM me for links).
You would think WordPress guys would post code that validates out problems but for some reason it’s giving me W3C errors???
Here is the code to the page with the WordPress added and here is a link to the site for reference
http://www.divineenergysource.com/W3C-2-issue-added-wordpress-2nd-loop.php
<?php require_once("wp/wp-blog-header.php"); ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>w3c?</title>
<?php
// Include WordPress
define('WP_USE_THEMES', false);
require('wp/wp-load.php');
query_posts('showposts=4');
?>
<link rel="stylesheet" href="css/w3c.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">Logo</div><!--close header div-->
<div id="nav"> Menu
<div id="menu">
<ul>
<li class="home"><a href="index.php" title="Home"></a></li>
<li class="about"><a href="comingsoon.php" title="About"></a></li>
<li class="chat"><a href="comingsoon.php" title="Live Broadcast"></a></li>
<li class="forum"><a href="comingsoon.php" title="Forum"></a></li>
<li class="guestbook"><a href="comingsoon.php" title="Schedule"></a></li>
<li class="blog"><a href="comingsoon.php" title="Blog"></a></li>
<li class="links"><a href="comingsoon.php/" title="Store"></a></li>
<li class="contact"><a href="comingsoon.php" title="Contact Us"></a></li>
</ul>
<div id="search_form">
<div class="headersearchcontainleft"></div>
<div class="headersearchcontainright"></div>
</div><!--close search form-->
</div><!-- close menu -->
</div><!--close nav-->
<div id="center_content1_container">
<div id="left_column"> Left Sidebar1
<div id="recent_blog_post_title"></div><!--close recent_blog_post_title-->
<div id="box_for_WP">
<div id="wp_recent_blogpost_text"><span class="class1">
<!-- Start the Loop. -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- Test if the current post is in category 3. -->
<!-- If it is, the div box is given the CSS class "post-cat-three". -->
<!-- Otherwise, the div box is given the CSS class "post". -->
<?php if ( in_category('3') ) { ?>
<div class="post-cat-three">
<?php } else { ?>
<div class="post">
<?php } ?>
<!-- Display the Title as a link to the Post's permalink. -->
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->
<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>
<!-- Display the Post's content in a div box. -->
<div class="entry">
<?php the_content(); ?>
</div>
<!-- Display a comma separated list of the Post's Categories. -->
<p class="postmetadata">Posted in <?php the_category(', '); ?></p>
</div> <!-- closes the first div box -->
<!-- Stop The Loop (but note the "else:" - see next line). -->
<?php endwhile; else: ?>
<!-- The very first "if" tested to see if there were any Posts to -->
<!-- display. This "else" part tells what do if there weren't any. -->
<p>Sorry, no posts matched your criteria.</p>
<!-- REALLY stop The Loop. -->
<?php endif; ?>
</span></div><!--close wp_recent_blogpost_text-->
</div><!--close box_for_WP-->
</div><!-- close left column-->
<div id="center_column">
<div id="youtube">Center Content1</div><!--close youtube div-->
<div id="HS_scroll_pics2">
<div class="sc_menu2">Featured</div><!--close sc menu2 div-->
</div><!--close HS scroll pics 2 div-->
</div><!--close center column div-->
<div id="right_column">Right Sidebar1</div><!--close right column div-->
</div><!-- close center content1 container-->
<div id="center_content2_container">
<div id="money_post">Middle Bar Misc</div><!--close money post-->
</div><!--close center_content2_container div-->
<div id="center_content3_container">
<div id="left_column2_container">
<div id="top_left">Lower Left sidebar2
<div id="box2_for_WP">
<div id="wp_recent_blogpost2_text"><span class="class1"></span></div><!--close wp_recent_blogpost_text-->
</div><!--close box_for_WP-->
</div><!-- close top left -->
<div id="bottom_left">Misc ads lower right</div><!-- close bottom left-->
</div><!--close left column2_container-->
<div id="center_column_videowall">
<div id="videowall_box">Lower Content2
</div><!--close video wall box-->
</div><!--close center column videowall div-->
<div id="right_column2_container">
<div id="top_right">Lower Right sidebar2</div><!-- close top right-->
<div id="bottom_right">misc ads lower right</div><!-- close bottom right-->
</div><!--close right column2 container div-->
</div><!--close center_content3_container div-->
<div id="footer"> Footer
<div id="footer_nav"><span class="class1"></span> </div><!--close footer nav-->
<div id="terms_of_use_etc"><span class="class3"></span></div><!-- close terms of use div-->
<div id="copyright">©test w3c</div>
</div><!-- close footer-->
</div><!--close wrapper div-->
</body>
</html>
I’m hoping you guys can help me wrap my head around fixing some of these W3C errors. Any help or feedback is greatly appreciated.
Thanks