Shorttag validation error

HTML & CSS
21

And here I am, thinking it was done in 4; just goes to show how little I know. My site was originally done with one of those “diy-packages” involving lots of templates, remote java scripts and more of that nonsense by an “expert”. Ditched the expert as well as the package and changed to handcoded. Site is now lots quicker and ranks better.
$64000 question: how do I change the current hybrid to proper HTML4?

I can move to CSS formatting as soon as I have an idea about what the quickest way of learning it is. Anything decent ( practical ) online available?
I am a quick study for most things that are presented in a style that suits me, but hopeless if the presentation does not appeal to me. That eliminates anything involving money before I can see if I like it or not.

22

Home - Build Your Own Website The Right Way Using HTML & CSS, 3rd Edition is an excellent place to begin. It’s not free, but it’s well worth the money.

23

The problem with buying books before seeing them, is that they end up gathering dust if the presentation doesn’t appeal to me. It’s not a matter of being simple or complicated, but purely like it or don’t.

24

LOL. Guess I should have phrased it as: Anything available online that comes recommended along the lines of public domain/freeware that allows me to have a taste?

25

You can download free sample chapters of each SP book. That should give you a good taste of whether it’s for you or not. :slight_smile:

26

It seems I’ve got a new project going: learning css asap. I am now working my way through various publications to find what suits me best.

Many thanks to all that helped with my questions.

27

I started out on that book (1st edition tho).

It has you build a separate website. I would advise that you don’t immediately try to apply the stuff you do/learn in that book to any of your production sites. I made the mistake of trying to build something myself after getting halfway through that book. When everything failed I couldn’t see why. It was because the book is grabbing your hand and leading you step-by-step to building ONE site using PARTICULAR (and good) techniques.

With HTML and CSS, Tim Toady applies (more than one way to do it). When you start, you’ll always need to do something different, and then you aren’t sure what to chance elsewhere.

So personally I’d say, use your spare/free/down time to go through the book, do the exercises, ask any questions here on the forums, and get a feel for what he’s saying. The CSS he uses for positioning is really, really, really barbarian-cavemen level, uber-entry level, which is fine but not something you can then go out and use with confidence elsewhere. When you get that caveman basics of CSS and proper HTML (and when you build other things, use the strict doctype and let the validator point out your mistakes… I learned a lot of markup rules that way before I learned how to read the non-plain-English docs), try another book, or any decent online tutorials (like htmldog.com, avoid w3schools crap) to get a better feel of positioning.

The style stuff you can replace with CSS like Christian’s example is easy to learn and makes sense. Changing fonts and colours and such, you’ll see immediate savings and it’ll make you happy.

Removing stuff like align and tabled layouts is harder, and you’re required to lose some hair learning the better way around that.
When you’re at that point, be content with a strict doctype and “invalid” code, so that you keep getting told what’s wrong and you figure out how to “fix” it when you feel you’re at that level to do so.

Took me at least 2 years to feel confident… I’m now almost 6 years in and always learning new stuff, even with boring simple HTML and CSS. Because the basics are simple and the complexity is surprisingly deep.

28

Not surprisingly, those are exactly the two subjects I need; positioning images and getting rid of tables. My website is ( and will remain ) very plain on purpose, and I have no need or desire to implement flahs things.

:eek: I don’t have that much left, should I trade my comb in for some polish?

29

Not surprisingly, those are exactly the two subjects I need;

Yes, and they’ll be the last things you fix, since my opinion is positioning with CSS is one of the harder things to master with it. Some people call it PCSS or CSS-p or something…

If you absolutely want to tackle this yourself (rather than hiring someone who already does CSS), be willing to let your pages sit as they are for a while… maybe a long while. In the meantime go through books and tutorials and practice on non-production stuff. Validate often and after every change; have 5 browsers open while you do this and F5, F5, F5, F5, F5 after every change while building (esp when starting out, this helps prevent you getting someone looking pretty nice in 4 browsers and then total wtf in 1); lather-rinse-repeat until you feel ready to tackle sites who are online (or if you have a dev server, make a separate copy that can never interfere with the live-working-version and try stuff out there).

I don’t have that much left, should I trade my comb in for some polish?

You should probably consider purchasing a parakeet. Have him or her sit on your head and peck you at regular intervals.

30

Yes, absolutely necessary that I do it myself. I started off with somebody doing it for me, and it drove me nuts. My needs are very specific and I litterally spent hundreds of hours trying to explain, but got nowhere.
I suppose it could be done by a high level specialist, but that is many thousands out of the budget. Apart from that, their are the elements of “trial and error” and also “gut-feeling”. I simply can not explain the latter to anyone, and the former is just too much hassle going through a third party.

Any suggestions for tutorials or books?

31

My second book (after Ian’s) was another SitePoint book (total accident) called HTML Utopia: designing without tables using HTML and CSS by Dan Shafer and Rachel Andrews.

