homepage Welcome to WebmasterWorld Guest from 54.205.236.46
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

This 31 message thread spans 2 pages: 31 ( [1] 2 > >     
Criticise my html code please?
semantic html
carlozdre




msg:4378414
 8:49 pm on Oct 23, 2011 (gmt 0)

I have been given a jpg file as a test, to make it in html, which I did. I would like some opinions please of whatever I have done bad and hopefully I can learn something new.

The code must be semantic and valid, I will validate it after I will finish but I would first like to know what do I have to change or modify in order to have a better semantic code.

Thanks.


<!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>


I had to use images as they were part of the text, otherwise I would have used a lot less and eventually make a sprite.

Every single criticism is welcomed, no matter how small. Thanks!

And the CSS:


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;
}

 

g1smd




msg:4378428
 9:11 pm on Oct 23, 2011 (gmt 0)

Avoid relative links to pages or images in HTML and to images in CSS. Especially avoid the ../ notation.

Begin each link with a leading slash, counting all folders in the path, starting at the root.

lucy24




msg:4378456
 11:22 pm on Oct 23, 2011 (gmt 0)

Avoid relative links ...

But you know the problem with this rule don't you? It makes it impossible to check your code locally, on the fly.

g1smd




msg:4378458
 11:26 pm on Oct 23, 2011 (gmt 0)

Not if you install Apache on your local machine it doesn't. You can then browse it the same as if it were your live site. You can even have it installed at the actual "example.com". Begin the link with a slash and include the full path. No need to include the protocol or hostname though.

lucy24




msg:4378464
 12:02 am on Oct 24, 2011 (gmt 0)

Yes, I've got MAMP. But it still has to be opened explicitly; I can't use it with the text editor's HTML preview. And I have to change the prefs if I'm working on a different domain* :(

For e-books we have to use relative links-- in a narrowly prescribed form-- because the whole thing will be installed as a package but we don't know where the package will be. Nothing is ever named index.html, though.


* This would be a bigger hardship if I had more than two domains to keep track of ;)

caffinated




msg:4378513
 5:00 am on Oct 24, 2011 (gmt 0)

A couple of points...
<div id="headline"><a href="#"><img src="images/logoGC.gif" alt="The National Lottery headline" /></a></div>

Open to criticism here but I may be inclined to use:
<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 am also not too comfortable with using dual classes. Older browsers don't support them, so I personally avoid doing that.

Here's a headache-saving second-level reset:
div {position:relative;display:block;}
I find it keeps my css lighter too. Does anyone know if this puts and unnecessary overhead on the processing of the css at the browser end?

caffinated




msg:4378514
 5:04 am on Oct 24, 2011 (gmt 0)

Sorry...in the headline part, above...I would also use a text-indent in the css to remove the link-text content from the visible page and would also make sure that the link-text closely assimilates whatever leading text is visible in the image.

carlozdre




msg:4378599
 10:27 am on Oct 24, 2011 (gmt 0)

<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 wanted to use css background on that particular div aswell but after reading this [stackoverflow.com...] I've changed it. I will do some more research on this now.

Again, using multiple classes. According to [maxdesign.com.au...] doesn't seem to be a problem? I do not care at all about IE6 to be honest.

caffinated




msg:4378630
 12:14 pm on Oct 24, 2011 (gmt 0)

Mmmm interesting - yet from your reference, I still assume that a header replacement falls into the article's reason for using CSS. Moreover, as it is an anchor, I would expect the image to change illustrating the roll-over to the visitor - which would then require a CSS sprite too...i.e. more grist for the CSS mill within the arguments of the article.

carlozdre




msg:4378642
 1:15 pm on Oct 24, 2011 (gmt 0)

Hang on buddy, you're missing something. The reason for the anchor is:

I have been given a jpg file as a test, to make it in html, which I did.


Is a job interview test and I was simply wondering what could I do better to improve my chances to get the interview. I didn't use css sprites as I have the images separately and I doubt they would want me to use sprites but this would be the way to go in any other scenarios.

londrum




msg:4378646
 1:23 pm on Oct 24, 2011 (gmt 0)

i suppose if you're trying to impress them, then i'd include things like <legend> and <label> in the <form> to make it more accessible to blind people. you could also include an invisible "skip to main navigation" link at the top

i wouldn't bother doing that normally, but for a test i probably would

caffinated




msg:4378677
 3:06 pm on Oct 24, 2011 (gmt 0)

Fair enough calozdre. I guess if you get to interview stage and have the chance to discuss, then comments about sprites/rollovers etc should show that you've considered wider options. Good luck.

carlozdre




msg:4378707
 3:56 pm on Oct 24, 2011 (gmt 0)

Thank you. Anyway, I am hoping to learn something from here even if I don't get to the next stage.

I know now that clearing with an empty div is not semantic at all so for "section" I have removed that div and used overflow: auto for the containing element and that did the trick.

