site cretique - advice needed!

[phi0x]

Hi guys! I'm working on a site for my friend, trying to become a better web dev.. but I'm having some trouble.

I know or at least think that the site I'm making could be done a different way that would make it easier to code or easier to manage...

www.candyskyparties.com/alpha/

it seems to work in almost every new browser and even ie6/7.
but in opera it doesn't display properly, and at my friends place his firefox which I assume was an older version, wasn't displaying the slides properly.

any suggestions would be appreciated, I know I'm coding it a little funny, or think I am?

any suggestions on how to redesign the code would be appreciated, for I know there's probably going to be little quirky problems if I proceed to try to finish the site.

[cfajohnson]

Errors found while checking this document as XHTML 1.0 Transitional!
Result: 9 Errors
Address: http://www.candyskyparties.com/alpha/

The text is hard to read because there is not enough contrast between it and the (horribly coloured) background.

The input boxes overflow their container:
http://cfaj.freeshell.org/testing/candysky.jpg

[phi0x]

are you using safari? it renders fine on latest firefox/ie8
it was working fine before i added the new text stuff on ie6/7.

i don't know what other colour schemes to use, my friend wants the sky type background since its 'candySKYparties' she also wants to see more pink which I haven't thought of a way to implement more.

those 9 errors aren't anything serious from what I can see though...

[cfajohnson]

are you using safari? it renders fine on latest firefox/ie8
it was working fine before i added the new text stuff on ie6/7.


It has nothing to do with what browser one is using.

You haven't allowed for viewers with fonts larger than yours.


i don't know what other colour schemes to use, my friend wants the sky type background since its 'candySKYparties' she also wants to see more pink which I haven't thought of a way to implement more.


That background doesn't look anything like sky.

But whatever background you use, be sure that the text colour has enough contrast to be legible.


those 9 errors aren't anything serious from what I can see though...

All errors are serious. If there are errors, a browser may do something that is nothing like what you want.

HTML is simple. If you can't even write valid HTML, do something else.

[JunkMale]

Just look at this behavior of the rolling banner...

This is what the site looks like to a Linux user viewing in Opera.

[phi0x]

I had stated it doesn't work in opera.. I don't know how to fix that part.

if anyone could give some TIPS on what to do to fix things, that would be appreciated!

[cfajohnson]

First, fix the HTML errors. That may solve some of the problems.

If it doesn't, ask here again.

[aj_nsc]

I disagree about the background colour - I think it's an interesting choice and not at all horribly coloured. What is a little ridiculous, however, is the fact that there's white text on it, I can't spend more than two seconds looking at it without tearing up.

[JunkMale]

It don't look too good in FireFox either...

[criterion9]

You might try going dark with the text to contrast such a bright background color. Maybe a black or dark blue/gray would be more readable.

[phi0x]

yeah I think I'll have to make a white foreground matte or something and change up the text colour to something darker, then it will pop out more, while retaining the blue skyish background.

again I would like some help with tips on how my coding style is, and how to improve it. instead of just answers like 'your site has errors, fix them' I know there might be a better way for me to code this so I would appreciate some actual tips or links to really good design flow tutorials to improve my design/coding methods.

[cfajohnson]

again I would like some help with tips on how my coding style is, and how to improve it. instead of just answers like 'your site has errors, fix them' I know there might be a better way for me to code this so I would appreciate some actual tips or links to really good design flow tutorials to improve my design/coding methods.

Where to begin? Take a look at http://cfaj.freeshell.org/testing/candyskyparties.jpg.

First tip: fix the errors in the HTML. There's no point talking about anything else until that has been done. Go to the validator at http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.candyskyparties.com%2Falpha%2F. It tells you what the errors are. There are only 6 errors. It shouldn't take long to fix them.

Second tip: do not use text in your images. Separate them.

Third tip: start with pure (valid) HTML, no CSS or JS. Add rules as necessary to get what you want. Do not use different stylesheets for every version of Internet Explorer.

Fourth tip: do not slice and dice images. The Candy Sky Parties logo should be one image. It will be much simpler to style. See a quick and dirty example at http://cfaj.freeshell.org/testing/candysky.html.

[phi0x]

thanks! I just want to note that the reason I have different css sheets is one is for the contact script and there is one for mozilla/ie8 and one for ie6 and 7 and any other type of browser that doesn't render the regular css sheet. I just have different statements with the same stylesheet because I couldn't get one conditional statement to cover all the IE browsers.

if I don't have text in the images then how can I make it look as good? some text-images have the border padding on the font etc.. styled and can't do that with regular fonts through css. I try to use css font if possible.

I think I'm going to have to redesign it from scratch, the coding that is along with a few graphical updates and slice updates. I'll take screenshots of how it is now so people reading this post can see what's been going on and can learn from my mistakes!

[cfajohnson]

