Pulling My Hair Out Trying To Learn CSS

Quote: I learn faster/better by learning hands on

I can empathise with this!

One site that will make you hungry for CSS learning is: http://www.csszengarden.com this is advanced stuff, but if you're feeling frustrated and about to give up go there and just look at what CSS can do. It's amazing stuff really!

As for the basics, well what're you having trouble with? And more importantly what browser are you trying to use? For PC I would recommend Opera as being the most standards compliant (Safari on Mac) either that or Firefox (which just isn't as good, just better marketed).

If you're using IE you're going to run into problems. It doesn't conform to web standards, so does lots of things completely differently to how they should be done! The best way to learn is to use a standards compliant browser, then worry about IE.

I would expect one of your questions is: "How do I centre content?"
Well using standards you do the following:
margin: 0 auto 0 auto
The zeros can actually be any value, what's important are those auto values, margin is the space between the element and any other element around it. "auto" means it'll expand to fill any available space, so two autos will centre the content.

Am hoping that was one of your questions, let us know some of the others and we'll see what we can do.

Thanks for the input JeevesBond. First off, yes I am using IE 6.0 and yes it's giving me fits. Second, I cheat when it comes to putting a webpage together. I use MS FrontPage 98 to help me learn the basic html code as I go. So, with this in mind, maybe learning CSS is not the major problem yet.

To Explain what I am trying to do you'll need to take a look at the website I built for my wife's business. I am willing to bet that what I need to do to it is relatively simple to someone much more experienced than I am. Anyway, I just want the webpage to center up on the screen and to have it look the same on any computer using any resolution.

The way it is working now, if I do a page up on my computer using a 19" LCD at a resolution of 1280x1024 and get it to look the way I want it to, it looks like crap on my notebook or another computer using a 17" CRT and a much lower resolution. The graphics are all off and the fonts look to be different sizes.

I guess my first priority is to get the pages of her website to look the same on any computer since this is a lead generator to produce her income.

I have wracked my feeble, old and tired brain and can not figure what I am doing wrong. So I guess I need to address one situation at a time and getting her website looking as professional as possible is first.

Thanks for any help,
Vance

Hmmm... I tried going to your site and it doesnt open... Well anyways, you need to refine your html skills first, doing it with frontpage wouldnt cut it for the simple reason if you code by hand, you will imagine what a css property will do to a certain area... Take it slow, and build up on that knowledge... When we can view your site, maybe we can help you on your layout problem...

Your using a tabled layout with a width of 992, I don't think laptops go that wide do they? ideally it should be 100% or no width at all and just let the content size it.

And it's coded for IE (topmargin="0" leftmargin="0") and nothing else.

As you're still using FP which can only do HTML, maybe learn the basics of XHTML and adapt CSS into it.

Set your self little goals, you have red italic text on your page, learn how it's done with CSS and change the font tags to CSS, you have links, learn how to remove the underline (and colour them) and even have underline on hover (when the mouse goes over it), replace the image map with the CSS text links which not only look better than images but also work in your favor with search engines. Start small and still get instant results.
Once you learn more, use more, either use CSS with the tables (are valid XHTML Strict) or just use CSS alone for layout.
The thing with CSS, like programming there is a whole new world out there yet you may only ever use a smal fraction of it, even doing a full CSS e-com site. Learn what you need to use only, pick a section, like aligning text, pop something like "align text css" in a search engine and use what you find. You'll find more than just what you want which will lead you to more things - learn by doing
Good luck

Vance...not sure if you're a rookie like me, but I've been learning (slowly but surely) about CSS by using Adobe GoLive CS2. It has 2 pretty good things: first, a set of training videos that come with the s/w; and second, the section of the manual that deals with CSS is pretty decent. I too started with w3schools.com and quickly decided it was not really a good way to learn CSS.

hey you should try htmlgoodies.com they walk you through and show you the code. It's not that hard once you do it a few times

The best one is HTMLDog.com

I am sure there are countless resources to be posted but one thing I think all new designers should do is switch from developing in IE. Its not that IE isn't a perfectly fine browser for browsing normally (I used to use it all the time), but for development purposes, its substandard. In Firefox there are many extensions available to help web developers. One extension I use will outline any element for me, will disable certain css styles, will let me edit css in real time, and more! Another extension allows me to grab certain colors from any site I am viewing so that I don't have to go through the pain of creating a screenshot.

These enhancement plus the fact that Firefox displays pages as they are meant to be displayed will make your job much easier while you are learning. This being said IE has all sorts of bugs that need to be fixed and you should not forget about them. You should go back and adapt your code for IE after you develop in Firefox. This way you know you are using the correct coding methods and not just some hack that works in IE.