However, I can't do the same thing with the elements in the header and that pisses me off as I know there is something wrong in the way I've done it and do not understand what at all!

Any ideas?

rocknbil




msg:4378780
 5:52 pm on Oct 24, 2011 (gmt 0)

OK you asked for it so here goes. :-) It so happens we're taking on new people where I work and this is what I'd recommend. BTW, none of this would preclude "getting the job" IMO, but what would - how well you took the recommendations. :-) I've labeled them (big) and (small) for "ah well, it's really OK but moving forward you really should take another approach."

(smallish) Doesn't pass validation [validator.w3.org] (small only because it's easily fixed and minor stuff)

(big) 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.

(one of the many) The reason(s) validation is so important is it leads to cross platform and cross device compatibility. This is the first stop.

<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?

(big)(big)(big)(big)(big) <!--[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.

(big) "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.

(small? Or maybe it's between the two) />

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 . . .

(big) <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."

(big) <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); }

It's that easy.

(small) <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;
}

(big) <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.

(big) "The National Lottery Awards - winners announced"

Do not use unencoded quotes.

&quot;The National Lottery Awards - winners announced&quot;

This goes for ampersands too, even in URL's: script.php?this=that&amp;these=those&amp;hers=his

(big) <script src="

Type not specified.

<script type="text/javascript" src="

(small, I guess . . . ) 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.)

Overall structure, good, use of semantics, mostly good, CSS a little bloated, I say "workable."

lucy24




msg:4378953
 2:50 am on Oct 25, 2011 (gmt 0)

(big) "The National Lottery Awards - winners announced"

Do not use unencoded quotes.

&quot;The National Lottery Awards - winners announced&quot;

And then you get people throwing fits about horrendous and utterly unnecessary use of "typewriter" quotes. The file encoding is set to utf-8, meaning you can use “proper quotes” as-is at a savings of
:: counting on fingers ::
three bytes per quotation mark. Or &ldquo; and &rdquo; at an added cost of one byte per ;)

rocknbil




msg:4379203
 4:20 pm on Oct 25, 2011 (gmt 0)

Can you see what you typed?

“proper quotes”

Depends on the server encoding. Let them throw fits, stability is more important than micromanagement.

lucy24




msg:4379353
 10:09 pm on Oct 25, 2011 (gmt 0)

Can you see what you typed?

Uhm, yeah, I can. In these Forums I have to set the encoding manually to UTF-8. But that's -- cough, cough -- the page's fault for not including a "charset" declaration. The OP's page does.

“proper quotes”

Depends on the server encoding.

If internal page content depended on the server encoding, nobody would ever be able to use unencoded characters beyond the ASCII range. Which would make pages in non-European languages a bit of a problem. You do need to stick to 7-bit ascii in links (even though neither the validator nor the link checker cares).

carlozdre




msg:4380157
 1:36 pm on Oct 27, 2011 (gmt 0)

Thank you so much for these corrections.

I will start the modifications and will come back to bother you with couple more questions, this info is invaluable to me.

keyplyr




msg:4381503
 7:11 am on Oct 31, 2011 (gmt 0)

I would remove the keywords tag. It's archaic and may implicate spam.


<meta name="keywords" content="Lottery, National Lottery Awards, Lottery funding, Good Causes" />


[searchengineland.com...]

tedster




msg:4381709
 5:19 pm on Oct 31, 2011 (gmt 0)

A little while ago I would have agreed with you. However, in recent weeks Bing has publicly stated that they DO use the meta keywords these days (in a small way).

As you mentioned, they will be wary about any sign of spammy keyword stuffing in the meta keywords element - however, the choices here don't look particularly spammy to me. So I'd say keep it.

lucy24




msg:4381818
 9:23 pm on Oct 31, 2011 (gmt 0)

:: unavoidable thread drift ::

If you've already got a meta description that contains the keywords you consider important (sorry, g###, but I do not see the advantage of ranking for "it's") do you gain anything by also having a meta keywords?

FourDegreez




msg:4382727
 5:56 pm on Nov 2, 2011 (gmt 0)

rocknbil, the <!--[if lt IE 9]> is necessary when using HTML5. IE versions prior to 9 will not allow you to style any of the new HTML5 tags (article, time, section, etc) without this hack.

Also, type="text/javascript" is not required in HTML5. javascript is assumed the default. It turns out that older browsers forgive the lack of a type attribute, as well.

carlozdre




msg:4383811
 2:35 pm on Nov 5, 2011 (gmt 0)

Thanks again for your post. Here's what I've done, why, how and some small questions if you'll find the time to help me out again.

Doesn't pass validation validator.w3.org


I have fixed that just before your post.

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.


Yes, most are because of box-shadow and border-radius, part of CSS3. Isn't the last-child one of the recommendations of so many articles? That's why I have used it, having tried to get rid of the static |. What do you mean by "proprietary selectors"?

<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?


