'tidyness' check

[konnor5092]

Been having a play with a new design today and have coded a mock front page.

I was hoping someone might be able to quickly check the CSS to make sure its 'tidy', or if anything needs drastic changes. I am aware there is no image replacement yet or any links.

http://www.mattoconnor.co.uk/Home.html

ta muchly

[matelot]

Have you pushed it through the W3C validator? You'll find several warnings.

[Lchad]

WOW that's gorgeous!

You don't have a regular <p> tag defined. I would define it for sure.
I would give all your <p>'s a margin-bottom of 15px (or something like that) so you can eliminate all the br's. Not necessary on your .p1.

On all the <span class="bold"> you could simply use <strong></strong>
but the way you have it now might be best but also offer the bold class a margin-bottom because that again will eliminate br's.

For SEO purposes, the h1 should be something more keyword rich than Welcome and a repeat of your domain name. Since you can only have ONE h1 per page, you must change the News to an h2. Then make that more keyword rich as well. Those are the meat and potatoes of SEO inside a page.

Hope that helps !

[konnor5092]

So can you have as many <h2>'s as you want?

so instead of having something like this for the text which I have currently....

Code: Select all

<p class="p1">
Lorem ipsum est in illud dolorum atomorum, te omnis ornatus philosophia cum. Cum natum electram ne
<br />
puto vidit oporteat vis at, agam ridens intellegebat te sed. Mei ex eius urbanitas posidonium,
<br /><br />
est oblique luptatum perfecto ne. Iudico electram abhorreant et per. Vim atqui probatus ne,
<br /> 
ei prima paulo aliquyam pro, sed te graece mediocrem.
<br /><br /><br />
</p>

you suggest having an individual p1 (or p) tag for each line/paragraph?

so more like this (?)....

Code: Select all

<p class="p1">
Lorem ipsum est in illud dolorum atomorum, te omnis ornatus philosophia cum. Cum natum electram ne
</p>
<p class="p1">
puto vidit oporteat vis at, agam ridens intellegebat te sed. Mei ex eius urbanitas posidonium,
</p>
<p class="p1">
ei prima paulo aliquyam pro, sed te graece mediocrem.
</p>

[Lchad]

<p>'s are for paragraphs. So each time you want to start a new paragraph, close the first </p> and start a new <p></p>

By adding a margin-bottom to a p, you get a nice space without needing breaks.

Looking at your code it looks like you did it already!

[konnor5092]

he. Had a cheeky edit to the main index page. Kept 'Home.html' the same in case anyone else wanted to comment.

Cheers for that so far.

[karinne]

*Always* use a strict doctype.

Use the elements that exists for what they are...

Code: Select all

<span class="bold">21-07-07</span>

should be

Code: Select all

<strong>21-07-07</strong>

Much more semantic and meaningful.

Empty <h1>

[MikeHopley]

Originally Posted by karinne

Code: Select all

<span class="bold">21-07-07</span>

should be

Code: Select all

<strong>21-07-07</strong>

Much more semantic and meaningful.

Not necessarily. If the intention is to emphasise the date strongly, then <strong> is correct (<strong> = strong emphasis).

If the intention is purely presentational (he prefers the look of bold text for the date), then <span class="bold"> is correct (although the class name makes no difference to the semantics). I suspect this is the case.

If he's using bold text in accordance with typographic conventions in print other than emphasis, then <b> is correct.

More on this later (I have an article up my sleeve on this very subject).

[konnor5092]

'he' has no idea and is just after the best solution!

[karinne]

Originally Posted by MikeHopley

Not necessarily. If the intention is to emphasise the date strongly, then <strong> is correct (<strong> = strong emphasis).

If the intention is purely presentational (he prefers the look of bold text for the date), then <span class="bold"> is correct (although the class name makes no difference to the semantics). I suspect this is the case.

If he's using bold text in accordance with typographic conventions in print other than emphasis, then <b> is correct.

More on this later (I have an article up my sleeve on this very subject).

Hmmm ... yes ... good point. So then ... maybe this is a good situation for the <b> element

[RZX Developer]

Hey Mate,

I'd suggest running it through http://validator.w3.org/

And I would like to say that I love the design mate, great work!

Wayne

wayne

[MikeHopley]

Originally Posted by konnor5092

'he' has no idea and is just after the best solution!

Then I would say your current method, <span class="bold">, is best for this instance.

It's a nice distinction in any case, and of small import; but I feel it's worth understanding.

Gorgeous site, by the way.

[RZX Developer]

Who has no idea?

<span style="font-weight: bold">TEXT</span>

[MikeHopley]

Originally Posted by RZX Developer

Who has no idea?

<span style="font-weight: bold">TEXT</span>

Ugh. There's no reason to use inline styles. External CSS is preferable (for code efficiency and ease of maintenance).

Personally, I would use something like <span class="newsDate">, because it helps me remember what items the class affects.

[RZX Developer]

That's why I am the junior developer

[karinne]

Originally Posted by MikeHopley

Personally, I would use something like <span class="newsDate">, because it helps me remember what items the class affects.

Yes and that way if you want to remove bold and just change the color you are not stuck with a name that doesn't make sense

[MikeHopley]

Originally Posted by karinne

Yes and that way if you want to remove bold and just change the color you are not stuck with a name that doesn't make sense

Exactly. Besides, <span class="bold"> is so generic that you may apply it to other items -- and then you can't alter their formatting independently of each other!

[charlie019]

When I looked at it I thought all the green text in your paragraphs were links. You might try making your links stand out more.

<span class="green">text</span>

PS: I would change the 'M' in your logo to the color green. It
would add some visual effects