First half of the book was very similar to Ian’s in that it explained very basic basics… second half of the book was where I learned more: they started with some good (x)HTML and showed how to style boxes and position them (make sidebars, footers, etc). It went only very briefly into floats, just enough to get you in trouble, but I found the explanation at the time very enlightening (why a footer didn’t stay underneath a float for example).

I also have a book over the CSS zen garden called The Zen of CSS which, each section goes over code used in particular Zen Garden submissions… this showed me a lot of techniques that I later used. Book by Dave Shea and I think Molly Hol… can’t spell it and internet is too slow to look it up now. The Molly.com woman. : )

After that, I learned by reading posts on forums (and attempting my own answers, which wherever they were wrong, the Crusties who knew better would correct me), and since I had enough basics I could read technical articles (like at alistapart.com or css-tricks.com or wherever… Paul O’B has some articles on search-this.com that I have bookmarked) and actually get something from it.
Deathshadow used to do his rewrites on another forum and I learned a lot from many of them. Esp. one of his is where I learned a good image-replacement sprite technique… my connection is really poor now but you can find this thread if you search for “digitalpoint pixelcommander deathshadow” and read it.

I know dev.opera.com has somewhere a whole learning section regarding CSS… I never learned from it as it came much later but I can guarantee there’s no w3schools-type cruft in it.

Stay AWAY from w3schools.com. It has nothing to do with the W3C and there are still enough bugs and misinformation in among all the correct stuff that it will still lead you astray.

But a large part I learned on the job, by trying to build stuff (again, after I had some basic knowledge) and getting errors, mistakes, and screwiness. Also, seeing other people’s code and the screwiness they were getting.

You’ll want to build on a server so everything your test browsers see is “live”. We get plenty of threads asking why something which worked locally suddenly doesn’t when live… might as well skip that pain if you’re busy learning CSS.

I learned without stuff like Firebug but I’d say go ahead and learn to use it at least to “see” your boxes and their margins better (you can always see padding if you give a box a background colour, and I do this a lot when dealing with floats (HINT HINT this is a good trick), but Firebug and other browser dev tools will highlight margins for you as well, and sometimes for example you’ll see them sliding up behind some other element which suddenly explains why you aren’t seeing the space you were trying to code in!) so you can see the effects of your code.

I use the web developer toolbar plugin in firefox to test stuff easily… removing images and css and JS, quick resizing of browser windows, viewing generated source to see error rendering and post-javascript HTML…

Keep asking questions. Notice those of us with fancy badges are still asking questions. It never ends.

Lemme see what I have in my bookmarks…
Get Specific with Your CSS Styles » SitePoint specificity is what makes CSS great, but it will also make you cry.

On having layout Haslayout is important if you are coding for IE6 or 7, or any IE in Quirks mode.

The code for dropdown menus at htmldog.com is still pretty good. They are missing a :hover “trigger” for IE7 if you choose not to use their Javascript (which otherwise is only there for IE6 to get around a bug… no way around it otherwise) and the Opera bug may be gone, but
Son of Suckerfish Dropdowns | HTML Dog

Gary Turner has a few good articles on his dev site: Enclosing Float Elements | Floats | HTML & CSS Workshop | Gary Turner web development example

SitePoint Forums - View Single Post - Sticky Thread Revision March 2010 - Read before posting - CSS FAQ - Tips etc… Paul’s All About Floats (floats are an important tool that you’ll be using, along with margins, for the majority of your layouts).

Sliding Doors Meets CSS Sprites Sliding doors techniques.

Old explanation (and scroll down to see visually) of inline box models: David’s Inline Box Model

You notice most of these are rather specific, and assume you already know stuff. In the beginning it’s a bit of bootstrapping which is why I’m glad I started with my two books.

Several others here have good places they know on the web to get started. Let’s hear them.

Also, post code you get that IS working around here and we’ll break it down and show you where you’re still bloated or getting the right result for the wrong reason or whatever.

32

My site buildinig so far has been an **** about face exercise.
It started off with somebody else building it form on a dreadful provider called sitesell by using their online building tools. As a result, the site was cumbersome, patchy, slow and very obviously template based, with a cheap and unprofessional look to it.
I ditched sitesell, and with most of the lay out disappeared. In the past 4 months, I cleared most of the rubbish from the templates and hope to finish the job in a couple of weeks.
The result is a website that is entirely “repaired” in stead of “designed”. All the code that is in the pages I have finished is there because I found out that it works. A lot of it is probably painful to look at for a webdesigner, but I can live with that. It doesn’t do for great lay outs, which brought my need for learning css.

33

I’d do the css-learning on the side with anything else, and whatever gets the production stuff live, you temporarily live with.

At some point you will have done enough of the other stuff (and that was the “working code” I meant to bring to the forums… you try something on a non-production site, seems to work, but want tips/eyeballs anyway) that you’ll feel confident in doing a rewrite on this current site you’re talking about.