Please review my new website - done right!

[Grant Palin]

I've got a new website online. It was a learning experience since I created it using PHP and MySQL, which was a first for me - first time I'd ever used them. I think it worked out rather well.

I would point out that right from the beginning, I did this site the right way. That means no table layouts - I used divs and CSS. It also meant to use styles for all presentational aspects of the site. And, I have all the styles (except some occasional inline styles) in a master style sheet, so I can change the look of the site just by editing one file! I'm starting to really appreciate the power of good design combined with PHP and MySQL! It sure beats writing code over and over, and presentational code at that!

Anyway, please have a look, and let me know what you think.

I did this site on windows XP Pro, at 1024 by whatever the other number is, tested and working fine in Internet Explorer 6 and Mozilla 4.

Here's the address: http://www.hommworld.net/Homm4/index.php

[Paul Jr]

Nice work. :thumbsup:

[Len Whistler]

Nice site....almost similiar in layout to my re-designed site.

I also formatted my site as much as I could in an external CSS file, and used header, footer, and navagation php files. I used tables for the images because I don't think divisions is a good way to go (for images). My next upgrade will be an image gallery php script that I will work on when I get the time.

I can see once you get a hang of HTML, CSS, PHP all you need is Notepad. You can just reuse your code over and over.


Leonard Whistler
http://www.stubby.ca

[Grant Palin]

Originally posted by Len Whistler
...used header, footer, and navagation php files...

Just what I did!

Like I said, it sure beats typing the same code over and over!

[Eskimo]

I remember viewing your old site here a long time ago, the one you have up now is lightyears better.

Great job!

[mindlessLemming]

One comment I must make is that the black background is a little hard on the eyes. Perhaps tone it down to more of a dark charcoal, something like #2a2a2a.

[super kobs]

Looks good

[Grant Palin]

Originally posted by Eskimo
I remember viewing your old site here a long time ago, the one you have up now is lightyears better.

Great job!

This is an all-new site, though. Not a redesign or rebuild. Although I have been working on improving those other sites as well. Mainly getting them to comply with XHTML standards.

[Grant Palin]

Originally posted by mindlessLemming
One comment I must make is that the black background is a little hard on the eyes. Perhaps tone it down to more of a dark charcoal, something like #2a2a2a.

Done. How is it now?

Although with that background change, I'm going to have to go back and make some images tarnsparent GIFs, since I made them originally as JPEGs with black backgrounds!

Plus, I just finished validating the ENTIRE site as XHTML strict!

[Grant Palin]

Does anyone have any problems with the site? Does the content div on the right ever pop down under the left navigation div? Things like that. That's the downside of using styles divs for layout: they're cleaner and more semantically correct, but sometimes tend to drop under the left div.

[Len Whistler]

Yes the content does slide under the navigation. It would be better to have the browser scroll left/right to view the content in a small window. Check out my site in a small window and you will see what I mean http://www.stubby.ca

Also you have used 4 colors on your site (background, navigation, site title, page title) I think it would look nicer with 2 or 3 colors max. Combine the page title and the site title maybe? Just my opinion, I am weak when it comes to colors and design.

Leonard Whistler
http://www.stubby.ca

[Grant Palin]

Originally posted by Len Whistler
Yes the content does slide under the navigation. It would be better to have the browser scroll left/right to view the content in a small window. Check out my site in a small window and you will see what I mean http://www.stubby.ca


Thanks. What pages does that happen on? How does your site layout stay normal with a smaller window?

[Len Whistler]

In my external CSS file the width is set at 500px. If you set up your CSS properly all pages will react the same.

#layer_images {
position: absolute; top: 10px; left: 225px;
width: 500px;
height: 100%;
}




Leonard Whistler
http://www.stubby.ca

[bcarl314]

Looks good, only thing you might want to consider is this bit of code:


<h3>Requirements</h3>
<strong>Operating System:</strong> Windows 95/98/Me/2000/XP<br />

<strong>CPU:</strong> Pentium II 300Mhz (450Mhz recommended)<br />
<strong>Free Hard Disk Space:</strong> 750MB<br />
<strong>Memory:</strong> 128MB RAM (256MB recommended)<br />
<strong>CD-ROM Drive:</strong> 4X Speed<br />

<strong>Video Card:</strong> 4MB SVGA DirectX 8.0 compatible capable of 800x600 resolution<br />
<strong>Sound Card:</strong> All major DirectX 8.0 compatible sound cards<br />
<strong>Peripherals:</strong> Keyboard and mouse


Could that be a list? Maybe even a table? I try to avoid <br />s as much as possible.

Otherwise, from a coding perspective, very nice work! :thumbsup: :thumbsup:

[jakenoble]

Nice work. Displays fine on my PC.

XP, IE 6, 1024x768.

