CSS Q&A

Looking over at the latest poll running in the sidebar, I see quite a few of you consider yourselves css newbies. Seems like a good opportunity to ask you to ask me some of your css questions. I’ll do what I can to help increase your skills.

Ask any css questions you have in the comments below. Depending on how many questions you have I’ll either answer them in a single post or a series of posts.

Also feel free to ask questions that may need more than a short response. I’ll be happy to write some longer tutorials to answer your questions as well.

If you supply the Q I’ll supply the A. Now get your mind out of the gutter and ask your css questions.

Download a free sample from my book, Design Fundamentals.

17 comments

  1. I’m alright with CSS, but it’s still one of those things I’m not 100% comfortable with at all times. Can you recommend any good reads or resources that work as a good primer to CSS?

  2. Hi Steve,
    I’ve come across a lot of websites where the body of the web page is not centered and is instead left aligned, and this is one of my pet peeves. I know centering can be a pain and was wondering if there was a foolproof method that works on all browsers?
    Thank you,
    Kathy

  3. I actually had two questions, one being a little advanced, but CSS3, what can we safely use? What is not accepted yet?

    And I dont quite understand why people do “div#divname”. What is the purpose of the “div” in front?

    • You know, it can be:
      -> #same-name (for div), but also
      -> #same-name (for ul)
      -> #same-name (for li)
      -> #same-name (for span)
      -> etc…
      The purpose of giving div# before divname is to prevent referencing to other objects with the same-name. It’s easy to distinguish then.

    • Bryan a lot of people probably add the div in front for readability, but it’s really about specificity. Using div out in front is more specific than not using it so if you had

      #divname {color:blue}
      div#divname {color:red}

      the second will be the one that controls color for the div as it’s more specific.

  4. “And I dont quite understand why people do “div#divname”. What is the purpose of the “div” in front?”

    Readability, for me. But that’s just me. I’m fully aware of what it means, still I tend to use it sometimes.

    • I’m not entirely sure, but I think the problem might be in the code below in your css file

      #content   #content3   #placeholder {
      	height: 80%;
      	width: 95%;
      }
      

      I think the problem is because you’ve set both width and height. Try just specifying the width and see if that works.

  5. I “get” most CSS, but I’ve never found a really good explanation of when to use a DIV and when to use a SPAN.

    The best I can find is that DIV is for “block level” usage, and SPAN is for “inline” usage. But what does that mean?

    Any clarification welcomed!

    • The block level and inline level is really the main difference. Maybe an example would help.

      Say you wrap a block of text in a div. That text will have a block of space around it. There will be a space between it and whatever elements are above and below it in the design.

      If you wrapped a span around that same text that block of space wouldn’t be there. Until you style the span the text would fall exactly where it would had you not wrapped it with a span.

      An easy way to see the difference is create an html page with a paragraph of text. Take a few words in the text and wrap span tags around them. You shouldn’t see any difference.

      Then remove the span tags and wrap div tags around those same words. The text should then break out of the paragraph and look as though it’s in a new paragraph.

      • Steven,

        Thanks for your reply. I understood what you were saying but tried your example as suggested. I probably could have figured that out by myself (doh), but your description made all the difference.

        And now I have a better understanding of what the spec means when it refers to block level vs inline elements.

        Great stuff!

        • Glad I could help. Sometimes the best way to figure this stuff is just try a few different things and see what happens.

          I learned a lot just by experimenting. I’ll often keep a basic html file on my desktop and open it up when I want to try something and see what happens and what I can create.

  6. Hi, you rock to answer questions here. I am having a knit-picky problem with tabs I am working on. I started with a free theme and altering code to get the look I want. The theme has active and inactive tabs, but the homepage tab shows active even when it is not. How do I fix this?

    Here’s the code:
    #menu {
    width: 1000px;
    height: 65px;
    margin: 0 auto;
    padding: 0 0 0 20px;
    background: url(images/img04.jpg) no-repeat left top;
    }

    #menu ul {
    float: right;
    margin: 0;
    padding: 0px 25px 0px 0px;
    list-style: none;
    line-height: normal;
    }

    #menu li {
    float: left;
    }

    #menu a {
    display: block;
    height: 65px;
    margin-left: 10px;
    padding: 15px 5px 5px 5px;
    background: url(images/img05.jpg) repeat-x left top;
    font-family: Georgia, “Times New Roman”, Times, serif;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    color: #ffffff;
    border: none;
    }

    #menu a:hover, #menu .current_page_item a {
    text-decoration: underline;
    }

    #menu .current_page_item a {
    background: url(images/img06.jpg) repeat left top;
    padding-left: 5px;
    padding-right: 20px;
    color: #493E2B;
    }

    • Hard to know without seeing the html for the menu. If the page is online feel free to post a link to it.

      Based on your css what I think is probably happening is your home page link has the current_page_item class hardcoded on the link. You need to test to see if the page is the home page.

      If you are testing then it’s possible WordPress isn’t doing quite what you think. For example you might be testing for is_home() when you should be testing for is_front_page()

Leave a Reply

Your email address will not be published.

css.php