Fair enough, I don't really need that. The truth is I have taken a Vanilla HTML5 document and removed almost everything I didn't need, had a look at the structure and tried to learn from there. I then left this line thinking.. I don't know what was in my mind. I have removed it just before your post.

<!--[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.


Erm, I am a bit confussed as I've seen it used on so many big websites. Even while working for this web media agency, it was widely used. How should I approach this, are you trying to say I should get rid of these IE conditionals at all?

How would I do it without? I know, that was your question lol.

"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.

"/css/style.css" doesn't work for my Hostgator hosting.

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 . . .


Again, I have removed any XHTML tags before the date of your post. I will post the updated source after this post.

<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."


Good point, I have changed it the way you suggest as makes sense.

<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.


What do you mean? How do I make them more semantic than they are? Give me a very short example please! I just thought that naming them suggestively will be enough :).

<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.


Searching on Google for "When to use IMG vs. CSS background-image?" there's this recommendation from another forum from a guy who I think knows what he does and that's why I have decided to use an img instead of making a bg in css for that particular div. This guy thinks is more semantic using it the way I did but your arguments sound solid and I will change it now.

<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); }


Erm.. I have tried the way you suggest but it becomes a mess. Is probably because of my clearing messy method.

<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;
}


It is needed or it breaks down :/.

This is one of my biggest problems at the moment which I do not really understand. I have used a better clearing method for the footer floats, with overflow: hidden aplied to the containing container but if I do the same thing with this one, tried several things, it collapses. I will get back to this a bit later, leaving it as the last thing, I really want to get everything else sorted and focus just on this issue as I'd like to completely understand it.

As for the these class names, I know they are not semantic but I don't know why, or why is wrong, or how do I do it better?!

<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.


Done, you are right. The reason I didn't do it is because that image is a simply image and wasn't unsure what to write in there.

"The National Lottery Awards - winners announced"
Do not use unencoded quotes.
&quot;The National Lottery Awards - winners announced&quot;
This goes for ampersands too, even in URL's: script.php?this=that&amp;these=those&amp;hers=his


Again, something I've done before your post.

<script src="
Type not specified.
<script type="text/javascript" src="


I do not agree with you on this one. The HTML5 specs suggests that we can simply omit the type attribute for the link, script and style elements.

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.


Correct, it was part of the Vanilla html5 I have used but after my initial post I have doing research and changed a lot of them, including this ones where I have removed the elements I am not going to use.

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.)


I have never known whether is better to change everything to em or not. I mean, I know is better for a lot of reasons but I am unsure whether to change everything, including the width and height which are usually like 1000px or more? I have done this but I don't know where I messed it up as it all looked like hell. Will try again.

carlozdre




msg:4383813
 2:41 pm on Nov 5, 2011 (gmt 0)

And the latest source, based on your suggestions and whatever changes I have made.

I am aware of the fact my clear method is quite messy, that's the only way I have managed to make it to look alright in every browser and will work on it after I will finish with the other issues.

HTML:

<!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 &quot;The National Lottery Awards - winners announced&quot;</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>


CSS:
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; }

lucy24




msg:4383922
 10:54 pm on Nov 5, 2011 (gmt 0)

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.

Class names like "left" and "right" are only appropriate when you really mean them, as in table cells where you're overriding a default alignment. Don't say "left" when you mean "float: left". Depending on your text, a name like "floatleft" may really be what you want. Or it may not.

And yes, I've sometimes had recourse to

div.allclear {line-height: .01; clear: both;}

after much time tearing out my hair trying to find a more grownup way to achieve the same result ;)

carlozdre




msg:4384035
 10:56 am on Nov 6, 2011 (gmt 0)

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.


Erm, how do I check this? I've seen the other topic. Are you trying to say we have different entities based on the encoding and should I use them accordingly?

So this is what you guys mean by semantic names for those classes, respectively .clear-left, .clear-right, and .red-color?

As for the clear method, I tried for so many times to find a non-dirty solution without any success. Will leave this at the end, I am more than sure I am gonna have fun with it lol.

lucy24




msg:4384180
 9:01 pm on Nov 6, 2011 (gmt 0)

Does your page look the same when you open it in a browser as it does when you look at the raw html in your editor?

Details depend on your platform.

I spent many hours yesterday trying to disentangle a legacy font that was made for, and can probably only be used with, Windows-Latin-1 encoding.

carlozdre




msg:4385407
 12:15 am on Nov 10, 2011 (gmt 0)

I don't use any wysiwyg editors, just PSPad or Notepad++. Yes, it does look alright on every single browser so far.

I was asking as I thought there is some other way I can check this :).

g1smd




msg:4385429
 1:25 am on Nov 10, 2011 (gmt 0)

If PSPad is much like any other code editor, the encoding for the current document should be noted somewhere in the window status bar.

carlozdre




msg:4386067
 9:44 pm on Nov 11, 2011 (gmt 0)

Yes, it is and is utf-8, I have double checked.

This 31 message thread spans 2 pages: 31 ( [1] 2 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved