Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

text over an image

Posted on 2011-03-22
8
Medium Priority
?
257 Views
Last Modified: 2012-05-11
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.
0
Comment
Question by:itinfserv
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 35188366
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
 
LVL 1

Author Comment

by:itinfserv
ID: 35188383
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
 
LVL 15

Accepted Solution

by:
crisco96 earned 2000 total points
ID: 35188386
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 35188393
Please point me to the exact text that needs to be moved on top of image
0
 
LVL 1

Author Comment

by:itinfserv
ID: 35188425
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
 
LVL 10

Expert Comment

by:khan_webguru
ID: 35188598
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
 
LVL 1

Author Comment

by:itinfserv
ID: 35188649
it's not an open discussion, i asked why mine didn't work and he mentioed the position which was my problem.
0
 
LVL 10

Expert Comment

by:khan_webguru
ID: 35188671
No problem bro!

Regards,

Asif Ahmed Khan
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

772 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