...

View Full Version : xhtml and css - w3c validation errors



leah2704
04-19-2011, 12:56 AM
Hi
i was creating this design. but it gives me so many w3s validation errors. could you please please please help???
the design should look like the attached image.

many thanks


HTML CODE:

<!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" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />

<title>Activity 3</title>
</head>



<body>





<!-- something -->
<div id="something">


<h1><a href="#">Logo</a></h1>
</div>
<form>
<input type="text" name="search"/><a href="#">Search</a>|<a href="#"> Log-In </a>
</form>



<!-- end header -->

<p>



<!-- navigation -->
<div id="navigation">
<ul>
<li>What we do</li>
<li>Case studies</li>
<li>Contact us</li>
</ul>
</div>

<!-- end navigation -->





<!-- case -->
<div id="case">
<h2>Sample case study</h2>

<img src="image.gif" alt="image">
<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ull Introduction: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. nonummy arcu.
<p>


<a href="#"> See the full case >> </a>
</div>
<!-- end case -->

<P>



<!-- news -->
<div id="news">
<h4>Latest</h4>
<p>

<ol><li>10 Feb: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ullamcorper congue magna. Fusce aliquet nonummy

<a href="#">More >></a> </li>

<li>10 Feb: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ullamcorper congue magna. Fusce aliquet nonummy

<a href="#"> More >></a></li>
</ol>
</div>
<!-- end news -->



<!-- profile -->
<div id="profile">
<h4>One of us:</h4>
<p>
<dl>
<dt>Name:</dt>
<dd>Horper congue magna.</dd>
<dt>Role:</dt>
<dd>Horper congue magna.</dd>


<dt>Excites me right now:</dt>
<dd>Nullam ullamcorper congue magna. Fusce aliquet nonummy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ullamcorper congue magna. Fusce aliquet nonummy</dd>

<dl>
</div>
<!-- end profile -->



<!-- intro -->
<div id="intro">
<h3>Welcome blurb</h3>
<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<p>

<a href="#">More about What we do >></a>

</div>
<!-- end intro -->




<!-- twitter -->
<div id="twitter">
<h4>Twitter feed</h4>
<ol>

<li><img src="image.gif" alt="image">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>

<li><img src="image.gif" alt="image">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </li>

<li><img src="image.gif" alt="image">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </li>

</ol>
</div>
<!-- end twitter -->



<!-- footer -->
<div id="footer">
<ul>
<li><a href="#">What we do</a></li>
<li><a href="#">Case studies</a></li>
<li><a href="#">Contact us </a></li>
</ul>

<ul>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Terms & conditions</a></li>
</ul>
<p>&copy;2010 <a href="mailto:k0903881@kingston.ac.uk">k0903881@kingston.ac.uk</a>, All Rights Reserved</p>
</div>
<!-- end footer -->


</body>
</html>



CSS Code:




<!--
#something {
background-color: #999999;
}


#navigation {
background-color: #B3B3B3;
}


#case {
background-color: #E6E6E6;
}


#news{
background-color: #E6E6E6;
}


#profile{
background-color: #E6E6E6;
}


#intro{
background-color: #CCCCCC;
}


#twitter{
background-color: #CCCCCC;
}


#twitter img {
width:30px; height:24px;
}


#footer{
background-color: #B3B3B3;
}

-->
</style>

oesxyl
04-19-2011, 01:19 AM
Hi
i was creating this design. but it gives me so many w3s validation errors. could you please please please help???
the design should look like the attached image.

many thanks


HTML CODE:


<!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" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />

<title>Activity 3</title>
</head>



<body>





<!-- something -->
<div id="something">


<h1><a href="#">Logo</a></h1>
</div>
<form>
<input type="text" name="search"/><a href="#">Search</a>|<a href="#"> Log-In </a>
</form>



<!-- end header -->

<p>



<!-- navigation -->
<div id="navigation">
<ul>
<li>What we do</li>
<li>Case studies</li>
<li>Contact us</li>
</ul>
</div>

<!-- end navigation -->





<!-- case -->
<div id="case">
<h2>Sample case study</h2>

<img src="image.gif" alt="image">
<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ull Introduction: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. nonummy arcu.
<p>


<a href="#"> See the full case >> </a>
</div>
<!-- end case -->

<P>



<!-- news -->
<div id="news">
<h4>Latest</h4>
<p>

<ol><li>10 Feb: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ullamcorper congue magna. Fusce aliquet nonummy

<a href="#">More >></a> </li>

<li>10 Feb: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ullamcorper congue magna. Fusce aliquet nonummy

<a href="#"> More >></a></li>
</ol>
</div>
<!-- end news -->