I am not sure about the Orange on Black though.

[mindlessLemming]

Grant: Much Better :thumbsup: .

Also, in concern to what bcarl314 said;
<h3>Requirements</h3>
<strong>Operating System:</strong> Windows 95/98/Me/2000/XP<br />

<strong>CPU:</strong> Pentium II 300Mhz (450Mhz recommended)<br />
<strong>Free Hard Disk Space:</strong> 750MB<br />
<strong>Memory:</strong> 128MB RAM (256MB recommended)<br />
<strong>CD-ROM Drive:</strong> 4X Speed<br />

<strong>Video Card:</strong> 4MB SVGA DirectX 8.0 compatible capable of 800x600 resolution<br />
<strong>Sound Card:</strong> All major DirectX 8.0 compatible sound cards<br />
<strong>Peripherals:</strong> Keyboard and mouse

This piece of data is begging to be put into a unordered list (http://www.w3.org/TR/REC-html40/struct/lists.html#h-10.2) or better yet a definition list (http://www.w3.org/TR/REC-html40/struct/lists.html#h-10.2) .

If you're going to do it, may as well go all the way ;)

[Grant Palin]

Originally posted by jakenoble
Nice work. Displays fine on my PC.

XP, IE 6, 1024x768.

I am not sure about the Orange on Black though.

Thanks.

The orange color comes from many pictures fo the game - it's a very common color for interfaces and such in the game.

[Grant Palin]

Originally posted by Len Whistler
In my external CSS file the width is set at 500px. If you set up your CSS properly all pages will react the same.

#layer_images {
position: absolute; top: 10px; left: 225px;
width: 500px;
height: 100%;
}




Leonard Whistler
http://www.stubby.ca

I tried setting the width of the content div to 500px - it's online now. However, when I resize the window, th div pops under the nav div. Do I need to specify the width of the nav div in pixels too? - it's in percent right now. Also, what about position:absolute - do I need to do that as well?

[mindlessLemming]

Im having trouble finding reference to it at W3C, but I remeber hearing that relative units (em, ex, %) don't like to be used inside fixed size elements (px).

[Grant Palin]

I've changed some of the image map images (one the Troops, Towns, and Spells pages) to reflect the new background color.

I've also changed that system requirements list to an unordered list (style, or course).

Any more gripes or semantic arguments?

mindlessLemming: sounds interesting - let me now if you find it. Could be the cause of the problem. In the meantime, maybe I'll try experimenting with my units a little to see what happens.

[Len Whistler]

Also, what about position:absolute - do I need to do that as well?

Yes



Leonard Whistler
http://www.stubby.ca

[mindlessLemming]

Originally posted by Grant Palin
Any more gripes or semantic arguments?

Yep, just took a first look at the code;

Your doctype splits across 3 lines, this bugs out one of the crappy browsers. Put it on one line to be safe ;)
You haven't declared a charset. eg.
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
Your menu has no title="" attributes on the links.
You have used a <p> tag to position a link which is actually an image. I have a semantics gripe with this.
<p style="margin-top: 1em;">
<a href="http://validator.w3.org/check/referer"><img
src="../valid-xhtml10.gif"
alt="Valid XHTML 1.0!" height="31" width="88" /></a>
</p>

...could be simplified to....__________________________
/*css*/
.w3c { margin-top:1em;}
__________________________
<!--HTML-->
<a href="http://validator.w3.org/check/referer" class="w3c">
<img src="../valid-xhtml10.gif" alt="Valid XHTML 1.0!" height="31" width="88" /></a>

...and that was just the home page :)

[Grant Palin]

Originally posted by mindlessLemming
Yep, just took a first look at the code;
Your doctype splits across 3 lines, this bugs out one of the crappy browsers. Put it on one line to be safe ;)

Done. Which browser, by the way?


You haven't declared a charset. eg.
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />


Oh yes I have! Take another look - it's right after the head tag!


Your menu has no title="" attributes on the links.


Done. Are they good enough?


You have used a <p> tag to position a link which is actually an image. I have a semantics gripe with this.
<p style="margin-top: 1em;">
<a href="http://validator.w3.org/check/referer"><img
src="../valid-xhtml10.gif"
alt="Valid XHTML 1.0!" height="31" width="88" /></a>
</p>

...could be simplified to....__________________________
/*css*/
.w3c { margin-top:1em;}
__________________________
<!--HTML-->
<a href="http://validator.w3.org/check/referer" class="w3c">
<img src="../valid-xhtml10.gif" alt="Valid XHTML 1.0!" height="31" width="88" /></a>



Funny you should mention that, since I copied that code from the w3c website!!! I fixed it anyway.


...and that was just the home page :)


Oy. Although most of your quibbles are on content in my header file, which contains everything you've mentioned so far.

