Link to home
Start Free TrialLog in
Avatar of Mike Eghtebas
Mike EghtebasFlag for United States of America

asked on

Navigation buttons, active button not identified...

At http://datapassion.net/ after clicking on a navigation button, it navigates to the desired page okay but it fails to keep the active button identified (lighter backgound and black font). So that user will know what page is at display.

Here is the CSS file:
html{background : rgb(244,244,244)  
    url(../images/html.png) repeat-x;
}
body{
    font-family:"Tahoma","sans-serif";
    color : #5a1c46; 
    margin:0;
    padding-top: 30px; 
     /*font-size:90%; */
	color:rgb(89,89,89);	
	background : url(../images/body.png) repeat-x; 
}
.content
{
   margin: 0 auto;
   padding-left: 0px;
   padding-bottom: 0px;
   width: 1065px;/* 866px*/
    height:1080px; /* to be removed*/
   
}

.center1{text-align:center;}



.wrapper
{
   margin: 0 auto auto 10em;
   padding-top: 35px;
   padding-left: 50px;
   padding-bottom: 35px;
   width: 880px;/* 866px*/
   /* height:1080px;  to be removed*/
   background-color:white;
  
   -moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
   -webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);

}
.horizontalGap
{ 
   width: 776px;/* 726*/
   border: 0px solid black;
   background-color:#eef;
   height: 10px;
}
.verticalGapTop
{
   width: 10px;
   background-color:#eef;
   height:4.7em;
   display:inline-block;
   vertical-align: top;
}
.verticalGapBottom
{
   width: 10px;
   border: 0px solid black;
   background-color:#eef;
   height:1140PX;
   display:inline-block;
   vertical-align: top;
}
.left-col, .right-col{
    display:inline-block;
	vertical-align: top;
}
.right-colBottom
{
    border: 0px solid black;
    display:inline-block;
	width:586px;/* 536px*/
	padding-left: 5px;
    border: 0px solid orange;
    display:inline-block;
}
.left-col
{
    width:180px; 
    margin-right:0;
	padding-right: .5em;
	text-align:right;
	display:inline-block;
	vertical-align: top;
}
.contact
{
	color:rgb(89,89,89);
	text-align:right;
	white-space: nowrap;
	height:4em;
	display:inline-block;
    border: 0px solid black;
}
.left-colBottom
{
    width:180px;
	padding-right: 0.5em;
	padding-top: 1.5em;
	text-align:right;
    white-space: nowrap;	
    display:inline-block;
	vertical-align: top;
}

.right-col{
    width:586px;/* 536px*/
    border: 0px solid black;
    display:inline-block;
}
.date{
    width: 60px;
	/*border: 0px solid red;
	display:inline-block
	text-align:top;;*/
	float:left;
}
.companyCity
{
    width:518px;/* 468px*/
	border: 0px solid red;
    display:inline-block;
}

.company
{
  width: 315px;
  font-weight:bold;
  color:rgb(89,89,89);
  white-space: nowrap;
  border: 0px solid yellow;
  display:inline-block;
  }

.city
{
  width:197px;/* 55*/
  min-width:10em;
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
  text-align:right;
  border: 0px solid green;
  font-weight:bold;
  display:inline-block;
}
.companyOther{
 width:150px;
  font-weight:bold;
  white-space: nowrap;
  border: 0px solid red;
  display:inline-block;
}
.cityOther{
  width:360px;/* 310px*/
  min-width:10em;
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
  text-align:right;
  border: 0px solid green;
  font-weight:bold;
  display:inline-block;
}
.workDescription{
    width:100%;
	min-width:10em;
	border: 0px solid blue;
    text-align:justify;
    display:inline-block;
}
.skills ,.skillsDescription{
    width:581px;/* 531px*/
	border: 0px solid blue;
    text-align:justify;
}

.experience{
    width:581px;/* 531px*/
	border: 0px solid green;
    display:inline-block;
}


.contactBlue{
  font-size:1.1em;
  font-weight:bold;
  white-space: nowrap;
  color:rgb(84,142,212);
}
.nameBlock{
  text-align:center;
  height:4em;
  display:inline-block;
}
.name{
  font-size:2em;
  font-weight:bold;
  color:rgb(89,89,89);
  white-space: nowrap;
}
.title{
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
}

.blue18
{
  font-size:1.4em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(84,142,212);
}
.black18
{
  font-size:1.4em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(89,89,89);
}

