Complete website design change...yes or no?

Thanks again Stomme. Well, I've been doing some researching on CSS and according to W3C, my site has now got a valid CSS 2.1 code. I would appreciate if any of you could check it out with your own validators and let me know if this is correct. I noticed that apparently there is no way to use css and html and have both valid. I am assuming that if you have one or the other validated with no errors, then it doesn't make much difference how many errors the other has? Maybe I'm wrong, but I did check out several sites on the web just for research sake, and they all had either valid html and invalid css, or vise versa. So I hope I'm correct on this and my site is indeed validated as it should be with the css. I think my home page has 19 html errors or so, but they all seem to relate to the css style sheet that is being used, so I'm not sure how to correct them without messing up the CSS. Or at least that is how I understood the explanation of the errors. Please let me know if I am not correct.
Anyway, just wanted to pop in and say thanks again for the information and to see if I could get some of you to see if I really have validated my page/pages. As always, any feedback is good feedback and I welcome any and all comments, suggestions, or tips.

Thanks!

 

Scrap both templates. In my opinion, you need somthing a bit more flashy for your visitors.

 

If you want to validate the HTML, go here: http://validator.w3.org/
CSS: http://jigsaw.w3.org/css-validator/

Lots of us have both valid HTML and CSS... and our HTML is strict doctype.

The reason 99% of the web is invalid crap is because lots of people build websites and don't know the difference. The rest should, and don't care. Google itself doesn't validate because they need their page (their very very simple search page) to work on all 200+ browsers, some 15 years old, whatever, around the world. Yahoo's doesn't validate because they simply wrote sh*tty code and got away with it. It's probably biting them in the butt now-- their code is so unmanagable, it must cost an arm and a leg to change or fix anything. Have you seen the amount of code on a single Yahoo page?? Good god, I couldn't wade into that with just waist-highs.

Browsers are extremely tolerant of mistakes though, which is why everyone can get away with it. The thing is, while sometimes simple stuff like an unclosed tag looks okay in FF and IE, other times it destroys the page. Since you'll never know which error will do what, it's easier to have 0 errors. Easier to change the page later, easier to add stuff, etc.

You CAN have valid HTML and CSS. But it's really really hard when you're flailing about not know how stuff works. After about a year of doing HTML and CSS, learning from the bearded, hooded, crusty gurus, I still run into stuff and I'm like wtf? It's not easy... but easy sites aren't hard.

If you must pick between the two, I'd say it's more important to have valid HTML. However, valid doesn't mean good. It just means it follows the rules and doesn't break any. Using a <p> around a list item is damn strange and makes no sense, but it doesn't break a rule so the validator won't say boo. Having <p></p> empty and floating around the page is also wrong, semantically (it makes no sense), but it's legal. There's a lot to this. But anyway, if the HTML's valid, the message can get out. CSS, you either get the effect you want or you don't. When you don't, you can go bug hunting. A lot of errors can sit in the CSS and the browser won't notice because some other rule will accidentally take up the slack.
Kinda like mutants keep on living despite all the errors in their DNA. Sometimes mutant websites just waddle on...

