Member Avatar for scaiferw

I'm trying to create a Google-style bar across the top of my page, but when I hover over the elements, the link text jumps to the top.

Can anyone tell me how to keep it on the bottom? My current code is below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
	<style type="text/css">
		* {margin:0;padding:0}
		html, body {
			margin: 0;
			padding: 0;
		} 
		#navcontainer{
			position:relative;/* stacking context for absolutely position ul*/
			height:40px;
			background-color: #006295;
			width:100%;
			font-family: arial, helvetica, sans-serif;
		}
		#navcontainer ul{
			list-style:none;
			position:absolute;
			bottom:0;
			left:0;
		}
		#navcontainer li{
			display:inline;
			padding:15px;
		}

		#navcontainer ul li a {
			padding: 0.2em .5em;
			background-color: #006295;
			color: White;
			text-decoration: none;
			font-size:80%;
			float: left;
		}
		#navcontainer ul li a:hover {
			height:40px;
			vertical-align:bottom;
			background-color: #6D98AB;
			color: #fff;
		}
	</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
<li><a href="#">six</a></li>
</ul>
</div>
</body>
</html>
  • 2 Contributors
  • 2 Replies
  • 154 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by scaiferw
Member Avatar for anup2009

I'm trying to create a Google-style bar across the top of my page, but when I hover over the elements, the link text jumps to the top.

Can anyone tell me how to keep it on the bottom? My current code is below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
	<style type="text/css">
		* {margin:0;padding:0}
		html, body {
			margin: 0;
			padding: 0;
		} 
		#navcontainer{
			position:relative;/* stacking context for absolutely position ul*/
			height:40px;
			background-color: #006295;
			width:100%;
			font-family: arial, helvetica, sans-serif;
		}
		#navcontainer ul{
			list-style:none;
			position:absolute;
			bottom:0;
			left:0;
		}
		#navcontainer li{
			display:inline;
			padding:15px;
		}

		#navcontainer ul li a {
			padding: 0.2em .5em;
			background-color: #006295;
			color: White;
			text-decoration: none;
			font-size:80%;
			float: left;
		}
		#navcontainer ul li a:hover {
			height:40px;
			vertical-align:bottom;
			background-color: #6D98AB;
			color: #fff;
		}
	</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
<li><a href="#">six</a></li>
</ul>
</div>
</body>
</html>

remove the height property of the CSS and set it to the 0px.


#navcontainer ul li a:hover {
height:0px; vertical-align:bottom;
background-color: #6D98AB;
color: #fff;

Member Avatar for scaiferw

remove the height property of the CSS and set it to the 0px.


#navcontainer ul li a:hover {
height:0px; vertical-align:bottom;
background-color: #6D98AB;
color: #fff;

Unfortunately that doesn't solve the problem, as the height of the link element is not high enough so that the different colour on hover only goes part way up. That however made me see another mistake.

I've revised the code to fix the link, the height spec was in the wrong place. Here is a the code if anyone can see a fix to having the text align to the bottom of the bar rather than the top.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
	<style type="text/css">
		* {margin:0;padding:0}
		html, body {
			margin: 0;
			padding: 0;
		} 
		#navcontainer{
			position:relative;/* stacking context for absolutely position ul*/
			height:40px;
			background-color: #006295;
			width:100%;
			font-family: arial, helvetica, sans-serif;
		}
		#navcontainer ul{
			list-style:none;
			position:absolute;
			bottom:0;
			left:0;
		}
		#navcontainer li{
			display:inline;
			padding:15px;
		}

		#navcontainer ul li a {
			padding: 0.2em .5em;
			height:40px;
			background-color: #006295;
			color: White;
			text-decoration: none;
			font-size:80%;
			float: left;
			vertical-align:bottom;
		}
		#navcontainer ul li a:hover {
			background-color: #6D98AB;
			color: #fff;
		}
	</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
</body>
</html>
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.