Member Avatar for lemur

Hi there,

I created highlitght button for current page to change color, but problem is cause it also seems to extend above top border of main navigation bar.
Any hint?

#mainnav {
	background-color: #404040;
	padding: 0.5em 1em 1.5em 0em;
	text-align:left;
	text-decoration:none;
	clear:both;
	margin-bottom:0.2em;
	height: 0.4em;
}


#mainnav ul li {
	display:inline;
	float: left;
	
}



#mainnav ul li a {
	text-decoration:none;
	color:#dddddd;
	padding-right: 1.5em;
	padding-bottom:0.63em;
	padding-top: 0.63em;
	padding-left: 1.5em;
	margin: 0;
	font-weight: lighter;
	border-right: 0.1em solid #c4c8c0;
}
<div id="mainnav">
   <ul>
    <li><a id="homebutton" href="index.html">Home</a></li>
    <li><a id="aboutmebutton"href="aboutme.html">About me</a></li>
   	  <li><a id="myjobbutton"href="myjob.html">CV</a></li>
      <li><a id="mediabutton"href="media.html">Media</a></li>
      <li><a id="contactbutton"href="contact.html">Contact</a></li>
	</ul>
</div><!--end mainnav -->
  • 2 Contributors
  • 4 Replies
  • 94 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by lemur
Member Avatar for ctaylo21

Sorry but I don't understand what you're asking. Are you asking for help in creating a highlight effect on your nav menu? Because I don't see where you implemented the highlighting of a current page.

Member Avatar for ctaylo21

I see the problem. It is very strange, I'm not sure exactly why that is occurring. My temporary fix would be to change the CSS of your list items a bit:

#mainnav ul li a {
	text-decoration:none;
	color:#dddddd;
	padding-right: 1.5em;
	padding-bottom:0.5em;  //reduce padding here from .63 to .5
	padding-top: 0.5em;   //same here
	padding-left: 1.5em;
	margin: 0;
	font-weight: lighter;
	border-right: 0.1em solid #c4c8c0;
}

#mainnav {
	background-color: #404040;
	padding: 0.5em 1em 1.5em 0em;
	text-align:left;
	text-decoration:none;
	clear:both;
	margin-bottom:0.2em;
	height: 0.25em;   //Change height here from .4 to .25
}

I don't have the time to try and figure out exactly why it's happening but hopefully this fixes your problem for now.

Member Avatar for lemur

Thanks, but still no good

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.