• EN

Put a z-index on a html-block?

  • 30 August 2013
  • 6 replies
  • 115 views
T

Ok, so I am making a a two page “landing page” with a super simple navigation bar that uses some Jquery and css to “stick” to the top of the page. I have given it a z-index of 9999 so when down the page it sits above it.

On the second page I use a html-block that contains tech specs in a table format and for some reason this html-block floats above/covers the navigation bar. Other content on the page doesn’t, it is only the html block.

I have given the table class a z-index below 9999; I wrapped the whole table in a div and gave that a z-index below 9999 too, but nothing seems to work.

I can solve this by taking the contents out from the table and make it into regular chunks of “unbounce contents”, but I’d rather get my html to work.

Any ideas, anyone?

6 replies

T

I tried to put z-indexes on almost all combinations of classes and divs and then… I just clicked on the html blocked and tried the “move back”-button. And it worked.

Ryan

Hey Thomas - glad to hear the move back button worked. If it comes up again, you can try adding the !important modifier to the z-index CSS and that might work too.

Jen_Gordon

hey thomas i’d love to do this on my page, can you share the .js and css?

T

Here is the page I used it for: eyemobile.tobii.com

We have a Marketo Spark license, but it is virtually impossible to make something pretty and functional without using consultants, who know how to charge for their hours. That is why I started using Unbounce (and will probably continue to do so).

Please keep in mind that I am a marketing guy and a self taught “programmer/reverse engineerer”, so the code is probably not the cleanest or most effective, but it gets the job done.

My navigation bar consists of three elements

  1. HTML

  2. CSS

  3. Java

HTML
I placed my navigation bar in the third page section from the top (see attached image). In that I placed the html. The most important in that is the class=“nav” which I use in the CSS to control the position of the bar.:

HTML can be downloaded from here: https://www.dropbox.com/sh/idhfja6qon…

CSS
I am using typekit fonts, if you wonder about the font-family.

.sticky {
position: fixed;
width: 100%;
left: 50;
top: 0;
z-index: 9999;
}

.nav {
width: 750px;
background-color: #FFFFFF;
padding-left:10px;
padding-top:5px;
z-index: 9990;
height: 40px;
border-bottom: 1px solid #CCCCCC;
}

div.lp-pom-root .lp-pom-text a {
font-family: “museo-sans-rounded”,sans-serif;
text-decoration: none;
color: #959595;
padding-bottom: 20px;
font-size: 14px;
font-weight: 700;
margin-right: 15px;
}

div.lp-pom-root .lp-pom-text a.active {
border-bottom: 4px solid #FF0000;
color: #000000;
z-index: 500;

}
#links {
float:left;
}

#cta {
float: right;
width: 100px;
background-color: #FF0000;
height: 36px;
color: #FFFFFF;
text-align:center;
line-height: 36px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
}

#cta a {

font-family: “museo-sans-rounded”,sans-serif;
text-decoration: none;
margin-right: 0px;
color: #FFFFFF;
font-size: 14px;
font-weight: 700;
color: #FFFFFF;

}

Script
Placed “before body end tag”

Java can be downloaded from here: https://www.dropbox.com/sh/idhfja6qon…

Feature request to Unbounce
It would be nice to be able to use images uploaded to the image bank using only html. Right now it seems as if I have to place the image on a page before I can (re)use it with html. My workaround was to publish images on my personal webserver.

T

I see that my html and java didn’t get through the filter. I have made a zip-file containing the HTML and Javascript here: https://www.dropbox.com/sh/idhfja6qon…

Jen_Gordon

Thomas thank you so much for your help!! 🙂

Reply


Terms & ConditionsCookie settings