Solved

text over an image

Posted on 2011-03-22
8
254 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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…

627 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