Forum Moderators: open
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="description" content="National Lottery players raise Ł28 million a week for Good Causes. See how that funding has changed the UK for the better, and find out more about The National Lottery Awards." />
<meta name="keywords" content="Lottery, National Lottery Awards, Lottery funding, Good Causes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>The National Lottery</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link href="css/style.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="container">
<header id="masthead">
<div id="logo"><a href="#"><img src="images/logo.jpg" alt="The National Lottery logo" /></a></div>
<div id="headline"><a href="#"><img src="images/logoGC.gif" alt="The National Lottery headline" /></a></div>
<div class="nav clear">
<nav id="nav" class="clear">
<ul>
<li><a href="home">Home</a></li>
<li><a href="lottery-stories">Lottery stories</a></li>
<li><a href="media-centre">Media centre</a></li>
<li><a href="about-lottery-funding">About Lottery funding</a></li>
<li><a href="contact-us">Contact us</a></li>
<li><a href="cymru">Cymru</a></li>
</ul>
</nav>
<form id="searchbox" action="">
<input type="submit" value="Go" class="right"/>
<input type="search" name="search" class="right search">
<p class="right">Search </p>
</form>
</div>
</header>
<img src="images/header.jpg" alt=""/>
<section id="content">
<div class="sectionPhoto"></div>
<h1>The National Lottery Awards - winners announced</h1>
<p>Seven inspirational Lottery-funded projects have won the top honours at the finals of the 2007 National Lottery Awards.</p>
<p class="darkRed">Find out more about "The National Lottery Awards - winners announced"</p>
<div class="clear"></div>
</section><!-- End #content -->
<footer id="siteFooter">
<ul>
<li><a href="#">Email this page</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Advanced search</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Terms of use</a></li>
<li><a href="#">Site map</a></li>
</ul>
</footer>
</div><!-- End #container -->
</body>
<!-- Load jQuery & jQueryUI from CDN. If CDN is not available, load from local copy -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</html>
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
aside,footer,header,menu,nav,section {
display: block;
}
body {
line-height: 1;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #5090cd;
}
#headline {
background: #fff;
float: left;
}
#logo {
background: #fff;
float: right;
}
a {
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
margin: 0;
padding: 0;
}
input,select {
vertical-align: middle;
}
#container {
width: 760px;
-moz-box-shadow: 0 3px 10px 3px #366;
-moz-border-radius-bottomright: 0 3px 10px 3px #366;
-webkit-box-shadow: 0 3px 10px 3px #366;
-webkit-border-bottom-right-radius: 0 3px 10px 3px #366;
margin: 0 auto;
}
#content {
background: #fff;
font-family: Tahoma,sans-serif;
padding: 18px;
}
#content p,h1 {
float: left;
margin-left: 18px;
width: 400px;
margin-bottom: 12px;
}
header#masthead {
width: 760px;
height: auto;
background: #fff;
}
header#masthead ul {
list-style: none;
position: absolute;
}
header#masthead p {
color: #fff;
font-size: 13px;
padding: 7px 4px;
}
header#masthead ul li {
border-right: 1px solid #FFF;
display: inline;
padding-right: 5px;
}
header#masthead ul li:last-child,#siteFooter ul li:last-child {
border: 0;
}
header#masthead ul li a {
color: #fff;
}
header#masthead ul li a:hover {
border-bottom: 3px solid #fff;
}
#nav {
background-image: url(../images/navBack.jpg);
background-repeat: repeat-x;
height: 17px;
font-size: 13px;
float: left;
padding: 7px 18px;
}
.nav {
background-image: url(../images/navBack.jpg);
background-repeat: repeat-x;
height: 31px;
}
input[type="search"] {
border: 1px solid grey;
font-family: Georgia;
width: 100px;
margin-top: 4px;
-moz-box-shadow: inset 2px 2px 5px #ccc;
box-shadow: inset 2px 2px 5px #ccc;
-webkit-box-shadow: inset 2px 2px 5px #ccc;
padding: 2px;
}
input[type="submit"] {
color: #000;
background-color: #fff;
border: none;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
margin: 5px 10px 0 6px;
}
.sectionPhoto {
background-image: url(../images/news-item.jpg);
background-repeat: no-repeat;
width: 140px;
height: 140px;
float: left;
-moz-box-shadow: 3px 3px 3px #999;
-moz-border-radius-bottomright: 3px 3px 3px #999;
-webkit-box-shadow: 3px 3px 3px #999;
-webkit-border-bottom-right-radius: 3px 3px 3px #999;
}
#siteFooter {
background: #fff;
height: 50px;
font-size: 13px;
padding: 18px;
}
#siteFooter ul li {
border-right: 1px solid #0f308d;
display: inline;
padding-right: 5px;
}
#siteFooter ul li a {
color: #0f308d;
}
h1 {
color: #0f308d;
font-size: 20px;
}
p {
color: #888c8d;
}
.left {
float: left;
}
.right {
float: right;
}
.bold {
font-weight: 700;
}
.clear {
clear: both;
}
.darkRed {
color: #954464;
}
Avoid relative links ...
<div id="headline"><a href="#"><img src="images/logoGC.gif" alt="The National Lottery headline" /></a></div><div id="headline"><a href="#">The National Lottery headline</a></div>div {position:relative;display:block;}
<div id="headline"><a href="#">The National Lottery headline</a></div>
...with the image as a CSS background. I suspect link text is more important than img alt content.
I have been given a jpg file as a test, to make it in html, which I did.
(big) "The National Lottery Awards - winners announced"
Do not use unencoded quotes.
"The National Lottery Awards - winners announced"
Can you see what you typed?
“proper quotes”
Depends on the server encoding.
<meta name="keywords" content="Lottery, National Lottery Awards, Lottery funding, Good Causes" />
Doesn't pass validation validator.w3.org
CSS doesn't pass validation jigsaw.w3.org Most of it is due to using proprietary selectors, but there is one real error and one relating to your use of last-child. It's "big" because it's reliant on the proprietary selectors - like hacks for IE, find another way.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> This is one of the errors, do you know why you are using it? Is it *really* needed?
<!--[if lt IE 9]> No, never, uh-uh, no IE conditionals allowed. How would you do this without them? Then that's the way we do it.
"css/style.css" As mentioned, for all should be "/css/style.css", in spite of "local previews." It only takes a second with a good text editor to swap ../ for / before uploading.
You've declared an HTML 5 doctype but are using XHTML tags. It will pass validation but I'm **pretty sure** it's because the validator is not up to speed for parsing HTML 5. In any case it's allowed, but it's not HTML, it's XHTML.
Also not how you've eliminated some (see head HTML) and left these in. Little clues . . .
<a href="#"> Not ever is there a good reason for this one - statistics pretty much prove the area of the upper left generally contains the logo, and any image of the logo should lead to the home page. I noticed your hrefs are all empty and know it's a demo page without links, but later you have
<li><a href="home">Home</a></li>
Both of these should be
<a href="/">
The reason is that you move toward insuring you have a single URL for "home," and it's always, and only, "/", not /index.html" or "/index.php" or "/home."
<div id="logo"><a href="/"><img src="/images/logo.jpg" alt="The National Lottery logo"></a></div>
<div id="headline"><a href="/"><img src="/images/logoGC.gif" alt="The National Lottery headline"></a>
Make these semantic elements. Doesn't really matter what they are. The first <div> is the one that leads to div-itis.
<h3 id="logo"><a href="/"><img src="/images/logo.jpg" alt="The National Lottery logo"></a></h3>
<p id="headline"><a href="/"><img src="/images/logoGC.gif" alt="The National Lottery headline"></a></p>
(big) I agree with others, no need to use an image here. Per your last comments, many who have been doing this for a while (hopefully, the ones hiring you are not code-less automatons) will know that a lot of things in coding come out of habit. Bad habits are hard to break. Choosing to use inline images over sprites and semantic elements is a pretty good indicator of what your habits are.
<h3 id="logo"><a href="/">The National Lottery logo</a></h3><p id="headline"><a href="/">The National Lottery headline</a></p>
#logo,#headline, #logo a,#headline a {
display: block;
border:none;
outline:none;
text-indent:-50000px;
backgroud-position: top left;
background-repeat: no-repeat;
}
/* Use your values here */
#logo, #logo a { width: 200px; height: 100px; }
#headline, #headline a { width: 400px; height: 50px; }
#logo a { background-image:url(/images/logo.jpg); }
#headline a { background-image:url(/images/logoGC.gif); }
<div class="nav clear"> Are you **sure** the clearing div is necessary here? Good code is like good writing: remove everything you can and have it say the same thing. Unrelated, don't use naming conventions that possibly conflict with functions or selectors, you could use "clear-div" here. You see this here too:
.left {
float: left;
}
.right {
float: right;
}
.bold {
font-weight: 700;
}
<img src="images/header.jpg" alt="">
Populate alt tags, designers leave them off because they feel it insults their design sense. Alt values are an accessibility tool, use them.
"The National Lottery Awards - winners announced"
Do not use unencoded quotes.
"The National Lottery Awards - winners announced"
This goes for ampersands too, even in URL's: script.php?this=that&these=those&hers=his
<script src="
Type not specified.
<script type="text/javascript" src="
html, body, div, span, object,......
This is a pretty universal approach, zero out everything. It's not one I agree with (flame away.) Most of the time, and in the context of your document, it's not needed. Do you have object, blockquote, pre, abbr, address, cite, code, del, dfn, ins...? No. What worries me when I see this is often, it's a copy and paste from things like WordPress which is well known for it's bloated catch-all code. IMO it's highly inefficient, and like using XHTML code when HTML code will do, it indicates just doing things by rote and not understanding why you do them.
Pixel sizes: (no rating) There are many reasons as developers we are "forced" into using px for units, but the general assessment is that some form of relative sizes such as em or % can and should be used, expecially in respect to
fonts. But it really depends on the environment and the design (and how locked in the design is. Often, it's like Fort Knox.)
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="description" content="National Lottery players raise Ł28 million a week for Good Causes. See how that funding has changed the UK for the better, and find out more about The National Lottery Awards.">
<meta name="keywords" content="Lottery, National Lottery Awards, Lottery funding, Good Causes">
<title>The National Lottery</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<div id="container">
<header id="masthead">
<div id="logo"><a href="/"><img src="images/logo.jpg" alt="The National Lottery logo"></a></div>
<div id="headline"><a href="/"><img src="images/logoGC.gif" alt="The National Lottery headline"></a></div>
<div class="nav clear">
<nav id="nav" class="clear">
<ul>
<li><a href="/">Home</a></li>
<li><a href="lottery-stories">Lottery stories</a></li>
<li><a href="media-centre">Media centre</a></li>
<li><a href="about-lottery-funding">About Lottery funding</a></li>
<li><a href="contact-us">Contact us</a></li>
<li><a href="cymru">Cymru</a></li>
</ul>
</nav>
<form id="searchbox" action="search.php">
<input type="submit" value="Go" class="right">
<input type="search" name="search" class="right search">
<p class="right">Search </p>
</form>
</div>
</header>
<img src="images/header.jpg" alt="header">
<section id="content">
<div class="sectionPhoto"></div>
<h1>The National Lottery Awards - winners announced</h1>
<p>Seven inspirational Lottery-funded projects have won the top honours at the finals of the 2007 National Lottery Awards.</p>
<p class="darkRed">Find out more about "The National Lottery Awards - winners announced"</p>
</section><!-- End #content -->
<footer id="siteFooter">
<ul>
<li><a href="email-page">Email this page</a></li>
<li><a href="print">Print</a></li>
<li><a href="search">Advanced search</a></li>
<li><a href="accessibility">Accessibility</a></li>
<li><a href="terms">Terms of use</a></li>
<li><a href="site-map">Site map</a></li>
</ul>
</footer>
</div><!-- End #container -->
</body>
</html>html, body, div, span,
h1, h2, p,
em, img, strong,
b, i,
ol, ul, li,
form, label,
article, aside,
footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
aside,footer,header,menu,nav,section { display: block; }
body {
line-height: 1;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #5090cd;
}
#headline { background: #fff; float: left; }
#logo { background: #fff; float: right; }
a {
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
margin: 0;
padding: 0;
}
input,select {
vertical-align: middle;
}
#container {
width: 760px;
-moz-box-shadow: 0 3px 10px 3px #366;
-moz-border-radius-bottomright: 0 3px 10px 3px #366;
-webkit-box-shadow: 0 3px 10px 3px #366;
-webkit-border-bottom-right-radius: 0 3px 10px 3px #366;
margin: 0 auto;
}
#content {
background: #fff;
font-family: Tahoma,sans-serif;
padding: 18px;
overflow: auto;
}
#content p,h1 {
float: left;
margin-left: 18px;
width: 400px;
margin-bottom: 12px;
}
header#masthead {
width: 760px;
height: auto;
background: #fff;
}
header#masthead ul {
list-style: none;
position: absolute;
}
header#masthead p {
color: #fff;
font-size: 13px;
padding: 7px 4px;
}
header#masthead ul li {
border-right: 1px solid #FFF;
display: inline;
padding-right: 5px;
}
header#masthead ul li:last-child,#siteFooter ul li:last-child { border: 0; }
header#masthead ul li a { color: #fff; }
header#masthead ul li a:hover { border-bottom: 3px solid #fff; }
#nav {
background-image: url(../images/navBack.jpg);
background-repeat: repeat-x;
height: 17px;
font-size: 13px;
float: left;
padding: 7px 18px;
}
.nav {
background-image: url(../images/navBack.jpg);
background-repeat: repeat-x;
height: 31px;
}
input[type="search"] {
border: 1px solid #ccc;
font-family: Georgia;
width: 100px;
margin-top: 4px;
-moz-box-shadow: inset 2px 2px 5px #ccc;
box-shadow: inset 2px 2px 5px #ccc;
-webkit-box-shadow: inset 2px 2px 5px #ccc;
padding: 2px;
}
input[type="submit"] {
color: #000;
background-color: #fff;
border: none;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
margin: 5px 10px 0 6px;
}
.sectionPhoto {
background-image: url(../images/news-item.jpg);
background-repeat: no-repeat;
width: 140px;
height: 140px;
float: left;
-moz-box-shadow: 3px 3px 3px #999;
-moz-border-radius-bottomright: 3px 3px 3px #999;
-webkit-box-shadow: 3px 3px 3px #999;
-webkit-border-bottom-right-radius: 3px 3px 3px #999;
}
#siteFooter {
background: #fff;
height: 50px;
font-size: 13px;
padding: 18px;
}
#siteFooter ul li {
border-right: 1px solid #0f308d;
display: inline;
padding-right: 5px;
}
#siteFooter ul li a { color: #0f308d; }
h1 { color: #0f308d; font-size: 20px; }
p { color: #888c8d; }
.left { float: left; }
.right { float: right; }
.bold {font-weight: 700; }
.clear { clear: both; }
.darkRed { color: #954464; }
Double-check the encoding of your raw html. You have declared a charset of UTF-8 (in my opinion this is correct and proper and should always be used), but the posted code only displays correctly in Latin-1. In fact it's the precise opposite of a question posed just yesterday in another thread, in which that same pounds sign started out as utf-8 but was reinterpreted as Latin-1.
