Amateur developer humbly requests help!

The first thing you must do is learn to validate your code. The w3c site exists, among other things, for that purpose.

The CSS standard is predicated upon your html code being valid html code. For invalid html the standard does not apply.

So first learn to validate!

If you use Firefox this is easy with the "Web Developer" extansion or the "Html Validator" extension.

You've got a doctype declaration so that's good, but it should always be the STRICT version for a new page.

I recommend a look through the "How to" section of this site.

There are lots of changes for me to make after checking the validator on w3c. I also changed my doctype to strict as
you suggested.

I am not sure what you meant about the firefox extensions? are those add-ons? I will google it to find out : )

Anyway, advice from a guru is inspiration enough to push on!

Thanks again,
blutz

Forget the "Guru" nonsense. I just means I have over 2000 posts here, not that I know anything much.

Right, I was talking about Firefox add ons. Just go to their add on site and look for the titles, or google them.

There's also a thread somewhere on the site about what folks think are essential FF addons for a developer, so do a search for that.

It isn't hard to learn to validate, just read the error messages and think about them. If they really puzzle you ask a question about it here. But validating your CSS and your html is an absolutely essential core skill that you need to be a successful web page writer.

After awhile you'll find yourself writing valid code fairly easily, but there is a learning curve and no one can do that for you.

for the input thus far. I have gone through all of my pages to make
sure that they validated on the W3C website, and so in that aspect
I should be good to go!

one thing that I had to change, which I found a little weird, was that
the spans were causing errors?? What I did was replace all of my spans
with "del", and changed the respective classes to be text-decoration:none;
After doing that all of the errors went away.

Does anyone have an idea why this may be the case?

I also got those FF extensions, thank you for pointing me in that direction.

Overall, I feel that my site is performing much better on all browser types.
: )

does anyone else have input on how I can improve my site?

Super Grateful,
blutz

Well you still have a couple of rather nasty errors, such as repeating the doctype and html tags. At least that's true at the original url you posted in your first message.

This makes me think it's a different page since there's no "del" tags that I can see in the code. Also, it's a really lousy solution. Tags should reflect the meaning of the content, and the "del" tag is for old content that you want to show as having been deleted. It should be used only very rarely indeed.

My mistake, I validated every page except my index page (how dumb of me)

you can see the page with the "del" tags here http://www.holisticfertility.us/index.php?screen=studies

I agree that using these tags is probably a poor practice. I just wonder why the validator
says that those are ok and the span tags are not?

thanks again for the response
blutz

That page isn't valid either!

Span is illegal where you were trying to use it because it is an inline display element and cannot contain block display elements like ul. But "del" is crazy there, if you must have a container for your ul use "div" which is a block display element intended to hold other block display elements. However the "ul" is a block element on it's own and doesn't really need any container in most cases.

Spans and divs are not intended for heavy use - they are purely non semantic grouping elements that should be used sparingly and only when necessary.

I think you are trying to do way too much in developing a whole site as a beginner, myself. We have to learn to walk before we learn to run, and you seem to want to go straight to flying! And falling as a result. Just an observation for what it's worth.

Why not start with a few simple straightforward standalone pages until you learn the tricks of the trade?

so why would I start now! : )

I have never been known to give up so easily!

Don't get me wrong, the help and advice that you have given me
does not go unappreciated.

If you choose to stop up giving me advice because I am a "lost cause"
then so be it!

Of course, your input is ALWAYS welcome because you have been very
helpful thus far!!

Anyway, I am pretty sure all of my pages are, at this point,
100% compliant (I spent quite a bit of time yesterday working on it).

Links:http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dhome&charset=%28detect+automatically%29&doctype=Inline&group=0
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dabout_us&charset=%28detect+automatically%29&doctype=Inline&group=0
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dservices&charset=%28detect+automatically%29&doctype=Inline&group=0
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dstudies&charset=%28detect+automatically%29&doctype=Inline&group=0
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dtestimonials&charset=%28detect+automatically%29&doctype=Inline&group=0
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dprograms&charset=%28detect+automatically%29&doctype=Inline&group=0
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dclasses&charset=%28detect+automatically%29&doctype=Inline&group=0
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dcontact&charset=%28detect+automatically%29&doctype=Inline&group=0

Today I will work to resolve the "del" issue in more detail.

