Solved

text over an image

Posted on 2011-03-22
8
250 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Configuring a checkbox in CSS and php 18 87
Delete HTML table rows 12 27
how to avoid redundand ajax calls 5 28
how to handle long text strings in javascript or ajax 1 25
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.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

815 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now