|
CSS - Highlighting Current Tab On Navigation.
I am 99.99999% sure that there is no way to do this in pure CSS but just in case.
I have tabbed navigation. When a user clicks on a link it loads that page from the server (a page refresh). The corresponding nav tab should then be in its active state. Does CSS support this at all? I am happy to run a server side script to set an item to "current" but I would like to know if there is any way around it. Thanks. Similar TutorialsH 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? I've been at this for hours and hours and I've tried about 50 different ways to get this to work but I'm totally stumped. I've switched the id and class around (in my site's theme.php and template.html) so often that I'm dizzy. I've searched Google and these forums (among others) for help but still, I'm getting nowhere. Maybe my CSS skills are lacking but this seems simple enough (or is it?). Anyway, here's the problem: The CSS (below) just won't work...so what's wrong with it? What am I missing? Code: ul#navigation {
list-style: none;
margin:0 auto;
padding:0;
font-family: Arial, Verdana, Serif;
font-weight:bold;
background:#32478A;
text-transform:uppercase;
height:25px;
line-height:25px;
font-size:12px;
}
ul#navigation li {
float:left;
margin:0;
padding:0;
list-style:none;
white-space:nowrap;
background:none;
}
ul#navigation li a {
display:block;
padding:0 15px;
text-transform:uppercase;
letter-spacing:1px;
border:none;
color:#fff;
}
ul#navigation li a:hover, ul#navigation li a:active, ul#navigation li.current_page_item a {
color:#242169;
background:#fff;
}
My template.html UL ID looks like this... Code: <ul id="navigation">
{SYS_MENU}
</ul>
...and the theme.php CLASS (login link for example) looks like this: Code: <!-- BEGIN login -->
<li><a href="{LOGIN_TGT}" title="Click here to log in" class="current_page_item"> Log in</a></li>
<!-- END login -->
Here's a link to my site: The hover and active bits seem to work but not the CURRENT...which is what I need to fix. Simply put, the current tab at the top of the page doesn't change to reflect what page you're on. I apologize in advance for the coding mess on my site but I'm just now getting around to cleaning things up. I could really use a hand fixing this little monster. Anyone with stellar CSS skills ready to school this lazy bum? Cheers. EDIT: The link (BBCode) above (to my site) doesn't work, so click my homepage in the drop-down menu under my user name. Thanks. Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! Hey everyone, the admins have implemented a new hack to the forums, allowing you to post your code with nicely coloured text rather than just the normal black or the old php stuff. More details can be found he http://forums.devshed.com/t279108/s.html Html code: [hig hlight=html4strict]your code here[ /highlight] For example: html4strict Code: Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!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" /> <title>Untitled Document</title> </head> <body> <h1 class="header_text"> Nice One! </h1> <p id="main_content"> <span style="color:red;">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>
The same goes for CSS highlighting: [hig hlight=css]your code here[/high light] css Code: Original - css Code /*Comments*/ body { property:value; } body, div { property:value; }
As you can see from the thread I linked, there are many many other languages supported, but these three examples are more likely to be used than any other in this particular forum... Have fun with it, and please do use this feature, I'm sure it will make things much easier for us to read/understand, rather than just posting chunks of code. Enjoy! --Jon. Seems that if class's are applied to individual TD tags, no matter how i try to implement row highlighing, the TD class will overide the highlighting color. A simple way to implement row highlighting is: <TR onmouseover="this.style.backgroundColor='navy';" onmouseout="this.style.backgroundColor='grey';"> however, a TD with a class that set's a DIFFERENT backgroundColor will disregard the TR mouseover. Any help? I have created a bit of CSS similar to the way faqs are expanded and contracted by clicking. It constitutes a list of maxims some of which are further expanded and some of which are not. An example of this is displayed here, http://yogaredux.meripol.net/node/12. What I am looking for is some kind of CSS which is content depended. If the answer part is filled I want it to have a different colour from when it is empty. Is there any kind of Javascript, CSS or a combination of the two that can implement it? My Goal: using an onmouseover, highlight the mouse-overed table cell red and highlight another table cell green. Code:
<head><style type='text/css'>
.cell1 { background-color: #cccccc; }
.cell1_over { background-color: #ff3366; }
#other_cell { background-color: #cccccc; }
</style></head>
<body>
<table>
<tr>
<td class='cell1' onmouseover='this.className="cell1_over";' onmouseout='this.className="cell1";'>words</td>
<td id='other_cell'>more words</td>
</tr>
</table>
</body>
OK - the above code will change the first cell from grey to red no problem. What I want is to not only make the first cell grey but also the other cell turn green under the same onmouseover. How might I go about this? Thanks in advance! hi there, i am currently designing a page for a client, where i use menu highlighting (active, hover, focus). the menu is arranged in a list with two sublevels. -> menu top 0 -> level 1 -> link 1 -> link 2 etc... my aim is to let only the currently active menu be in a different color than all the others. what actually happens is that all submenus as well are highlighted. her is the code: Code: #right ul.menu,
#left ul.menu {
margin: 0;
padding: 0 0 0;
list-style: none;
}
#right ul.menu li,
#left ul.menu li {
margin: 0 !important;
padding: 0 !important;
background: none !important;
}
#right ul.menu li a,
#left ul.menu li a {
padding: 4px 0;
display: block;
border-bottom:1px solid #dadada;
text-decoration: none;
outline: none;
color: #666;
}
#right ul.menu li a:hover,
#right ul.menu li a:active,
#right ul.menu li a:focus,
#left ul.menu li a:hover,
#left ul.menu li a:active,
#left ul.menu li a:focus {
color: #FE642E;
border-bottom:1px solid #dadada;
text-decoration: none;
background:#fff;
}
#right ul.menu li.active,
#left ul.menu li.active {
color: #FE642E;
text-decoration: none;
font-weight:normal;
}
#right ul.menu li.active a,
#left ul.menu li.active a {
color: #FE642E !important;
text-decoration: none;
font-weight:normal;
}
#right ul.menu li ul,
#left ul.menu li ul {
margin: 0;
padding: 0;
list-style: none;
}
#right ul.menu li li,
#left ul.menu li li {
padding: 0 0 0 10px !important;
list-style: none;
}
#right ul.menu li li a,
#left ul.menu li li a {
font-size: 92%;
font-weight: normal;
background: url(../images/arrow.png) no-repeat left !important;
padding-left:10px !important;
border-bottom:1px solid #dadada;
color: #666;
}
#right ul.menu li li a:hover,
#right ul.menu li li a:active,
#right ul.menu li li a:focus,
#left ul.menu li li a:hover,
#left ul.menu li li a:active,
#left ul.menu li li a:focus {
color: #FE642E;
}
#right ul.menu li.active a:hover,
#left ul.menu li.active a:hover {
color: #FE642E !important;
text-decoration: none;
font-weight:normal;
border-bottom:1px solid #dadada;
background:#fff;
}
URL i have added a screenshot to visualize the problem, the only link in orange should be 'Menu A'. thank you in advance, sebastian 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 http://digitalspline.com/projects/gameCitadel/ if you left click to the left of the layout, it highlights all the text. Anyone know why? 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. 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 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! 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 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>' 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 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 have the following:
PHP Code: <td id="nav-01" onmouseover="this.className='classover'" onmouseout="this.className=''">Home</td> I realise the "this.className" will produce a class of "classover" when I do a mouseover. However I already have an id="nav-o1" and therefore the class will not overwrite this.... they are both setting different background colours to the column. Can anyone help me? PHP Code: <td id="nav-01">Home</td> That is the basic code and I would like background colour to change when doing a mouseover and then revert to original when mouse goes away. As much CSS as possible and as little javascript... Please! This is what i am using as my page, and i only want to highlight the top part i.e only test and not the lowers. when i include the current page highlight class to the menu the whole section is highlighted, is there a way to highlight just the li and not the ul under the li that are contained within the same class. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>Test</title> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"> <style type="text/css" media="screen"> /* horizontal menu coding */ #nav { float: left; margin: 0 0 1em 0; padding: 0; list-style: none; } #nav li { float: left; } #nav li a { display:block; padding: 7px 23.9px; text-decoration: none; font-family:"Arial"; color: white; border-right: 1px solid #ccc; border-bottom: 1px dashed #ccc; font-size: 14px; background-color: #3f6fb7; } } #nav li a:hover { color: #3f6fb7; background-color: #d1cf9f; } #nav pageHorizontal a { background:#d1cf9f; color: white; } #nav ul.current-pagelowerHorizontal a { background:#d1cf9f; color: white; } #nav #nav-home a { background:#d1cf9f; color: white; /* declarations to style the current state */ } /* Print menu coding */ </style> </head> <body onLoad="preloadImages();" bgcolor="#ffffff"> <div class="ts-1-13"> <ul id="nav"> <li id="nav-home" > <a href="testnewMenu.html">test</a> <!--for the new menu --> <ul id="nav"> <a href="XXX.html">Lower 1 </a> </ul> <ul id="nav"> <a href="XXX.html">Lower 2</a> </ul> <ul id="nav"> <a href="XXX.html">Lower 3 </a> </ul> <ul id="nav"> <a href="XXX.html"> Lower 4</a> </ul> <!--for the new menu ul under a list --> </li> <li> <a href="XXX.html">Test2</a> </li> <li> <a href="XXX.cfm">test 3</a> </li> <li> <a href="About_Us.html">About Us</a> </li> </ul> </div> </body> </html>
|
|||||||