...

View Full Version : Seeking CSS Unconfoundedness



logictrap
11-21-2008, 06:07 PM
I'm confounded why the css code below does not do what I expect. I have and outer div that specifies link attributes and an inner div with different link attributes. What is confounding me is that the inner div retains the link attributes of the outer div.

Can someone unconfound this suffering mind?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#outer {
width: 200px;
color: #FF6600;
}
#outer a {
color: #000000;
text-decoration: underline;
}
#outer a:hover {
color: #FF0000;
}
.inner {
color: #0000CC;
}
.inner a {
color: #00CC00;
}
.inner a:hover {
color: #FFFF00;
}
-->
</style>
</head>

<body>

<div id="outer">
Outer text: <a href="#">LINK</a>
<div class="inner">Inner text: <a href="#">LINK</a></div>
</div>
</body>
</html>

jerry62704
11-21-2008, 06:37 PM
If you change the inner to an ID (#), it does what you want. It looks like an "id" is more specific than a class.

logictrap
11-21-2008, 06:43 PM
Thanks.

I need to use the inner div multiple times within the outer div - shouldn't a class be specified when multiple instances are used? and if so what this correct way to code this?

BoldUlysses
11-21-2008, 07:32 PM
Try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#outer {
width: 200px;
color: #FF6600;
}
.outerLink {
color: #000000;
text-decoration: underline;
}
.outerLink:hover {
color: #FF0000;
}
.inner {
color: #0000CC;
}
.innerLink {
color: #00CC00;
}
.innerLink:hover {
color: #FFFF00;
}
-->
</style>
</head>

<body>

<div id="outer">
Outer text: <a class="outerLink" href="#">LINK</a>
<div class="inner">Inner text: <a class="innerLink" href="#">LINK</a></div>
</div>
</body>
</html>

When in doubt, get more specific with the CSS...

Doctor_Varney
11-21-2008, 11:34 PM
Do a search for what CSS actually means.

Cascading Style Sheet.

It's a little like one of those champagne glass pyramids where the waiter pours the champagne into the top glass, for it to overflow and fill the ones lower down... And so on.
Now, if you imagine your code to run along the same rough principle, it might look a little like this (Afraid I'm no good at ascii drawing):

<div id="outer"> It has attributes
|
|--<div id="inner"> Which can cascade into elements here </div>--
|
</div>

So what you pour into the top div (in the way of attributes) will pour (or cascade) into the one inside. So a style you set for the outer div, can cascade, down through the system, until it's shut off, by it's closing /tag. Text-alignment is a very good example of this. Follow the blue lines and you'll see what I mean. In other words, think of your code as being like a flowchart. That's why you need to be very specific about your #ID and .CLASS naming strategy, so you can use it to control the flow of the cascade and to "shut things off" at will, whilst directing the flow of instructions to precisely where you want them.

I believe its proper term is "inheritance". Child elements can inherit certain values, from their outer containers (or parent elements).

Have no idea if this is helpful or not, but I hope it goes some way towards "unconfounding" you a little. Ah, don't tell me... I've just made it worse, haven't I...? :D

Regards,
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

logictrap
11-22-2008, 01:46 AM
That makes sense except shouldn't the closest class attributes (inner) take precedence over the further (outer) attributes? this seems to be true for the text color but not the link.

abduraooft
11-22-2008, 09:08 AM
id selector has got higher precedence than a class selector. So your

.inner a:hover {
color:#FFFF00;
} is overridden by
#outer a:hover {
color:#FF0000;
}

To correct it, you have to apply a more specific rule like

#outer .inner a:hover

