Placing an Element in a Navbar

mmslax2 · 03-14-2013, 12:31 AM

Hello everybody,

I've been searching the forums/internet for a solution but haven't been able to find anything, if something similar has been posted please forgive my ignorance.

I'm trying to place a logo ontop of a navbar, like the one done here. I've tried positioning the logo absolutely, floating it, etc. Everytime I do so the logo image appears behind the navbar. I've tried using z-index as well to no avail.

Does anyone have any suggestions that could solve this issue? It would be much appreciated!

sunfighter · 03-14-2013, 06:27 PM

Link does not work.
Your solution is the same as if you have two boxes, one overlaying the other.
My image in the code is just a blue box. Substitute yours and check it out.

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" dir="ltr" lang="en">
<head>
<style type="text/css">
#over{
	position:absolute;
	left: 500px;
	z-index:100;
}
#nav{
	background-color:gray;
	color:white;
	width: 600px;
	height: 100px;
	position:absolute;
	left: 50px;
	top:50px;
	padding:45px 0 0 400px;"
}
</style>
</head>
<body>
<img id="over" src="images/2dig2du.gif" height="120" width="50" alt="" />
<div id="nav" id="navbar" >
Big Small Great Less
</div>
</body>
</html>