Is there something wrong with this HTML codes?

16 replies
  • WEB DESIGN
  • |
Hi,

Please help me.

This HTML codes works fine. It works just fine especially the positioning.

But, is there any hidden defects here?

Here is the HTML:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>CD Supreme</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>

<body>
<div id="wrapper">
<div id="header">
<h1 style="height: 45px; font-size: 30px; color: green;">CD Supreme Cleaning Services</h1>
<div id="nav">
<a href="index.html#"><img src="images/home_sel.jpg" width="87" height="41" alt="M1"></a>
<a href="aboutus.html"><img src="images/m2.jpg" width="87" height="41" alt="M2"></a>
<a href="#"><img src="images/m3.jpg" width="83" height="41" alt="M3"></a>
<a href="#"><img src="images/m4.jpg" width="72" height="41" alt="M4"></a>
<a href="#"><img src="images/m5.jpg" width="84" height="41" alt="M5"></a>
<a href="#"><img src="images/m8.jpg" width="89" height="41" alt="M8"></a>
</div>
</div>

<div id="headline">
<div id="photo"><div>
<img src="images/pic_1.jpg" width="618" height="254" alt="Pic 1">
</div></div>
<div id="search-news">
<h2 class="downcast">Services</h2>
<div id="news-box">
<h3><a href="#">Commercial Cleaning</a></h3>
<p>Professional in all aspects of commercial cleaning. In addition, we provide essentials such
as bin liners and bathroom products.</p>
<p class="more"><a href="#">more</a></p>

<h3><a href="#">Carpet and Upholstery</a></h3>
<p>We are fully qualified for carpet and upholstery cleaning.</p>
<p class="more"><a href="#">more</a></p>

<h3><a href="#">Internal hard surface</a></h3>
<p>We are fully qualified for carpet and upholstery cleaning.</p>
<p class="more"><a href="#">more</a></p>

<h3><a href="#">Window Cleaning</a></h3>
<p>We have a specialist windows cleaners on our team to ensure quality of work.</p>
<p class="more"><a href="#">more</a></p>

<h3><a href="#">Non-chemical sanitising</a></h3>
<p>We have a commercial 9 BAR (175C) steamer for any professionally non chemical
sanitising required. It can be used on a multitude of surfaces - from ovens to floors to windows</p>
<p class="more"><a href="#">more</a></p>

<p style="text-align:center;margin-top:50px;"><a href="#">Contact us for more info.</a></p>
</div>
</div>

<div class="clear"></div>
</div>
<div id="body">
<div id="body-left">
<h1 style="font-size: 30px;">HOW WE'RE DIFFERENT</h1>
<p>

<h1 style="font-size: 20px;margin-top:20px;">INITIAL CLEANING CONSULTATION</h1>
A member of the C - D staff will visit your worksite where we make detailed notes of your needs and
budget. From there, we will create a custom cleaning service plan specifically for your cleaning project
and provide a detailed quote suited for your budget.<br/> <br/>


<h1 style="font-size: 20px;">COMMERCIAL CLEANING CONTRACT<h1>
After we are sure that our custom cleaning plan fully meets your expectations, our team will draw up a
contract detailing the specifics of what has been agreed upon. This contract, to be signed both by you
and our cleaner, will ensure that both parties know what to expect so that all expectations are met. <br/><br/>


<h1 style="font-size: 20px;">PRE-SCREENED OFFICE CLEANING TEAMS</h1>
Once we have allocated a cleaning team to fulfill your cleaning needs, we take the time to make sure
they have the skills and expertise to meet or exceed our cleaning standards. In addition, all staff that
work alongside us have a police check. Should you require a copy of these, please let us know.
<br/><br/>

<h1 style="font-size: 20px;">CLEANING TEAM ORIENTATION</h1>
We value the specific nature of your custom cleaning plan. For this reason, we take the time to
introduce our cleaner to your site, making sure they are aware of all elements of the contract. In
addition, we alert them to any specific building procedures they may need to follow including enter
and exit procedures, alarms and emergency exits.<br/><br/>


<h1 style="font-size: 20px;">SAFETY PROCEDURES</h1>
Using eco-friendly, green cleaning products is important to us and our team. We make sure your
cleaning team has these necessary supplies as well as equipment that is properly tagged, tested and
maintained.<br/><br/>


