Back To Website Reviews

SITE REVIEW: Future Corps

  • futurebuzz
  • Student
  • Student
  • User avatar
  • Joined: Apr 13, 2004
  • Posts: 75
  • Loc: Birmingham England
  • Status: Offline

Post April 16th, 2004, 10:50 am

Hey i just downloaded Netscape and Mozilla and my site looks sh!te. The shadow on the table and the left menu are not visible as people told me. The main menu is not visible too... Also that .jpg banner thingy looks pants, in IE it looks as i want it to... clear!

Not sure what i want to do at this stage, it takes a long time to design a big site and i don't have the time to make it compatible with all browsers. I'll just have to warn people before they enter... "This site is optimized for IE etc etc". In the future, i need to watch for the popularity of other browsers and adjust my site accordingly.

I am becoming more aware of the use of CSS. Here is what is on my external CSS at the mo...

Code: [ Select ]
BODY {background-image:url('4.jpg'); background-repeat:repeat }

.class90

td { background-image: url('90.jpg');
   background-position: 20px 10px }
   
.class91

td { background-image: url('4.jpg');
   background-position: 20px 10px }

body {scrollbar-arrow-color: fffff0;
scrollbar-base-color:000066;
scrollbar-dark-shadow-color: fffff0;
scrollbar-track-color: 000066;
scrollbar-face-color: 000000;
scrollbar-shadow-color:fffff0;
scrollbar-highlight-color: fffff0;
scrollbar-3d-light-color: fffff0;
}


