0

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
3
Views
5 Years
Discussion Span
Last Post by scaiferw
0

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;

0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.