Jump to content

critique my first css site plzzzzzz


Recommended Posts

Hi everyone,I am pretty new to css. I basically sat and combed through the tutorials here on w3schools. I have done a site and just need your honest opinion plzzzzzz.http://tester-page.ebdadventist.org/index.htmlHOW IS THE DESIGN & LAYOUT? DOES THIS WORK IN YOUR BROWSER/ TEST BROWSER?The working links thus far- youth ministries (above in red)--> adventurer club and its sub-menus. (I did not want to do the whole thing to realise that i have to do it all over again)I tested it in the following broswers:AVANT BROWSER 10.2 BUILT 52CRAZY BROWSER 2.0.1- the same as avantFIREFOX 1.5.0.6INTERNET EXPLORER 6.0NETCAPTOR 7.5.4OPERA 8.54TABLANE 1.5testing in the other main browsers for me will be appreciate- such as netscape, macintosh and linux browsers, etcany other constructive criticims/ comments will be appreciatedONLY in Firefox (my default browser) and Opera shows it as intented. In all of the other browsers above, the right side slight shifts to the left and the paragragh first letter special effect does not show.Thx in advance....Donna

Link to post
Share on other sites
  • Replies 54
  • Created
  • Last Reply

Top Posters In This Topic

Hi Cronthenoob,Thx for your critique. Appreciated. But what do u mean by "blocky"? U mean its grainy? Poor? And does that include all of the images?Perhaps I'm too cheap on image size- trying not to make them pass a certain amount of kb. lol. I'll have a look at it definitely though.Donna

Link to post
Share on other sites

Not bad!I'm not sure about the background image either. It seems too much like a badly compressed gif image or something.However, if that is the style you are after, who am I to say it looks bad. :)As far as your IE problem, I would use a conditional comment to add a style sheet for IE only.Put this under your style sheet link:

<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen, projection" href="style_IE.css" /><![endif]-->

That will check for IE browsers v6 and blelow. Then it will display that style sheet for IE only. That way you can change whatever settings you want so it displays correclty in IE without fear you will mess up your pages in every other browser.Good luck!

Link to post
Share on other sites

Looks pleasent. What do you intend to use it for? A blog?Anyway... the only thing besides the quality of the images, already mentioned, is that in IE7, the search box is a little too big. It goes over the black line. If there isn't a min/max-width, I suggest you use it. IE7 supports it.And try to use a clean gradient, unless this grainy feel wasn't the intended effect.

Link to post
Share on other sites

Hey,Your responses are awesome--> I am listening to all cause thats how we learn.ok- i see what u mean about the blocky look Cronthenoob. i'll fix that.badly compressed background image S@m? hahahahaa... i'll smooth that out. thxthx for the IE7 observation boen robot. i'll definitely have to put a max-min on that box.thx again all!!!!

Link to post
Share on other sites

WHAT!!!!!???Are we looking at the same site? Bloody awful is what i'd say. The images are shockingly bad, the header is a mess and that yellow & black mess, whats that all about.However i do like your main content box, that is nicely laid out. So thumbs up for that.But the top section stinks, like a skunk, a skunk rolled in vomit.

Link to post
Share on other sites

yah, i don't know about that fade effect in the background. on the other hand, this didn't draw to mind an image of a skunk swimming in vomit either. biteme, you're never allowed to see any pages i make ever!btw, who's the random dood hiding behind the big star? he looks angry or something . . . this disease is scared of him!

Link to post
Share on other sites

ok BiteMe and a disease.... a skunk in vomit huh? and disease- u dont have to be afraid of the dude. lol.well- i dont feel offended at all although that was quite harsh. i just had a big laugh thats all.anyway- its my second shot at designing an afficial website- my first at usung css. and i'm still learning.i dont know what browser u guys r using- but check back tomorrow for a lil' revised version tho.I guess its better that i get the bad comments here rather than when its officially up.Ible-White

Link to post
Share on other sites

hi everyone again,i listened attentively to all the critiques. Thanks all.i did some tidying up somewhat.i dont know what u will think- but shoot back the comments again at me plzzzz.i know one of the big things was the header image- so i replaced it and did a fresh one.well- i am just getting into graphics design as well.so- throw the comments at me- i wont cry. hahahaif it still doesnt measure up- let me know.THANKS!!!The old version: http://test-page.ebdadventist.org/The updated version: http://tester-page.ebdadventist.org/

Link to post
Share on other sites

Thats the spirit lad, dont take things too personal. Good on yer :) The new one is much better. im not feeling the green/yellow flava you got at the top, but this is much better.However (you may know this already) it has 19 errors against w3c validation.looky>>Shout back if you need a hand corretcing them.Get the code valid, it will improve your skill set and make the css, more browser effective

Link to post
Share on other sites

yah! this is much much better! the only thing i have left is maybe changing the top colour to match the sidebar? then again, the big star does match both and kinda brings it together, so this one's up to you. also, i really like the pinstripes just above the tabs--they break it up and draw the eye.a+ for effort!

Link to post
Share on other sites

The search box is still too big. I don't see anything in the CSS changes either. I think you don't need to add a class or ID though. IE7 supports attribute selectors, so you can do something like:

input[name=quicksearch] {width: whatever suits you}

Then again, I think there was a problem with forms that don't use IDs on their field, so you might want to add an ID too. At that point, it get's simpler and more cross browsery:

#quicksearch {width: ...}

After looking at the source code, I have some more notes. There's nothing visibly wrong with it, but there are still semantic errors, besides the validating problems:1. You are using inline links. I mean "<a href="...">...</a><br />". Use lists instead. That is "<li><a href="...">...</a></li>". Your #nav is the only thing using lists as carriers.2. A lot of other <br /> elements between divisions. Use margins in the CSS if you need extra space.3. You're also using empty <p></p> elements as spacers. Use margins!4. Your whole top box is semantically incorrect. Use lists for the menu and put the links inside each list item. Get rid of the whole <strong> element in it and use "font-weight" on the <li>s instead. You may want to remove the "|"s and use :before and/or :after with the "content" property. It won't work for IE6 and IE7, but it still looks nice. If you really need them, I suggest you use images that you load only for IE browsers.5. Your form looks really empty. How about putting some of the content from above in it as a group. Like this:

<form action="http://www.biblegateway.com/quicksearch/" method="post"><fieldset><legend>Look up a word or passage in the Bible at www.biblegateway.com</legend><input name="quicksearch" type="text" size="17" /><input type="submit" value="Search Bible" /><fieldset></form>

You're also going to need some clever CSS for that though, so be careful.6. The target attribute has been removed in strict XHTML. Use JavaScript instead. Oh and by the way, the only browsers you need to test on are different versions of IE, Firefox and Opera. Other Windows browsers use one of those browser's rendering engine, so it's pointless to test them.

Link to post
Share on other sites

hmmm... i did not have any chance 2day to do any work on the site- had ppl over all day... was dying to see what u guys had to say about the updated one.anyway- thx for the comments again--> i'm trying.well- to be honest- i really forgot to validate it for errors. thx for pointing that out. i'm gonna try to fix them myself first before i ask for any help tho.you'll hear from me soon again.... gone to see what more i could do to improve...

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...