I am trying to make a navbar with an active page-function using the selected / unselected method.
It works for background-color but i cant make it work for the text.
Ive added the value color to the selected / unselected CSS class, but it doesnt work.
What am i doing wrong?
Since padding is added will it work in IE?
Heres the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>index_test</title> <link href="css/navbarcss.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="navwrap"> <div class="wireframemenu"> </div> </div> </body> </html> <body> <div id="navwrap"> <div class="navbar"> <ul> <li class="selected"><a href="../navbar/index_test.html">index_test</a></li> <li class="unselected"><a href="../navbar/index_linked.html">index_linked</a></li> </ul> </div> </div> </body> </html>
#navwrap { background-color: #FFC; margin: 0px; padding: 0px; float: left; height: 100%; width: 200px; position: relative; visibility: visible; } .navbar{ border: 1px solid #C0C0C0; background-color: transparent; border-bottom-width: 0; width: 200px; } .navbar ul{ padding: 0; margin: 0; list-style-type: none; } .navbar a{ font: bold 14px Verdana; padding: 3px 3px; display: block; width: 100%; color: #595959; text-decoration: none; border-bottom: 1px solid #C0C0C0; } .navbar a:visited{ color: #595959; } .navbar a:hover{ background-color: #C90; color: black; } .selected { color: #C90; background: #5D0C0C; } .unselected { color: #0CC; background: #336699; }
Solution is to use one class
Solution is to use one class for selected page:
HTML
<body> <div id="navwrap"> <div class="navbar"> <ul> <li><a href="../index_test_forumtest.html" >index_test</a></li> <li><a href="../index_linked_forumtest.html" class="selected">index_linked</a></li> </ul> </div> </div> </body>
CSS
.navbar a.selected { color: #0F3; background: #5D0C0C; width: auto; }
about topic
Its nice one post provides a detailes of topic keep it up.
also more information on topic visit [link removed; spam --gt]
you can use the XML code
you can use the XML code which id directly interact with the css this code as follows
/* css/code.css */
#content pre,
#content div.code-box-n,
#content div.code-box {
font-family: 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Monaco, Courier, monospace;
white-space: pre;
width: 39.5em;
line-height: 1.4em;
margin: 1em 0;
border: 1px dashed #aaa8a8;
padding: 0.5em 0 0.3em 0.5em;
font-size: 110%;
color: #000;
overflow: auto;
}
#content div.code-box {
background: #fff url(/img/cut.gif) no-repeat top right;
}
#content div.code-box-n {
width: 33em;
padding-left: 0.3em;
border: 1px solid;
border-color: #666 #999;
background-color: #fff;
}
#content div.code-box-n:hover {
border-color: #c30;
}
#content div.code-box-n a { font-weight: normal; }
#content div.code-box-n a:focus,
#content div.code-box-n a:hover {
border-bottom: 1px solid #c00;
}
/* home page -- server uptime */
#content div.uptime {
white-space: pre;
width: 36em;
line-height: 1em;
margin: 1em 0;
border: 1px dotted #aaa8a8;
padding: 4px 0 4px 7px;
background-color: #fff;
overflow: auto;
}
#content div.uptime code {
font-size: 100%;
color: #000;
}
/* css/code.css */