.others
{
  color:rgb(187,74,36);
  font-size:.9em;
}
.cssLogo
{
    float:right;
     float: right;
    border: 0px solid black;
}
.note
{
    float: left;
    border: 0px solid green;
}
.footer {
    margin: 0 auto;/*40px auto auto auto; */
    padding: 10px 0px 25px 100px;

    width: 866px;/*816px */	
    text-align:left;
    font-size:.8em;
    border: 0px solid red;
}
/* ggggggggggggggggggggggggggggggg */
.btn-group-vertical
{
   width: 120px;
   float:left;
   padding-top: 10em;
   position:fixed;
   
}
.btn-group-vertical ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.btn-group-vertical li 
{ 
	/*margin: 0 0 .2em 0; */
	width:3em;
	color:red;
}

.btn-group-vertical a
{
	/*display: block;*/
	color: #FFFFFF;
	
	background-color: rgb(137, 137, 137);
	/*width: 5em;
	padding: .2em .2em;
	text-decoration: none;*/
	text-align: left;
}

/*.btn-group-vertical a:hover
{
	background-color: #336699;
	color:rgb(84,142,212);
	font-weight:bold;
}*/
.btn-group-vertical a
{
font-size: 1.25em;
}
.btn-group-vertical .current a:hover
{
	/*background-color: #123456; c000000*/
	color: #FFFFFF;
	font-family:Arial, Helvetica, sans-serif
}
/*
.btn-group-vertical .current a, .btn-group-vertical .current a:link
{
	display: block;
	color: #FFFFFF;
	background-color:#660000;
	width: 6em;
	padding: .2em .2em;
	text-decoration: none
};*/
.dropdown-menu a
{
	background-color: #FFFFFF;
}

a {color:rgb(89,89,89); text-decoration: none;}      /* unvisited link */
a:visited {color:rgb(89,89,89); text-decoration: none;}   /*visited link */
a:hover {color:blue; text-decoration: none;}  /* mouse over link */
a:active {color:rgb(89,89,89);text-decoration: none;}  /* selected link */

.btn-group-vertical a {color:#FFFFFF; text-decoration: none;}      /* unvisited link */
/* .btn-group-vertical a:visited {color:#FFFFFF;}  visited link */
.btn-group-vertical a:hover {color:rgb(84,142,212); font-weight:bold;text-decoration: none;}   /*mouse over link */
.btn-group-vertical a:active {color: rgb(155, 47, 45);text-decoration: none;}   /*selected link */

Open in new window

Avatar of Duy Pham
Duy Pham
Flag of Viet Nam image

(lighter backgound and black font)
First I don't see any class defined as above.

Secondly, if you are talking about .btn-group-vertical .current class, then
...
.btn-group-vertical .current a:hover
{
	/*background-color: #123456; c000000*/
	color: #FFFFFF;
	font-family:Arial, Helvetica, sans-serif
}
/*
.btn-group-vertical .current a, .btn-group-vertical .current a:link
{
	display: block;
	color: #FFFFFF;
	background-color:#660000;
	width: 6em;
	padding: .2em .2em;
	text-decoration: none
};*/
...

Open in new window


should be changed to
...
.btn-group-vertical a.current:hover
{
	/*background-color: #123456; c000000*/
	color: #FFFFFF;
	font-family:Arial, Helvetica, sans-serif
}
/*
.btn-group-vertical a.current, .btn-group-vertical a.current:link
{
	display: block;
	color: #FFFFFF;
	background-color:#660000;
	width: 6em;
	padding: .2em .2em;
	text-decoration: none
};*/
...

Open in new window

Avatar of Mike Eghtebas

ASKER

re:> I don't see any class defined as above...

I didn't mean to say "lighter background and black font" are classes, they were just example description of what I was expecting to take place.

I changed (in my desktop version)
/*.btn-group-vertical .current a:hover*/
.btn-group-vertical a.current, .btn-group-vertical a.current:link
{
	/*background-color: #123456; c000000*/
	color: #FFFFFF;
	font-family:Arial, Helvetica, sans-serif
}

Open in new window


but it didn't help. I am not able to have the selected button identified. There was not difference between the code I had and the one you suggested,

Mike
ASKER CERTIFIED SOLUTION
Avatar of Robert Schutt
Robert Schutt
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you.