CSS - Hassle With Menu Highlighting

H all,

I have a horizontal navigation bar which basically looks like this:

Thing0 | Thing1 | Thing2 | Thing34

What I want to do is when I select a link to a new page, I'd like (using CSS) to have that link highlighted so that the user can see which page he is on.

It's either that or hardcoding the name to each page...but since it's already in the Nav bar, I thought highlighting the link on the nav bar serves as a heading as well...

Possible?

Is it possible to define a style (color) for all instances of a certain word, say " blue " by means of CSS only? That is, not defining anything in the HTML code.
If the above is not possible, how to highlight the word "blue" using the least amount of tags in the HTML code?

Hi all,
I am trying to prevent the highlighting of text on my site only on a product description.

I currently employ techniques using the BODY tag, but I believe this is doing more harm than good because it does not allow highlighting/cutting in any other areas.

I have seen some class(es) on other sites where highlighting was not permitting ONLY in the product description (a table)

Is there a way to disable highlighting of text "IN A TABLE" via CSS or JAVA, and without the tricks of transparent layers and IFrames?

Thanks much in advance

The new version of the website I work on is now structured using CSS to position divs, whereas the old site was done entirely using tables.

The thing is, it's no longer possible to select the text properly now its inside div tags - many of the other divs get highlighted completely, and the target text gets highlighted in an unpredictable manner - whereas on the old site, with its table format, this was not a problem.

Please help!

http://digitalspline.com/projects/gameCitadel/

if you left click to the left of the layout, it highlights all the text.

Anyone know why?

I would like to prevent safari from highlighting the field that has focus. Is this possible?

I'm doing a similar effect on my site and it looks bad when they are combined.

Thanks

is this possible with CSS?
So when the carat is focused on a form field the field is highlighed maybe by changing the border color... or background color.

very much like the macromedia support site.
http://www.macromedia.com/support/

I have a feeling though... it might involve a bit of javascript?

Cheers in advance
Rob

Hey,
I'm building a rather elaborate javascript popup menu, and I'm trying to get some distinction between some of the long-text menu items. I have no padding after the <p> tags because then I get an extra space at the bottom of my menu. So I'm trying get a hanging indent to work:

my CSS styles:

.question_indent {
text-indent:-10px;
padding-left: 10px;
}

.popupmenu p{
color: white;
font-size: 0.80em;
display: block;
padding-left: 6px;
padding-right: 6px;
margin-top:0px;
margin-bottom:0px;
}

Here's my problem: with my javascript highlight-on-hover function, the hightlight starts in the middle of the first letter of the menu item with a hanging indent. I can't figure out a way to get around it (e.g. can't find anything on google).

function subhighlight(obj) {
if (subhighlighted!=null)
{
//unhighlight last link
subhighlighted.style.background = "";
subhighlighted.style.color = "#f7f7f7";
}
subhighlighted=obj;
if (subhighlighted!=null)
{
//highlight current link
subhighlighted.style.background = "#f7f7f7";
subhighlighted.style.color = "#376092";
}
}

Here's some of my menu item code:

sublinkset[0]= '<p class="question_indent">llooong text repeat llooong text repeat llooong text repeat llooong text repeat.</p>'

sublinkset[0]+='<p class="question_indent"><a href="about_us.html" id="11">But that\'s just a summary. Click to read more.</a></p>'

Greetings

I'm sure if I was cleverer I could figure this out for myself, but...
Also if I could figure out what the last person who more than likely already got an answer about this topic called it in their post, I might have found it in the search, but...

So, what I'm trying to do is this: I have a grid of images that link to a series of pages. To the right there is a standard navagation menu that also links to the same pages, and has a hover background color.

What I (and by "I" I really mean the person who I am building this for, since I wouldn't do it this way, but...) want to have happen is that when you mouseover the images they highlight the corresponding links in the navagation menu.

here is the css:
Code:

// the image grid
#left {
	float: left;
	height: auto;
	text-align: center;
	width: 810px;
}

#left ul {
	padding: 0px;
	list-style-type: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#left img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#left ul li {
	text-align: center;
	width: auto;
	float: left;
	margin-right: 15px;
	height: 200px;
	margin-bottom: 15px;
}
#left ul li a {
	text-decoration: none;
	color: #000000;
	display: block;
}

// the nav menu
#right {
	height: auto;
	width: 150px;
	float: left;
}
#right ul {
	width: 150px;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	float: right;
}
#right ul li {
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
}
#right ul li a {
	text-decoration: none;
	color: #000000;
	line-height: 38px;
	width: 135px;
	display: block;
	padding-right: 15px;
}
a.home:hover {
	background-color: #C6CED0;
}
a.bio:hover {
	background-color: #B4C2A1;
}
a.gallery:hover {
	background-color: #B4B281;
}
a.review:hover {
	background-color: #9A8F62;
}
a.current:hover {
	background-color: #AF8459;
}
a.past:hover {
	background-color: #AA8050;
}
a.contact:hover {
	background-color: #8A9B93;
}

...and here is the html:
Code:

<div id="left">
    	<ul>
      <li><a href="gallery_landscape.html"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      </ul>
    </div>
     <!--end left -->  
    <div id="right">
    <ul>
    <li><a class="home" href="armin.html">Home</a></li>
    <li><a class="bio" href="#">Landscape</a></li>
    <li><a class="gallery" href="#">Plein-Air</a></li>
    <li><a class="review" href="#">Non-Objective</a></li>
    <li><a class="current" href="#">The Figure</a></li>
    <li><a class="past" href="#">The West</a></li>
    <li><a class="contact" href="#">Comics</a></li>
    
    </ul>
    </div>
  <!--end right -->

Sorry for the long post, but I hope that makes sense...
Thanks in advance for any help.

Everyone,

I'm having an issue with the first DIV intensive site I am doing:

IE will not recognize links or allow me to highlight text, or fill in forms in the left side of DIVs that I have on a site I am developing:

httP://www.ephire.com/mack

If you try and click the "more" link up top, or goto the "contact" link, no joy in IE, but Firefox works just fine:

Here is the code I think is the culprit:

Code:

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale);

And here is the whole page. I'm seriously stumped...I tried going through and deleting things line by line and jacking with settings, and the only thing that allowed anything to work was messing with the section of code above.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
	<title>MACK Insurance</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style>

* html #wrapper {
    background: url(images/body_t.gif) 24px 0px no-repeat;
    backgro\und: none;
}

* html #ie {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_t.png');
    height: 39px;
    width: 434px;
    position: absolute;
    margin-left: 24px;
}

* html #body {
    background: url(images/body_bg.gif);
    backgro\und: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale);
}

.footerie {
    display: block;
    disp\lay: none;
}

.footer {
    display: none;
    disp\lay: block;
}

</style>
<![endif]-->

</head>

<body>
<center><table><tr><td>  <div id="ie"></div>
  <div id="wrapper">
      <h1><a href="/"><img src="images/logo.jpg" width="200" height="30" alt="logo" /></a></h1>
      <div id="body">
          <div class="inner">
              <div id="content"><div>
                <font face="Arial" size="2"><b>Health, Life, Disability</b></font>
		<br>Designed Benefits Associates is dedicated to finding the best health care program to suit the needs of a family or individual. <br><br>Our specialty is paired programs that protect not one, or two, but multiple areas of life. <a href="index_01.html"><img src="images/btn_more.gif" width="52" height="6" alt="more" /></a>
		</div></div><!-- end content -->
              <div id="page_title">
                  <img src="images/title_main_page.gif" width="47" height="200" alt="main page" />
              </div><!-- end page_title -->
              <div id="news"><div><div>
                  <font face="Arial" size="1"><b>Things to Consider</b></font>
                  <img src="images/picture_3.jpg" width="96" height="56" alt="picture 3" />
                  <p>04-20-2006</p>
                  <p>As your insurance broker, we daily search for the best priced health plans with the optimum benefits, so you can spend time doing what's important.<br><br><br></p>
                  </div></div></div><!-- end news -->
              <div class="clear"></div>
          </div><!-- end .inner -->
          <div id="footer">
		<img src="images/footer.gif" width="435" height="196" alt="footer" class="footer" />
          </div><!-- end footer -->
      </div><!-- end body -->
      <div id="paper">
          <div class="inner">
              
              <font face="Arial" size="2"><a href="http://www.ephire.com"><b>Health</b></a></font>
              <a href="http://www.ephire.com"><img src="images/picture_1.jpg" width="130" height="74" alt="picture 1" /></a>
              <br><br>
              <font face="Arial" size="2"><a href="http://www.ephire.com"><b>Life</b></a></font>
              <a href="http://www.ephire.com"><img src="images/picture_2.jpg" width="130" height="74" alt="picture 2" /></a>
              <br><br>
              <font face="Arial" size="2"><a href="http://www.ephire.com"><b>Disability</b></a></font> 
	      <a href="http://www.ephire.com"><img src="images/picture_4.jpg" width="130" height="74" alt="picture 4" /></a>
              <p>A single plan can add peace of mind, all three together can insure stability.</p>
              <center><font face="Arial" size="1"><a href="contact.html"><b>Contact</b></a> - <a href="index.html"><b>Home</b></a> - <a href="testimony.html"><b>Testimony</a></font></center>
              
          </div><!-- end .inner -->
      </div><!-- end paper -->
	
  </div><!-- end wrapper -->
  <div style="clear:both;position:relative;display:block;margin-top:530px;" >

</div></td></tr></table></center>
<center><br><table><tr><td>  <br><br><br><center>Powered by <a href="http://www.ephire.com">ephire</a></center></td></tr></table>
</body>
</html>