<h1 style="font-size: 20px;">BUILDING A BUSINESS RELATIONSHIP</h1>
Because our cleaning teams are not simply assigned to your contract, but rather they are given the
opportunity to build an ongoing relationship with your organisation and have the desire to retain you as
a client. For this reason, they are even more committed to providing you with a top of the line cleaning
service.<br/><br/>


<h1 style="font-size: 20px;">CONTINUAL SUPPORT</h1>
If you have an ongoing contract for repeated service with a cleaning team, C - D Supreme will
periodically make site visits to inspect the cleaning standards and ensure that your expectations are
being met. Documentation of these visits helps to ensure that matters are handled in a timely manner.<br/><br/>


<h1 style="font-size: 20px;">INDIVIDUAL CLEANING SERVICES</h1>
If you are requiring a one time or immediate cleaning service, we have a team of cleaners that can
clean your site within a short notice.
</p>
</div>
<div id="body-right">

</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<p>&copy; 2013 all rights reserved.</p>
</div>

</body>
</html>



Here is the CSS:

html, body, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: 0;
}
a {
font-weight: bold;
text-decoration: none;
}
a:hover img{
text-decoration: underline;
opacity:0.4;
filter:alpha(opacity=-40);
}
.more {
text-align: right;
}
.left {
float: left;
}
.clear {
clear: both;
}

body, h1, h2, h3, form {
font: 10px tahoma, arial, sans-serif;
margin: 0;
padding: 0;
color: #5C5C5C;
}

body {
background: url(images/header_bg.jpg) repeat-x;
text-align: center;
}
#wrapper {
text-align: left;
margin: auto;
width: 774px;
}


#header {
height: 203px;
position: absolute;
}
#header h1 {
margin-top: 44px;

}
#header h1 img {
display: block;
}
#nav{
margin-top: 48px;
font-size: 20px;
text-decoration: underline;
}
#nav img {
float: left;
}

#headline {
padding-top: 205px;
}

#photo {
float: left;
width: 624px;
}
#photo div {
border: 1px solid #D8D8D8;
padding: 2px;
}
#servicescontent{
text-align:justify;
width: 600px;
padding: 2px;
float: left;
font-size: 16px;
}
#photo img {
display: block;
}

#search-news {
float: right;
width: 140px;

}
#search-news #services{
float: right;
width: 140px;
background: #00ff54;
position: relative;
top: 100px;
text-align:center;
}
#search-news h1{
font-size:16px;
}
#search-news div {
padding: 3px 0;
margin: 0;
}
#search-news #q {
width: 140px;
border: 1px solid #859D31;
}
#search-news .downcast {
background: #00ff54;
border-top: 1px solid #CFD0D0;
padding: 10px 10px 4px 4px;
margin: 10px 0 0 0;
font-size:16px;
}
#search-news h3 {
background: url(images/bullet_letter.gif) no-repeat;
padding-left: 15px;
font-weight: bold;
margin: 1em 0 0.4em 0;
}
#search-news p {
padding-left: 15px;
padding-right: 2px;
margin: 0.1em 0;
}

a {
font-weight: bold;
color: #5C5C5C;
}
#bodyaboutus {
padding-top: 2em;
text-align: justify;}
#body {
position:relative;
top: -300px;
padding-top: 2em;
text-align: justify;
}

#body-left {
float: left;
width: 620px;

}
#body-right {
float: right;
width: 330px;
}

#body-left ul.plussbullets {
margin-top: 45px;
margin-left: 120px;
padding: 0;
font-weight: bold;
}
#body-left ul.plussbullets li {
background: top left url(images/bullet_plus.gif) no-repeat;
margin: 0 0 10px 0;
padding: 0 0 0 25px;
}

#body h2, #body p {
margin: 0.3em 0;
}

#body-right p {
margin-right: 2em;
}

#body a.green {
color: #9AAB68;
font-weight: normal;
text-decoration: underline;
}

#gallery img {
float: left;
padding-left:20px;
}

#footer {
color: #FFFFFF;
background: #42453D url(images/footer_bg.gif) repeat-x;
padding: 6px 0 5px 0;
margin-top: 2em;
font-weight: bold;
}
#footer p {
margin: 0;
padding: 0;
}




