G'day all,
I have taken up web development as a hobby, and I offered to create a site for my father.
http://www.holisticfertility.us
as you can see, I could use any advice that I could get, and any tidbit of information will help.
the site does look decent in firefox and safari, but IE is giving me major problems.
i don't want to have to go to table design
thanks in advance!
blutz
ps you can see my css at holisticfertility.us/styles.css
The first thing you must do
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.
Thanks Ed for the advice
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.
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.
Thanks Ed
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
blutz wrote:for the input
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!
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.
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.
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.
Oh you are right
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
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?
I've never been afraid of failure
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
del issue fixed
replaced with "strong"
I believe this would be more semantically correct?
blutz
Why don't you use
edit - Just seen where you used strong tags and yes they are more appropriate than del tags
This:[code]<div
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:
stomme poes thanks
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
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
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
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
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 : )