nested div stylesheet question

[theo]

if I have nested div combinations, can I call
for styles only to specific nested combos?

It's 3 lists <li>, on one page, needing different styles.

<div id=list1><li> <a id="t1" href=...>main</a></li><div>

<div id=list2><li> <a id="t1" href=...>main</a></li><div>

<div id=list3><li> <a id="t1" href=...>main</a></li><div>
I need the <li> in menu1 to be 10% width; and the
<li> in menu2 and menu3 to be 100% width.
How would I call this one?

#list1..li...?? ???? {
width:10%
}

#list2+3,li???? ?? {
width:100%
}

Thanks,
Theo

[Barbara de Zoete]

On Mon, 21 Feb 2005 14:48:29 -0600, theo <th**@nospam.co m> wrote:

if I have nested div combinations, can I call
for styles only to specific nested combos?

It's 3 lists <li>, on one page, needing different styles.

<div id=list1><li> <a id="t1" href=...>main</a></li><div>

<div id=list2><li> <a id="t1" href=...>main</a></li><div>

<div id=list3><li> <a id="t1" href=...>main</a></li><div>

For one, this is not what nested means. Nested would be like
<div>
<div>
<div></div>
</div>
</div>

Like the first div embraces both others and the second div embraces just the
middle one.

Secondly, did you try validate that markup? I bet you it won't. Putting list
items in the wild like that isn't smart. List items are elements that should be
contained in either an ordered list or an unorderd list, like

<ul>
<li></li>
<li></li>
<li></li>
</ul>
I need the <li> in menu1 to be 10% width; and the
<li> in menu2 and menu3 to be 100% width.

You've set something of a parent element up with a width, so the 10% and 100%
actually can relate to that, did you?

I don't see a menu1 anywhere in the code you provided, so I have to guess some
here. My guess is, this is what you are trying to do (don't use a space as a
starting character; set an appropriate padding on the element if you need it):

<ul id="menu">
<li class="narrow"> <a id="t1" href=...>main</a></li>
<li><a ...>something</a></li>
<li><a ...> something else</a></li>
</ul>

ul#menu { width:$length; }

#menu li { width:100%; }

#menu li.narrow { width:10%; }

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Steve Pugh]

"theo" <th**@nospam.co m> wrote:

if I have nested div combinations, can I call
for styles only to specific nested combos?
Yes if they have different class and/or id a$ttributes.
It's 3 lists <li>, on one page, needing different styles.

<div id=list1><li> <a id="t1" href=...>main</a></li><div>

<div id=list2><li> <a id="t1" href=...>main</a></li><div>

<div id=list3><li> <a id="t1" href=...>main</a></li><div>
1. You open six divs but don't close any of them. Are the final <div>s
on each line meant to be </div>s?
2. Your code is invalid. <li> can only be a child of <ul>, nothing
else.
3. Values for id must be unique within the page. You can not have
three different id="t1" in the same page.
I need the <li> in menu1 to be 10% width; and the
<li> in menu2 and menu3 to be 100% width.

Assuming that your code really looks something like this:

<ul id=list1><li> <a class="t1" href=...>main</a></li></ul>
<ul id=list2><li> <a class="t1" href=...>main</a></li></ul>
<ul id=list3><li> <a class="t1" href=...>main</a></li></ul>

#list1 li {width: 10% ;}
#list2 li, #list3 li {width: 100%;}

Though you're probably better off setting the widths of the <ul>s
rather than the <li>s but that may depend on your real code and the
rest of your styles.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>

[Barbara de Zoete]

On Mon, 21 Feb 2005 21:00:30 +0000, Steve Pugh <st***@pugh.net > wrote:

"theo" <th**@nospam.co m> wrote:

<div id=list1><li> <a id="t1" href=...>main</a></li><div>

<div id=list2><li> <a id="t1" href=...>main</a></li><div>

<div id=list3><li> <a id="t1" href=...>main</a></li><div>

1. You open six divs but don't close any of them. Are the final <div>s
on each line meant to be </div>s?

I never even saw that.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Jan Roland Eriksson]

On Mon, 21 Feb 2005 14:48:29 -0600, "theo" <th**@nospam.co m> wrote:

if I have nested div combinations, can I call
for styles only to specific nested combos?
Yes; provided that you do things the _right_ way from the start.
It's 3 lists <li>, on one page, needing different styles.
That's Ok so far, but not for very long as we shall see...
<div id=list1><li> <a id="t1" href=...>main</a></li><div>
Error #1: <li> elements must be contained within either of a <ul> or a
<ol> element. You can not put an <li> element directly in a <div>
element.
<div id=list2><li> <a id="t1" href=...>main</a></li><div>
Error #1: (same as #1 above)
Error #2: each assigned value for an 'id' must be unique within an HTML
document instance and you have already used 't1' in the previous line.
<div id=list3><li> <a id="t1" href=...>main</a></li><div>
Error #1: (same as #1 above)
Error #2: (same as #2 above)

Generic error: I find it hard to believe that you can find some logic in
a set of lists that has only one entry per list.

Generic doubt: I find it hard to see why the use of 'id' should be
preferable here, to me it looks like a clear case for the 'class'
attribute.
I need the <li> in menu1 to be 10% width; and the
<li> in menu2 and menu3 to be 100% width.

Fix your markup to be valid an logically correct first, then come back
with an example URL for your test page and we could take it from there.

--
Rex

[theo]

> You've set something of a parent element up with a width, so the 10% and
100%

actually can relate to that, did you?

I don't see a menu1 anywhere in the code you provided, so I have to guess some here. My guess is, this is what you are trying to do (don't use a space as a starting character; set an appropriate padding on the element if you need it):
<ul id="menu">
<li class="narrow"> <a id="t1" href=...>main</a></li>
<li><a ...>something</a></li>
<li><a ...> something else</a></li>
</ul>

ul#menu { width:$length; }

#menu li { width:100%; }

#menu li.narrow { width:10%; }

Barbara,
I truly appreciate your time and energy here, as I
didn't have a clue with regard to how to accomplish this.

So, once you add a class to the <ul>, you style it by
calling the ul#menu {}

The <li> is also styled, but you called that differently,
with #menu li.narrow instead.

I'm going to have to find the manual! Are you saying that
I should not style the <ul> or the <li>, being parent elements,
but that I should add class and style the new class? Or, are
you adding a class only to those which need to be different?

If I have a:

<div id="menu1">
<ul>
<li><a id="t1" href=...>main</a></li>
<li><a ...>something</a></li>
<li><a ...> something else</a></li>
</ul>
</div>

<div id="menu2">
<ul>
<li><a id="t1" href=...>main</a></li>
<li><a ...>something</a></li>
<li><a ...> something else</a></li>
</ul>
</div>

is it kosher to seperate and style the <li> with:

#menu1 li {width:10%;}
#menu2 li {width:100%}?

Theo

[theo]

Error #2: each assigned value for an 'id' must be unique within an HTML
document instance and you have already used 't1' in the previous line.

I can't use id multiple times? Didn't know that. All that I read about
id was that it is the same as a class, but used in cases where javascript
was present, being that javascript also uses classes. It was a brief
tutorial

Theo

[Jan Roland Eriksson]

On 21 Feb 2005 22:03:55 +0100, "Barbara de Zoete"
<b_********@hot mail.com> wrote:

On Mon, 21 Feb 2005 21:00:30 +0000, Steve Pugh <st***@pugh.net > wrote:

"theo" <th**@nospam.co m> wrote:

<div id=list1><li> <a id="t1" href=...>main</a></li><div>
<div id=list2><li> <a id="t1" href=...>main</a></li><div>
<div id=list3><li> <a id="t1" href=...>main</a></li><div>

1. You open six divs but don't close any of them. Are the final <div>s
on each line meant to be </div>s?