Thanks in advance.
#codes #html #wrong
  • {{ DiscussionBoard.errors[8136990].message }}
    • Profile picture of the author Jeff Harper
      To follow up.

      Do I follow the HTML standards?

      BEcause on the css part, I use "position:relative; top:-100px;"

      I use -100 for top just to position. But commonly I don't notice that on some of the websites I have visited.
      Signature

      Please do not promote affiliate offers in your signature

      {{ DiscussionBoard.errors[8137015].message }}
      • Profile picture of the author Blakos
        Originally Posted by Jeff Harper View Post

        Do I follow the HTML standards?
        To answer you bluntly. No. You do not follow up to date HTML markup standards. As far as I can see you are using XHTML, the latest standard is now HTML5.
        {{ DiscussionBoard.errors[8137699].message }}
        • Profile picture of the author TravisO
          Originally Posted by Blake Michelutti View Post

          To answer you bluntly. No. You do not follow up to date HTML markup standards. As far as I can see you are using XHTML, the latest standard is now HTML5.
          Thanks. Can you advise more?
          I was used to type using that HTML codes. So far I don't have idea on HTML5.
          {{ DiscussionBoard.errors[8137790].message }}
  • Profile picture of the author Edge360
    This is slightly outdated. First of all you want to use html5 (<!DOCTYPE html>) if you want to abide to the web standards.

    Secondly you are using inline styles on your heading tags. Use an external stylesheet and include all your styles in there.
    Signature
    {{ DiscussionBoard.errors[8137473].message }}
  • Profile picture of the author Michael71
    Copy your HTML and paste it here: The W3C Markup Validation Service

    Click check and watch the results - 18 Errors, 1 warning(s)
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8137578].message }}
  • {{ DiscussionBoard.errors[8137692].message }}
    • Profile picture of the author TravisO
      Originally Posted by Patrick View Post

      Actually, I was new with this thing.
      Will also read it.
      {{ DiscussionBoard.errors[8137795].message }}
  • Profile picture of the author Blakos
    HTML5 is the latest version of HTML, meaning it is the latest standard. My advice is to learn it from who develops it: HTML5 Introduction
    {{ DiscussionBoard.errors[8137940].message }}
    • Profile picture of the author Michael71
      Blake my friend,

      I think what he meant if his code is correct.

      Not if he uses the latest "technology".

      w3schools.com is NOT the "developer" of any HTML or CSS.

      This is the correct link: http://www.w3.org/TR/2011/WD-html5-20110525/

      Originally Posted by Blake Michelutti View Post

      HTML5 is the latest version of HTML, meaning it is the latest standard. My advice is to learn it from who develops it: HTML5 Introduction
      Signature

      HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
      ---
      Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

      {{ DiscussionBoard.errors[8137959].message }}
  • Profile picture of the author Blakos
    If you read, he asks, very clearly "Do I follow the HTML standards?" and I answered him appropriately.

    EDIT:

    W3C* is part developers of HTML5 with WHATWG & developed HTML 4.0*, they also "develop" w3schools...xD

    EDIT2: Typos fixed above. Do your research.
    {{ DiscussionBoard.errors[8137978].message }}
    • Profile picture of the author Michael71
      No, they never developed w3schools.

      Read more here: W3Fools

      Originally Posted by Blake Michelutti View Post

      If you read, he asks, very clearly "Do I follow the HTML standards?" and I answered him appropriately.

      EDIT:

      W3C* is, they also "develop" w3schools...xD
      Signature

      HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
      ---
      Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

      {{ DiscussionBoard.errors[8137986].message }}
      • Profile picture of the author Blakos
        Originally Posted by Michael71 View Post

        No, they never developed w3schools.

        Read more here: W3Fools
        I may be wrong about W3Schools, but I am not wrong about "who" develops HTML5.
        {{ DiscussionBoard.errors[8137995].message }}
  • Profile picture of the author ClicProject
    You have multiple h1s on your page, you should have only one.

    Also, what is with all the inline styles? It is generally considered best practice to keep all your styles in a seperate style sheet, it makes maintaining the page easier.
    {{ DiscussionBoard.errors[8139220].message }}

Trending Topics