Check out that book again. A moron like me was able to read it, having never heard of HTML or CSS before May of 2007, having never coded anything (zero programming experience, hell I can't even work most stuff on a Windows machine), and here I am, on teh Internets acting like I know it all. Isn't it great? You can do it too. But it's a choice you'll have to make. And you'll have questions... that's what the forums are for. (not all answers on a forums will be right, of course)

 

Ok all...it's been a while since I've been on here, but I have been working everyday on the site. I've got some pretty good results as far as achieving the design I was aiming for. Still have a few bugs to work out though. The biggest problem I've got right now is with the new layout when viewed in Firefox. Everything looks good...except that it is stuck over to the left side and I cannot get it to center in the browser window. Looks perfect (to me at least) in Explorer....but nothing I have done so far can get it to be centered in a Firefox browser. Any ideas on this would be greatly appreciated. I've read through several forums looking for this topic and found some ideas, but none of them have worked so far, so I'm back to square one on this problem. At least the site is looking better than what it did just a month ago, at least in my own personal opinion.

As for the validation, I keep changing and changing code and I've had it down to as low as 16 errors in html and none in css, but I can't seem to get it any lower. Biggest problem with this is that I've got some tracking codes that I had to enter into my site for some of the programs that I'm using....and their code isn't valid. But, if I change the code to make it valid, then their code doesn't work. I've contacted them about the errors, but they all seem to come up with the same response...it's not a big deal and as long as it is working, there's no need to change it. So, I'm back to square one on that problem as well. Like I say, I'm still valid in css, but I have cut down the number of html errors a lot, so I'm making progress anyway.

I guess that's about it for this go around. I would still appreciate if any wants to check out my site and offer up some suggestions on what it needs, what it doesn't need, etc., etc., etc. If you don't remember the url, here it is, but you will probably have to copy and paste it since I don't think I have enough posts to have active links yet:

http://www.jbandbenterprises.com

As always, I appreciate any and all feedback as this is, and will continue to be a work in progress, and I'm always looking for ways to improve it.

Thanks to all!!

 

I think the site needs some backround color.
but like you, i am new to this game.
i started out with a template and changed it vastly.

 

I just looked with FF1.5 and it is centered... though I'm rather surprised that it is, looking at the beginning of the code : ) You've got a big error.

A page should start with a doctype (yours does, good), and then the <head> (yours does, good again) but then all the meta tags, style tags, script tags... those need to stay in the <head> and the <body> comes AFTER the </head> Also, tags need to be opened and closed in a certain order. You cannot do this:
<p> blah la la la <span> blah blah </p></span>

The span was opened inside the p, so it has to be closed inside the p.
<p>blah blah la la <span> la la la</span></p>

So your header is screwed up in the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"[b]where's the rest of the doctype?[/b]>
<html lang="en">
<head>
<meta content="GMefQ29UKSVepoxBJ3tDOeR0L4F3fYzzoUgwL1HZLS4=" name="verify-v1">
<meta content="text/html; charset=ISO-8859-1" [b]need end tag > here[/b]
 [b]need start tag < here[/b]http-equiv="content-type">[b]wheres the rest of this tag??[/b]
<title>The Best Work From Home Business Opportunity Resources</title>
<meta content="text/html; charset=ISO-8859-1" [b]this is a repeat![/b]
 http-equiv="content-type" [b]this tag is not finished![/b]><meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org">
<meta name="description" content="Are you curious about working from home using the internet? The information and products you'll find here are some of the best home based money making free and paid work at home programs on the web">[b]excellent descriptiong tag[/b]
<meta name="keywords" content="work from home, work at home, home based business, work from home programs, online business, work from home jobs, make money online, website design, website promotion, search engines, internet marketing">
<meta name="robots content="><meta name="revisit-after" content="1 day"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">[b]finally, the content-type tag is correct.. delete the others as they are not even finished[/b]
<style type="text/css">
span.c43 {color: #000000; font-family: verdana; font-size: 70%}
span.c42 {color: #CC3300; font-family: verdana; font-size: 70%}
img.c41 {visibility: hidden; width: 0px; height: 0px;}
div.c40 {border: 1px solid ; width: 468px;}
div.c39 {text-align: justify;}
p.c38 {text-align: center;}
span.c37 {color: rgb(102, 102, 102); font-family: verdana; font-size: 70%}
table.c36 {text-align: left;}
td.c35 {width: 468px; text-align: left;}
h1.c34 {text-align: right;}
span.c33 {font-weight: normal;}
h2.c32 {text-align: center;}
big.c31 {text-decoration: underline;}
div.c30 {text-align: center;}
em.c29 {font-weight: bold;}
li.c28 {font-weight: bold;}
p.c27 {text-align: left;}
div.c26 {text-align: center; color: black;}
a.c25 {font-weight: bold;}
span.c24 {color: black;}
table.c23 {border: 1px solid rgb(238, 238, 238); background-color: rgb(255, 255, 255); width: 160px; line-height: 1.5; font-family: verdana,serif; font-size: 11px;}
td.c22 {padding-left: 5px;}
span.c21 {color: #CC3300; font-family: verdana; font-size: 80%}
span.c20 {font-weight: bold; color: black;}
div.c19 {text-align: left;}
span.c18 {text-decoration: underline;}
span.c17 {color: black; font-family: verdana; font-size: 80%}
div.c16 {text-align: center}
table.c15 {width: 200px; border-collapse: collapse; background-color: rgb(153, 153, 153);}
td.c14 {background-color: rgb(204, 204, 204);}
small.c13 {color: red;}
big.c12 {color: black;}
br.c11 {font-weight: bold;}
br.c10 {color: black;}
big.c9 {color: red;}
a.c8 {color: black; font-weight: bold;}
div.c7 {text-align: center; color: rgb(255, 255, 102);}
span.c6 {font-size: 70%}
table.c5 {width: 90%; text-align: left; margin-left: auto; margin-right: auto;}
td.c4 {width: 20%; text-align: center;}
img.c3 {width: 770px; height: 119px;}
div.c2 {text-align: left; margin: auto}
span.c1 {font-weight: bold;}
</style> <!-- trafficswarm.hitslink.com/ web tools statistics hit counter code --><script
 type="text/javascript" id="wa_u">
</script> <script type="text/javascript">
//<![CDATA[
wa_account="johnbran"; wa_location=24;
wa_pageName=location.pathname; // you can customize the page name here
document.cookie='__support_check=1';wa_hp='http';
wa_rf=document.referrer;wa_sr=window.location.search;
wa_tz=new Date();if(location.href.substr(0,6).toLowerCase()=='https:')
wa_hp='https';wa_data='&an='+escape(navigator.appName)+ '&sr='+escape(wa_sr)+'&ck='+document.cookie.length+
'&rf='+escape(wa_rf)+'&sl='+escape(navigator.systemLanguage)+
'&av='+escape(navigator.appVersion)+'&l='+escape(navigator.language)+
'&pf='+escape(navigator.platform)+'&pg='+escape(wa_pageName);
wa_data=wa_data+'&cd='+
screen.colorDepth+'&rs='+escape(screen.width+ ' x '+screen.height)+
'&tz='+wa_tz.getTimezoneOffset()+'&je='+ navigator.javaEnabled();
wa_img=new Image();wa_img.src=wa_hp+'://counter.hitslink.com/statistics.asp'+
'?v=1&s='+wa_location+'&acct='+wa_account+wa_data+'&tks='+wa_tz.getTime();
document.getElementById('wa_u').src=wa_hp+'://counter.hitslink.com/track.js'; //]]>
</script><!-- End trafficswarm.hitslink.com/ statistics web tools hit counter code -->[b] where's the closing tag for head?[/b]
[b]<body
 style="direction: ltr; background-position: center; background-image: url(http://www.jbandbenterprises.com/images/g11line29ltgreen.gif );">[/b]
<div class="c16">
<table style="background-color: rgb(255, 255, 255); width: 890px; text-align: left; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="0" cellspacing="0"><tbody>
...etc...

Code (markup):

So basically, change the first part of your page to this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>The Best Work From Home Business Opportunity Resources</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="GMefQ29UKSVepoxBJ3tDOeR0L4F3fYzzoUgwL1HZLS4=" name="verify-v1">
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org">
<meta name="description" content="Are you curious about working from home using the internet? The information and products you'll find here are some of the best home based money making free and paid work at home programs on the web">
<meta name="keywords" content="work from home, work at home, home based business, work from home programs, online business, work from home jobs, make money online, website design, website promotion, search engines, internet marketing">
<meta name="robots" content="index, follow">
<style type="text/css">
body {
background: url(images/g11line29ltgreen.gif ) center center;
}
span.c43 {color: #000000; font-family: verdana; font-size: 70%}
span.c42 {color: #CC3300; font-family: verdana; font-size: 70%}
img.c41 {visibility: hidden; width: 0px; height: 0px;}
div.c40 {border: 1px solid ; width: 468px;}
div.c39 {text-align: justify;}
p.c38 {text-align: center;}
span.c37 {color: rgb(102, 102, 102); font-family: verdana; font-size: 70%}
table.c36 {text-align: left;}
td.c35 {width: 468px; text-align: left;}
h1.c34 {text-align: right;}
span.c33 {font-weight: normal;}
h2.c32 {text-align: center;}
big.c31 {text-decoration: underline;}
div.c30 {text-align: center;}
em.c29 {font-weight: bold;}
li.c28 {font-weight: bold;}
p.c27 {text-align: left;}
div.c26 {text-align: center; color: black;}
a.c25 {font-weight: bold;}
span.c24 {color: black;}
table.c23 {border: 1px solid rgb(238, 238, 238); background-color: rgb(255, 255, 255); width: 160px; line-height: 1.5; font-family: verdana,serif; font-size: 11px;}
td.c22 {padding-left: 5px;}
span.c21 {color: #CC3300; font-family: verdana; font-size: 80%}
span.c20 {font-weight: bold; color: black;}
div.c19 {text-align: left;}
span.c18 {text-decoration: underline;}
span.c17 {color: black; font-family: verdana; font-size: 80%}
div.c16 {text-align: center}
table.c15 {width: 200px; border-collapse: collapse; background-color: rgb(153, 153, 153);}
td.c14 {background-color: rgb(204, 204, 204);}
small.c13 {color: red;}
big.c12 {color: black;}
br.c11 {font-weight: bold;}
br.c10 {color: black;}
big.c9 {color: red;}
a.c8 {color: black; font-weight: bold;}
div.c7 {text-align: center; color: rgb(255, 255, 102);}
span.c6 {font-size: 70%}
table.c5 {width: 90%; text-align: left; margin-left: auto; margin-right: auto;}
td.c4 {width: 20%; text-align: center;}
img.c3 {width: 770px; height: 119px;}
div.c2 {text-align: left; margin: auto}
span.c1 {font-weight: bold;}
</style> 
<!-- trafficswarm.hitslink.com/ web tools statistics hit counter code -->
<scripttype="text/javascript" id="wa_u"></script> <script type="text/javascript">
<!--//--><![CDATA[//><!--
wa_account="johnbran"; wa_location=24;
wa_pageName=location.pathname; // you can customize the page name here
document.cookie='__support_check=1';wa_hp='http';
wa_rf=document.referrer;wa_sr=window.location.search;
wa_tz=new Date();if(location.href.substr(0,6).toLowerCase()=='https:')
wa_hp='https';wa_data='&an='+escape(navigator.appName)+ '&sr='+escape(wa_sr)+'&ck='+document.cookie.length+
'&rf='+escape(wa_rf)+'&sl='+escape(navigator.systemLanguage)+
'&av='+escape(navigator.appVersion)+'&l='+escape(navigator.language)+
'&pf='+escape(navigator.platform)+'&pg='+escape(wa_pageName);
wa_data=wa_data+'&cd='+
screen.colorDepth+'&rs='+escape(screen.width+ ' x '+screen.height)+
'&tz='+wa_tz.getTimezoneOffset()+'&je='+ navigator.javaEnabled();
wa_img=new Image();wa_img.src=wa_hp+'://counter.hitslink.com/statistics.asp'+
'?v=1&s='+wa_location+'&acct='+wa_account+wa_data+'&tks='+wa_tz.getTime();
document.getElementById('wa_u').src=wa_hp+'://counter.hitslink.com/track.js'; //--><!]]></script>
<!-- End trafficswarm.hitslink.com/ statistics web tools hit counter code -->
</head>
<body>
<div class="c16">
<table style="background-color: rgb(255, 255, 255); width: 890px; text-align: left; margin: 0 auto;"
 border="0" cellpadding="0" cellspacing="0"><tbody>
...etc...

Code (markup):

The margin: 0 auto is just a shorter way of saying margin-left: auto; margin-right: auto; and I'm assuming there's no top or bottom margin (the 0) since you don't mention it at all. The body style got moved to the CSS style tag. I otherwise did no look at your css to see if it's pretty or valid or whatever, but the beginning of a page is very important so, this should make everything a little cleaner. And so long as you have a width set on that table (which you do) and margin: 0 auto, it should center in all browsers except IE5.5 and below (cause that's a retarded browser which doesn't work correctly with CSS). If you care about those ones, the body needs text-align: center; added to the other declarations... you already have text-align: left; on the table so the "center" on the body will center for IE5 and the text isn't really centered because you moved it back on the table, so, good : )

The meta tag revisit-after is NOT supported by any browsers AFAIK, so I removed it. I kept a valid version of the robots tag, however you don't need it because unless you tell them NOT to index or follow external links, they will be default. But I left it in there, I dunno, just because.
You can read more about robot tags here: http://searchengineland.com/070305-204850.php

 

thanks for the tips

 

The second design