problem with list

[Wilhelm Kutting]

Hello i have the following Unordered List with the shown stylesheet
definiton (out of mambo cms).
What i like to have is that page 3 is shown with circle-full.gif but
that didn't work out.
Can someone paste me a good explaining url or a solution for me?

<ul id="mainlevel" >
<li><a href="page1" class="mainleve l">Page1</a></li>
<li><a href="page2" class="mainleve l">Page2</a></li>
<li><a href="page3" class="mainleve l" id="active_menu ">Page3</a></li>
</ul>


with the following style definition

#mainlevel li a{
background-repeat: no-repeat;
background-position: 8px;


display: block;
margin-left: 0px;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
list-style-image: none;
}

#mainlevel li a:link, #mainlevel li a:visited{
background-image: url(/images/circle.gif);
}

#mainlevel li a:hover{
background-image: url(/images/circle-full.gif);
}
#active_menu{
background-image: url(/images/circle-full.gif);
}

[Roedy Green]

Re: problem with list

On Sun, 11 Sep 2005 14:11:19 +0200, Wilhelm Kutting
<wkutting@arcor .de> wrote or quoted :
[color=blue]
><ul id="mainlevel" >
><li><a href="page1" class="mainleve l">Page1</a></li>
><li><a href="page2" class="mainleve l">Page2</a></li>
><li><a href="page3" class="mainleve l" id="active_menu ">Page3</a></li>
></ul>[/color]

I the first thing I would do is get rid of the id="mainlevel" and get
rid of the markup on each href

You only need to mark the ul <ul class="mainleve l">

Then you can select the hrefs with with

ul.mainlevel li a:link { .... }

or the lis with ul.mainlevel li { }
--
Canadian Mind Products, Roedy Green.
http://mindprod.com Again taking new Java programming contracts.

[boclair]

Re: problem with list

Roedy Green wrote:[color=blue]
> On Sun, 11 Sep 2005 14:11:19 +0200, Wilhelm Kutting
> <wkutting@arcor .de> wrote or quoted :
>
>[color=green]
>><ul id="mainlevel" >
>><li><a href="page1" class="mainleve l">Page1</a></li>
>><li><a href="page2" class="mainleve l">Page2</a></li>
>><li><a href="page3" class="mainleve l" id="active_menu ">Page3</a></li>
>></ul>[/color]
>
>
> I the first thing I would do is get rid of the id="mainlevel" and get
> rid of the markup on each href
>
> You only need to mark the ul <ul class="mainleve l">
>
> Then you can select the hrefs with with
>
> ul.mainlevel li a:link { .... }
>
> or the lis with ul.mainlevel li { }[/color]

I would have thought that, provided this ul is to be used uniquely, the
css rules and markup might be

ul#mainlevel li {...}
ul#mainlevel li a {...}
etc

with
<ul id="mainlevel" >
<li><a href="page1">Pa ge1</a></li>
<li><a href="page2">Pa ge2</a></li>
<li><a href="page3" id="active_menu ">Page3</a></li>
</ul>

What I am surmising is that there can be many incidents of styled
children of a unique parent (the mind boggles)

Louise

[RobG]

Re: problem with list

boclair wrote:
[...][color=blue]
>
> I would have thought that, provided this ul is to be used uniquely, the
> css rules and markup might be
>
> ul#mainlevel li {...}
> ul#mainlevel li a {...}
> etc[/color]

Maybe a dumb question, but does the leading 'ul' have any effect? Wouldn't:

#mainlevel li {...}
#mainlevel li a {...}

do just as well (given that the id 'mainlevel' can only appear on one
element anyway)?

[...]

--
Rob

[boclair]

Re: problem with list

