Use alternate link set inside div."class"

[DougWD]

I need to use a seperate link set inside of a div. The problem is that I need the div that contains the links to have a padding on the top and bottom. So I have a div with the class "menu" and that class has top and bottom padding applied. But I need to use the seperate link set inside that div tag:

<div class="dwMenu"><a href="index.div.html">HOME </a> <a href="potrait/index.html">LANDSCAPE</a> <a href="potrait/index.html">PORTRAIT </a></div>

CSS:

div.dwMenu {
padding-top: 5px;
padding-bottom: 5px;

}

.dwLinks a:link {
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}

.dwLinks a:visited {
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.dwLinks a:hover {
font-weight: bold;
color: #FF0000;
text-decoration: none;
}

So what is the cleanest way to do this?

[cmarshall]

I'm not exactly sure what appearance you are looking for, or why it is a problem.

Can you show a bit more XHTML and CSS?

[DougWD]

OK.

I want to assign a particular class to a div, and I also want to use an alternate link set as given above. So how do I specify a class of css rules plus allow that specific link set to work in that class only. It's like I have two classes that I can't combine--or can I? The link set is it's own class, per above example, and so is the div class. How do I get the links to work inside that div class only? I'm thinking it's something like div.dwMenu dwLinks

using the above example?

[Setek]

Sorry, I think what we're getting confused with is the terminology you're using is a little muddled.

I'm going to take a guess and say, is what you want this: a particular

div

that has a class attached, giving it, say, a red background colour. But, this particular

div

is special, and not only do I want it to have a red background colour, I want it to have a background image assigned to it's top left-hand corner.

div.dwMenu { background-colour: #f00; }
div.dwMenu.special { background: url('/images/black-dot.png') no-repeat 0 0; }

This means you can combine classes, like so:

<div class="dwMenu special"> ... </div>

Please note, sometimes IE 6 will have a problem displaying this style of selector (

selector.class.class

or

selector#id.class

,) and unless your specificity is very strict, you probably can remove the

.dwMenu

on

div.dwMenu.special

so it looks like this:

div.dwMenu { background-colour: #f00; }
div.special { background: url('/images/black-dot.png') no-repeat 0 0; }

Otherwise, the other thing I thought you might have meant was:

I want to a particular

div

with a class, to display a set of links in a certain way. Except, one of them, the "Home" link in particular, I want to display in BIG text:

div.dwMenu a { font-size: 1em; }
div.dwMenu a#home { font-size: 1.5em; }

<div class="dwMenu">
<a href="#" id="home">Home</a>
<a href="#">Other link</a>
<a href="#">Other link</a>
</div>

Like that :)

Let us know if that's not quite what you're after :)

[edited by: Setek at 8:09 am (utc) on Jan. 16, 2007]

[DougWD]

OK I'm sorry. I see the problem with my explanation. Let me try again.

CSS is as follows:

div.dwMenu {
padding-top: 5px;
padding-bottom: 5px;

}
.dwLinks a:link {
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}

.dwLinks a:visited {
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}

.dwLinks a:hover {
font-weight: bold;
color: #FF0000;
text-decoration: none;
}

So what I wanted to do is use the class "dwMenu" and use the alternate linkset class "dwLinks" in the same div tag:

<div class="dwMenu"> <span class="dwLinks"><a href="index.div.html"> HOME </a> <a href="potrait/index.html">LANDSCAPE</a> <a href="potrait/index.html">PORTRAIT </a></span></div>

Now using the span withing the div works, but is there a more eloquent way of doing this? This way requieres me to stop and manually insert span tags, instead of simply adding a class.

Thanks for helping.

[Setek]

As I said before in my previous examples, you can do this:

div.dwMenu { background-colour: #f00; }
div.dwMenu.special { background: url('/images/black-dot.png') no-repeat 0 0; }

This means you can combine classes, like so:

<div class="dwMenu special"> ... </div>

Please note, sometimes IE 6 will have a problem displaying this style of selector (selector.class.class or selector#id.class,) and unless your specificity is very strict, you probably can remove the .dwMenu on div.dwMenu.special so it looks like this:

div.dwMenu { background-colour: #f00; }
div.special { background: url('/images/black-dot.png') no-repeat 0 0; }

Thus, you can combine dwMenu and dwLinks like so:

CSS:

div.dwMenu { ... }
div.dwMenu.dwLinks { ... }

or

div.dwMenu.dwLinks

can just be

div.dwLinks

HTML:

<div class="dwMenu dwLinks"> ... </div>

[DougWD]

OK got it. Thanks. That's pretty cool. I assume that using the span method is more cross browser, shall we say, "compliant?"

[Setek]

Using this method:

div.dwMenu { ... }
div.dwLinks { ... }

With this:

<div class="dwMenu dwLinks"> ... </div>

... will work in everything. It is the cleanest, most compliant.

Using a

<span>

is unnecessary.

Using added specificity, to have very closely-knit rules, is a little buggy in IE 6. So I would avoid using

div.dwMenu.dwLinks

, but

<div class="dwMenu dwLinks"> ... </div>

will work regardless.

It's when you have, say,

div.dwLinks

defined above

div.dwMenu

in your stylesheet, but you actually want the value of, say,

font-weight: bold;

from

div.dwLinks

(which gets overridden in

div.dwMenu

with

font-weight: normal;

,) that an added specificity is required - which is a perfect situation why there's a use for

div.dwMenu.dwLinks

:)

If you don't know much about specificity, then you probably don't really have to worry about it for now, just know that the method I used at the top of this reply works.

[DougWD]

OK I see what you mean. Thanks alot for that. Good information. As far as specificity goes, I understand teh concept, and will keep it in mind if I ever have a problem of the style I want not cascading like I think it should.

Thanks again.

[DougWD]

I just thought of something.

Why did I define classes like this with a div. starting it?:

div.dwMenu

Wouldn't dwMenu do the same this ass it is applied to each div?

[Setek]

Not quite, no.

This is the syntax for rules:

selector { property: value; }

so:

dwMenu { property: value; }

.. is basically saying "for every element named

dwMenu

do this."

And, without being proper XML/XHTML (using custom element names) this is incorrect. Rather than:

selector.class-name { property: value; }

.. which is saying "for every element named

selector

with the class named

class-name

do this."

So this:

selector#id { property: value; }

means an ID.

selector#id.class-name { property: value; }

means a selector, with an ID, which also has a class of this.

selector.class-name.second-class-name { property: value; }

means a selector, with a class, which also has a second class of this.

We are saying:

div.dwMenu { property: value; }

Which means "for every element named

div

with the class named

dwMenu

do this."

:)

[DougWD]

Setek,

So why could you not just name a div tag with a selelctor that has no prefix, .name:

css would be .name

<div class="name"> </div>

Why would that not work? But I do see the importance of div.name because then you can have two items named the same thing, but they will only apply to specific tags. So you could have paragraphs ooking different inside div's only. Is that right?

[Setek]

So why could you not just name a div tag with a selelctor that has no prefix, .name:

You can! I was merely saying you cannot have

name

, unless the element is named

name

, but you can have

.name

:)

Why would that not work?

It will.

But I do see the importance of div.name because then you can have two items named the same thing, but they will only apply to specific tags. So you could have paragraphs ooking different inside div's only. Is that right?

Yes, this is right - the reason you would do this is if you had differing styles with the same name, you can easily change the element type to display differently.

Also, it's all about specificity. You can easily identify that

div#shell div#menu

, for instance, is a

div

with that specific ID and it has to be inside a

div

with the specific ID of "shell". At quick glance of the CSS, one can easily understand exactly where the object is in the structure of the (X)HTML document :)