Thanks Again for Everything
blutz

replaced with "strong"

I believe this would be more semantically correct?

blutz

edit - Just seen where you used strong tags and yes they are more appropriate than del tags

This:

<div id="nav"><ul>
<li><img src="images/nav_left.jpg" width="216" height="47" alt="leftnav" /></li>
<li><a href="index.php?screen=home">
<img src="images/nav_home.jpg" onmouseover="this.src='images/nav_homeRO.jpg'" onmouseout="this.src='images/nav_home.jpg'" width="60" height="47" alt="home" /></a></li>
 
<li><a href="index.php?screen=about_us">
<img src="images/nav_about.jpg" onmouseover="this.src='images/nav_aboutRO.jpg'" onmouseout="this.src='images/nav_about'" width="84" height="47" alt="about us" /></a></li>
<li><a href="index.php?screen=services">
<img src="images/nav_services.jpg" width="70" height="47" alt="services" onmouseover="this.src='images/nav_servicesRO.jpg'" onmouseout="this.src='images/nav_services.jpg'" /></a></li>
 <li><a href="index.php?screen=studies">
 <img src="images/nav_studies.jpg" width="67" height="47" alt="studies" onmouseover="this.src='images/nav_studiesRO.jpg'" onmouseout="this.src='images/nav_studies.jpg'" /></a></li>
 <li><a href="index.php?screen=testimonials">
 <img src="images/nav_testimonials.jpg" width="96" height="47" alt="testimonials" onmouseover="this.src='images/nav_testimonialsRO.jpg'" onmouseout="this.src='images/nav_testimonials.jpg'" /></a> </li>
 <li><a href="index.php?screen=programs">
 <img src="images/nav_programs.jpg" height="47" width="83" alt="programs" onmouseover="this.src='images/nav_programsRO.jpg'" onmouseout="this.src='images/nav_programs.jpg'" /></a></li>
 
 <li><a href="index.php?screen=classes">
 <img src="images/nav_classes.jpg" width="69" height="47" alt="classes" onmouseover="this.src='images/nav_classesRO.jpg'" onmouseout="this.src='images/nav_classes.jpg'" /></a></li>
 <li><a href="index.php?screen=contact">
 <img src="images/nav_contact.jpg" width="69" height="47" alt="contact" onmouseover="this.src='images/nav_contactRO.jpg'" onmouseout="this.src='images/nav_contact.jpg'" /></a></li>
<li><img src="images/nav_right.jpg" width="210" height="47" alt="rightnav" />
</li></ul></div>

This here is a mess. Wrapping your ul in a div, using images to tell people what they're clicking on, and using onmouseover onmouseouts for changing the image. Those three are issues. So, I can barely see what's going on with the site in FF1.5, where too many images are simply covering random text here and there.

So!

A ul is a box like a div is a box. They can be styled the same way, so 99% of the time you don't need a div around a ul. Stick your id on the ul instead:

Images: never lock your text up in images. Many people surf without images on, to speed up their crappy dialup loading. Some browsers don't even show images (like Lynx). Some people are blind and rely on a screenreader to read the text to them-- they don't see images either, although many (unfortunately NOT ALL) of them read the alt text of the images... meaning, even if you could read the alt text of your images, many of them don't make sense, since some are links in your navigation and some are decoration. Like, Classes, Contact, Rightnav. Huh?? : )

The answer is to put your decorations in the background properties of CSS-- they don't count as content, do they? Just window dressing. Set them as a background image of the ul, the first li (stick a class on it, for IE6) and the last li if you need to.

For the rest of the images, I'd use Gilder-Levin image replacement. Read about it here: http://www.mezzoblue.com/tests/revised-image-replacement/

It took me a few tries to get it straight in my head, so if you try this method and struggle, that's normal, and you'll get it eventually. Although when I was learning it, I already had the whole How-blocks-and-inlines-work thing pretty straight in my head-- I was not just starting out.

But the basic idea is you stick spans in your a's and the a's have normal clickable text, while the spans sit right on top, holding a background image, which is your image, covering the text. People without images don't notice anything strange, so long as you style your links to look nice : ) An example (with a degrading jpg, sorry: http://stommepoes.nl/Menus/spritesmenu.html )
More info on this technique, as you really will want to make all those separate, slow-loading images into a single "menu" image: http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites

It takes longer to load 5 1k images than it does to load a single image of 5k. This is because your browser needs to ask for each and every separate file, wait for ok, and start loading. You page loaded in little pieces for me, and I'm on high-speed Internetz.

And the mouseover junk... javajunk! Ack! Avoid Javascript like the plague until it's absolutley necessary. Esp since in this case, CSS can do the job better and on more browsers (not everyone lets scripts run on their machines).

It's like the Sprites/Sliding doors I linked you to-- still a single image, but you've got a "normal" part and a "hover" part (and don't forget :focus for teh keyboarders! Not everyone can use a mouse! Let them know where their cursor is sitting on before they click!). Use
#nav a:focus, #nav a:hover to change the position of the background image (or, if getting it right is too complicated, you could have a normal image and a "hover" image, and change the name for the :hover and :focus declaration).

There's lots of stuff for you to learn about, but actually this might be a good site to learn on, as you're not employed by some company with a deadline.

Try to avoid using strong and em where you want to make a visual impact on the page, versus what you'd want someone reading the text out loud to say louder or with emphasis. Like, I like ice cream on my site, but speaking to someone, I might say something like I LOVE! ice cream. One is just to make stuff look pretty on a web page, for design reasons, while the other really means this text Needs To Be Emphasised Cause It's Important!!!!!!!111!1!1 lolz etc.

There's my spew for the day : ) I like the colours of the site, very pretty and feminine.

Some great advice there, I really appreciate it.

Looks like I have a lot more work to do.

I am up to the challenge!

As I look over the information that you sent me and make adjustments,
I will stop back here to give updates on my progress.

Most probably won't care but I think it would be nice to know
that your help is going to a good use.

Again, Thanks a Million!
blutz

Excellent advice there from "Stomme poes".

I'm not suggesting giving up! Quite the contary.

My suggestion was that you make a strategic retreat. Take the time to work on a more basic page or two until you really understand how CSS works with html. It's also easier for us to help you with straightforward pages. Once you understand how to write semantic html and then how to do basic positioning and styling, you can return to the main project and it will go much more smoothly and take you much less time. You might then even get it finished before you will if you continue this way. But even if you don't you will save yourself many many stressful hours if you continue to design and you will be much more productive.

Hmmm, yeah, Ed's suggestion is a good one... put the current site on hold and build a few replicas of it but with reduced navigation and the such. Can you keep struggling through what you've got and eventually get it? Absolutely, I did this with my first drop-down menu (one of Stu Nichols! Whose CSS is very messy and difficult to debug!). But when I was done, I still had trouble adjusting anything later, because it was a sort of mess that I never fully understood (and later, I switched to a Suckerfish because the code was cleaner and made more sense).

I actually never finished building it because I got stuck somewhere and was using another book by the time I fixed it, but building the Bubble Under site with the book
Build Your Own Web Site The Right Way Using HTML and CSS by Ian Lloyd
was invaluable in getting me started. It's old enough to likely sitting free in your local library. Mostly, I like that he explains what you're doing and why.

The second book, not quite as old but still likely old enough to be in your library, really helped me get started with positioning with CSS, in various different ways (without knowing this beforehand I could have never used the techniques I linked you to above-- I saw deathshadow do the menu image replacement thing and after I understood what it was I was like, whoa, dude...). It's called
HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer

Both books write in XHTML, but it doesn't really matter which you use. So, I had started with XHTML because of those books, and learned HTML4.01 later.

And Ed's right about losing less hair-- when tackling something a bit complicated, you can do it faster and easier your first time if the basic parts of it were already built several times first, so that you're only doing a bit that's new. That way, when it doesn't work right the first time you try it (it never does) you know what parts of your code are absolutely safe and what's iffy-- saving you bug-squashing time.

But still, I wish someone had sent me those links back when I was first doing these things-- and in fact I have a few things bookmarked that Dan Schulz had mentioned a year ago, and I'm grateful.

It's nice to hear "Stomme poes"'s recommendations for public libraries since I work on one and have for over 30 years.

Dan Schulz has always emphasised public libraries to people, I think mostly because there are many web developers who are used to learning online for free. Buying a bunch of books doesn't appeal to everyone, and so when recommending a book it's good to say "you may be able to get this for FREE" esp with Dutch people : )