Is there something wrong with this HTML codes?
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>© 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.
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>© 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.
HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu
HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu
HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu