I am building a website with a banner and a search bar at the top of the page. The bottom of the banner, by design, is supposed to go behind the search bar. I did this by using z-indexes (The banner is 0, the search bar is 1). I also want the banner to serve as a link to the home page from anywhere on the site.
My problem is that, due to the z-indexing, the banner is unclickable. When I place banner in front of the search bar, the banner is clickable and fine; but when placed behind, it is as if the tag "followed" it and is now unusable.
Is there a way to make my banner z-index to 0, my link z-index to 1, and my search bar z-index to 2? I have tried to assign a z-index to the link (the ) separately from the image using the "style" parameter, but it does not seem to work.
Does the entire banner need to be clickable, or just the area not behind the search bar? If the entire thing doesn't need to be, you could always add a transparent layer over that portion of the banner (though this isn't really something I'd suggest and seems like a hack).
From my understanding, a negative z-index always results in an unclickable link, but that doesn't seem to be your issue. Any chance you could post some source code so we could examine it?
I figured it out. All elements that use the z-index parameter must also be positioned with the position parameter in CSS. My search bar was not positioned.
Source: http://www.w3schools.com/jsref/prop_style_zindex.asp
Related
I have a webpage with a horizontal top sticky navbar 60px high.
On my page, I have links to locations on the same page with Link leading to id="someTarget"
My problem is that when the resulting link is clicked, the page scrolls to the target heading, but it is at the very top of the screen, behind my sticky navbar.
How can I specify that the scroll add a 60px cushion so that the target is at the top of the viewable area, not at the top of the screen?
So far I have just been manually adding in my id="someTarget" a few lines above what I actually want to be the target, but this seems a pretty imprecise way of doing it.
If you are okay with using a CSS framework for this, Bootstrap has what you need. There is an offset option that you could use.
Help get the Search Bar and Menu in the foreground. I tried the Z-index and that has not worked. I have a negative margin on the search bar to put it in the top part of the website. It's hidden behind the solar system image.
http://wearethenewmedia.com/indextrial.html
Also, see original at WeAreTheNewMedia.com
It's too much code to post in here.
Thanks!!
We're also trying to implement this Sidebar with our Menu button.
Link: http://wearethenewmedia.com/menu/index.html
Without seeing your code it's hard to evaluate or make any suggestions. You should be able to use position: fixed; on whatever container the nav is in to attach it to the top. This will put it on the top of the solar system image. If you don't want it to appear until after, just use jquery to make it fade in once you pass the solar system image.
Rather than putting exact code down, i wish to ask a conceptual html/css/js question.
Normally a lightbox works by being placed on top of everything on the page using a z-index. What if you didnt want the lightbox on top of everything else? But instead push the footer down to make room for the new content. My gut feeling tells me that if you create the same z-index, and make the positioning relative, it should push all the other div's down. However this is not quite working.
I am trying to achieve the following: The user clicks a thumbnail, which pushes the footer down and opens a new div on the centre of the page with some content. If they decide to press an 'X', it closes the div, return back to the original thumbnail, moving the footer back up the page.
I thought using a lightbox, and modifying the code would be the quickest and easiest way. However i might be going about this all wrong. Any thoughts?
Thank You.
z-index is used only for elements that are stacked on top of each other. This doesn't seem to be the case for what you're trying to achieve.
You need to place the lightbox between the footer and content and set it to be hidden initially and whenever user clicks on the thumnail show the modal with javascript/jquery:
$(".thumb").click(function(){
$(".modal").slideToggle()
})
Here's a simple demonstration:
fiddle
I am customizing an audio player - http://www.jplayer.org/latest/demo-01/. What I have done is expanded the play progress bar to be a bit bigger in order to have the title of the currently playing track displayed inside it.
That all worked fine, I have an absolutely positioned element containing the title sitting nicely inside the progress bar. But when I click inside the bar to scan through the song the title element gets in the way and prevents clicking on the bar.
So yeah, I'm trying to find a way to display an element on top of an anchor without it getting in the way of clicking on the anchor. Any ideas appreciated!
You can position some element or pseudo-element from the link above the title, like this: http://jsfiddle.net/kizu/TteeJ/, with z-index bigger than one that title have.
But the link mustn't have any position other than static, or the z-index won't work.
On the following website, www.josecvega.com, I have a navigation bar with years that link to sections on that same page. Unfortunately it is not working they way I hoped, when the user selects a year it moves to the section of the page and puts that section on the top of the page, I have a fixed div on the top of the page that covers the sections and prevents it from properly displaying. What can I do for this to work?
It hard to explain my situation, but it can be seen by going to www.josecvega.com and clicking one of the years.
Put your anchors earlier in the file. Perhaps use a fixed-height element (the same height as your header) in the margin just before each section and apply the anchor to that.
Or use a script run after the jump and scroll back down X pixels.
Or use a frameset to display the fixed header rather than the position:fixed div you are using now.
I would probably do the latter.
your header (class=bannercontainer") is position:fixed
so this element will not scroll.
if you now click on a year it scrolls the page behind the header.
probably position:fixed is not what you want