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
Related
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.
I am using an XML editor called Madcap Flare that allows me to create image maps using a GUI. Since that makes the maps easily editable, I would rather use that technique. Unfortunately, the code it renders is not a CSS image map, but an HTML one (map, area, etc.). I do not want to switch to a CSS image map, because I want to do easy editing in the GUI.
I want my image map to align right with text to the left of it. I have tried the following techniques with the indicated results:
Technique 1: I floated the div containing the image right with CSS.
Result: The image map no longer works, but the image floats right and the text wraps.
Technique 2: I floated the image right with CSS.
Result: The image floats right, but the div remains on the left. The text does not wrap and the image map no longer works.
Technique 3: I set the div align="right" and removed the CSS completely.
Result: The image floats right and the image map works, but the text no longer wraps.
I've noticed the image map only breaks when I float the image or its container; I even floated left to experiment and saw the same results. Is there no way to float an image map? I wondered if the issue were an image resizing issue, but I inspected the code and the image map is no inheriting any image size styles. I also set the image to max-width and max-height 100% in my tests to make sure it wasn't shrinking at all, but I saw the same results again. I also think that the HTML align=right experiment indicated that the problem was not an inherited style.
Any tips/tricks? Or any confirmation that you cannot float an image map? Thanks.
If the div containing the image map has a fixed size and is at the upper border of its parent DIV, you could do the following:
Create an empty DIV with the same size as the one containing the image map and make that float right (at the top). No border, no background, no contents. The text will float around that one.
Apply position: relative to the parent DIV and position: absolute to the div containing the image map. Apply top: 0;, right: 0 and the width and height as the empty floated DIV.
This places the image map above the empty floated DIV and the text floats around it.
I have a div with which I display basic user information. The 'search-person' div has a height of 'auto'. This is so that profile pictures can be dynamic in size, up to 170px tall. Now, I would like to have a button displayed over the profile picture, and I thought to add relative positioning to the contents in the div and move it up and under the button, button it doesn't seem to want to work right. What can I do wrong?
here is my problem:
http://jsfiddle.net/C9Zj5/
#wrap {
position: relative
height: auto;
width: auto;
}
Make the #person-wrap position:relative and then the #buttons div position:absolute. That should give you the effect you're looking for.
div containing relative position should contain within another div having absolute position so that it can float correctly
If you set position:absolute to #buttons them you will have the button over the profile picture. Use left and top to positioning the button wherever you want inside #person-wrap.
I'm not sure what you mean with "and I thought to add relative positioning to the contents in the div and move it up and under the button", but if you want to show the info inside #person-wrap you can use position absolute or negative margin.
Aside: Is not a good practice to have div elements inside the link tag. Also why you need a button? Maybe you need to rethink the html structure as well ;)
Im trying to make this layout (many of these are in a list):
An image (of varying height, but a set width) on the left. To the right is an <h2>, and below that, but still to the right of the image is a div with other content in it.
The div is used to provide a different colored background. Right now, the div for some reason extends behind the image, and the images has a varying distance between them, and sometimes one element will get pushed to the right by the height of the image above.
http://jsfiddle.net/RQsUc/
Add overflow: hidden to your outermost divs (div (display: block)) to contain the floats.
I want to achieve something like this:
A) Is an square image, say 65x65.
B) This icon is another image which
need to be floated inside A.
C) The minimum length of the row is
the height of A. The maximum depends
of the length of the text
description.
Usually when I have floating images like A and B, I would put my container position as relative, and obsolute for the floating image, and that will do it, but I'm a little lost with the text here.
This is just going to be used on webkit browsers, if that is of any use.
If the image size is fixed and unlikely to change in the future, then I'd recommend applying position absolute to the image (what you're saying). I'm guessing your problem is that if the text is too short, the height of the image would exceed the height of the container. This is easily fixable with min-height:
.module {
min-height: 65px; /*your image height*/
}
You can view a demo here:
http://jsfiddle.net/RkeJJ/
This should work all the way down to IE7.
If your image size is variable, then I'd recommend display: table/table-row/table-cell, but this will work only on IE8+ and the rest of the modern browsers.
Me debes una caña! ;)
You know the width of image A (the large image). The title goes in a h1 for example, and the text in a p (or div), so set these two elements to have a left margin greater than the width of image A.
You can then float image A to the left and position the icon B over the image using absolute positioning.
Finally, I would have a wrapper div with overflow: auto to have a border (if needed) and to allow for a bottom margin to provide white space between the following element.
Partial answer: see my code snippet at http://jsfiddle.net/audetwebdesign/Nam52/
You just need to add the date element after the title.