text foreground bacground colour

[Desmond]

Is it possible to det the bacground colour of text without setting the
entire background.
I have menu items and the current item is set at #777777 but setting
the background
to background: #99E7E7; sets the whole of the menu not just the text.
as in .....

#tabnav li
{ margin: 0;
padding: 0;
display:list-item;
list-style-type: none;
/* background: #99E7E7; */
color: #777777;
}


Desmond.

 

[Jukka K. Korpela]

Scripsit Desmond:

Is it possible to et the bac[k]ground colour of text without setting
the
entire background.

It depends on what you mean by background of text. You can set the
background for an _element_, including pseudo-elements, not for text as
such.

I have menu items and the current item is set at #777777 but setting
the background
to background: #99E7E7; sets the whole of the menu not just the text.
as in .....

#tabnav li
{ margin: 0;
padding: 0;
display:list-item;
list-style-type: none;
/* background: #99E7E7; */
color: #777777;
}

Why have you put the most important declaration in a comment?

Anyway, <li> elements occupy the available width by default, and setting the
background sets it for the element, not just for the text in it. So
apparently you would like to make element's width smaller or to set
background for an inner element that has a smaller width.

What are you really trying to accomplish? This sounds like a navigational
menu. Perhaps you should set some suitable width (say width: 5em) for all
items in the menu. Or perhaps you should post the URL.

 

[Desmond]

Scripsit Desmond:

Is it possible to et the bac[k]ground colour of text without setting
the
entire background.

It depends on what you mean by background of text. You can set the
background for an _element_, including pseudo-elements, not for text as
such.

I have menu items and the current item is set at #777777 but setting
the background
to background: #99E7E7; sets the whole of the menu not just the text.
as in .....

#tabnav li
{ margin: 0;
padding: 0;
display:list-item;
list-style-type: none;
/* background: #99E7E7; */
color: #777777;
}

Why have you put the most important declaration in a comment?

Anyway, <li> elements occupy the available width by default, and setting the
background sets it for the element, not just for the text in it. So
apparently you would like to make element's width smaller or to set
background for an inner element that has a smaller width.

What are you really trying to accomplish? This sounds like a navigational
menu. Perhaps you should set some suitable width (say width: 5em) for all
items in the menu. Or perhaps you should post the URL.

Ok this is going to get messy. The original site had the menu on every
page, making changes difficult. but at least it kept the active menu
hi-lighted. I have taken out the menus on a test site and placed the
menu in a seperate file for inclusion. I can't get the site to
remember which menu item is the current one.

The original site is
http://www.yorkbaptist.org.uk/activities.html

the test site is
http://www.des-otoole.co.uk/YBC2/

menu is controled by a style sheet using #tabnav a:link.active,
#tabnav a:visited.active

Desmond.

 

[Ben C]

Is it possible to det the bacground colour of text without setting the
entire background.
I have menu items and the current item is set at #777777 but setting
the background
to background: #99E7E7; sets the whole of the menu not just the text.
as in .....

#tabnav li
{ margin: 0;
padding: 0;
display:list-item;
list-style-type: none;
/* background: #99E7E7; */
color: #777777;
}

That's because li is a block box (well display: list-item, but similar
to a block box). It sounds like you want an inline-box background.

Try putting the text you want the background colour behind in a <span>
element, and adding

#tabnav li span { background: #99E7E7; }

 

[Jukka K. Korpela]

Scripsit Desmond:

Ok this is going to get messy.

Then I think you should simplify, rather than look for new complications.

The original site had the menu on every
page, making changes difficult.

That's a common symptom of excessive navigation, or navigatitis. The simple
solution is to make the primary links the main content of the main page and
make other pages link just to the main page. If you don't like this idea,
live with the consequences. Generally, the main menu should seldom be
changed. Frequent changes to it indicate bad design.

but at least it kept the active menu hi-lighted.

What's "active menu"? I suppose you mean the currently selected menu _item_.
Actually it should be down-lighted rather than highlighted, and it should
not be a link. Self-referencing links are a no-no.

I have taken out the menus on a test site and placed the
menu in a seperate file for inclusion. I can't get the site to
remember which menu item is the current one.

You would need more than simple inclusion, of course.

The original site is
http://www.yorkbaptist.org.uk/activities.html

Many navigational links wrap to two lines, making the menu rather confusing.
I think this is more serious than the problem you described - and I cannot
see that problem, really. Highlighting links on mouseover works well, since
it operates on the <a> elements, which are inline and just take the width
they need.

 

[Jonathan N. Little]

Many navigational links wrap to two lines, making the menu rather
confusing.

Maybe in IE but in Gecko browsers the link overwrites the cross....
positioned there is nothing to constrain the text otherwise.

IF you ant such an effect far better to size menu in dimensions relating
to the text, ems, and then offsetting the cross image relative to that!