text over an image

Using the following code I struggle to have the numbers for Navigation in jcarousel-control class over the banner image.
<body>
<div id="wrap">

  <div id="mycarousel" class="jcarousel-skin-tango">


    <ul style="z-index:2; display: block;">
      <li style="background: url(logo/banner1.jpg) no-repeat scroll left top transparent;"><div style="background: url(logo/slider-bg.png); display: block; z-index:3; height:200px; width: 250px;" class="contentItem darkBg"><h2 style="display: block; z-index:5; ">About </h2>Text Tesxt Text <br/><a href="/">Find out more about Text</a></div></li>
      <li><img width="748" style="display: block; z-index:3;" height="180" src="logo/banner2.jpg" alt="" /></li>
      <li><img width="748" style="display: block; z-index:5;" height="180" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li>
      <li><img width="748" height="180" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li>
      <li><img width="748" height="180" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li>
    </ul>
    <div class="jcarousel-control" style="z-index:4;overflow:hidden;">
      <a href="#">1</a>	
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
    </div>


  </div>

</div>
</body>

Open in new window

the results of the ocde.
LVL 1
itinfservAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
crisco96Connect With a Mentor Commented:
Z-index only works when an element has a position set (absolute, relative, or fixed)

http://www.w3schools.com/css/pr_pos_z-index.asp
0
 
Gurvinder Pal SinghCommented:
there are two options
--have the image as the background image of li, then you can have the text over it
--overlay the text on top of image by increasing the z-index of the text element
0
 
itinfservAuthor Commented:
I want to use the second one, and i changed the z-index, but apperntly it didn't do the job.
in which element should I change the z-index?
at the moment had one in <ul> but also got more in the CSS file
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Gurvinder Pal SinghCommented:
Please point me to the exact text that needs to be moved on top of image
0
 
itinfservAuthor Commented:
that's what it crisco, i wasn't aware i need to have the position set. probably in the past when I used the z-index for some reaon I used the position and i didn't notice it.
0
 
khan_webguruCommented:
Hello Bro,

Please use the code that is written below.

 
<body>
<div id="wrap">

  <div id="mycarousel" class="jcarousel-skin-tango">


    <ul style="z-index:2; display: block;position:relative">
      <li style="background: url(logo/banner1.jpg) no-repeat scroll left top transparent;"><div style="background: url(logo/slider-bg.png); display: block; z-index:3; height:200px; width: 250px;" class="contentItem darkBg"><h2 style="display: block; z-index:5; ">About </h2>Text Tesxt Text <br/><a href="/">Find out more about Text</a></div></li>
      <li><img width="748" style="display: block; z-index:3;" height="180" src="logo/banner2.jpg" alt="" /></li>
      <li><img width="748" style="display: block; z-index:5;" height="180" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li>
      <li><img width="748" height="180" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li>
      <li><img width="748" height="180" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li>
    </ul>
    <div class="jcarousel-control" style="z-index:4;overflow:hidden;position:relative;top:-15px">
      <a href="#">1</a>	
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
    </div>


  </div>

</div>
</body>

Open in new window


Just set "jcarousel-control" DIV Top position and according to your need and make you DIV "RELATIVE" or ABSOLUTE according to your need.

Hope this will help you to solve your problem.


Regards,

Asif Ahmed Khan
0
 
itinfservAuthor Commented:
it's not an open discussion, i asked why mine didn't work and he mentioed the position which was my problem.
0
 
khan_webguruCommented:
No problem bro!

Regards,

Asif Ahmed Khan
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.