Forum Moderators: not2easy
huh? sorry, maybe i'm just an idiot. please kick me. i'm just trying. i want this to work. i want to write in CSS, but even before i begin i have to deal with all the browswer problems.
is there a way i can learn CSS and stay sane?
please? anybody? i am willing to put in the hours, but where can i learn? i mean really LEARN...
i know there are many experts out there, but they're explaining it all for experts too..
i feel like a troll......
There are many, many resources for learning CSS - have a look in the CSS Library [webmasterworld.com] here for Nick_W's tutorials, and W3School has some nice tutorials.
For an explaination of the box model, have a look at how the W3c explain it [w3.org], as well as some other tutorials here [jessey.net] and here [css.nu].
HTH
but: i am sure there are many newbies out there with the same problem as me.
it's not about understanding the code. this is easy enough...it's about some sort of "switch", if you will.
..switching your brain from "table" thinking to lovely "css thinking"
how the devil do i do that? does anyone have any tips or resources or idiot's guide for me to read, so my mushy brain will finally get it?
sigh. promise. i'm really trying....
As a newbie with css/xhtml myself I totally understand how you are feeling in regards to all of this.
I have been working with css for only about 3 months or so. I guess maybe that makes me even less then a newbie ;)
I also have a strong desire to do things according to the standards as well. And yes, there is a lot to learn. But if you are persistant, it will pay off in the end. Just believe in yourself ok? ;)
I sent you a sticky with some information in it. I hope that it helps you out a bit.
Creating full div/css pages is to me quite a bit harder than most programming problems I run into, mainly because the results can vary so widely cross browser/cross os.
Start small and build up, use divs for the easier stuff and you'll start getting piece by piece how to use them for the harder stuff.
The first full div site I did took me about 100 hours to get so it was fairly stable, and I just redid it to solve some other problems it had this last month, it's a learning process.
PurpleMartin had a good posting a while ago, the basic point was this: don't try to make a table type page layout with divs, and don't try making a positioned div type layout with tables, they are both bad ideas, and are not using your tools like they should be used. If you keep this in mind you will have many fewer headaches.
Take with a grain of salt the div / css purists who would have you think that there is no place for a table on a pagelayout except to contain database type data, they like working long hours learning very hard to do techniques, not all of us here share that enthusiasm, especially when it comes to producing sites on deadlines, and with stability as the primary factor. There is nothing wrong with using the right tool for the right job.
Don't take my word for this, check the source code for almost all major sites out there, and you'll find that they are either built with tables, or serve up two versions of the site, one for modern browsers, one for older browsers. There is a reason for this, and the reason is a table is almost always more stable cross browser than a positioned div layout, and degrades much much more gracefully on older browsers.
The decision to use a table or make a positioned div site is really an aesthetic one, neither violates any real standards, both will validate with zero errors, CSS and HTML.
making a page with positioned div elements using only CSS is really hard, I would say it's about 10 times harder, with a much steeper learning curve, than more traditional page construction techniques. Some of the best people on this forum can't do some of the most apparently easy things, without implementing a series of so called 'tweaks' that take even more knowledge to get so they don't mess up some browser or other.
This isn't a very encouraging statement to read by someone who is teaching herself how to do this.
;) I guess I am just going to have to work harder and put in more learning hours aren't I?
1) Start slowly. Use a little bit of CSS in a page and see how it works.
Then 2) Play around. once you have a small section of css working (even if it's not exactly what you want) make a change to the css and see how it affects the page. For example, put a red box in your page with
#redbox { background: red; }
<div id="redbox">red-box</div>
now change the width and height values in the css. Change the position attribute to relative or absolute. Change the top value then the left value (all of these are done by adding values in the #redbox css line).
Keep playing with it to get a better handle on how the css affects the page.
You can then start adding new <div>s and adding float, clear, etc to see how the various <div>s interact with each other.
3) Keep your designs simple to start with and work your way to more complex ones as you get used to how css controls a page.
4) Don't mix positioning types on a page. If you start out with relative positioning use that for all the <div>s. If you start with absolute positioning use that for all <div>s. It is much harder to get absolute positioning to work the same in all browsers than it is relative positioning.
Jennifer
Would you also suggest viewing these pages in different browsers to see how they look as well?
RammsteinNicCage
Pretend you don't even know how to use the table tag (except for those places where it's appropriate to use)
Purple Martin
Thanks for the link, I have already started to read through it.
Thanks everyone, your help is greatly appreciated.
I'm not sure if this will address the initial problem with the box model in ie 5.5 but it may. Try looking at Tantek's box model hack. [tantek.com...]
Would you also suggest viewing these pages in different browsers to see how they look as well?
I would, at least one other browser anyway.
I would strongly recommend, rather than trying to cover the whole range in one go, that you download a Moz based one, NN7.1 [channels.netscape.com], firefox 0.8 [mozilla.org], etc.. then if you want confirmation Opera7.23 [opera.com] because if Opera and Moz are showing the same results you're pretty much guaranteed that any rendering difference are IE's "faults/quirks". (Not 100% guaranteed mind you but, it's close enough for me. Moz's CSS support is the most reliable at the minute IMHO)
OT: I'm just experimenting with Firefox as my default browser too.. I've been using NN7.1 up until now..
there are just too many things that IE will "let you off with" and trying then to go back and relearn good habits is harder than being aware of its differences in the first place..
Suzy
Also have learned that validation is extremly important in the process as well, both xhtml and css validation.
One other question in regards to browsers as I have read so many differnt opnions on this. When designing do you need to include NN4? I know that there aren't too many people using this browser, but if you have a site where you are selling products, isn't it necessary to make sure that you include this group of people as well?
Modo, sent you a sticky this morning. And please don't be so hard on yourself. I know that you can do all of this.
When designing do you need to include NN4?
What and spend 90% of your time designing for 1% of the population ;)
Unless of course your product is one that the 1% is the main market to target.
You'd be better off designing for Safari. Mac folks have pots of money.
Best wishes
Sid
put aside all my notions of making a nice-looking page and decided to just use blocks, all different colors (the uglier, the better), then made sure each had a 1px solid black border (so's i can see what's going on...)
...and this worked for me. my html screwed up head finally started getting it. i've had several: "ooooh...thaaat's how it works!" so far.
...it's going well....i'll keep you posted...
css-ing away..
ciao
modo.
