check out the site wplayout.com. In home page I have a gallery. I would like to place a "premium" tag image on top of each image shown on home page gallery. Currently the premium image is shown on top right corner of the home page. how to achieve that?
so far i have
.ribbon {
background: url("images/premium.png") no-repeat top right;
width: 100px;
height: 102px;
overflow: hidden;
/*text-indent: -9000px;*/
position: absolute;
top: -3px;
right: -3px;
z-index:500;
display: block;
}
and in html I have
<span class="ribbon"></span>
Thanks in advance
i think that the position:relative has to be applied to ribbon and not the container div.
Try putting
.ribbon
{
background: url("images/premium.png") no-repeat top right;
width: 100px;
height: 102px;
overflow: hidden;
/*text-indent: -9000px;*/
position: relative; /*changed*/
right: -204px; /*changed*/
top: -230px; /*changed*/
z-index:500;
display: block;
}
tried this using firebug & it worked. Hope it works for you.
Make sure the div containing the 'premium' image has position: relative set on it, like so:
Markup:
<div class="my-image">
<img src="whatevs.jpg">
<span class="ribbon"></span>
</div>
CSS:
.my-image {
position: relative;
}
Divs with absolute positioning (your ribbon) are positioned relative the first parent that has position: relative, or relative to the body if no such parent exists.
Use the z-index selector in css
For your premium content add z-index:999; and on the image below use z-index:0;
Related
I'm not super comfortable with JS , but that seems to be the best way to do this , having a hard time applying other peoples solutions to my scenario.
Want an image to appear when hover over text.
I can get the image to appear on hover, but it appears up way up at top of page, and I am having a hard time getting it to appear in the viewport without indicating what the top margins is. Is that the best way to do it?
So far I have:
<div id="popup">
<div class="large-6 columns">
Bristol Hayward-Hughes <span> <img src="bristol.jpg" alt="Bristol" id="bristol"> </span>
</div>
</div>
and
#popup span {
display: none;
}
#popup a:hover span {
display: block;
position: absolute;
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
#bristol {
position: absolute;
z-index: 1;
margin-top: 100px;
}
If I'm understanding the question correctly, you'll need to place position:relative; in the parent Div: #popup that the image is residing in.
Check this Fiddle for reference: https://jsfiddle.net/rjschie/q87um7wd/2/
For an example: comment the position:relative; line under #popup and re-run the example. You'll see that the Image appears at the top of the window. Then uncomment it, and re-run and it will appear relative to the #popup div.
Please give relative positioning to your span that holds your image.
#popup a:hover span {
display: block;
position: relative; // Changed absolute to relative
//Give top and left position with respect to your anchor tag.
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
Remove the margin-top from the image tag as well.
#bristol {
position: absolute;
z-index: 1;
/*margin-top: 100px;*/ //Removed margin-top on the image
}
http://estreetusa.us/piechart/
i want to fix the center image, i.e 24 hours written on it, please suggesst.
back is css for background-image and fish is css for overlaid image ..
relative;
Thanks in advance!!
Change your fish class to this:
.fish {
background-image: url(24.png);
width: 196px;
height: 196px;
position: relative;
margin: -295px auto;
right: 15px;
}
You have multiple options in this case.
You can set left to 50% and then center it by setting the margin-left to -98px (half the elements width). Don't forget to give it's parent position: relative;
.fish {
background-image: url("24.png");
width: 196px;
height: 196px;
position: absolute;
top: 426px;
left: 50%;
margin-left: -98px;
}
OR you can put 24.png in a img element and set it's display to inline or inline-block. Then you give the parent text-align: center.
If the content above the clock doesnt change (in height), I would go for the first option. Otherwise go for the second.
Good luck :)
Firt add position: relativeto the section element that contains both elements,
Then put the fish DIV inside the back DIV (making fish's position depend on back) and alter the top and left settings accordingly (approximat setting: top: 96px; left: 471px;)
use this css for your current HTML.
background-image: url(24.png);
width: 196px;
height: 196px;
position: relative;
top: -300px;
for the above css top margin have to adjust for device specific
to make image perfectly in center you have to nested the image into the canvas
and then apply below css
background-image: url(24.png);
width: 196px;
height: 196px;
position: relative;
Add this rule in your css file:
.fish{
margin-left:3.5%;
}
I would like to put some image to the top and right of the text... I made an example in Photoshop so you may see what I had in mind....
Image example
I am using a WordPress theme, and I cannot figure out how to place this image to the top right corner... yes, I did search the google but I didnt find any suitable solution.
I tried as a background image of a div, but the image cannot go beyond the confines of a div...
I tried putting img tag, but it pushes the text to the left ... but I need the text to go over the image to create the desired effect
Thank you in advance.
This is what I did:
img {
width: 400px;
height: 400px;
position: absolute;
right:0;
top:0;
}
div {
position: absolute;
left: 0;
top: 150px;
background-color: white;
width: 80%;
}
Here is the JSFiddle demo
add in css
body{
background-image:url("your image path");
background-position: right top;
background-repeat:no-repeat;background-attachment:fixed;
}
Fiddle
.example {
height: 100px;
width: 100px;
position: absolute;
right: 0px;
bottom: 0px;
top: 20px;
}
<div class="example">
<p>Text example</p>
</div>
Add class to the image i.e
.toprightcorner{ position:absolute; top:0; right:0; }
after applying the css . Hope it works out. If n't let me know.
I have the following layout:
On the left side I have a menu and big gray part on the right side is the body content. The problem is on the left menu I have a bunch of buttons. I want this menu to be fixed position and body scrollable. I Have the following css:
#menu {
position: fixed;
}
#content {
position: inherit;
margin-left:300px;
}
The problem is that on the red part of my menu all button unavailable, I can't click on it. looks like body overrides the menu.
Any ideas what the problem might be?
Thanks
Including the html would give a better sense of the stacking order and likely yield a better answer. Given what you've provided, this should fix:
#menu {
position: fixed;
z-index: 1;
}
In order to fix it to the top and not scroll, you don't use position: fixed;. You need to use position: absolute;. If you don't want it at the very top, then you use position: relative; and place it inside an element.
Then, in order to scroll, you use position: fixed;.
When you use position: fixed, it places the element fixed within the visible page.
However, when you use position: absolute, what this does is put it on an absolute position on the page regardless of scroll. For example, if you added the css top:0; then it would be 0 pixes from the absolute top of page, and if you scroll down it will disappear from view because it is all the way at the top of the actual page, not just the top of the visible page.
I understand it seems a bit counter-intuitive to you. However, you can see it working in the jsbin below.
Working jsbin:
http://jsbin.com/Uwuyuha/1
page.html
<body>
<div id="container">
<div id="menu">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
</div>
<div id="content">
</div>
</div>
</body>
style.css
body {
width: 100%;
height: 100%;
}
#container {
width: 1000px;
height: 1000px;
}
#menu {
width: 250px;
height: 2000px;
position: fixed;
background: #999;
}
#content {
width: 650px;
height: 300px;
position: absolute;
margin-left: 251px;
background: #444;
}
let's say I have to place an image RIGHT in a proper spot, but I need its CENTER to be in that spot. I wanted to place an image in the top-left corner of a div, so I placed the image in the div, gave position: relative to the div and position: absolute to the image then set its top and left values to 0. It quite worked but I'd need the CENTER of that image to be right over the top left corner. I'd do it manually setting top: -xpx, left: -ypx BUT I don't have any specific value for the image size (which could vary a lot).
So is there any way to say something like: position: absolute-but-i'm-talking-about-the-center; top: 0px; left: 0px;?
Thank you very much indeed!
Matteo
You could use javascript yo get the size of the image and then set the css left value needed.
Be mindful of the way images are loaded though as they are asynchronous so will not necesserily be available when the document is ready. This means that unless you handle the images correctly you will end up with width and height dimensions of 0.
You should wrap the image in another block element and put a negative left position to the image.
Something like this:
<div id="something">
<div class="imagewrap">
<img>
</div>
</div>
Then give #something a relative position, .imagewrap an absolute, etc... And img should have a relative position with left:-50%. Same for the top.
have you tried;
name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }
give that a go.
No need to use Javascript, this can be done in CSS.
The required HTML: (you must change the div to an img obviously)
<div id="container">
<div id="imgwrapper">
<div id="img">Change this div-tag to an img-tag</div>
</div>
</div>
The required CSS:
#container
{
position: absolute;
left: 200px;
top: 100px;
height: auto;
overflow: visible;
border: 2px dashed green;
}
#imgwrapper
{
position: relative;
margin-left: -50%;
margin-top: -50%;
padding-top: 25%;
border: 2px dashed blue;
}
#img
{
display: block;
width: 200px;
height: 100px;
border: 2px solid red;
}
Click here for a jsFiddle link
The margin-left: 50%; obviously works when using the container div, because the width of the container will be exactly that of the content. (You might need to add width: auto;)
But margin-top: -50%; will not work because the height of the container div will change with it, thus you need yet another wrapper div in which you use this margin-top: -50%; and then you need to fix this error it makes by using a positive percentage based padding. Obviously there may be other solutions to fix this, but the solution should be something like this.
Probably one of the simplest solutions is to place the image in the upper left corner at position
left: 0px; top: 0px; and then use translate to move its center to this position. Here's a working snippet for that:
#theDiv {
position: absolute;
left: 100px;
top: 100px;
background: yellow;
width: 200px;
height: 200px;
}
#theImage {
background: green;
position: absolute;
left: 0px;
top: 0px;
transform: translate(-50%, -50%);
}
<div id="theDiv">
<image width=31.41 height=41.31 id="theImage"></image>
</div>