Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

the big test....need a critique of the css programming...

P

pelsar

macrumors regular
Original poster
Apr 29, 2008
180
0
israel
this was actually done "from scratch"...i opened up a blank dreamweaver page and brought in the pieces "all by myself (no image ready no fireworks)

anybody want to take a look at my coding and see if i pass beginners coding?

a few notes:
  • the style sheet, which is external, is a bit messy with a few additions that are not needed....
  • menus are in flash with loaded via xml

i didnt use IDs, just classes since i plan on using this basic design as template for the whole site....does that make sense?

http://www.vistaspinner.com/exp/
 
In terms of the CSS, you did very well for someone who describes themselves as a "beginner" - compliments to you, a well earned golf clap.

You need to address four errors in your stylesheet which prevented validation, to see those visit this W3C CSS2.1 validation result page for your site.

Minor things:

  • Use # when defining a hex color, and if all RGB values are the same i.e. #ffffff for white, shorten it by using "#fff"
  • Your use of font-family is repetitive, remember CSS cascades so set that as a default for the body tag or whatever at the top.
  • The final statement in any CSS block doesn't require the ; on the end - very minor thing (not being nitpicky)
Here are some additional comments although I know the site is not finished:

  • Add a title tag
  • The menu options should be mirrored in your footer as text links
  • The font for the content area is one size too small possibly
  • The yellow/mustard text "Explays Really Cool Engine" is too light in color
  • There is too little contrast of the yellows in the masthead logo on the left/top - but that's just me, I know you're shooting for subtle/modern
The menu system is wonderful, only change I'd make in the logic aspect is use the mustard color to highlight the home tab when you're on the home tab (the default).

I really like the almost there borders and gradient fades - an extra touch that adds class to the site. I won't comment on the content, i.e. verbiage, since you did not ask me too. I'll wait for the finished product on that stuff.

-jim
 
thanks for your time....

i definitely appreciate it..and now shall continue with the site (text sizes, colors and the additional pages....)
 
Just a note, you can use id instead of class in a template.

I think you are confused by what it means to repeat. You can have an id that defines "top-navigation", since you will only have it once per page. So, site-wide you could use it a 100 times as long as it's only once per page.
 
yes i am confused...

zarathustra said:
Just a note, you can use id instead of class in a template.

I think you are confused by what it means to repeat. You can have an id that defines "top-navigation", since you will only have it once per page. So, site-wide you could use it a 100 times as long as it's only once per page.
Click to expand...

why would i used and ID on a page that has repeating sections...vs the class. I was under the impression that i use an ID only specific elements that dont show up on a different page.....
 
pelsar said:
why would i used and ID on a page that has repeating sections...vs the class. I was under the impression that i use an ID only specific elements that dont show up on a different page.....
Click to expand...

use id for things that will definitely show up only once on a page; like a footer, header, container of nav bar. Use class for things that might be on a page more than once on a page
 
babyjenniferLB said:
What is the advantage of a id over a class?
Click to expand...

From a pure CSS perspective, they are almost identical. IDs though, have a higher selector specificity. IDs also have other advantages, they can be linked to using anchors since they are unique (<a href="#someID"></a>). When JavaScript is involved, elements with ID attributes are much easier to access (getElementById) than trying to get at a element with a certain class name.

You also have the semantic perspective. When designers/developers use an ID on an element, they know it's the only one on the page with that name. They can use the CSS validator to ensure this fact, which will keep unexpected effects from occurring. Classes are generally more generic (by design, not enforced) so are intended to appear in more than one place on a page. Essentially, you should think out the naming of your IDs and classes and think if it makes sense to use one or another.

http://css-discuss.incutio.com/?page=ClassesVsIds
 
When you say you did this "from scratch", what exactly do you mean? For instance, the menu items link to a third party flash developer FlashDen.net. It looks as though your menu comes from them.

Which makes me wonder what else is "from scratch" or is it that you are looking for comments on the code only?

The reason this is a sticking point for me is because good design is half the battle in web development. Even the Xplay logo is from the xplay web site. Given all the awesome elements up front I wouldn't think it's a stretch to assemble them in Dreamweaver.
 
@mcavjame

