Grow your CSS skills. Land your dream job.

CSS and Adjustable blocks

  • # September 9, 2011 at 8:30 pm

    I need to set up a group of anchors as blocks. The problem is the anchor’s text / value is going to be variable. The question is if I have a row of anchor’s with different heights how can I make all of those the same height based on the anchor of the series that has the greatest height? The anchors will have the same width.

    Example:



    # September 10, 2011 at 12:06 pm

    There’s an easy way for every thing but IE6 and 7:

    div { display: table; }
    div a {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 150px;
    }

    Unfortunately hacking for IE6 and 7 is not easy. Probably the best way (for these two browsers) is to just feed them the same height for all the anchors and not worry about the vertical centering. Those users need to upgrade anyway. The content won’t be affected anyway…

    # September 10, 2011 at 12:49 pm

    Thanks. I will have to try that. I was wondering how to use the table display. That will help. I am actually working on a calendar using nothing but CSS (of course) which is why the question came up. I will be posting that later for review. It is actually looking pretty good so far I must say. Easier than I thought.

    # September 10, 2011 at 12:55 pm

    Just curious, but why aren’t you using a table to create the calendar? I’m not trying to start a semantics debate; it’s just that a table as a starting point would seem to be much easier.

    # September 10, 2011 at 1:07 pm

    @thomas – Because with using css, I can layout the days any way I choose. If I want to lay them out as a “calendar” type, a list, or another type of layout I wish just by switching the CSS file. Plus there is going to be much more involved once I start entering the dynamic data (using it in a php class).

    I do have another question. I want to do something like this but it doesn’t seem to work:

    .style-class .sub-class1,.sub-class2,.sub-class3 a { text-decoration: none }

    Of course there is more to the style then just a text-decoration, but you get the idea. Basically taking multiple classes and applying the same ‘default’ style to all anchors in those classes (or ids). Like I said, I tried this but didn’t work at all.

    # September 10, 2011 at 1:12 pm

    your selector doesn’t look right for two reasons: you’re missing the ‘.’ on the classes and you need to include the a in each selector:

    .style-class .sub-class1 a,
    .style-class .sub-class2 a,
    .style-class .sub-class3 a {
    text-decoration: none;
    }

    Of course, this is just a guess, having not seen the mark-up…

    # September 10, 2011 at 1:13 pm

    Did you mean:

    .style-class .sub-class1 a, .sub-class2 a, .sub-class3 a { text-decoration: none }

    In your post, “text-decoration” was misspelled and you didn’t have the anchors after each class.

    # September 10, 2011 at 1:14 pm

    You beat me to it wolfcry911 :)

    # September 10, 2011 at 1:17 pm

    @wolfcry911 – After I posted it, I noticed I was missing the ‘.’ but fixed it. That was just a typo. So I would need to have define each one with the full style? I am defining others like:

    .style-class .sub-class1,sub-class2,sub-class3 { /*Styling Here */ }

    And it works. Just thought by doing something like:

    .style-class (.sub-class1,.sub-class2,.sub-class3) a { /*Styling Here*/ }

    Without having to rewrite the ‘.style-class’ and ‘a’ over and over again. But if I have to, then I have to.

    # September 10, 2011 at 1:19 pm

    @thomas – That saves me from having to write the .style-class over and over again, but what about the ‘a’ or is that just impossible?

    # September 10, 2011 at 1:23 pm

    I’m pretty sure you’ll have to include the ‘a’ in each rule. I’m not aware of any shorthands similar to what you’re looking for.

    EDIT: also, whether you have to include the “.style-class” in each rule depends on specificity and if you use your .sub-class[n] outside of .style-class.

    # September 10, 2011 at 1:27 pm

    @thomas – I only want the .sub-class[n] available within the .style-class. If .sub-class[n] is located on another element outside the .style-class then, I don’t want that .style-class .sub-class[n] to apply. So I take it I need to include the .style-class as well?

    # September 10, 2011 at 1:29 pm

    Here’s an old article on CSS specificity they may help:
    http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

    # September 10, 2011 at 1:31 pm

    Yes, in that case, you need to write it out fully as wolfcry911 mentioned earlier:

    .style-class .sub-class1 a,
    .style-class .sub-class2 a,
    .style-class .sub-class3 a {
    text-decoration: none;
    }
    # September 10, 2011 at 1:33 pm

    @thomas – Oh ok…No big deal. Just thought they would have thought of another way. Does that hold true for the ones I have already done:

    .style-class .sub-class1,.sub-class2,.sub-class3 { /*Styling Here */
Viewing 15 posts - 1 through 15 (of 27 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".