[teknik]

Hey everyone. I'm getting more and more into web design, and recently had a chance to play around with some CSS via Movable Type (I completely changed a standard css style) but it was kind of confusing at times w/o any direction.

I use DreamweaverMX, and have been trying to play around with CSS, but I can't for the life of me implent it into a HTML page, I really want to build a nice portfolio site for my Artwork w/ help from CSS. Can anyone point me in a nice direction ( I know the basics so W3schools won't cut it)

[Simon Mundy]

Originally posted by teknik:
Hey everyone. I'm getting more and more into web design, and recently had a chance to play around with some CSS via Movable Type (I completely changed a standard css style) but it was kind of confusing at times w/o any direction.

I use DreamweaverMX, and have been trying to play around with CSS, but I can't for the life of me implent it into a HTML page, I really want to build a nice portfolio site for my Artwork w/ help from CSS. Can anyone point me in a nice direction ( I know the basics so W3schools won't cut it)

There's some great real-world examples at http://www.alistapart.com as well as http://www.bluerobot.com and http://www.meyerweb.com/eric/css/edge/ - the big three for me!

I find them to be a great starting point if I have a particular problem I want to solve - they'll get me about 75% of the way, then anything else I'm stuck with I can usually then do a targetted search on google to find anything further (does the search term 'ie mac css bug' seem familiar to anyone else?

Don't just read the articles at alistapart - the forums are sometimes the most interesting part, as people dissect and transform the original ideas until they end up working for their particular application, or they provide good arguments for why they're unnecessary.

Sounds like you're on the right path anyway. Happy travelling.

[philzilla]

Originally posted by Simon Mundy:
does the search term 'ie mac css bug' seem familiar to anyone else?

[Synotic]

Originally posted by teknik:
Hey everyone. I'm getting more and more into web design, and recently had a chance to play around with some CSS via Movable Type (I completely changed a standard css style) but it was kind of confusing at times w/o any direction.

I use DreamweaverMX, and have been trying to play around with CSS, but I can't for the life of me implent it into a HTML page, I really want to build a nice portfolio site for my Artwork w/ help from CSS. Can anyone point me in a nice direction ( I know the basics so W3schools won't cut it)

I know you didn't want to learn the basics again but I strongly suggest reading the Complete CSS Guide by WestCiv. It essentially teaches you everything you need to know about CSS and also serves a great reference. I used to think I was pretty good with CSS but after reading through the guide it really cleared up a lot of things for me... it also taught me a lot of new things in CSS. The one thing I'd caution you about though is that he explains every single CSS property. This means that he'll explain certain things that no or almost no browsers support. Just make sure you have the CSS Browser Support page open as well. It's also made by WestCiv so it follows the same flow.

One piece of advice I'd give is to try and not use too many (if any) CSS hacks or workarounds. You'll find that it just makes things more difficult to maintain and will most likely break something else. I used to be pretty indifferent towards them but later as I created more and more sites I realized they were mostly unnecessary. Also most problems later on in your site's life usually stem from an unsturdy (apparently not a word...) base. If you create a page in Safari (for example) and later check it out in IE and notice a problem... then what I would do first is completely duplicate the site depending on how possible that is for you. Go to your HTML and start stripping out your javascript... and then some code above your problem.. some more code... and then below and keep going until your down to exactly your problem. You'll find that your problem might have gone away after deleting a certain <hr>... if so, leave it in. Then continue and do the same thing with your CSS. Doing this, you can 99% of the time find the source of your problem. From here you'll just generally think... "How can I do this exact thing another way?". You're using "display: inline" and it works in Safari but not IE... try using "float: left". Or you have one parent box and one child box... the box model isn't behaving on IE 5.5 because your parent box has a padding of 20px and a width of 460px... Try eliminating the padding of the parent box and applying 20px of margin to the child box... IE 5.5 doesn't consider margins in the overall width or height of a box... That's pretty much the basic problem solving method I've seen used and what I use. You'll also generally learn a lot of things yourself this way, so it's a good thing to try.

Well I've gone in way too much detail so in summary... read the WestCiv guide and when you experience a problem, try solving it yourself and don't give up!

Also regarding alistapart/zeldman/cssbits etc... after you have a firm grounding in CSS, these are great places to learn about the latest trends in CSS like image replacement methods, rollover methods and all that. Places like the cssvault are great places to seem some amazing design and applied uses of CSS.

HTH

[teknik]

Fantastic, thanks alot everyone!