Solved

text over an image

Posted on 2011-03-22
8
251 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:gurvinder372
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 500 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 40

Expert Comment

by:gurvinder372
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
tiny glitch in my main slider 3 39
Question about traversing a tree using jQuery 7 34
Insert Button on a table 16 38
Media Queries  not Firing 6 19
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

827 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