[DougWD]

Upon further thinking, I understand this even better now, I think:

So if you had a div with teh class of "contianer" you could apply additional clases to, so you would have css such as:

div.container
div.container p

and the div you wanted to apply both those styles to would be

<div class="contianer contianer p">?

If this is corect, you could also, I assume, do this css:

div.container
div.p

and then apply it like so:

<div class="contianer p">?

[Setek]

Yup, that's exactly right :)

Having this:

div.container p

means "all paragraphs inside my

div

named container."

And this:

div.container { }
div.p { }

.. with this:

<div class="container p"> .. </div>

.. means "apply the properties inside

div.container

and then apply the properties inside

div.p

."

[DougWD]

OK it seems that the

.div p

could be mroe flexible rather than having

.div continaer p

[DougWD]

That way you could have multiple divs called "contianer" and only apply the paragraph spacing to those you want? Sorry about this broken post. I don't see any "edit" function.

[DougWD]

Setek, thanks for helping me. Your examples are really helpful.

I was wondering too, if I have two or three classes to apply in a true "cascading" order, if each preceeding tag overides teh last if tehr are two classes that conflict:

.div Contaner
.div Pricing

so now both have a Text-... tag, but one is aligned left and other aligned center. Does the class last stated in the class= line take precedent? For instance, if "Container" has text aligned center and Pricing has text aligned left, would the text be left aligned if you had:

