Menu
Okay, let's see if I can explain what I mean, here's an image to help:
So as you can see in the image, I need to get the green arrow from its current location to being placed outside the main div that holds it. I need so if the page is re-sized the arrow will stay in its position. If you need any more information, please let me know. Sorry if this is too vague, I wasn't sure how to explain it. Thanks!
449
Add a relative div placed in the flow of the page. Set the background image as relative so as the div knows how big it must be. Set the overlay as absolute, which will be relative to the upper-left edge of the first image.
1) Create a DIV tag with a unique ID; 2) Place the image into a background:url style element of a DIV tag; 3) Set the height and width properties of the DIV tag to that of the selected image.
Answer: Use the CSS max-width Property Additionally, you can also apply the max-height property if you've a fixed height div element, so that the image doesn't overflow from the div's boundary horizontally or vertically.
This can be done by enclosing the image and text in an HTML “div”. Then make the position of div “relative” and that of text “absolute”. The absolute elements are positioned relative to their parent (div).
Give the container element position: relative; and then give the arrow position: absolute; top: 0; right: -x; (where x is the width of the arrow).
Here is an example: http://jsfiddle.net/joshnh/xpFPd/
125
You need to apply absolute positioning. If it will always be a constant distance from the left or right then this is easy.
img.class {
position: absolute;
right: 16px;
}
For example.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
