www.webdeveloper.com
Results 1 to 6 of 6

Thread: How to manage overlapping links and divs?

  1. #1
    Join Date
    Jan 2014
    Posts
    1

    How to manage overlapping links and divs?

    Hi,

    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. #2
    Join Date
    Mar 2012
    Posts
    1,753
    I can't see your problem, because the links go to a development environment (which I am not familiar with) instead of the output web site. Anyway, If you don't want the logo to mask the nav bar, and you don't want the nav bar to overlay the logo, don't overlap them! Simple.

  3. #3
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Why not put your opacity on the links instead?
    http://jsbin.com/oDAcodO/6/edit

  4. #4
    Join Date
    Jan 2014
    Posts
    11
    Are you trying to add some distance between the two? If so:

    #navigationBar li{
    height: 48px;
    width: 100px;
    line-height:48px;
    background-color: #ca3045;
    display: inline-block;
    margin-top: 20px;
    }

  5. #5
    Join Date
    Jan 2014
    Location
    Boston, Massachusetts
    Posts
    66
    Get rid of the absolute and relative positioning first.

    Do you want the nav bar under the site logo? Assuming this is the case, set the body width to 500px and #site-logo no width. It will take the width of its parent element. Then the nav would be below the logo bar. Again, drop the positioning for this to work.

  6. #6
    Join Date
    Feb 2014
    Posts
    1
    Try this ...

    #navigation li{
    height: 50px;
    width: 100px;
    line-height:50px;
    background-color:#cccc;
    display:block;
    margin-top:15px;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles