The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Code Critique

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • #31401

    Hello all. I just finished mocking up a page for a site that I’m working on. I just thought I would put it out there for anyone to take a look at my coding and let me know if I’m doing anything wrong or making any major mistakes. I’m still a newbie at web design/development so any critiques would be greatly appreciated. I wouldn’t want to continue making big mistakes or develop any bad habits this early on! Anyway, thanks for any feedback!


    There is no closing :

    • Twitter

    • Facebook

    But I would do it differently anyways. The

      itself can be coded just like the div, so I would do something like


        Also, I see you’re using underscores, you’ll find that the majority of people (I think) are using dashes for HTML & CSS. So it would look like

          . To me, that looks a lot cleaner. But it comes down to preference.


          Ahh, nice catch on the closing tag. (I seem to do that all the time! :) I always forget that you can apply an id directly to the ul tag instead of adding yet another div. Thanks for the input.


          Another, possibly silly question… I’m eventually going to need a dropdown menu from one of the navigation buttons. What is the easiest way to accomplish that? I’m having a heck of a time getting it to work properly. Any insight would be great. Thanks!


          You can do it with CSS only by showing the child ul by hover.

           ul ul { display:none;}
          ul li:hover > ul { display:block;}

          Anyone have any suggestions on how I could reduce the file size of my larger photos? A couple of them are hitting 260k. That seems pretty large to me, but I could be wrong. The main problem is that I’m using a transparent PNG because I have CSS3 gradients in the background. Anyway, thanks for the advice everyone.



          I’m looking at the site in chrome with full screen and the right sidebar floats all the way across the page. Have you done cross browser testing?


          @iancoates – It should be fixed now. There were a couple lines of code that should have been deleted but weren’t. Thanks for that catch.



          So looking at it from a glance it looks great

          Things to consider is that javascript slideshow you have going, see if you can document.ready() condition where all images load before slideshow renders them. Another thing is image condensing, checkout like yahoo smush, takes most files without killing image quality and makes em pretty.

          Not sure if thats the review you want, but just something different…



          Thanks Vinny, I’ll definitely check into that. Unfortunately I know little to nothing about JS so I’m your typical cut and paster until I can master css… then I’ll move on to learning JS. Thanks again!


          Looking Good! Im not one to talk but Its always nice to have all the indents of elements lined up. Its easier to read and looks better and more professional to any who views the code! :)


          you have a lot of CSS errors

          You should validate your HTML/CSS as much as possible then update this to make it easier on yourself.


          Will CSS3 features and vendor specific prefixes validate properly?


          Thanks for the tip, that really helps my understanding of validation.


          @TheDoc, while you are right that most people does not use underscores in their CSS selectors, it is not merely due to preference. Some older browsers cannot handle the underscores, and thats why that people should avoid using them.

          There is one alternative to dashes for word separation, which I’m more fond of. Maybe it is due to my background as a programmer – who knows. I’m talking about camelcase – or just a capital letter to indicate a new word. Some examples:
          – page-wrap => pageWrap
          – some-long-name-for-a-css-selector => someLongName….

          You get the picture.

          It doesn’t matter which one you go with. Some might argue that using camelcase is giving you smaller file sizes but that would be nitpicking in my opinion… The most important is what you find easier to read.

          When I’m writing css I always name id’s with uppercase first letter (capitalizing each word – tho most of them is single words – examples: #Header, #Footer, #Content, #Menu…). Classes is named in camelcase- examples: .activePage, .fancyHeader, .longStupidClassName… I have not made any decisions on how to do the naming, it is just a de facto standard that has developed through years of work :-)

        Viewing 15 posts - 1 through 15 (of 15 total)
        • The forum ‘CSS’ is closed to new topics and replies.