I'll give the OP the benefit of the doubt that this site is their first where they attempted a layout beyond tabular and into the new realm of CSS and div's. So by "scratch" it is within that context, not the fact that they did what everyone on the planet does - use open source code to avoid re-inventing the wheel. As a matter of fact, the object IS to share code and create frameworks, API's and even copy/paste simple source when necessary to not only save time, but try to create standards as much as follow them. When you find something open source that works, use it, modify it if the license allows it, and then tell others how you did it if asked.

Nobody here expects anyone, from guru down to newbie level, that "real" web developers/designers create only from scratch. If this is a sticking point for you, or you felt the OP is that naive, let me put it another way - in most shops if you had that attitude regarding open source, you'd not be around long.

You asked to clarify intent in this topic, but there should be no confusion here. This OP *clearly* stated the wanted feedback on the CSS, the words are easily found right within the subject of this thread. Some of us also critiqued the unfinished site as that's what we do here, to help. Your wondering aloud about "what else" is scratch and your tone in general directed at the OP is not warranted bordering on alarmingly distasteful.

And if this replies seems that way to, then so be it. I don't mean to personally flame you but on a professional level - we're going to agree to disagree as to your attitude about development and open source and hinting the OP did something wrong by way of a "sticking point".

Relax a little - maybe give the OP a little credit for integrating all these elements pretty well for the first time out, huh?

-jim
 
SrWebDeveloper said:
This OP *clearly* stated the wanted feedback on the CSS, the words are easily found right within the subject of this thread. Some of us also critiqued the unfinished site as that's what we do here, to help. Your wondering aloud about "what else" is scratch and your tone in general directed at the OP is not warranted bordering on alarmingly distasteful.

-jim
Click to expand...

Sorry if my comments offended. That was not the intent and in retrospect I should have tempered my response.

The OP also clearly states:"menus are in flash with loaded via xml" and you even commented "The menu system is wonderful...", giving any casual reader the impression that the OP had generated the work.

When I wonder what else is borrowed I am trying to give some credit to the design of the art work. I just didn't say it a nicely as I should have. As someone who often designs copy and layout for others, I think it's fair to point out that good artwork goes a long way to promoting a site.

Even with the minor flaws in coding that others posters have indicated, the page still looks awesome because of the visual layout and design.
 
Thanks for backing off on your tone a bit, we do agree the page looks nice so far.

The OP was proud of their accomplishment, even if it's a simple matter to you and me in terms of configuring an XML file and publishing the proper .swf file, or whatever the situation. Likewise, they were proud of integrating that menu system with other elements such as CSS. Let's just try our best not diminish their enthusiasm when they do well.

Thanks for replying and have a great holiday! :)

-jim
 
the "saga" continues...new problem.....

damn floater

http://www.vistaspinner.com/exp/management1.html

you can see in the middle of the page i have the "bottom graphic" with its copywrite notice....(css copywrite)

obviously in my initial design i didnt think it all the way through, this notice has to be on the bottom of the pages
as far as i understand, if i put a div around everything i should then be able to place it "beneath" the div of the text block..(css title wide)

except I'm not succeeding.....

on the index file i placed in "manually"... specified its exact placement, but that is not smart given the different browsers.....and the fact that the amount of text will be changing.

and just to clarify...i'm still in the process of learning the coding, so the various pages are at various stages of being a "mess"...the idea is to come across all the various unforseen problems, solve them, and then go back and do a more general cleanup of the code etc...


comment for mcavjame
dont worry about your comments-i wasnt insulted, just figured you misunderstood...i've been designing for a long time now..and i've decided to enter the world of divs, etc (as opposed to tables) and that is what these posts are all about.

you ask what else is "borrowed"...logo came with the brief, though we did convince the client on some minor changes, color was a not to be changed, flash header on the home page (index) was bought and then modified by us, the menu system also bought, images on the home page bought and modified, images on the internal are temps, but came from the company....concept of the site is a bit more difficult since we've designed probably over a 100 sites so there wont be a single "point of origin" for that.

and enjoy the holidays.......and i appreciate the comments on the site.. especially those concerning the design (always enjoy the compliments)
 
In your CSS, you'll delete the top property for the copyright, then you'll shrink your wraparound (currently it's 1400).
Code: 
#copyright-place {
...
  /*top: 720px; DELETE*/ 
...
}
.wraparound {
...
	height: 1350px;
...
}
Honestly though, I think you should get away from doing so much absolute positioning. As you're noticing, they can cause problems in the long run, and you'll have to update the CSS as the amount of content changes. You can achieve the same effect that you have without using any absolute positioning.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back