'tidyness' check

konnor5092 · #1 Jul 29th, 2007, 01:38

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 · #2 Jul 29th, 2007, 10:02

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

Lchad · #3 Jul 29th, 2007, 12:16

WOW that's gorgeous!

You don't have a regular tag defined. I would define it for sure.
I would give all your '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 you could simply use 
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 · #4 Jul 29th, 2007, 14:57

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 · #5 Jul 29th, 2007, 17:15

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

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 · #6 Jul 29th, 2007, 17:47

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 · #7 Jul 30th, 2007, 12:24

*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 · #8 Jul 30th, 2007, 13:58

Quote:

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 is correct ( = strong emphasis).

If the intention is purely presentational (he prefers the look of bold text for the date), then 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 is correct.

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

konnor5092 · #9 Jul 30th, 2007, 14:03

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

karinne · #10 Jul 30th, 2007, 14:07

Quote:

Originally Posted by MikeHopley

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

If the intention is purely presentational (he prefers the look of bold text for the date), then 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 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 element

RZX Developer · #11 Jul 30th, 2007, 14:08

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 · #12 Jul 30th, 2007, 14:17

Quote:

Originally Posted by konnor5092

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

Then I would say your current method, , 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 · #13 Jul 30th, 2007, 14:25

Who has no idea?

TEXT

MikeHopley · #14 Jul 30th, 2007, 14:34

Quote:

Originally Posted by RZX Developer

Who has no idea?

TEXT

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 , because it helps me remember what items the class affects.

RZX Developer · #15 Jul 30th, 2007, 14:45

That's why I am the junior developer

karinne · #16 Jul 30th, 2007, 14:52

Quote:

Originally Posted by MikeHopley

Personally, I would use something like , 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 · #17 Jul 30th, 2007, 16:30

Quote:

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, is so generic that you may apply it to other items -- and then you can't alter their formatting independently of each other!

charlie019 · #18 Aug 1st, 2007, 20:52

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.

Quote:

text

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Please check my site	MNuTz	Web Page Design	4	Nov 5th, 2007 04:46

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
'tidyness' check