Site Review

http://ayesha.mine.nu/f1unleashed/ Can people please give me herlpful feedback.

I guess home page content. Also, the colour scheme is nice but you may want some graphics. The coding is nice afaik, im not a pro at judging that though. You may want to incorporate orange, as that is complementery to blue, or perhaps a bit of yellow. The colours are very bright so perhaps greying down the blues to release some contrast. The titles are very bland, and I guess you may want to get the driver's profile photos and some action photos. The middle link doesnt work. On the whole I am guessing this is an info site so the main thing atm is to get the info on there.

I'm going to put news about the races on the front page, and I know the middle link doesn't work. The drivers section isn't finished yet, and as a result it only has the ferrari drivers. The problem is that photos have copyright which is the trobuble with that, and I wasn't trying to make to much contrast but I might change the design to 4 main colours, Ferrari Scarlet, McLaren's Black, BMW William's Blue and put in some white with other colours like yellow being put in somewhere.

Middle Link Now Works! I have added some Red and some very light yellow. More circuits added.

thats looking a bit nicer there, perhaps you should include some dotted/dashed lines to follow the championships page a bit easier

Originally posted by newmand2
thats looking a bit nicer there, perhaps you should include some dotted/dashed lines to follow the championships page a bit easier


How can you put dotted lines in?

Maybe you could tone that blue and red down at bit, they're playing havoc with my eyes lol I'm seeing red and blue spots as I'm typing in here lol

Maybe you could have an image of a car somewhere in the header? Or someone's helmet, not schumacher's though :)

Originally posted by Error 404
How can you put dotted lines in?

<element style="border: 2px dashed #000;">Text here</element>


Some info. (http://www.w3.org/TR/REC-CSS2/box.html#border-style-properties)

'Course... that's borders. If you want something else, you'll have to use an image.

Originally posted by Nightfire
Maybe you could tone that blue and red down at bit, they're playing havoc with my eyes lol I'm seeing red and blue spots as I'm typing in here lol

Maybe you could have an image of a car somewhere in the header? Or someone's helmet, not schumacher's though :)


Firstly, I chose those colours because they are near the colours of the four main teams, Ferrari (Red), McLaren(Black and White), BMW Williams (Blue and White) and Renult (Yellow and Blue) and there's ment to be alot of contrast, if you can sugest toned down colours, I might consider that.




One other thing, why not the 6 times F1 world champ? :confused:

Alright, I have decided to tell you more about the site, the site uses php Headers and Footers, thus the php extension as well as a couple of lines of php on each page. The site also uses XHTML 1.0 Strict and CSS 1.


So you must say, it's not all to bad for a 13 year old kid, who made this first website when he was 8, g w search (http://gwsearch.freewebpage.org) which I stopped developing when I was 11 because it was so far beheind modern web standards, and then started to learn CSS and XHTML and a tiny amount of php to top it off.

I know, I'll have a picture of the cars which crashed out on turn 2 or 3 of the Brazilian GP 2003 (which was about 6 including Shumi).

Originally posted by Paul Jr

<element style="border: 2px dashed #000;">Text here</element>