class="Container Pricing"

?

If so then I've had anotehr break through with css. I can name all my "main Content" divs the same thing,a dn then just add on additional styles as I go, instead of having differnt names for each continaer. This allows me to keept eh main continaer spacing, for instance, standard throughout the site. I hope I have this correct.

[DougWD]

The only other problem is that when using tables when necessary, like aligning form elements, it's a whole diferent sotry. I know that you have to add classes to TD sometimes for them to work. Blah. I guess I could rebuild the form in divs to align the form elements. Is that possible?

The problem I'm having is that even though a class is applied to a div that the table is in, the styles don't always cascade into the table's TDs. If I can use divs and css to align the form elements, I would just rebuild it.

[DougWD]

On my post above where I talk about precedent, I think I figured it out. It depends on the location of the class in the style sheet? I had one class that was almost identical to another, but the align left was not working. So I placed it below the aligned center class int eh style sheet, and now it overrides the alignment--just because it comes further down the style sheet? It seems logically that where a class is in a style sheet, should not matter. What should matter is where it comes in the page class= line. Weird.

[Setek]

.div Contaner
.div Pricing

so now both have a Text-... tag, but one is aligned left and other aligned center. Does the class last stated in the class= line take precedent? For instance, if "Container" has text aligned center and Pricing has text aligned left, would the text be left aligned if you had:

class="Container Pricing"

?

Your syntax is a little incorrect. It should be:

div.Container { text-align: left; }
div.Pricing { text-align: center; }

In which case, in the situation of:

<div class="Container Pricing"> ... </div>

..

div.Pricing

' value for

text-align

will win. Why? Because the specificity of the rules are exactly the same (1 point for the selector

div

, 10 points for the class, equals 11 points,) which means the rule that wins is the one that comes last (since it will paint the first rule first, then paint the second rule.)

The only other problem is that when using tables when necessary, like aligning form elements, it's a whole diferent sotry.

You don't need to use tables for that instance :) If you're talking "Name: [input box]" style of thing, all lined up prettily, you can just use

label

. You can set up your form as a proper list this way - but this is off-topic, if you want to ask questions about how to style

form

controls, it's better if you make another post.

P.S.: you don't need a tonne of

div

s either. That's what we call "divitis" :)

[DougWD]

Setek,

My real css is like you have it:
div.name

That was just a typo.

OK, but that didn't work unless the class in the css came after the other one. In other words, if the class that had centered text came last in the style sheet, it would overide the aligned center text. Is this right, or is something else wrong? The thing is, after I changed the position in the style sheet, it worked.

So what do you eman by "divitis"? Do you mean that I could use something like
.name and just use that as the class for divs, or what? I don't want divitis! I'mm actually goign to do this site as cleanlya s I can time permitting, and with all css and NO tables. I'm never going to use tables again.

[Setek]

OK, but that didn't work unless the class in the css came after the other one. In other words, if the class that had centered text came last in the style sheet, it would overide the aligned center text. Is this right, or is something else wrong? The thing is, after I changed the position in the style sheet, it worked.

This is what I meant by last - it had a greater line number in the stylesheet (farther down) than the other.

So what do you eman by "divitis"? Do you mean that I could use something like
.name and just use that as the class for divs, or what? I don't want divitis! I'mm actually goign to do this site as cleanlya s I can time permitting, and with all css and NO tables. I'm never going to use tables again.

What I meant by divitis is the overuse of

div

s when not necessary. Some people switching from tabled layouts to CSS-P have it; a tendency to wrap anything and everything in a

div

, even when it might semantically not be good to do so.

The part about wrapping each form control in a

div

is the part I was talking about - lots of

div

s, a lot less of necessity :)

P.S.: tables are great!

.. which is to say, when you have a set of data that happens to be tabular, tables are definitely the semantic way they should be structured.

Just as you shouldn't use tables to define the presentation of data that isn't tabular data, so should you not use other controls to define the presentation of data that is tabular data.

Everything has its place: tables,

div

s,

cite

s,

address

s, etc.

It's how one uses them that can be the problem.