I don't have an idea even where to start. Like on the attached image I want to make a centered div (yellow rectangle) and two img elements that, regardless of the resolution (black rectangle), are pointing to the specific area of this div (red arrows).
You can use position: relative for the specific element (that you want to point at),
put the arrows (their html code) inside of the elemnt (that you want to point at) and then you can use position: absolute; with top, left, right, bottom properties to position the arrows relatively to the center point.
Related
Hello Stackoverflow community, ive got question about positioning my div. When i double click td, div appears, but if that td is near right side, my div goes out of width, is it possible somehow to change floating from right side of mouse to left side? Here is the picture. Thats how it looks like if i want to change date which is in the right corner:
As you can seee:
How can i fix this to fit in window no matter what?
It's not a floating div, it's absolutely positioned.
The problem is that left: 1094px rule you have. Change it to right: 0px and experiment with the number that works the best.
If you want to lock it on the right edge of the parent element, make sure you put position: relative to the parent element.
I'm trying to disable some portions of my html pages.
I read that you can use a transparent div with absolute position on top of your page to prevent clicking on elements beyond it, but is there a way to accomplish this only on a portion of a page (let's assume this portion is all contained in a div) without the use of absolute position?
Put position: relative on the div you want to disable, then add the transparent blocking div as a child of this div with position: absolute and top, bottom, left, right equal to 0.
If you are unable to put position: relative on the div you want to disable then it will be a bit more difficult as you need to compute it's dimensions and offset and then position the transparent mask as a child of the body and at the exact same position as the element you need to disable. JS frameworks (as jQuery) usually provide you with ways to determine a box's offset relative to the document.
Make a little 1px x 1px transparent image and save it as a .png file.
In the CSS for your DIV, use this code
background:transparent url('/images/transparent-bg.png') repeat center top;
Remember to change the file path to your transperant image.
I think this solution works in all browsers, maybe except for IE 6, but I haven't tested it.
So, I have a layout where I have a repeating transparent shadow element set to the background of my parent container element. Set atop this, and supposedly hovering over the topmost edge of this background, is supposed to be an image with a frame and drop shadow.
However, because the image frame continues the parent element, the background image also continues upward. This is visible as the vertical lines above the top edge of the frame's drop shadow. See screenshot below:
This happens regardless if I use a transparent image or CSS3's box-shadow property. Setting negative margins doesn't work to bring it out of the parent element, nor does setting positioning as relative or absolute.
Normally I'd try to "fake" the transparency effect by setting a solid image at the top edge of the image frame, but there's a repeating stucco pattern set as the body background, which means there'd be a visible, unnatural-looking edge. (Insert cursing re: repeating patterns here.)
Any suggestions how I could prevent a parent element's background from showing through a child element, or offsetting the image frame somehow?
Many thanks!
I figured it out.
I was modifying the WordPress TwentyEleven theme, which has #primary and #secondary divs as floats atop the main content div. In order to make the background extend all the way to the bottom of the content div (I.e., past the two floats), I had overflow: set to auto.
Since I don't need to float anything (It's one column with no sidebar now), I removed both floats and removed the overflow declaration I had. Tah-dah, totally works now.
If someone else finds him/herself in this issue, have a look at my jsFiddle, which I used to figure it out. Thanks to Paker for the suggestion.
I have a page where we can see a number of image, in a gridview (like)
I want the user to be able to delete them ; I want to put a small X image on the top right corner of every image. What is the best way to do that?
I tried with Image Map but i cannot set a image, only a link.
You will have to position it over the original image. Here's a quick example:
http://jsfiddle.net/QPr5U/1/
I made a list of icons, where every image is in it's own li element. It could be divs or whatever, as long as every image is wrapped by another element, and a list is semantically the most correct.
Together with each image is a link with a width and height of 16px and a background image of a cross.
The trick is that the element around the image has a position: relative. This means that anything inside that li element that has a position, is relative to the boundaries of the li.
So if I now give the .cross element a position: absolute with a top and right value of 2px, this means the cross will be positioned 2px from the top and right of the list item.
The last thing I did was give the li items display: inline-block so that they don't span the entire width of the page, but only the width of the contents inside them. If you know how wide each image is going to be, you could also just give the li a fixed width.
Hope this helps!
keep the individual images as the background image of any div and then set the cross image on that div
Is there a way to let the repeating background 'start' fixed at the bottom of the div and overflow on the top? (the other way round than default)
Small example to show what I'm trying to accomplish. The red lines on the image below are the (horizontal) borders between several divs. The middle div is used as a transition between the upper and lower one, with a single non-repeating image. The background of the lower div consists of a repeating darker image with a paper hole, resulting in the paper border seen below.
Now the upper div (with sizable content) should have a repeating background image starting at the bottom and repeating upwards. This for maintaining the correct distance ratio between the holes instead of ending up with a smaller distance or even a partial hole in the 'paper border'.
Preferably it should be compatible with method 4 of equal height columns, but I don't see a problem there.
Just make sure you set background-position: right bottom; to the top div, and the background image should start from the bottom and "overflow" out the top.
Example in shorthand:
.my-div {
background:#fff url(my-bg.png) right bottom repeat;
}
Some reference in case you'd like to explore this further:
http://reference.sitepoint.com/css/background-position