Some info. (http://www.w3.org/TR/REC-CSS2/box.html#border-style-properties)

'Course... that's borders. If you want something else, you'll have to use an image.


I can't make that work.

Events section is now complete.

Ooooh my freakin' eyes! So bright!........

Just a little info: the server was down when I tried to connect.

Logo?

Don't have flashing banners, they're nasty and all you'll do is make your visitors go elsewhere.

Originally posted by Nightfire
Don't have flashing banners, they're nasty and all you'll do is make your visitors go elsewhere.

OK

Well, it's fairly semantic, I'll give you that.

That logo project in the bin.

How good is the code in my stylesheet?

body {background-color: #E6E6E6}

h1 {background-color: #0000FF}
h1 {color: #ffffff}
h1 {text-align: center}
h1 {font-family: arial, veranda}
h1 {font-size: 2.25em}

h2 {background-color: #FF0000}
h2 {color: #ffffff}
h2 {text-align: center}
h2 {font-family: arial, veranda}
h2 {font-size: 1.75em}

h3 {background-color: #C8E6FF}
h3 {color: #000000}
h3 {text-align: center}
h3 {font-family: arial, veranda}
h3 {font-size: 1.25em}

p {color: #000000}
p {text-align: left}
p {font-family: arial, veranda}
p {font-size: 0.9375em}

p.content {background-color: #C8E6FF}

p.links {background-color: #000064}
p.links {text-align: center}

p.end {text-align: center}
p.end {background-color: #FFFFD2}

p.right {text-align: right}

p.circuit {background-color: #C8E6FF}
p.circuit {text-align: center}

a.links:link {color: #C8E6FF}
a.links:visited {color: #00ff00}
a.links:hover {color: #ffff00}
a.links:active {color: #ffff00}

a:link {color: #0000FF}
a:visited {color: #7F00FF}
a:hover {color: #ff0000}
a:active {color: #ff0000}

img {height: auto}
img {width: auto}

table {width: 96%}
table {height: auto}
table {background-color: #FFFFFF}

td {text-align: left}
td {font-family: arial, veranda}
td {font-size: 0.9375em}

You can combine things like:
table {width: 96%}
table {height: auto}
table {background-color: #FFFFFF}
into:
table {
width: 96%;
height: auto;
background-color: #FFFFFF;
}
It makes it clearer which properties all have been declared for a certain selector.
Also: there is no such property as "align" (funny, seen that before somewhere...)

Originally posted by ronaldb66
You can combine things like:
table {width: 96%}
table {height: auto}
table {background-color: #FFFFFF}
into:
table {
width: 96%;
height: auto;
background-color: #FFFFFF;
}
It makes it clearer which properties all have been declared for a certain selector.
Also: there is no such property as "align" (funny, seen that before somewhere...)

Done, but there were problems with that in Safari, so I changed it.

px for fonts is BAD BAD BAD.
Use % or em.

Originally posted by mindlessLemming
px for fonts is BAD BAD BAD.
Use % or em.



2 questions - what font size is 100% and what is em?

100% is 1em, or the default font size of the browser. I usually drop the overall font size to 80% in the <body> CSS, then use something like 1.5 em for headers and .8em for small text.

Em is the height of the current font. Ex is the height of the lowercase "x" in the chosen font.

Using em for all sizing, positioning (and even borders if you want to go all the way) will alow you to make a layout which resizes with the user's text size, like this. (http://studentwork.qantm.com.au/akrespanis/NavAust/index.htm)
(Another shameless plug of my own work ;))

Site is now all valid XHTML traditional 1.0 and CSS

Originally posted by mindlessLemming
100% is 1em, or the default font size of the browser. I usually drop the overall font size to 80% in the <body> CSS, then use something like 1.5 em for headers and .8em for small text.

Em is the height of the current font. Ex is the height of the lowercase "x" in the chosen font.

Using em for all sizing, positioning (and even borders if you want to go all the way) will alow you to make a layout which resizes with the user's text size, like this. (http://studentwork.qantm.com.au/akrespanis/NavAust/index.htm)
(Another shameless plug of my own work ;))


I will convert the site later tonight, but just to say, I made this converter (http://free.57host.biz/pxem/index.html), which uses the defult size for em, 16px.



Done

I have now added a very unintrusive logo.

Originally posted by Error 404
I made this converter (http://free.57host.biz/pxem/index.html), which uses the defult size for em, 16px.


Sweet! Now make a textfield where we can enter what initial percentage the text is at (default 16px is way too big for most sites) and that'll be a great little tool.

Originally posted by mindlessLemming
Sweet! Now make a textfield where we can enter what initial percentage the text is at (default 16px is way too big for most sites) and that'll be a great little tool.


It's only just a very simple PHP script, but I'll make the changes.

Updated.

Anyone know of an F1 newsfeed?