<!-- profile -->
<div id="profile">
<h4>One of us:</h4>
<p>
<dl>
<dt>Name:</dt>
<dd>Horper congue magna.</dd>
<dt>Role:</dt>
<dd>Horper congue magna.</dd>


<dt>Excites me right now:</dt>
<dd>Nullam ullamcorper congue magna. Fusce aliquet nonummy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ullamcorper congue magna. Fusce aliquet nonummy</dd>

<dl>
</div>
<!-- end profile -->



<!-- intro -->
<div id="intro">
<h3>Welcome blurb</h3>
<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<p>

<a href="#">More about What we do >></a>

</div>
<!-- end intro -->




<!-- twitter -->
<div id="twitter">
<h4>Twitter feed</h4>
<ol>

<li><img src="image.gif" alt="image">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>

<li><img src="image.gif" alt="image">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </li>

<li><img src="image.gif" alt="image">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </li>

</ol>
</div>
<!-- end twitter -->



<!-- footer -->
<div id="footer">
<ul>
<li><a href="#">What we do</a></li>
<li><a href="#">Case studies</a></li>
<li><a href="#">Contact us </a></li>
</ul>

<ul>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Terms & conditions</a></li>
</ul>
<p>&copy;2010 <a href="mailto:k0903881@kingston.ac.uk">k0903881@kingston.ac.uk</a>, All Rights Reserved</p>
</div>
<!-- end footer -->


</body>
</html>



CSS Code:





<!--
#something {
background-color: #999999;
}


#navigation {
background-color: #B3B3B3;
}


#case {
background-color: #E6E6E6;
}


#news{
background-color: #E6E6E6;
}


#profile{
background-color: #E6E6E6;
}


#intro{
background-color: #CCCCCC;
}


#twitter{
background-color: #CCCCCC;
}


#twitter img {
width:30px; height:24px;
}


#footer{
background-color: #B3B3B3;
}

-->
</style>


use [ code] and [ /code] tags, without spaces, please.

i used tidy to cleanup the code so probably will not look as you want:


<!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 name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>Activity 3</title>
</head>
<body>
<!-- something -->
<div id="something">
<h1><a href="#">Logo</a></h1>
</div>
<form action=""><input type="text" name="search" /><a href="#">Search</a>| <a href="#">Log-In</a></form>
<!-- end header -->
<p><!-- navigation --></p>
<div id="navigation">
<ul>
<li>What we do</li>
<li>Case studies</li>
<li>Contact us</li>
</ul>
</div>
<!-- end navigation -->
<!-- case -->
<div id="case">
<h2>Sample case study</h2>
<img src="image.gif" alt="image" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ull Introduction: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. nonummy arcu.</p>
<p><a href="#">See the full case &gt;&gt;</a></p>
</div>
<!-- end case -->
<p><!-- news --></p>
<div id="news">
<h4>Latest</h4>
<ol>
<li>10 Feb: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ullamcorper congue magna. Fusce aliquet nonummy <a href="#">More &gt;&gt;</a></li>
<li>10 Feb: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ullamcorper congue magna. Fusce aliquet nonummy <a href="#">More &gt;&gt;</a></li>
</ol>
</div>
<!-- end news -->
<!-- profile -->
<div id="profile">
<h4>One of us:</h4>
<dl>
<dt>Name:</dt>
<dd>Horper congue magna.</dd>
<dt>Role:</dt>
<dd>Horper congue magna.</dd>
<dt>Excites me right now:</dt>
<dd>Nullam ullamcorper congue magna. Fusce aliquet nonummy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ullamcorper congue magna. Fusce aliquet nonummy</dd>
</dl>
</div>
<!-- end profile -->
<!-- intro -->
<div id="intro">
<h3>Welcome blurb</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p><a href="#">More about What we do &gt;&gt;</a></p>
</div>
<!-- end intro -->
<!-- twitter -->
<div id="twitter">
<h4>Twitter feed</h4>
<ol>
<li><img src="image.gif" alt="image" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li><img src="image.gif" alt="image" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li><img src="image.gif" alt="image" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ol>
</div>
<!-- end twitter -->
<!-- footer -->
<div id="footer">
<ul>
<li><a href="#">What we do</a></li>
<li><a href="#">Case studies</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<ul>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Terms &amp; conditions</a></li>
</ul>
<p>2010 <a href="mailto:k0903881@kingston.ac.uk">k0903881@kingston.ac.uk</a>, All Rights Reserved</p>
</div>
<!-- end footer -->
</body>
</html>


best regards

_Aerospace_Eng_
04-19-2011, 02:09 AM
Since this seems like an assignment I will tell you that you seem to not close some elements. I will leave it to you to find out which ones.

leah2704
04-19-2011, 12:13 PM
thanks guys



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum