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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to manage overlapping links and divs?

    I have a page containing two divs: The first is the logo of the site, and it is mostly transparent. The second one is a navigation bar. These two divs are partially overlapping.
    The problem is that the navigation bar is on top of the logo, and hiding part of it:
    http://jsbin.com/oDAcodO/2/edit
    This can be solved by adding z-index value to the logo:
    http://jsbin.com/oDAcodO/3/edit
    The problem now is that the logo is on top of the links of the navigation bar.
    This means that hovering with the mouse on a link will actually be hovering on top of the logo and wouldn't trigger the link.
    My question is if there is a way to solve this issue?
    I thought of having another transparent bar on top of all, and this one will be the actual link.
    This sounds very cumbersome: It will force me to include a div with no contextual meaning and also require some JS code to make the real links in the navigation bar below to change color upon hovering.

    Is there a better way to accomplish this?

    Thanks,
    Guy

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,354
    Thanks
    23
    Thanked 618 Times in 617 Posts
    Only people that can see jsbin will be able to help you. I can't see your code. If you use the '#' icon above you when you post you can put the code here so everybody can help.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your reply. My goal was to make the post as readable as possible.

    Here's the HTML code I am using (It is just the sample from Jsbin):
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    </head>
    <body>
      <div id="site-logo"></div>
      <div id="navigationBar">
    				<ul>
                      <li><a href="/" title="home">home</a></li>
    				  <li><a href="/" title="shop">shop</a></li>
    				</ul>
    			</div>
    </body>
    </html>
    CSS code:
    Code:
    #site-logo{
      opacity: 0.5;
      background-color: black;
      height: 20px;
      width: 500px;
      position: absolute;
    }
    
    #navigationBar{
        position: relative;
    	margin-top: 90px;
    	margin-bottom: 12px;
    }
    
    #navigationBar ul{
    	list-style-type: none;
    	text-align: center;
    }
    
    #navigationBar li{
    	height: 48px;
    	width: 100px;
    	line-height:48px;
    	background-color: #ca3045;
    	display: inline-block;
    }
    
    #navigationBar a:link{
    	display: block;
    }
    
    #navigationBar a:hover{
    	background-color: #d15a55;
    }
    Next I added z-index: 2; to the #site-logo section, which made the logo to be on top of the bar.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,354
    Thanks
    23
    Thanked 618 Times in 617 Posts
    When you have two div, as you do, they Are drawn in the HTML page one after the other. That's one before the other. We can move them (position them) with margins.
    When you use position: absolute; and position: relative; you take the div out of the normal flow of things and create major headaches for yourself.

    Code:
    #site-logo{
      opacity: 0.5;
      background-color: black;
      height: 20px;
      width: 500px;
      //position: absolute;  //REMOVE THIS
      border: 1px solid red; //PUT IN SO YOU CAN SEE THE DIVS
    }
    #navigationBar{
        //position: relative;  //REMOVE THIS
    	margin-top: 90px;  // THESE TWO ARE THE SEPARATION BETWEEN THE TWO DIVS
    	margin-bottom: 12px;
    	border: 1px solid red;//PUT IN SO YOU CAN SEE THE DIVS
    }
    You might want to use margin: 0 auto; on the logo div

    You should google "understanding css positioning".
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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