See the CSS specificity (http://htmldog.com/guides/cssadvanced/specificity/) rules.

PS: No need comment your CSS by <!-- -->

Doctor_Varney
11-22-2008, 09:12 AM
That makes sense except shouldn't the closest class attributes (inner) take precedence over the further (outer) attributes? this seems to be true for the text color but not the link.

Well, I think a point worth mentioning is that I myself have not experimented with changing link colours in DIVs. Like most people, I tend to set links on a consistent, site-wide basis, as this is what the average user expects to see.

Of course, telling you how to design would be pushing the mark on what you expect from us here, so I won't. It's just my reason, why I haven't played around with link colours, from DIV to DIV.

I have to admit, that looking more closely at what you've written there, it would seem logical to expect the inner and outer DIVs to take on the seperate instructions.

For this reason, I'd go with what Jerry says: change those classes for #IDs. I use custom classes for smaller elements and often I'll use them to add secondary instructions to DIVs which already have IDs.
( <div id="pendulum" class="swingleft"> ), for instance.

Now, if you look at what Matt's written for you, you'll see he's styled up your main container #DIV and then made custom classes for the links. This seems right to me, but I've actually tried it and it wasn't working for me. The reason? Well, I tried it at the foot of an existing page, whose link colour attribute was set to white, which supports what I was saying earlier. It would appear that with links, especially, the main rules of the page are taking precedence (cascading down). I removed the global white link rule and Matt's link-color instructions took over. This was not the case with the text, though. I had direct control over that.

Make of this what you will.

Regards,
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

PS
You know what? It would really be more helpful to us (and in turn to you) if you could submit an image of your intended design. Dealing with snippets of code is one thing, but getting a broad overview of what you want your page to actually do, will assist people in helping you achieve it. For all we know, DIVs inside DIVs might not even be necessary, to get you exactly what you want.

logictrap
11-22-2008, 06:13 PM
See the attached file for a layout. Let me know how you would code this type of layout - specifically how to handle the sections in the right column which may repeat but not always be identical.

For coding I would use:

id's for each of the no-repeating areas: header, menu, left, center, right, footer

Classes for the repeating sections in the right col.

Is there a more semantic way to code this?

logictrap
11-22-2008, 06:22 PM
Perfect - that's what I was looking for. I kept searching for css order of precedence and couldn't find this.

Thanks


id selector has got higher precedence than a class selector. So your

.inner a:hover {
color:#FFFF00;
} is overridden by
#outer a:hover {
color:#FF0000;
}To correct it, you have to apply a more specific rule like

#outer .inner a:hoverSee the CSS specificity (http://htmldog.com/guides/cssadvanced/specificity/) rules.

PS: No need comment your CSS by <!-- -->

Doctor_Varney
11-22-2008, 07:53 PM
Abdura as always, hits the nail straight on the head. :thumbsup:

Doctor_Varney
11-23-2008, 11:10 AM
See the attached file for a layout. Let me know how you would code this type of layout - specifically how to handle the sections in the right column which may repeat but not always be identical.

For coding I would use:

id's for each of the no-repeating areas: header, menu, left, center, right, footer

Classes for the repeating sections in the right col.

Is there a more semantic way to code this?

A more semantic way? Don't think so. Sounds alright to me... Though what I tend to do, is:
#IDs for all structural stuff (layout) and .classes for more minor changes to elements which occur inside the #IDed areas. That's what I do, simply because I find it's a safe rule.

So, personally, I'd code up all my boxes as #IDs and use .classes in the manner Abduraooft suggests.

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

logictrap
11-23-2008, 07:10 PM
Thanks - I have been coding id's the way adura described but did not understand why it worked.

It's still confusing why the class attributes seem to work for everything except the link attributes unless the class definition is combined with the outer id.

abduraooft
11-24-2008, 07:03 AM
There is clear mathematical rule behind this. have you read that link in my previous post?

logictrap
11-24-2008, 03:53 PM
Thanks, yes - I understand the math.

I was referring to the concept that it seems more logical that the inner attributes would take precedence over outer attributes.

Btw: I also tries using !important for the inner links and it appears to work in FF3, IE6, IE7. Not having used this much I don't know what problems it might create down the road. How does this affect the math?

Doctor_Varney
11-25-2008, 09:54 AM
Thanks, yes - I understand the math.

I was referring to the concept that it seems more logical that the inner attributes would take precedence over outer attributes.

Well... You've got to think in terms of inheritance. Children inherit from their parents. In our case, we're dealing with code, which works by this analogy. Anything inside a parent container will be influenced by that container's instructions (including child containers).

If you put no rules in the inner box, then the inner box would behave according to the instructions set for the outer box, wouldn't it? Imagine, if you will, ID is 'stronger' than class. Think about the model I described with the champagne glass pyramids...

ID is a flow system, made up of glasses, on one table. Class is merely a variant of glass (size, shape, colour) used in that system, on that table. Declaring a new ID sets up a different system, on a seperate table. Although it appears in the code to be inside, logically, it can be considered next to it, in some ways. In other ways, it can be considered inside. Rules that are set for the new IDed div will hold precedence, but whatever instructions aren't set for this child div, it will look to the parent for.

I think where the problems start are where computer logic doesn't mirror closely, human reasoning. Because of this, you can expect the analogy to work only so far. Even nature and physics don't appear absolutely logical to us sometimes. Perhaps they don't follow it?

Make sense? I don't do math. I just think in terms of analogy. Works for me.

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum