Test Portfolio

hey this is a school assesment and i would realy appriecate some feedback and also suggestns on improving

basicly we had to build a site to show off work wev done in school, we can use any method of building it, i mainly went with CSS, there is a little javascript for the style changer

none of the links work yet. Also be sure to check out the other styles by clicking on the colourd circles on the right

so far the sites been designd for 1024-768 resolution and IE and FF

http://milo2005.50webs.com

thanks

ok, few things.

1) your site is 'off' (for lack of a better term) in FF when the resolution is above 1024*768
2) your 'colour chooser' concept is good, but the way you have implemented it is not. If you are serious about this functionality one suggest i have is:
-- make 2-3 layouts with different colours, i suggest grey, red, and maybe green?
-- make 2-3 physical layouts to change colours between, then the user not only has colours to pick between, but they have layouts to pick between.
-- Do not place the colour selector on every page on the right hand side, the 'circles' are not smooth and it is distracting to the user. one suggestion would be to place these options on a 'prefferences' page and store the value in the users cookies. that way they select it once and it's there for X amount of time.
3) the links you have in there look good, and your mouse over effects are nice too, one thing i would change however, when you mouse over a menu item the right-side padding is removed, i'd leave the right-side padding as-is in this case.
4) the copyright information should be bumped down like 5 pixles

now don't take all of this as a negative. your site does look very nice. I just commented on the things i don't like about it.

Pretty cool design. Very unique. I think I'd work on the navigation. The vertical spacing of the links or something. Just doesn't feel right.

The style changer is neat, but using a cookie is a good idea. Moreover, you might want to explore something server-side to run it... like PHP.

Nice 404 error page btw :)

Good luck.
Mike

hey thanks alot guys, realy good feed back ima try and work on all the things u guys said.

so like what do u think i should change with my left side nav?

also what do u thing of the "abstract Backgrounds" page is this a good CSS way of displaying pictures, coz i was thinkin of implamenting it a couple more times through out the site

once again thanks a lot for the feedback

milo

I havn't looked at the gallery page yet, however ensure you have created physical thumbnails for each image (will save loading times).

The nav i liked personally, simple yet effective.

Again, the only thing i would change about the nav is the padding difference when you mouseOver

yup iv made seprate small thumbnails,

but that right padding diffrence i cant get rid off, i duno why its even there,

this is all thats their for the left side nav


#links {
position: absolute;
top: 81px; left: 0; width: 169px;
font: 10px Verdana, sans-serif;
z-index: 100;
margin-left: 54px;
margin-top:70px;
}
#links h1 {
display: block;
background-color:#0099FF;
font-size: 130%;
padding: 1px 0px 1px 2px;
color: #333333;
margin: 0px;
width:169px;
max-width: 169px;
}
#links a {
display: block;
text-align: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 5px 0px 5px 5px;
margin: 0 0 0 0px;
border-width: 0px;
text-decoration:none;
color: #FFC;
}
#links a:hover {
color: #000000;
background: #eeeeee;
padding-right:0px;
}
#links a span {
display: none;
}
#links a:hover span {
display: block;
position: absolute; top: 300px; left: 15px; width: 125px;
margin: 10px;
z-index: 100;
color: #414141;
font: 10px Verdana, sans-serif;
text-align: center;


theres nothing on the hover to make it move?

any ideas?

#links a {
display: block;
text-align: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 5px 0px 5px 5px;
margin: 0 0 0 0px;
border-width: 0px;
text-decoration:none;
color: #FFC;
}
#links a:hover {
background: #eeeeee;
display: block;
text-align: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 5px 0px 5px 5px;
margin: 0 0 0 0px;
border-width: 0px;
text-decoration:none;
color: #000;
}