I never even saw that.

<AOL>Me too</AOL>
sad to say I feel a bit embarrased :-)

--
Rex

[Barbara de Zoete]

On Mon, 21 Feb 2005 16:08:07 -0600, theo <th**@nospam.co m> wrote:

<ul id="menu">
<li class="narrow"> <a id="t1" href=...>main</a></li>
<li><a ...>something</a></li>
<li><a ...> something else</a></li>
</ul>

ul#menu { width:$length; }

#menu li { width:100%; }

#menu li.narrow { width:10%; }

So, once you add a class to the <ul>, you style it by
calling the ul#menu {}

In a stylesheet, a selector starting with a # means it is an id. Starting with a
.. (dot) means it is a class. You can use a class as many times in a page as you
wish. An id however, you can only use once in a page. Like a social security
number. There can only be one navigation_menu , one page_header, one main_content
et cetera. Choosing an id over a class also has impact as to how styles are
cascaded.

inline styles wins over anything (except if no css capability is present
ofcourse)
the rest of the order is: id's
classes with !important added to them
normal classes
general styles (element is also the selector)

Need to know, if you want to be able to make proper use of css.
The <li> is also styled, but you called that differently,
with #menu li.narrow instead.

Well, yes. You can use multiple classes on an element (only one id) in you
markup. In your css you can single out a certain class or id by following the
line of descendents.
With elements you can style, as a general rule

body { styles }

p ( styles }

div { styles }

and then create specific styles for paragraphs that are nested inside a div for
example

div p { styles, different from the previous p }

Those will only apply to paragraphs that are descendents of div's.
I'm going to have to find the manual!
My thought exactly. Here your are:
For starting: <http://www.w3.org/MarkUp/Guide/Style.html>
The standards: <http://www.w3.org/TR/2002/WD-CSS21-20020802/cover.html>
For validation: <http://jigsaw.w3.org/css-validator/>
Are you saying that
I should not style the <ul> or the <li>, being parent elements,
but that I should add class and style the new class?
Doesn't really parse properly what you just said. I was just wild guessing my
way around, because I had not a really clear picture of what you were needing or
wanting.
Or, are
you adding a class only to those which need to be different?

You can style all elements you use directly. That is very good practice, to do
that. Then if something needs a style of its own, you can add a class to the
element and give it styles through use of that class, or you can nest the
element inside a parent with a class or id and style it using that. Depends on
the context which is preferred.
If I have a:

<div id="menu1">
<ul>
<li><a id="t1" href=...>main</a></li>
<li><a ...>something</a></li>
<li><a ...> something else</a></li>
</ul>
</div>

If you have only one menu, you could just as easily add the id to the unordered
list and style that directly.
<div id="menu2">
<ul>
<li><a id="t1" href=...>main</a></li>
<li><a ...>something</a></li>
<li><a ...> something else</a></li>
</ul>
</div>

is it kosher to seperate and style the <li> with:

#menu1 li {width:10%;}
#menu2 li {width:100%}?

If it stays as simple as this, you can just as easily put those id's on the
ul's. You don't need those divs then. Saves code. Keeps things clean and clear.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Steve Pugh]

"Barbara de Zoete" <b_********@hot mail.com> wrote:

inline styles wins over anything (except if no css capability is present
ofcourse)
the rest of the order is: id's
classes with !important added to them
You can apply !important to any style rule not just to ones selected
with a class.
!important also moves the rule higher in the cascade (above all other
author rules but below use rules with !important) so it will beat an
inline style.
normal classes
general styles (element is also the selector)

A brief list of rules should have gone (ignoring user style sheets):
1. !important
2. Inline style.
3. ID
4. Class, pseudo-class (such as :link) and other attributes (such as
[type=text])
5. Elements and pseudo-elements
6. Any other selector (such as the universal selector *)

However, in combination it's a lot more complex than that.
http://www.w3.org/TR/CSS21/cascade.html#specificity
Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>