Stylesheets - problem with list

Author

problem with list

Wilhelm Kutting

2005-09-11, 7:29 pm

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="mainlevel">Page1</a></li>
<li><a href="page2" class="mainlevel">Page2</a></li>
<li><a href="page3" class="mainlevel" 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

2005-09-11, 7:29 pm

On Sun, 11 Sep 2005 14:11:19 +0200, Wilhelm Kutting
<wkutting@arcor.de> wrote or quoted :

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

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="mainlevel">

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

2005-09-11, 11:21 pm

Roedy Green wrote:
> On Sun, 11 Sep 2005 14:11:19 +0200, Wilhelm Kutting
> <wkutting@arcor.de> wrote or quoted :
>
>
>
>
> 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="mainlevel">
>
> Then you can select the hrefs with with
>
> ul.mainlevel li a:link { .... }
>
> or the lis with ul.mainlevel li { }

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">Page1</a></li>
<li><a href="page2">Page2</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

2005-09-12, 11:19 pm

boclair wrote:
[...]
>
> 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

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

2005-09-12, 11:19 pm

RobG wrote:
> boclair wrote:
> [...]
>
>
>
> 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)?
>
> [...]
>
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.minutecontent a {
color: #0000FF;
display: block;
font: normal 90% "Courier New", Courier, monospace;
margin-bottom: 0.5em;
}
div.minutecontent a:hover {
color: #C00000;
}
div.minutecontent div#toc {
background: #EFEFEF;
border: 1px solid #006600;
float: right;
margin-left: 0.2em;
margin-top: -1em;
padding: 3px;
width: 250px;
}
div.minutecontent 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.minutecontent div.authenticate {
font: bold 90% "Courier New", Courier, monospace;
margin-top: 1em;
}
div.minutecontent div.authenticate div.auth-line{
margin-bottom: 0.5em;
}
div.minutecontent div.authenticate div.sign{
float: right;
width: 140px;
}
div.minutecontent 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.minutecontent div.election {
margin-bottom: 0.7em;
margin-left: 3em;
margin-top: 0.7em;
}
div.minutecontent div.election b {
text-decoration: underline;
}
div.minutecontent div.election div.election-detail {
margin-left: 1em;
}
div.minutecontent div.election div.election-detail div.nomination {
margin-top: 1em;
}
div.minutecontent div.election div.election-detail div.election-posn {
margin-left: 1em;
text-decoration: underline;
}
div.minutecontent div.election div.election-detail div.name {
float: right;
margin-left: 2px;
margin-right: -15px;
text-align: left;
width: 200px;
}
div.minutecontent div.genbiz {
margin-left: 2em;
}
div.minutecontent div.genbiz h5 {
font-size: 95%;
text-decoration: none;
}
div.minutecontent 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.minutecontent 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.minutecontent div.uplink a:hover {
background: #C00000;
color: #FFFFFF;
}
div.minutecontent h4 {
clear: both;
font-size: 16px;
margin: 1em 0 0;
text-align: center;
}
div.minutecontent h5 {
clear: both;
font-size: 12px;
margin: 1em 0 0;
text-decoration: underline;
}
div.minutecontent mover {
margin-top: 0.7em;
}
div.minutecontent p {
margin-bottom: 0;
margin-left: 2em;
margin-top: 0.5em;
}
div.minutecontent span {
text-decoration: underline;
}
div.minutecontent ul.iestat {
list-style-type: none;
}
div.minutecontent ul.iestat div.amount {
float: right;
padding-right: 1em;
text-align: right;
width: 100px;
}
div.minutecontent ul.iestat li {
clear: both;
}

_____END CSS SNIPPET______