RobG wrote:[color=blue]
> boclair wrote:
> [...]
>[color=green]
>>
>> I would have thought that, provided this ul is to be used uniquely,
>> the css rules and markup might be
>>
>> ul#mainlevel li {...}
>> ul#mainlevel li a {...}
>> etc[/color]
>
>
> Maybe a dumb question, but does the leading 'ul' have any effect?
> Wouldn't:
>
> #mainlevel li {...}
> #mainlevel li a {...}
>
> do just as well (given that the id 'mainlevel' can only appear on one
> element anyway)?
>
> [...]
>[/color]
It doesn't except to aid the author in managing the style sheet,
especially long ones. It groups of selectors logically and helps where
inheritance could override. For example, take this snippet out of a
style sheet 2789 lines long used for a basically dynamically generated
site. Is it not easier to find where the selectors are grouped in
context.

Louise

_____CSS SNIPPET________ ____
div.minuteconte nt a {
color: #0000FF;
display: block;
font: normal 90% "Courier New", Courier, monospace;
margin-bottom: 0.5em;
}
div.minuteconte nt a:hover {
color: #C00000;
}
div.minuteconte nt div#toc {
background: #EFEFEF;
border: 1px solid #006600;
float: right;
margin-left: 0.2em;
margin-top: -1em;
padding: 3px;
width: 250px;
}
div.minuteconte nt div.action {
color: #1B060B;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
margin-top: 0.7em;
padding-right: 10px;
text-align: right;
text-decoration: underline;
}
div.minuteconte nt div.authenticat e {
font: bold 90% "Courier New", Courier, monospace;
margin-top: 1em;
}
div.minuteconte nt div.authenticat e div.auth-line{
margin-bottom: 0.5em;
}
div.minuteconte nt div.authenticat e div.sign{
float: right;
width: 140px;
}
div.minuteconte nt div.decision {
color: #1B060B;
float: right;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
margin-top: 0.7em;
padding-right: 10px;
text-align: right;
text-decoration: underline;
width: 100px;
}
div.minuteconte nt div.election {
margin-bottom: 0.7em;
margin-left: 3em;
margin-top: 0.7em;
}
div.minuteconte nt div.election b {
text-decoration: underline;
}
div.minuteconte nt div.election div.election-detail {
margin-left: 1em;
}
div.minuteconte nt div.election div.election-detail div.nomination {
margin-top: 1em;
}
div.minuteconte nt div.election div.election-detail div.election-posn {
margin-left: 1em;
text-decoration: underline;
}
div.minuteconte nt div.election div.election-detail div.name {
float: right;
margin-left: 2px;
margin-right: -15px;
text-align: left;
width: 200px;
}
div.minuteconte nt div.genbiz {
margin-left: 2em;
}
div.minuteconte nt div.genbiz h5 {
font-size: 95%;
text-decoration: none;
}
div.minuteconte nt div.resolution {
border-left: 1px solid #0002E1;
color: #1B060B;
font-family: "Courier New", Courier, monospace;
font-style: italic;
font-weight: bold;
margin-left: 3.5em;
margin-top: 0.7em;
padding-left: 2px;
width: 340px;
}
div.minuteconte nt div.uplink a {
background: #EFEFEF;
border: 1px solid #006600;
float: left;
font: bold 16px "Courier New", Courier, monospace;
margin-bottom: -1em;
margin-top: 0.5em;
padding: 3px;
text-decoration: none;
width: 30px;
}
div.minuteconte nt div.uplink a:hover {
background: #C00000;
color: #FFFFFF;
}
div.minuteconte nt h4 {
clear: both;
font-size: 16px;
margin: 1em 0 0;
text-align: center;
}
div.minuteconte nt h5 {
clear: both;
font-size: 12px;
margin: 1em 0 0;
text-decoration: underline;
}
div.minuteconte nt mover {
margin-top: 0.7em;
}
div.minuteconte nt p {
margin-bottom: 0;
margin-left: 2em;
margin-top: 0.5em;
}
div.minuteconte nt span {
text-decoration: underline;
}
div.minuteconte nt ul.iestat {
list-style-type: none;
}
div.minuteconte nt ul.iestat div.amount {
float: right;
padding-right: 1em;
text-align: right;
width: 100px;
}
div.minuteconte nt ul.iestat li {
clear: both;
}

_____END CSS SNIPPET______