[squirellplaying]

http://www.hommworld.net/Homm4/Skills.php?skills=Primary
I get lots of mysql errors!

[Grant Palin]

Originally posted by squirellplaying
http://www.hommworld.net/Homm4/Skills.php?skills=Primary
I get lots of mysql errors!

I know. I'm having a problem with the database. I'm working on getting it fixed...hopefully tonight.

[mindlessLemming]

Done. Are they good enough?
Perfect. ;)

Now add accesskeys :D

[Grant Palin]

Originally posted by mindlessLemming
Perfect. ;)

Good!:)

Now add accesskeys :D
Uhhhh?:confused:

[Grant Palin]

And I've now fixed the database problem ... (I hope). Have a look on some of the pages. Please let me know what you think about the layout of the actual content pages. E.g. the tables and colors.

[mindlessLemming]

accesskeys are keyboard shortcuts to links (usually used in menus)
Have a look at this site (http://studentwork.qantm.com.au/akrespanis/NavAust/index.htm) that I'm building for school. See what I mean?
It's just a little added extra that gets you more accessiblity points :o

You hold Alt + the accesskey to go to the link (PC).
Don't bother trying to look around the site I posted, it's only a layout (and i think the queensland page is there too...)

[Grant Palin]

And how is anyone supposed to know what these accesskeys are? Short of looking in the code, that is.

[Paul Jr]

I really have to stop staying up so late. :o

[mindlessLemming]

Originally posted by Grant Palin
And how is anyone supposed to know what these accesskeys are? Short of looking in the code, that is.

Well, in this case, the accesskeys are underlined, and the site map (http://studentwork.qantm.com.au/akrespanis/NavAust/sitemap.htm) contains an explaination for users who are not familiar with the accesskey concept.

*edit: 300th post! I'm a CF Addict :D

[Grant Palin]

All right. All I need to do is add the accesskey attribute to each of the links, underline the appropriate letter, and the browser handles the rest. Is that right?

Congrats on becoming an addict! Welcome to the crowd!:thumbsup:

[mindlessLemming]

Originally posted by Grant Palin
All right. All I need to do is add the accesskey attribute to each of the links, underline the appropriate letter, and the browser handles the rest. Is that right?


Bang on :thumbsup:

[Grant Palin]

I notice that in Mozilla, the vertical scrollbar disapears when the page is short enough to fit on the screen (e.g. Heroes, Troops, Towns - the main pages, not the actual content pages). The page layout gets stretched to the right on those pages. Is there a way to prevent that?

[mindlessLemming]

No :( I had the same problem on my links site (http://mindlesslemming.au.ms)

[Grant Palin]

That is a bit of a bother.:(

[dysfunctionGazz]

nice, i love the nav.
um my only idea is the main logo has a darker BG on front page than rest of site, should u maybe change it to the more greyer colour coz its kinda boxed in at the mo, tho ignore me if u wanted that effect!
Gazz

[Grant Palin]

Originally posted by dysfunctionGazz
nice, i love the nav.
Glad you approve!:D


um my only idea is the main logo has a darker BG on front page than rest of site, should u maybe change it to the more greyer colour coz its kinda boxed in at the mo, tho ignore me if u wanted that effect!
Gazz

That's an image right from the game. When I did the website originally, it had a black background, but someone int his thread suggested I change it to a dark gray for better readability. Since then, I've been trying to change the background color of that header image, but it's tricky business. I'm not sure yet whether I'll bother at all.

[Grant Palin]

I've tried the suggestions by Len Whistler, and it works! Have a look now - I've got a fixed layout now. Much better then the screen shifting on a smaller resolution, or in a smaller window.

One problem though. Now that I've done that, the footer div pops up above the content and nav divs. How can I fix that? I thought of doing the same to the footer as I have to the other two, but the pages are not all the same length. Note that I put borders on the divs just to help see them better - it's only temporary.

[Len Whistler]

One problem though. Now that I've done that, the footer div pops up above the content and nav divs. How can I fix that?


On my site I have my images and the footer inside the same division. The footer always ends up at the bottom no matter how many images I have.

PS...At this time my host is down, so my website can not be viewed.



Leonard whistler
http://www.stubby.ca

[Grant Palin]

Thanks for the tip, Len. I actually moved that whole footer div to the bottom of the content div (kept it as a seperate div in case I want to style it later). And that fixed the problem.

[Grant Palin]

Hmmm...I haven't worked on the site lately because of school (labs, tests, etc) - only 3 more weeks!:D

Anyway, one other thing I was wondering about was whether people like the look of the the actual content pages. By this, I mean with actual pictures, statistics, etc. For example, go to the Heroes page, then click on one of the alignment links. What do you people think of that tabular layout? Do you like the look, organization, colours, ... and so on?