I am doing a page where I show thumbnails for videos that, when you click, it popups a YouTube video.
This thumbnails are simple images of 195x195 but the end client it will upload as it, and I would like to add via CSS a "play icon" over the image of the video (compatible with IE7+). I've no idea on how to handle this.
Can anyone help me?
Thank you in advance!
you might want to do something like this:
<div class="imageWrapper" style="position: relative; width: 195px; height: 195px;">
<img src="/path/to/image.jpg " alt=.. width=.. height=..style="position: relative; z-index: 1;" />
<img src="/path/to/play.jpg " alt=.. width=.. height=.. style="position: absolute;left:80px; top: 80px;z-index: 10;" />
</div>
of course do not use style="", but put styles into separate CSS files.
Explanation:
put two images into div. If you give position: relative; property to your wrapper div, then anything inside this div would be position relatively to it. It means, you can add position: absolute; to the play image and using left: XXpx; and top: XXpx; you can position it where you want. You might want to use z-index to define which picture should be on the top. The higher z-index the higher layer. Please note: z-index works only if position is set.
You can use position: relative or position: absolute to position images on top of the other.
When positioning absolute, these elements are positioned absulute within the parent element that has a relative or absolute position, so not relative to the page as is often thought.
I demonstrated this in this fiddle:
http://jsfiddle.net/W5TFS/
You can create a class that will show the image.
showPlay{
background-image:url('play.png');
z-index:1
}
Then you can use it in every image that you need to show it.
You can try it here.
Related
So basically I have in my HTML(using bootstrap classes) a page with products that are showcased using the thumbnail and caption classes. Over the picture of the products there is a ON SELL(rounded red tag). I have given to this red circle element position absolute and to the col-sm-9 position relative. Problem is that when I resize the browser the ribbon that comes over the thumbnail is not responsive.
I know what this two positioning properties mean and how they work in respect with each other. But it looks that in practice I`m missing on something very essential.
I will paste my html and css over here and if you can give me your opinion I`ll be very glad to learn this the proper way and give you my thanks :)
Here you have the whole code: http://www.bootply.com/8TMS5WgWt2
In your CSS for .sale change your positioning value of left: 149px to right: -19px. This will help it better position as the width changes. I would also recommend moving your position: relative off the .col-sm-9 and onto .thumbnail
In your css, replace left for right
top: -19px;
left: 149px;
With left, always it calculate from left position.
top: -19px;
right: yourpixels;
Here is an example with right: 0px
http://www.bootply.com/EzRZnhA2EC#
the title might be confusing, but let me try to explain.
I have a few objects on my website, all with id's in the style section with fixed position (position:absolute, left and top etc).
(I tried to add style sheet code, but this page didn't let me post it, so use your imagination)
Now I want to add a little icon (flag) underneath all the objects, about 20-25 pixel below the above positions. How can I do that?
Wrap the objects in divs, provide absolute position to the wrapper div, add your icon in the div.
Try this,
HTML
<div class='wrapper'>
<img src='' class='image your-object'>
<i class="icon"><!-- ICON HERE --></i>
</div>
CSS
.wrapper{
position: absolute;
top: 5%;
left: 5%;
// your css here
}
.icon{
margin-top: 20px;
display: block;
}
Browser take out the elements with position fixed or absolute from the normal flow of the page. so you need to assign an id or class to your icon and style it manually (with hard code top/left position in pixels) in your stylesheet. However if you are comfortable with javascript or jquery then it is possible to calculate the top/left position of those elements and dynamically assign top/left position to your icon...
I noticed the glitch that i can't remove somehow, on all pages of the website the grey footer is not sticked to the bottom of the screen...
Here is the small page:
As i can see the white space under footer belongs to <body> tag but i can't fix this.
I tried:
position: absolute;
bottom:0;
But in did not help, also as changing padding, margin styles of body, content or footer.
Help please.
You seem to have a button there.
Find the following line:
<button id="authorize-button" style="visibility: hidden">Authorize</button>
and remove it, or do something about it. Perhaps move it up
The problem I'm finding has to do with the line-height property set on your body tag. Removing that property seems to fix the issue.
I would recommend using line-height only where necessary (ex. If you need to use it on your nav or in your content tag, do it).
Hope that helps!
EDIT: Setting position: absolute will work if its parent container is position: relative.
I got it to work like so:
.b-footer {
position: absolute;
width: 100%;
}
and you want to add position: relative to your .b-content container so the absolute works. I see it working in Chrome right now.
The Goal
I'm practicing writing my own simple JavaScript slideshow plugin, and the intended method is to have all of the images -- all of which are the same size -- in the same location on the screen (so all having the same x and y values), but alter their z-indexes to shuffle them in front of or behind each other as necessary, cycling through each of them. The JavaScript is working well so far, but I'm not able to get the images to all layer on top of each other on the page -- they just stack, from the top of their container downward, one per line.
What I've Got
This is a simplified version of the relevant portion of my HTML:
<section>
<div class="images">
<img src="1">
<img src="2">
<img src="3">
</div>
</section>
And the CSS
.images {
height: 15em;
margin: 0 auto;
overflow: hidden;
width: 20em;
}
As you can see, it's not too complex. I'm at a loss as to where to go from here, though. The only way I've been able to get the images to layer the way I want is to apply position: absolute; and top: 0; to the images, but that also throws them outside of their div, and then applying that to the div itself causes the whole layout to go into chaos. So if anyone has any advice, I'd greatly appreciate it! :)
Add position:relative to your .images class. Absolutely positioned elements are positioned with respect to their closest positioned ancestor element.
You need to apply position: relative to the div. That way the images use their parent div as a reference.
One option would be to use the JavaScript to modify the display and visibility CSS attributes to show and hide the images.
visibility: hidden means the element is not visible, but it still takes up space in the page flow.
display: none means the element takes up no space in the page flow.
I've seen browsers behave oddly when display is none but visibility is hidden. I've found it's best to switch both.
For the image you want to be visible, set display: block and visibility: visible
I want to float a div to the right at the top of my page. It contains a 50px square image, but currently it impacts on the layout of the top 50px on the page.
Currently its:
<div style="float: right;">
...
</div>
I tried z-index as I thought that would be the answer, but I couldn't get it going.
I know it's something simple I'm missing, but I just can't seem to nail it.
What do you mean by impacts? Content will flow around a float. That's how they work.
If you want it to appear above your design, try setting:
z-index: 10;
position: absolute;
right: 0;
top: 0;
If you don't want the image to affect the layout at all (and float on top of other content) you can apply the following CSS to the image:
position:absolute;
right:0;
top:0;
If you want it to float at the right of a particular parent section, you can add position: relative to that section.
Try setting its position to absolute. That takes it out of the flow of the document.