Prev: Is there a way to detect "unused" CSS entries?
Next: photo gallery css erratic
From: A. Deguza on 2 Apr 2010 15:41
Hello All:

Why doesn't the following style sheet elements create three horizontal
stripes of different color areas?

#upperband div {
height: 200px;
background-color: #EDD2A7;
}

#midband div {
height: 24px;
background-color: #EEEEEE;
}

#lowerband div {
height: 2000px;
background-color: #7C9CAF;
}

My page has:

<div id="upperband ">This is a test </div>
<div id="midband"> This is a test </div>
<div id="lowerband "> This is a test </div>

Thanks,

Arturo
From: C A Upsdell on 2 Apr 2010 16:14
On 2010-04-02 15:41, A. Deguza wrote:
> Hello All:
>
> Why doesn't the following style sheet elements create three horizontal
> stripes of different color areas?
>
> #upperband div {
> height: 200px;
> background-color: #EDD2A7;
> }
>
> #midband div {
> height: 24px;
> background-color: #EEEEEE;
> }
>
> #lowerband div {
> height: 2000px;
> background-color: #7C9CAF;
> }
>
> My page has:
>
> <div id="upperband ">This is a test</div>
> <div id="midband"> This is a test</div>
> <div id="lowerband "> This is a test</div>

Do

div#upperband

instead of

#upperband div

Etc.

From: Thomas 'PointedEars' Lahn on 2 Apr 2010 22:41
A. Deguza wrote:

> Why doesn't the following style sheet elements create three horizontal
> stripes of different color areas?
>
> #upperband div {
> height: 200px;
> background-color: #EDD2A7;
> }
>
> #midband div {
> height: 24px;
> background-color: #EEEEEE;
> }
>
> #lowerband div {
> height: 2000px;
> background-color: #7C9CAF;
> }
>
> My page has:
>
> <div id="upperband ">This is a test </div>
> <div id="midband"> This is a test </div>
> <div id="lowerband "> This is a test </div>

Because there is no `div' element that is a *descendant* of an element with
either ID of `upperband', `midband', or `lowerband'. And I must be very
much mistaken if I have not explained this to you before.

RTFM: <http://www.w3.org/TR/CSS2/selector.html#selector-syntax>

You should also add a declaration of the text color (and lose the
nonsensical 2000px while you are at it):

<http://www.w3.org/QA/Tips/color>


PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
From: A. Deguza on 2 Apr 2010 23:14
On Apr 2, 7:41 pm, Thomas 'PointedEars' Lahn <PointedE...(a)web.de>
wrote:
[..]
> Because there is no `div' element that is a *descendant* of an element with
> either ID of `upperband', `midband', or `lowerband'.  And I must be very
> much mistaken if I have not explained this to you before.
>
> RTFM: <http://www.w3.org/TR/CSS2/selector.html#selector-syntax>
>
> You should also add a declaration of the text color (and lose the
> nonsensical 2000px while you are at it):
>
> <http://www.w3.org/QA/Tips/color>
>

I remember reading your posting.

However, I are a slow learner. Will take a few attempts to build
things from scratch, making mistakes, and then saying "Pointed Ears
said something like 'childs', 'offsprings' and 'bastards' --or was it
'descendants' and 'inheritors'. Are I doing something wrong?. Let me
ask again"...

Then I pick up all my courage and ask the
comp.infosystems.www.authoring.stylesheets.

And AllEars poynt mi to the rite 'heirs' --or was it the
'descendants'?. Whatever.

Thanks

Arturo the Slow and the Silly

From: dorayme on 2 Apr 2010 23:46
In article
<6cd5266b-f0aa-47d4-9b25-3960db89fa89(a)x12g2000yqx.googlegroups.co
m>,
"A. Deguza" <deguza(a)hotmail.com> wrote:

> Hello All:
>
> Why doesn't the following style sheet elements create three horizontal
> stripes of different color areas?
>
> #upperband div {
> height: 200px;
> background-color: #EDD2A7;
> }
>
> #midband div {
> height: 24px;
> background-color: #EEEEEE;
> }
>
> #lowerband div {
> height: 2000px;
> background-color: #7C9CAF;
> }
>
> My page has:
>
> <div id="upperband ">This is a test </div>
> <div id="midband"> This is a test </div>
> <div id="lowerband "> This is a test </div>
>

Because your #upperband div targets a div that is *inside* an
element of id="upperband". But you have no such element that has
a div inside it. What you have is a div which is itself of
id="upperband" and it has no further div inside it.

The other thing wrong (assuming better CSS) is your HTML. Look
closely at your "upperband" and "lowerband". You have space at
the end of each. It is important not to have this space if the id
is really supposed to be "upperband" and "lowerband".


There are three things you can do.

1. The suggestion of C A Upsdell (which you might have missed):

div#upperband instead of #upperband div

2. The even simpler:

#upperband {background-color: #EDD2A7;}

or

3. Get a pot of oil and find out where there are a pointed set of
ears and cook them up slowly so they tenderise well.

---------------

Here is some markup that might suit you:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>Three bands</title>
<style type="text/css">
#upperband {
height: 200px;
background-color: #EDD2A7;
}

#midband {
height: 24px;
background-color: #EEEEEE;
}

#lowerband {
height: 2000px;
background-color: #7C9CAF;
}
</style>
</head>
<body>
<div id="upperband">
This is a test
</div>
<div id="midband">
This is a test
</div>
<div id="lowerband">
This is a test
</div>
</body>
</html>

--
dorayme
 | 
Pages: 1
Prev: Is there a way to detect "unused" CSS entries?
Next: photo gallery css erratic