Hi,I am coding a website using HTML5 using dreamweaver, but i have validate one of my page in w3c validater but i got an error that i don’t know how to fix it: Here is the errors apper: & it hightlighted below in html…as well as is css is below also… ?thank you very much.
Line 40, Column 27: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier.
<div id=“cssmenu” class"thumbnail">
Line 40, Column 37: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier.
<div id=“cssmenu” class"thumbnail">
Line 40, Column 38: Attribute class"thumbnail" is not serializable as XML 1.0.
<div id=“cssmenu” class"thumbnail">
Line 40, Column 38: Attribute class"thumbnail" not allowed on element div at this point.
<div id=“cssmenu” class"thumbnail">
Attributes for element div:
Global attributes
Here is html5 code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
table{
width:600px;
border:0px;
}
#countries-of-tour{
text-align:center;
width:155px;
}
#time-and-places{
width:101px;
text-align:center;
}
#speacial-trip{
width:166px;
text-align:center;
}
#childern-program{
width:282;
text-align:center;
}
</style>
</head>
<body>
<div class="container">
<div id="header">
<img src="images/logo.gif" alt="logo" width="178" height="150" id="logo">
[COLOR="#cccccc"] <div id="cssmenu" class"thumbnail">[/COLOR]
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>About</span></a>
<ul>
<li><a href="About.html"><span>About Us</span></a></li>
<li class="last"><a href="contactuss.html"><span>Contact Us</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Tea</span></a>
<ul>
<li><a href="History.html"><span>History</span></a></li>
<li><a href="ManifactureProcesss.html"><span>Manifacture Process</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Gallery</span></a>
<ul>
<li><a href="TourToChina.html"><span>Trip To China</span></a></li>
<li><a href="#"><span>Trip To Ceylon</span></a></li>
<li class="last"><a href="TourToJapan.html"><span>Trip To Japan</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Trip Time Line</span></a></li>
</ul>
</div>
</div>
<div class="leftnav">
<p> The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, create your own using a Spry menu, a menu widget from Adobe's Exchange or a variety of other javascript or CSS solutions.</p>
<p>If you would like the navigation along the top, simply move the ul to the top of the page and recreate the styling.</p>
</div>
<div class="content">
<blockquote>
<h1>Current<br />
World Tea Tours
</h1>
</blockquote>
<h2> </h2>
<table>
<tr>
<td id="countries-of-tour"><h3>Country of Tour</h3></td>
<td id="time-and-places"><h3>Time&places</h3></td>
<td id="speacial-trip"><h3>special Trip of the country</h3></td>
<td id="childern-program"><h3>*children program</h3></td>
</tr>
<tr>
<td align="center"></td>
<td>May 2014<br />
- 1stTour: Beijing*<br />
- 2ndTour: Hainan Island</td>
<td>July, 2013<br />
-Kunming provice(south west of china)<br /></td>
<td>The tour include special program for childern between 11-16years old( Chinese Tea cermony-Great wall-traditional chinese brush writing).</td>
</tr>
<tr>
<td align="center"></td>
<td>January 2015<br />
-1stTour: coloumbo<br />
- 2ndTour:candy</td>
<td><p>October 10-13, 2014</p>
<p>-Dehiwala-Mount Lavinia & Nooraliya</p></td>
<td>childern program in No Available</td>
</tr>
<tr>
<td></td>
<td><p>-June, 2013<br />
-1stTour: Tokyo<br />
- 2nd Tour:Osaka</p>
<p>special offer </p></td>
<td><p>September 2013</p>
<p>-Kurashaki</p>
<p>**speecial dicount for families member than 4 persons.</p></td>
<td>The tour include special program for childern above 16 years old(short course on japanese languange-lean some dishes from japanese cusien-short course of japanese traditional instruments).</td>
</tr>
</table>
<p> </p>
</div>
<div id="footer">
<p>This footer contains the declaration position:relative; to give Internet Explorer 6 hasLayout for the footer and cause it to clear correctly. If you're not required to support IE6, you may remove it.</p>
<address>
Address Content
</address>
</div>
</div>
</body>
</html>
Css code
@charset "UTF-8";
/* CSS Document */
#header {
background: #ADB96E;
align: left;
float:left;
padding:10px;
display:inline-block;
border: 0px solid #006600;
width:800px;
}
#cssmenu {
align: right;
float:right;
display: inline-block;
border: 1px solid #006600;
background: #006600;
}
.menu
{
float:left;
width:80px;
height:90px;
margin:20px;
}
#cssmenu > ul {
padding: 1px 0;
margin: 0px;
list-style: none;
width: 100%;
height: 21px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
font: normal 8pt verdana, arial, helvetica;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
display: block;
float: left;
position: relative;
width: 120px;
}
#cssmenu > ul li a:link,
#cssmenu > ul li a:visited {
padding: 4px 0;
display: block;
text-align: center;
text-decoration: none;
background: #006600;
color: #ffffff;
width: 120px;
height: 13px;
}
#cssmenu > ul li:hover a,
#cssmenu > ul li a:hover,
#cssmenu > ul li a:active {
padding: 4px 0;
display: block;
text-align: center;
text-decoration: none;
background: #339933;
color: #ffffff;
width: 120px;
height: 13px;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#cssmenu > ul li ul {
margin: 0;
padding: 1px 1px 0;
list-style: none;
display: none;
background: #ffffff;
width: 120px;
position: absolute;
top: 21px;
left: -1px;
border: 1px solid #006600;
border-top: none;
}
#cssmenu > ul li:hover ul {
display: block;
}
#cssmenu > ul li ul li {
clear: left;
width: 120px;
}
#cssmenu > ul li ul li a:link,
#cssmenu > ul li ul li a:visited {
clear: left;
background: #006600;
padding: 4px 0;
width: 120px;
border: none;
border-bottom: 1px solid #ffffff;
position: relative;
z-index: 1000;
}
#cssmenu > ul li ul li:hover a,
#cssmenu > ul li ul li a:active,
#cssmenu > ul li ul li a:hover {
clear: left;
background: #339933;
padding: 4px 0;
width: 120px;
border: none;
border-bottom: 1px solid #ffffff;
position: relative;
z-index: 1000;
}
#cssmenu > ul li ul li ul.navigation-3 {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: 120px;
top: -2px;
padding: 1px 1px 0 1px;
border: 1px solid #006600;
border-left: 1px solid #006600;
background: #ffffff;
z-index: 900;
}
#cssmenu > ul li ul li:hover ul.navigation-3 {
display: block;
}
#cssmenu > ul li ul li ul.navigation-3 li a:link,
#cssmenu > ul li ul li ul.navigation-3 li a:visited {
background: #006600;
}
#cssmenu > ul li ul li ul.navigation-3 li:hover a,
#cssmenu > ul li ul li ul.navigation-3 li a:hover,
#cssmenu > ul li ul li ul.navigation-3 li a:active {
background: #339933;
}
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #78c679;
margin: 0;
padding: 0;
color: #000;
}
.container {
width: 820px;
background:#addd8e;
margin: 0 auto;
}
#logo{
width:178px;
height:150px;
float:left;
}
.leftnav {
float: left;
width: 180px;
background: #EADCAE;
height:800px;
padding:5px;
}
.content {
padding: 10px;
width: 610px;
float: left;
background:#addd8e;
}
#footer {
padding: 10px 0;
background: #CCC49F;
position: relative;
clear: both;
}