thanks! I just want to note that the reason I have different css sheets is one is for the contact script and there is one for mozilla/ie8 and one for ie6 and 7 and any other type of browser that doesn't render the regular css sheet. I just have different statements with the same stylesheet because I couldn't get one conditional statement to cover all the IE browsers.


If you need that many stylesheets, you must be trying to control the look far more than is actually possible.


if I don't have text in the images then how can I make it look as good? some text-images have the border padding on the font etc.. styled and can't do that with regular fonts through css. I try to use css font if possible.


Of course it can be done in CSS.

[phi0x]

could you show me a site that has text done in css that looks like the candyskyparties logo text or the quote form 'name' etc.. text that has that white padding around the text? I really did not know it could be done in css. could you give me a tutorial on how to do that.

[cfajohnson]

Not those.

I was referring to the lines such as "Check out the Party Gallery!"
and "New Packages Avaialble NOW!".

[phi0x]

Ok guys, I have redesigned the site a bit, started html/css from scratch pretty much.

everything checks out validates, but I already have issues! in various browsers the submit button and the form placement move, how can I make it so that this form stays in the spot i want it to stay for ALL browsers, some of you say don't have alternative css files for IE6/other browsers, but that seems to be the only way so far that I can find that fixes this issue. I am sure there is a cleaner way to code the form so that it fits nicely, do tell!

new:
www.candyskyparties.com/alpha

old:
www.candyskyparties.com/alpha/old

also here are old site screenshots and new site screen shots for people that are trying to follow the thread.

OLD:

IE8:http://img200.imageshack.us/img200/9918/cspie8.png
IE8 Compatibility mode:http://img199.imageshack.us/img199/8928/cspiecompatibility.png
Firefox 3.5:http://img40.imageshack.us/img40/2575/cspmozilla35.png
Opera 10:http://img199.imageshack.us/img199/5641/cspopera10o.png


New:

IE8:http://img200.imageshack.us/img200/7666/newcspie8.png
IE8 Compatibility mode:http://img200.imageshack.us/img200/238/newcspie8compatibility.png
Firefox 3.5:http://img200.imageshack.us/img200/4021/newcspmozilla35.png
Opera 10:http://img29.imageshack.us/img29/9018/newcspopera10.png

[JunkMale]

http://www.csszengarden.com/?cssfile=/193/193.css&page=2 Unusual..!

[phi0x]

http://www.csszengarden.com/?cssfile=/193/193.css&page=2 Unusual..!
whats that have to do with this thread?

[janeyardy]

Your website design and structure is not eye catching it needs to be like that visitors loves to visit you website again and again and on other hand your website needs to be optimize a little more

[phi0x]

okay thanks, would you be able to give me some advice on how to make things better?

also i'm interested to see everyone's own work to see what style of developer you guys are :)

Thanks!

[JunkMale]

whats that have to do with this thread?
CSS thats what.

[phi0x]

the site has been completed! all valid and working :)
hope anyone that is starting out finds help from this thread!
www.candyskyparties.com
enjoy!

[codingisfun]

How did you do that sliding image? I would like to implement. Thanks.

[phi0x]

i used easyslider jquery script
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

then i just edited it a bit to make mine the way it is.

[ssystems]

Images didn't show up in FF 3.5.30729

[phi0x]

did you try in IE or other browsers? I used latest firefox stable build to test and also latest daily builds of firefox 3.7 as well, everything seems to show up from ie6/7/8 ff3.5/3.7 for me along with opera 10/chrome. hmm...

[ssystems]

used 3.5.30729 as I mentioned. The images I was referring to was the images on the slider which I expect to have something but if you took it off disregard this.

[phi0x]

there are 3 images on the slider that should be working. try other browsers? hold shift and click refresh button, see if that fixes your cache or something.

[ssystems]

Nah. Its just because I was looking at your alpha folder rather than the live.

[phi0x]

ah okay
just to clear it up for others always use www.candyskyparties.com not www.candyskyparties.com/alpha when wanting to see the end result :)

[codingisfun]

So you used jquery. Is it necessary? Can the slide show done without it?

[phi0x]

it probably can be done in a different language. i just found the jquery one since i noticed a lot of sites that use jquery had similar features that i liked so i found that script.

[codingisfun]

I saw the slide shows and like it.

Is this a open source? What about licensing?

Thanks.

[phi0x]

it's jquery, 'easyslider' is the name of the script. :)

[codingisfun]

ok. How about easyslider script? Can I use it or will there be a license issue? Thanks.

[Wilco1985]

it is free, I use it on my website too ;)

[phi0x]

honestly, you should go to the easyslider script site of the author. just search google and it will come up within first few listings. you should never trust anothers word when it comes to licensing issues. always check the authors site!

[codingisfun]

I used this script and it's not working in SAFARI. However, it works on IE, Firefox, etc.

How to fix this problem in Safari??

Thanks.

[Haze1434]

To the OP;

Just alerting to the fact that your link for 'services' at the top is currently broken and leads to a 'page not found'.