• Locked
3 replies [Last post]
Tue, 2011-05-10 19:02
henry hayes
henry hayes's picture
Offline
newbie
Last seen: 11 years 13 weeks ago
Timezone: GMT+2
Joined: 2011-01-16
Posts: 4
Points: 7

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;
}

Top
Tags:
Wed, 2011-05-11 20:10
#1
henry hayes
henry hayes's picture
Offline
newbie
Last seen: 11 years 13 weeks ago
Timezone: GMT+2
Joined: 2011-01-16
Posts: 4
Points: 7

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;
}

Top
Thu, 2011-05-12 05:10
#2
joeraman
joeraman's picture
Offline
newbie
USA
Last seen: 11 years 13 weeks ago
USA
Timezone: GMT-7
Joined: 2011-05-12
Posts: 1
Points: 1

about topic

Its nice one post provides a detailes of topic keep it up.

also more information on topic visit [link removed; spam --gt]

Top
Thu, 2011-05-12 09:46
#3
tenantfile
tenantfile's picture
Offline
newbie
Last seen: 11 years 13 weeks ago
Timezone: GMT-7
Joined: 2011-04-26
Posts: 2
Points: 2

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 */

Top
  • Locked