The new forums will be named Coin Return (based on the most recent vote)! You can check on the status and timeline of the transition to the new forums here.
The Guiding Principles and New Rules document is now in effect.

CSS woes

blakfeldblakfeld Registered User regular
edited October 2009 in Help / Advice Forum
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)
musciroomlayout.jpg

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!

blakfeld on

Posts

  • GanluanGanluan Registered User regular
    edited October 2009
    Check out this site: http://www.mezzoblue.com/zengarden/resources/

    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.

    Ganluan on
  • flatlinegraphicsflatlinegraphics Registered User regular
    edited October 2009
    css reset
    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.

    flatlinegraphics on
  • JasconiusJasconius sword criminal mad onlineRegistered User regular
    edited October 2009
    Emphasis on the CSS reset.

    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.

    Jasconius on
    this is a discord of mostly PA people interested in fighting games: https://discord.gg/DZWa97d5rz

    we also talk about other random shit and clown upon each other
  • SkyCaptainSkyCaptain IndianaRegistered User regular
    edited October 2009
    Damn... I like that Reset code. I'll have to dig into that next time I make a website.

    SkyCaptain on
    The RPG Bestiary - Dangerous foes and legendary monsters for D&D 4th Edition
  • blakfeldblakfeld Registered User regular
    edited October 2009
    css reset
    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.

    Sweet! That did fix it. Thank you so much!

    How about a community to seek advice on? Something kind of like Flashkit? Any suggestions?

    blakfeld on
  • JasconiusJasconius sword criminal mad onlineRegistered User regular
    edited October 2009
    I like stackoverflow.com - not sure if they really do HTML/CSS stuff, but it's worth a shot.

    Jasconius on
    this is a discord of mostly PA people interested in fighting games: https://discord.gg/DZWa97d5rz

    we also talk about other random shit and clown upon each other
  • flatlinegraphicsflatlinegraphics Registered User regular
    edited October 2009
    Jasconius wrote: »
    Emphasis on the CSS reset.

    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.

    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.

    flatlinegraphics on
  • MorinokoMorinoko Registered User regular
    edited October 2009
    Hello blakfeld, you should try one of the CSS frameworks, they help a lot with multi column layouts and are tested on different browsers.

    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.

    Morinoko on
Sign In or Register to comment.