So, once upon a time, many years ago, I used to do some web-design, never much of the coding, but layouts and artwork and all that good stuff. So, now I currently live in a house with nothing but budding musicians, so I thought it'd be fun to have a wordpress to share our work, so I used a pre-cut one from wordpress for a while, but decided that its time to learn web-coding, bought some web hosting and am now trying to do everything.
And I have no clue what the fuck I'm doing wrong. I have this layout here (spoilered for teh huge)
Okay, looks good? After 2 days of writing and re-writing my code I get this:
http://www.themusicroomblog.com/themusicroom/index.html
And now for some reason my banner background isn't showing up. blarg
So... what I was hoping for is if any one has any suggestions for perhaps more advanced CSS tutorials, or one that even walks you through the whole process, everything I've found is for super beginners. I feel kind of like I've been given a dictionary, but am left to figure out the rules of syntax and grammer. I'm at wits end, any suggestions?
tl;dr: Help me learn CSS!
Posts
Part of the "fun" of CSS is how different browsers interpret it (especially different versions of IE). You may find that your design looks correct in one browser and not the other, and the above site has resources that help with this.
http://developer.yahoo.com/yui/reset/#code
and ie7.js
http://code.google.com/p/ie7-js/
will do wonders toward making css behave more consistantly.
firefox webdev toolbar is your friend. use it, love it.
https://addons.mozilla.org/en-US/firefox/addon/60
mostly, i'm going to guess that your problem is centered around things not floating correctly.
here are some magic words:
clear:both
overflow:auto
adding clear:both will make your footer go where it is supposed to. overflow:auto can heal or hurt. use wisely.
The single most mind bending aspect of CSS is the fact that browsers themselves set hidden default CSS properties to many elements. This will cause a huge amount of common problems.
Reset kills most of that off and gives you a relatively clean slate to work with.
we also talk about other random shit and clown upon each other
Sweet! That did fix it. Thank you so much!
How about a community to seek advice on? Something kind of like Flashkit? Any suggestions?
we also talk about other random shit and clown upon each other
yup. and ie7.js 'upgrades' ie 6 to behave like a compliant browser.
between reset and ie7.js, i have reduced my iefixes.css file to like 4 entries on average, where it used to be almost it's own sheet.
This one is very good and pretty easy to implement, it already includes the reset CSS code: http://960.gs/
You only have to caa the CSS code, and then assign CLASS names to your different DIVs, depending on the amount of columns you want them to span to.
Hope this helps.