Any help is appreciated~

I'm making a page with what amounts to footnotes 1 . Some sources may be referenced more 2 than 2 once 2 , and when any of them is hovered over, I'd like all items in the same class to be highlighted 3 , so when i hover over this little number three 3 , I want this next number three 3 and the actual reference down below to all change color.

Is there any to do this without using javascript? (I don't care if it doesn't work in IE6 - I know that has hover issues... 4 )









1 - Like This!
2 - that one was used 3x
3 - This is red and so are all the little #3's up there
4 - I'm just using Firefox

Heya, i've made dis treeview type "component", and sumthing is bugging me.

I used divisions and addEventListener("click", wutevafunc, false) + the setTimeout funtion to enable users to expand a subnode-containing-division by double clicking the node in the tree which contains dis..

the script works.. but you double click the actual text, it gets highlighted (like, if you where to click and drag it, to copy it). Wrapping a span round the text, makes it a lill neater, since it won get highlighted if you do the double click next to the text (the containing div is wider than the text).. I tried scripting out of this too, by calling the click method on another element when the doubleclick was confirmed.

so, question, is it possible to make text non-highlightable with css? i cant seem to find a css-"knob" for that anywhere..

Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html
is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like:


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Now clicking [+] in front of Google.com will look like.

Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e.


Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e.


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting.

Here is the source for the above:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>

<style type="text/css">

ul li ul {display:none;list-style-type: none;}

#myNav li a:hover {
color: blue;
}

#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}

#myNav { list-style-image: url(page.GIF); }
</style>

<script type="text/javascript">
<!--
function initNav() {
	var navObj = document.getElementById('myNav');
	var ulCollection = navObj.getElementsByTagName('li');
	for (var loop = 0; loop < ulCollection.length; loop++) {
		if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
			/* we have an LI that contains a UL */
			if (ulCollection[loop].getElementsByTagName('span').length > 0) {
				/* there is at least one SPAN tag present */
				ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
			}
		}
	}
}
window.onload = initNav;
//-->
</script>

</head>
<body>
<ul id="myNav">
	<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
	<li><span></span><a href="http://www.google.com">Google.com</a>
		<ul>
			<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
			<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
			<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
			<ul>
			   <li>*3*</li>
			   <li>*4*</li>
			</ul>
</li>
		</ul>
	</li>

	<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
		<ul>
			<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
			<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Any help is really appreciated thanks.

EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears.
(My drop down is vertically aligned on the left.)
(bits of the code that relate to the menu)

PHP Code:
.btn1 { position: absolute; left: 165px; top: 200px; } 
.btn2 { position: absolute; left: 165px; top: 240px; }
.btn3 { position: absolute; left: 165px; top: 280px; } 
.btn4 { position: absolute; left: 165px; top: 320px; }
.btn5 { position: absolute; left: 165px; top: 360px; } 
.btn6 { position: absolute; left: 165px; top: 400px; }
.btn7 { position: absolute; left: 165px; top: 440px; } 
.btn8 { position: absolute; left: 165px; top: 480px; }
.link1 { position: absolute; left: auto; top: 240px; }
.link2 { position: absolute; left: auto; top: 280px; }
.link3 { position: absolute; left: auto; top: 320px; }
.link4 { position: absolute; left: auto; top: 360px; }
.link5 { position: absolute; left: auto; top: 400px; }
.link6 { position: absolute; left: auto; top: 440px; }
.link7 { position: absolute; left: auto; top: 480px; }
.link8 { position: absolute; left: auto; top: 520px; }
.link9 { position: absolute; left: auto; top: 560px; }

#nav, #nav ul { padding: 0; margin: 0; list-style: none; }
#nav a { display: block; width: 100px; }
#nav li { width: 100px; }
#nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; }
#nav li:hover ul { display: block; left: 266px; z-index: 3; }
#nav li:over ul { display: block; left: 266px; z-index: 3; } 





PHP Code:
<ul id="nav">
  <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li>
  <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a>
    <ul>
      <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li>
      <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li>
      <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li>
      <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li>
      <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li>
    </ul>
  </li>
    <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a>
    <ul>
      <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li>
      <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li>
      <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li>
      <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a>
    <ul>
      <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a>
    <ul>
      <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li>
      <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li>
      <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a>
    <ul>
      <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li>
      <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li>
   <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li>
</ul> 





<script type="text/javascript" src="drop_down.js"></script>
the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later.
link: The Page

Hi all,

I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear.

You can find the page he
http://www.perceptes.com/topdog/

The CSS and JS (uses jQuery) can be found he
http://www.perceptes.com/topdog/css/screen.css
http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment)
http://www.perceptes.com/topdog/js/tdps.js
http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment)

For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look.

Thanks very much in advance!