Forums

djpic

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:


<div>
  <a href="#">test</a>
  <a href="#">test<br>test</a>
  <a href="#">test<br>test<br>test</a>
</div>

wolfcry911

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...

djpic

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.

thomas

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.

djpic

@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.

wolfcry911

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...

thomas

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.

thomas

You beat me to it wolfcry911 :)

djpic

@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.

djpic

@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?

thomas

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.

djpic

@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?

thomas

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

thomas

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;
    }

djpic

@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 */

djpic

Yes it does hold true for those. I just made all the corrections to use what is should be. Thanks.

djpic

FYI....I just posted the discussion on the calendar.

Calendar Discussion

chrisburton

I'm not sure I understand what's going on here but it seems like you're asking a shorthand way of styling an anchor element in your sub classes?

IF I understand your markup correctly you can do this: http://jsfiddle.net/Wh6np

djpic

Yes and no. The following is what I want to do:

.style-class .sub-class1 a, .style-class .sub-class2 a { /* styling here */ }

But wasn't sure if there was an shorter way to write it so I don't have to keep repeating the '.style-class' and 'a'

chrisburton

What does the markup look like?

djpic


<div class="style-class">
  <span class="sub-class1"><a href="#">Link #1</a></span>
  <span class="sub-class2"><a href="#">Link #2</a></span>
</div>

chrisburton

Hmm, I guess I'd have to see what it looked like in the end to make a proper judgment on CSS.

wolfcry911

there's no shorthand for selectors. If you want the specificity you described above, you'll need to write out the whole thing as I did in my example.

joshuanhibbert

@wolfcry911 @djpic What is wrong with simply using this?


.style-class a {
    text-decoration: none;
}

Why do you need to be any more specific than that (in this case)?

chrisburton

unless sub-class1 is different than sub-class2, you don't have to be specific.

wolfcry911

you're absolutely correct, but without any code to go by I was just using his first selector in the list and keeping the same specificity (assuming there may be other anchors within .style-class).

djpic

Yes, there are other anchors in the other .sub-classes which is why they are separate. Otherwise I would use just .style-class a{}. The code for what I was doing is up on the other discussion FYI: Pure CSS Calendar - Opinions Needed.

treehouse : what would you like to learn today?

Forums

CSS and Adjustable blocks