.class1 A:link {text-decoration: none; color:#990033}
.class1 A:visited {text-decoration: none; color:#990033}
.class1 A:hover {text-decoration: none; color:#990033}
.class1 A:active {text-decoration: none; color:#990033}



.class2 A:link {text-decoration: none; color:#fffff0}
.class2 A:visited {text-decoration: none; color:#fffff0}
.class2 A:hover {text-decoration: none; color:#fffff0}
.class2 A:active {text-decoration: none; color:#fffff0}



.class3 A:link { text-decoration: underline overline;color:#000000}
.class3 A:visited { text-decoration: underline overline; color:#000000}
.class3 A:hover { text-decoration: underline overline; color:#000000}
.class3 A:active {text-decoration: underline overline; color:#000000}

.text {

font-size: 16px;

font-weight: bold;

color:#fffff0;

position: absolute;

left: 16px;

top: 76px;

z-index: 2

}

.shadow {

font-size: 16px;

U

font-weight: bold;

color:#000000;

position: absolute;

left: 18px;

top: 78px;

z-index: 1

}
  1. BODY {background-image:url('4.jpg'); background-repeat:repeat }
  3. .class90
  5. td { background-image: url('90.jpg');
  6.    background-position: 20px 10px }
  7.    
  8. .class91
  10. td { background-image: url('4.jpg');
  11.    background-position: 20px 10px }
  13. body {scrollbar-arrow-color: fffff0;
  14. scrollbar-base-color:000066;
  15. scrollbar-dark-shadow-color: fffff0;
  16. scrollbar-track-color: 000066;
  17. scrollbar-face-color: 000000;
  18. scrollbar-shadow-color:fffff0;
  19. scrollbar-highlight-color: fffff0;
  20. scrollbar-3d-light-color: fffff0;
  21. }
  24. .class1 A:link {text-decoration: none; color:#990033}
  25. .class1 A:visited {text-decoration: none; color:#990033}
  26. .class1 A:hover {text-decoration: none; color:#990033}
  27. .class1 A:active {text-decoration: none; color:#990033}
  31. .class2 A:link {text-decoration: none; color:#fffff0}
  32. .class2 A:visited {text-decoration: none; color:#fffff0}
  33. .class2 A:hover {text-decoration: none; color:#fffff0}
  34. .class2 A:active {text-decoration: none; color:#fffff0}
  38. .class3 A:link { text-decoration: underline overline;color:#000000}
  39. .class3 A:visited { text-decoration: underline overline; color:#000000}
  40. .class3 A:hover { text-decoration: underline overline; color:#000000}
  41. .class3 A:active {text-decoration: underline overline; color:#000000}
  43. .text {
  45. font-size: 16px;
  47. font-weight: bold;
  49. color:#fffff0;
  51. position: absolute;
  53. left: 16px;
  55. top: 76px;
  57. z-index: 2
  59. }
  61. .shadow {
  63. font-size: 16px;
  65. U
  67. font-weight: bold;
  69. color:#000000;
  71. position: absolute;
  73. left: 18px;
  75. top: 78px;
  77. z-index: 1
  79. }


I don't know if the code is correct, i know if works in IE, not sure about the other browsers.

I want to learn as much as possible with CSS.

I have done some basic changes to the page now. Including the central menu lol... It dont look that bad after all. There are just so many endless options.

Again, thanks for your knowledge and time!

Whats the URL to your site/s?
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 16th, 2004, 10:50 am

  • Nucleo
  • SausagePorkPie
  • Mastermind
  • User avatar
  • Joined: Aug 16, 2003
  • Posts: 2297
  • Loc: UK - England
  • Status: Offline

Post April 16th, 2004, 10:58 am

*you should edit your post and put all code in the (code) (/code) tags*

(replace the "()" with "[]" )
Codebuddies - Website Development Resource
|INCLUDE(), INCLUDE_ONCE(), REQUIRE() IN PHP | - / - |MICROSOFT CRM 4.0 ONCLICK EVENT WITHIN FORM |
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post April 16th, 2004, 11:13 am

yar mods don't like it otherwise!

um, this is the results of validating the sites CSS:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.futurecorps.net%2F00.htm+&warning=2&profile=css2&usermedium=all

Sadly there are a lot of errors! Please don't let this put you off though, only about 5% of websites (if that) properly validate!

I don't have the time to go through and have a look at it, but at a glance I would say that 90% of the errors are lack of units for lengths. Where you have 2top:100", for example, change to "top:10px" (px for pixels).

I would also advise you to name your classes more "usefully". Class1 class2 and class3 are pretty useless if you come back to this after 6 months and wish to edit and understand it. Give stuff names.

The shadows don't work because they are filters (I think). Filters ONLY ever work in IE. The menu is dissappeared because the fade/alpha effect will not work in those browsers, the author has prevented this error by not creating the menu. This is known as a "write around"

I would not say that it looks awful. Everything is in the right place and nothing has moved out of place (which really does become a problem). If someone came to your site using mozilla they would not notice that there was anything wrong.

Do not worry yourself toooo much over the conformity to the validation at the moment. I can see you getting all worried but don't. Put it onto your to-do list, and just keep it mind.

The site does not look awful in Netscape.
CSS website design tutorials
  • charmed_male
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Apr 09, 2004
  • Posts: 5
  • Status: Offline

Post April 16th, 2004, 11:59 am

very nice site....
  • arashsami
  • Born
  • Born
  • No Avatar
  • Joined: Sep 07, 2003
  • Posts: 3
  • Loc: Iran
  • Status: Offline

Post April 16th, 2004, 1:48 pm

Its what I got: The page cannot be displayed :(
  • futurebuzz
  • Student
  • Student
  • User avatar
  • Joined: Apr 13, 2004
  • Posts: 75
  • Loc: Birmingham England
  • Status: Offline

Post April 17th, 2004, 9:01 am

rtm223

At this stage, i'm not too worried about the correct CSS coding. It would be great to get it perfect but as long as people can enjoy what i've done then the CSS codes are OK.

Changing the class names is something that i am aware of. You are right, it will become a nightmare in a few months time and i've forgoten all... I only started using and learning about CSS in the last month or so. That's why the names are not what they should be. It won't take long to change them all at this early stage! Good TIP though!

As for the other browsers, the filters won't be a problem but the menu obviously will be. I'll mess around with it and see what works best.

:wink:

To charmed_male, Get a life!
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Joined: Jan 25, 2004
  • Posts: 776
  • Loc: Nippon
  • Status: Offline

Post April 19th, 2004, 6:38 am

To use the true power of CSS, allow your CSS to Cascade! Here's some advice:

Turn this:

Code: [ Select ]
BODY {background-image:url('4.jpg'); background-repeat:repeat }


Into this:

Code: [ Select ]
body{background:url(4.jpg);}
*note: this might be wrong. But use of the background: as shorthand is recommended. It can pack a lot of punch and cut your code drastically.
  1. body{background:url(4.jpg);}
  2. *note: this might be wrong. But use of the background: as shorthand is recommended. It can pack a lot of punch and cut your code drastically.


There's no need for the "repeat:repeat" since that's the default.

Turn this:
Code: [ Select ]
.class1 A:link {text-decoration: none; color:#990033}
.class1 A:visited {text-decoration: none; color:#990033}
.class1 A:hover {text-decoration: none; color:#990033}
.class1 A:active {text-decoration: none; color:#990033}
  1. .class1 A:link {text-decoration: none; color:#990033}
  2. .class1 A:visited {text-decoration: none; color:#990033}
  3. .class1 A:hover {text-decoration: none; color:#990033}
  4. .class1 A:active {text-decoration: none; color:#990033}


Into this:
Code: [ Select ]
.class1 a{text-decoration:none; color:#903;}


The three digit code for color is shorthand. If you've got repeating digits, you can cut them in thirds. For example, #ffffff becomes #fff, #ccaadd becomes #cad. Etc. There's no need for :visited, :hover, or :active. use a{} and you're set.

Same goes for your css in class2 and 3. Somebody correct me if I've stated any incorrect information.
  • Cae
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 25, 2004
  • Posts: 734
  • Status: Offline

Post April 19th, 2004, 10:19 am

just a suggestion, ive been told that when people are looking for something on the web, and they link over to a page with basically, just text on it they get scared off... you might want to consider making a more "visually pleasing" main page...
  • futurebuzz
  • Student
  • Student
  • User avatar
  • Joined: Apr 13, 2004
  • Posts: 75
  • Loc: Birmingham England
  • Status: Offline

Post April 19th, 2004, 3:45 pm

Thanks for the latest replies!

gsv2com

Some very good tips, thanks! I have changed some of the code but still need to work on perfecting it in the near future. Thanks again!

Calendae

Good tip also, but that page is not the main home page. It is an interview page. Cheers for the advice though!

Some updates on the page are that i have created it with css now. I know the code might not be correct, probably far from it but it's my first attempt at doing the css thang :roll: I now know why people rave on about css.... and it aint that hard once you get the hang of it...
  • futurebuzz
  • Student
  • Student
  • User avatar
  • Joined: Apr 13, 2004
  • Posts: 75
  • Loc: Birmingham England
  • Status: Offline

Post April 19th, 2004, 4:02 pm

Hey,

the menu is starting to glitch / stutter or whatever! Might get-rid of the fade effect. Seems to be slowing things down. The image might be doing that too.

It was working great the other day. Man... i don't understand these PC's :evil:

1, 2

Post Information

  • Total Posts in this topic: 25 posts
  • Moderator: Website Reviewers
  • Users browsing this forum: No registered users and 19 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.