Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

embed div in img?

Posted on 2011-05-06
5
Medium Priority
?
234 Views
Last Modified: 2012-05-11
Is it possible to embed or overlay a div on an img element?
The div is a photo carousel and I would like to overlay it
on a section of the image. How can I do this?
0
Comment
Question by:pillmill
  • 3
  • 2
5 Comments
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35710322
<div class="wrapper">
  <img src="/path/to/img.jpg" atl="" />
  <div class="carousel">...</div>
</div>

.wrapper {
    position: relative;
}

.wrapper .carousel {
    position: absolute;
    bottom: 0;
    left: 0;
}
0
 

Author Comment

by:pillmill
ID: 35710466
Thanks. The carousel appears below the image and the text of \
.wrapper .carousel ... appears in the page.

Is there a way to overlay the carousel on the image or to position
at the side of the image?
0
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 2000 total points
ID: 35710802
You have to play around with the css a little.  This should center the carousel over the image:

.wrapper {
      float: left;
    position: relative;
      overflow: hidden;
}

.wrapper .carousel {
    position: absolute;
    top: 50%;
    left: 50%;
      width: 200px;
      height: 200px;
      margin-top: -100px;
      margin-left: -100px;
}
0
 

Author Comment

by:pillmill
ID: 35724042
Thanks. How do you make the carousel div
appear on top of the image? Now, it is obscured
below the picture. The image is a png.
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35724361
My code has been tested and works on my end.  Can you please provide a URL or code so I can see what the problem is?  Thx
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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 …
Suggested Courses

577 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