I am having trouble positioning a corner image on to of an image. The span which have an little background image should be in the top left corner on top of the image.
Here is my code:
<div id="wrapkon">
<span style="width: 4px; height: 30px;display:block;position:absolute;top:0px;left:0px; background-color:#000;background: url(../images/konboxleft.png) no-repeat;"></span>
<a target="_blank" href="/link/11"><img style="width:125px; height:125px;" src="image.jpg" alt="21883"></a>
div>
Have a look here: http://jsfiddle.net/jdmiller82/F8ZPG/
You need to set a position relative to your #wrapkon.
also, top and left values should not be in px.
When you use position: absolute;, you need position: relative; on the parent.
You should give your <div id="wrapkon"> a position: relative style.
Check to make sure wrapkon has position: relative on itself, or the span which you have absolutely positioned will not appear inside it. See this: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Related
I want to have an image link at the lower left side of my webpage. I am able to get the link to work but the entire space within the padding is also part of the link. So there is pretty much a big 800px by 800px link on my page when I only want the image itself to be a clickable link. Also, the position needs to be absolute because of the way the entire page is set up. Would anybody be able to tell me now to fix this?
<div id="image_link">
<a href="#">
<img id="image_id" src="../path/image">
</a>
</div>
<style>
#image_link {
padding: 800px 0px 0px 800px;
position: absolute;
}
</style>
It's strange that it creates 800x800 pixels link area for you. padding on the div adds space inside the div, but outside the a, so it shouldn't make the a element larger.
But as you're already using position: absolute;, you should really use top, right, bottom and left to control the position. And it's recommended to set it on the img element directly.
#image_id {
position: absolute;
top: 800px;
left: 800px;
}
I want to align images like shown in the Aligned Images link at the bottom of the website. I just mean that I want to place many movies dvd covers on the bottom of the page so it becomes easy to access any movies directly. So if someone hover the movie Blast than it will pop up. Can anyone help me out.
img {
position: absolute;
bottom: 0;
}
And a fiddle: http://jsfiddle.net/dwtp7pje/
Note that if you put the image inside of another div, you need to assign that div a position: relative; for it to work.
Edit: if you're looking to place several images at the bottom, place the images in a div like this:
<div>
<img src="http://orig12.deviantart.net/2b79/f/2008/314/e/8/my___dark_knight___dvd_cover_by_esbe77.jpg" alt="">
<img src="http://orig12.deviantart.net/2b79/f/2008/314/e/8/my___dark_knight___dvd_cover_by_esbe77.jpg" alt="">
<img src="http://orig12.deviantart.net/2b79/f/2008/314/e/8/my___dark_knight___dvd_cover_by_esbe77.jpg" alt="">
</div>
with css:
div {
position: absolute;
bottom: 0;
}
img {
max-width: 33%;
}
And the fiddle: http://jsfiddle.net/dwtp7pje/1/
this is in css
.fix{
position:fixed;
bottom:0px;
}
and your html
<img src="yourimagepath" class="fix"/>
absolute: An absolutely positioned based on its nearest relatively positioned parent element.
fixed: Fixed elements are completely independent on the web page. Regardless of any parents, a fixed position element will always be fixed at a point based on the window of browser
Try the following code.
<img src="http://i.imgur.com/KjuqA1l.png" style="position:fixed;bottom:0px;">
Update:
<img src="http://i.imgur.com/KjuqA1l.png" style="position:fixed;bottom:0px;max-width:100%;">
I'm trying to make "meme"-looking captioned images with CSS using an <img> object and two <p> objects styled with CSS. Right now I have a <div> which contains the <img> and then the two <p>'s. What I want to do is have the picture positioned in the top-left corner of the div and then I set the z-index to -1 and THEN somehow position the two p objects over the image but positioned relative to the top-left corner of the div.
This is so I can set the top: y and left: x values of the p objects such that they will be positioned accordingly relative to the top-left of the div and in turn the image.
But when I try to set position: relative for the p objects there's a problem where the first p is correctly placed but the 2nd p is positioned relative to the first one so even though it's at top: 0, left: 0 it's still lower than it should be.
How can I fix this?
check out this jsfiddle:
http://jsfiddle.net/56J8y/1/
relevant CSS
.meme_container {
position: relative;
}
.meme_container .top_meme {
position:absolute;
top:0;
left:0;
}
.meme_container .bottom_meme {
position:absolute;
bottom:0;
left:0;
}
and the html
<div class="meme_container">
<img src="https://www.google.com/images/srpr/logo3w.png"/>
<p class="top_meme">This is a caption 1</p>
<p class="bottom_meme">This is a caption 2</p>
</div>
One way is to use Pseudo element like :after and :before
Example:
img:after {
content: "Hello, I am the caption";
}
I think you are talking about this situation:
<div>
<img />
<p class="first">caption1</p>
<p class="second">caption2</p>
</div>
Then to do what you want you need to set the positioning of the div to something (relative will generaly not affect your behaviour so its a good choise). Once that is done postioning absolute can be used inside. Absolute refers to the next higher positioned element!!
div{position:relative};
p{position:absolute};
p.first{top:10px};
p.second{top:20px};
I need to position elements and receive like in attached image
I have a page where all elements are inside MainDiv. There are 2 images.
I would wondering if somebody showed my html + css should be.
thanks in advance!
A possible way would be to set the position of the overlayed image to absolute:
#overlayImage{
position:absolute;
right:0px;
bottom:0px;
width:150px;
height:150px;
}
Important is, that the position of the main div is not "static".
<div id="main_div">
<div id="other div"> </di>
<div id="overlayImage"> </div>
</div
you can accomplish this the following way: assign the background image as background to the main div
background: url(some/url/to/image) no-repeat scroll top right transparent;
then add a normal image element inside that div and position it absolute with the folllowing css
right: 0;
bottom:0;
position: absolute;
make sure the main div has position set to relative
I want to create a headline (h2) with an image at the right-most area of the bounding box. I have the layout almost right except I can't push the image a little bit to the right of the element's bounding box -- how would I tweak my css so it is displayed correctly?
I'm trying to do something like this:
[{someHeadLineText}{dynamic space }{image}{5px space}]
where the [] indicate the total available width of my content.
Html:
<div class="primaryHeader">
<h2>News</h2>
</div>
Css:
.primaryHeader h2 {
background-color: green; /* the header looks like a box */
color: black;
background: transparent url(../images/edit.png) no-repeat right center;
border: 1px solid red;
}
I am placing the image to the right of my h2 element and centered vertically -- but how do I adjust the placement of the background image?
I'm afraid I think you can't. You can use either right or a pixel value as the image's x-position but that pixel value will always be relative to the left corner of the bounding box. Adding padding won't help either, it will just extend the bounding box further.
The only solution I know for this is either adding the shift to the image itself, or using an absolutely positioned element (with a slight offset) hovering behind the element - but that would require you know the width and height in advance.
Edit: evil, hacky idea. I have no time to try this out right now, but it should work if the h2 is a display: block.
Give the h2 a position: relative.
Place a div or other element inside the h2 with the following:
position: absolute;
left: 0px;
top: 0px;
right: 5px; /* This is the shift */
bottom: 0px;
background-image: url(...);
background-position: right center;
background-repeat: no-repeat;
z-index: -1; /* I don't know whether this will overwrite the h2's content */
this could lead to the desired effect, I'm not sure as I have not tried.
The element may overlay the h2's other content, in which case you would have to put the rest into a <span> element with position: relative and z-index: 1.
It's really hacky. Better put the padding into the image itself, much cleaner.
Can you add padding pixels in the image itself?
You could ditch the background image and use an image instead.
<div class="primaryHeader" style="padding-right: 5px;">
<img src="../images/edit.png" alt="" style="float: right;" />
<h2>News</h2>
</div>
You can look into CSS3 background positioning. It works in all the modern browsers (not IE, of course).