Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Placing an Element in a Navbar

    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!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,598
    Thanks
    24
    Thanked 646 Times in 645 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •