this nested div question

[B McDonald]

Hi. I am attempting to achieve the following layout:

/------------------------------------\
| text text text text text text text text |
| text text text text text text text text |
| ---------------------------------- |
| text text text | text text text |
| text text text | text text text |
| text text text | text text text |
\------------------------------------/

This is something of a unique block giving company info. So the style
defining it will not repeat.

Here's the HTML:

<div id="Block1">
<p>
text text text text text text text text
text text text text text text text text
</p>
<div id="Col1">
<p>
text text text
text text text
text text text
</p>
</div>
<div id="Col2">
<p>
text text text
text text text
text text text
</p>
</div>

And here's what I imagine for the CSS:

#Block1 {
background-color: #CCCC99;
etc;
}

#Block1 #Col1 {
etc;
}

#Block1 #Col2 {
etc.
}

But this doesn't work. I've tried a few variations and still I can't seem to
apply the style to the 2 inner columns.

Any ideas?

Brian

[B McDonald]

Re: this nested div question


"William Tasso" <ngx@tbdata.com > wrote in message
news:bim72a$as8 t2$1@ID-139074.news.uni-berlin.de...[color=blue]
>
> I suspect the key is in the etc. Do you have a URL?
>[/color]

I don't have a URL. I'm localhosted.

Perhaps I should ask this question:

If I have a containing block, the style of which I may set using this CSS
rule:

#ContainingBloc k1 {
/* rules */
}

How can I reference a div nested within a <div id="ContainingB lock">
element?

For example, <div class="Col1">?

#ContainingBloc k div.Col1 {
/* rules */
}

doesn't work.

Brian

[Brian]

Re: this nested div question

B McDonald wrote:[color=blue]
>
> If I have a containing block, the style of which I may set using this CSS
> rule:
>
> #ContainingBloc k1 {
> /* rules */
> }
>
> How can I reference a div nested within a <div id="ContainingB lock">
> element?[/color]

http://www.w3.org/TR/REC-CSS2/selector.html#descendant-selectors

http://www.w3.org/TR/REC-CSS2/selector.html#child-selectors

[color=blue]
> For example, <div class="Col1">?
>
> #ContainingBloc k div.Col1 {
> /* rules */
> }
>
> doesn't work.[/color]

For your example, you forgot the "1" in the id name.

#ContainingBloc k1 div.Col1 {
/* rules */
}

--
Brian
follow the directions in my address to email me

[Mikko Rantalainen]

Re: this nested div question

B McDonald / 2003-08-28 23:49:
[color=blue]
> Hi. I am attempting to achieve the following layout:
> [Broken ASCII graphics removed. Please, use fixed width font to draw these.]
>
> <div id="Block1">
> <div id="Col1">
> </div>
> <div id="Col2">
> </div>[/color]

</div>
[color=blue]
> And here's what I imagine for the CSS:
>
> #Block1 {
> background-color: #CCCC99;
> etc;
> }
>
> #Block1 #Col1 {
> etc;
> }[/color]

You don't need ancestor selectors here because the "Col1" id is by
definition unique and you can simply select it with "#Col1". I'd
also suggest to always use all lowercase for id and class names
because you'll end up doing a typo sooner or later and some browsers
are known to make difference on letter case.

Are you sure you link the style correctly? Does
* { border: solid thick red; }
correctly add borders to every element on the page?

Have you already visited http://validator.w3.org/ and checked both
markup and CSS?

In the future, please, add URL. If the page isn't on a public
server, then make it so.

--
Mikko

[Johannes Koch]

Re: this nested div question

Mikko Rantalainen wrote:[color=blue]
> B McDonald / 2003-08-28 23:49:
>[color=green]
>> <div id="Block1">
>> <div id="Col1">
>> </div>
>> <div id="Col2">
>> </div>[/color][/color]
[...][color=blue][color=green]
>> #Block1 #Col1 {
>> etc;
>> }[/color]
>
>
> You don't need ancestor selectors here because the "Col1" id is by
> definition unique and you can simply select it with "#Col1".[/color]

Maybe the div with id="Col1" appears within a div with id="Block2" in
another document referencing the same CSS.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Mikko Rantalainen]

Re: this nested div question

Johannes Koch wrote:[color=blue]
> Mikko Rantalainen wrote:
>[color=green][color=darkred]
>>>#Block1 #Col1 {[/color]
>>
>>You don't need ancestor selectors here because the "Col1" id is by
>>definition unique and you can simply select it with "#Col1".[/color]
>
> Maybe the div with id="Col1" appears within a div with id="Block2" in
> another document referencing the same CSS.[/color]

Then one shouldn't use id but class instead, IMHO. It might be that
there's only one such element per page, but the real intent of that
element isn't unique but instead that element belongs to a class of
elements.

After saing that, I must admit that you're absolutely right and there's
nothing in the spec forcing to select ids directly without ancestor
selectors. And I never claimed anything like that.

--
Mikko