#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    3
    Rep Power
    0

    My first CSS web site


    Hi

    Any comments, especially CSS wise would be muchly appreciated...

    www.studiomodo.com/bluefountain/cdf

    One thing I did notice was that when you click on a link to go to a page with more content that the one you were on before, that the entire layout shifts...any ideas anyone?

    thanks!

    Modo
  2. #2
  3. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493
    CSS and HTML doesn't valid date. Possible accesibility issues.
    On the up side, looks nice enough

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________
  4. #3
  5. macho member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2002
    Posts
    207
    Rep Power
    12
    nice clean design.

    The shifting is due to browser scrollbar (Firefox). on IE 6 I didn't see any shifting.

    I am curious why your masthead image is a background? why not just use image instead?
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    Originally Posted by bambam
    nice clean design.
    I am curious why your masthead image is a background? why not just use image instead?
    was just going to post the same respons,
    you really ought to use a img-tag with an appropriate alt-text,
    so people that can't view the images get the same information.

    you are constantly using br-tags to create paragraphs, use p-tags thats what they are for.

    on some pages you are using more that one h1 tag,
    http://www.webaim.org/techniques/structure/

    one some pages you are using strong-tag on other b-tag,
    be consequent. (use strong rather than b)


    otherwise a rather nice and clean layout,
    though the header is maybe a bit large (in my opinion)
  8. #5
  9. macho member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2002
    Posts
    207
    Rep Power
    12
    Actually I have the bad habit of using <br /> instead of <p> too. I am breaking the habit with this line of CSS ...

    p { margin: 1.5em 0; }

    Initially I thought the header was too big also, but surfing around the site, its mostly text and boxes, so (good looking) top banner in this case may help the site feel less texty. But I think Ank is right smaller makes more sense, esp in the inner pages. Maybe try different colors/tones for each section (i guess 8 sections 8 colors may sound overkill ... just a sugg though )

    Ditto on the Alt text for header banner.

    Surfing around also feels like you are on the same page. because everything seems mostly the same. for example when I switch back to your site while writing this, I don't know where I was anymore. More visual location cues cooler.

    try placing something like this on each section:
    #home { background: #000 } /* to highlite the tab */
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    3
    Rep Power
    0

    Very constructive critisism


    Thanks guys.

    I am definitely looking into that. I was wondering about the <br> tag. It felt kinda wrong using it.

    Also, about the accessibility, I just ordered a book on Amazon. This is actually a field that interests me a lot, since I do a lot of sites for doctors, so there will be quite a few people with disabilities surfing these sites.

    Generally, how long did it take you to learn and master CSS? I've only been on it for 2 weeks, but I"m already obsessed. It's such a great way to develop web sites. I'm ditching my tables. I am LOVING this!

    Ciao and thanks for the comments!

    Modo

IMN logo majestic logo threadwatch logo seochat tools logo