[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Z-Index Trouble

Posted on 2011-05-06
7
Medium Priority
?
205 Views
Last Modified: 2012-06-27
Check out this site:
http://www3.murfreesborotn.gov/newsite/index2.html

This is a really rough draft of a site, so keep in mind some things won't look exactly right.  

Eventually, I am looking to add a css drop-down (mouse-over show/mouse-out hide)  menu to this site.   Currently, I have the beginnings of this menu under the bottom-most "Murfreesboro" image.  You can't see it, because it's under another div on the page.  I have tried messing with my z-index, but I can't move the hidden div in front of the image.  I am attaching a screen shot that will show the hidden div.  Let me know if this doesn't make sense, and I will attempt to explain myself better.   hidden
0
Comment
Question by:thedeal56
  • 3
  • 2
  • 2
7 Comments
 
LVL 35

Expert Comment

by:Paul MacDonald
ID: 35709626
Maybe I'm missing something, but I don't see any z-order or CSS class information in the div tag at all.
0
 

Author Comment

by:thedeal56
ID: 35709635
there's actually nothing in that particular div tag.   I left it blank because my efforts didn't produce the desired results  
0
 
LVL 35

Expert Comment

by:Paul MacDonald
ID: 35709677
Try:

...
    <div class="murf" style="background: blue; height: 100px; z-index: 100" >
      <img alt="Name" src="images/logo/bluemurf.png" />
      <div style="background: red; z-index: 999;" >
      test
      </div>
    </div>
...

Set the height as appropriate
0
Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

 

Author Comment

by:thedeal56
ID: 35709697
I made the changes to the page.  you can refresh it to see the results.  The div is still behind the main image.
0
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 2000 total points
ID: 35709846
If you are going to use z-index, you must first position the element.  Most likely "relative" will be what you want:

position: relative;
0
 

Author Comment

by:thedeal56
ID: 35709887
ah, I am seeing a result with that position change.  I will mess it more later on tonight
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35709924
You will want to make sure it works in IE7 too because IE7 handles z-index differently.
0

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month8 days, 17 hours left to enroll

590 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question