So, for fun I'm building an iOS homescreen. I'm displaying the icons using <ul> and <li>.
The li's are build like this:
<li><img/><img/></li>
The first image is a delete button with display:none, the second image is the actual icon. If you long click the second image, the first one fades in. However, I do not know how to display the first image in the top right corner of the second image using css. Any help would be greatly appreciated.
There are tons of ways you can do that. Assuming the icon takes up the full space of the li, you could do this:
li {
position: relative;
}
li img:first-of-type {
position: absolute;
top: 0;
right: 0;
}
If you want it to be pure css you need these two to be positioned absolutely position:absolute;. Then make the 'x' button image the same size as the icon image. Then just give those two images the same left and top value.
#first_mage_id, #second_image_id {position:absolute; left:X; top:Y;}
Remember to replace X and Y with some values (depending on where you wish it to be). If it doesn't work show us your code so we can help you.
Related
As you can see in JSFiddle I have slideout menu. I want to slide or animated left to the right opening "div" on my page center, when someone click menu buttons. I've already searched about that but always saw lightbox but I dont want it. By the way I cannot add JSFiddle link so I have to write it like that. h ttp://jsfiddle.net/ygzsmsk/4b2Zs/
Based on my understanding of your question, I've modified your code a bit.
I understood that you want the first div to move from left to right instead of just the menu.
You need to remove the position CSS attributes from internal elements and add the same to your parent div; in addition, you need to have your JS act on the parent div.
Have a look at this:
.cbp-spmenu-push {
left: -200px;
position: absolute;
}
http://jsfiddle.net/4b2Zs/1/
You can play around with the final arrangements as you see fit.
I am using a wordpress theme and have changed my background image.
I now want to display an image on top of the white background (where the content is displayed).
I have done this by using the following code:
img style="position: absolute; top:244px; left: 220px;" src="http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png"
This looks exactly how I want it to, but it has a problem. The site has a drop down menu, when you scroll down the menu it will disappear when your mouse moves over the image which is displayed behind.
Can anyone help me to move the image back to overlay the background on every page?
I have tried using z-index without any success.
This is the site that I want to apply the image to: http://www.tgon.co.uk/
Here is an example of the problem I am having: http://www.tgon.co.uk/info/languages/french/
Any help you could give would be greatly appreciated.
Basically, what you need to do is to:
Remove the 'position:absolute' from the image. - this is what cause you the overlapping problem.
Add 'margin-top: -107px;' to the image. - this will push the image up to where you want it.
Anyhow, I didn't understand why didn't you use 'background' css property for this.
You could have just do this:
#primary {
background: #fff url('http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png') no-repeat;
}
You have to remove this image:
And add this css:
#content {
background-image:url("http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png");
background-repeat:no-repeat }
Here's the solution:
#branding { z-index: 1001;}
#inner-wrapper { z-index: 1000;}
Since the header is created before the #inner-wrapper div, you will need to apply a higher z-index to header compared to div#inner-wrapper`.
EDIT
Check the screenshot of the developer console view of your markup:
Just setting the z-index right for header & div#inner-wrapper did it for me.
Let's fix this then I'll be glad to help you set the image right.
My situation is a bit tricky and hard to explain, hopefully I can do this clearly.
On my website I need it so you click on something and it downloads an image, but the object you click on must allow the :hover psuedo class to change the image on :hover.
How I've set it up is as follows:
http://jsfiddle.net/6NuTv/
If you remove visibility:hidden from the HTML, the image appears and the browsers' download function becomes available.
I can choose which image the img src= is, but adding visibilty:hidden will disable the download ability.
To reiterate - I need it so you you hover over prof_wl_btn and it downloads the <a>'s href=... image and on hover/mouseover prof_wl_btn changes it's background position (so far using psuedo class).
Possible Methods
1: Use javascript onMouseover and Z-Index, but I can't get z-index to work here...
2: I tried using the CSS attribute clip:rect(Xpx,Xpx,Xpx,Xpx); but that crops everything.
If this is unclear I'm sorry, this is hard to explain! I can't find any other post like this.
Ok rewrite, since OP clarified in comments.
You can either have a background image that shifts on :hover, or if the image must be in the HTML then you can indeed move it on :hover of its parent, but if you wanted alt text to always show that won't happen here.
<img src="someiImg" alt="Download ze image, yes">
Make one large image (someImg) showing both states (normal/hover). They can be top bottom or side-to-side. I like top-bottom. Let's say the image you want to show is w 40px by h 40px. Your new sprite image showing both states, if top-bottom, will be w 40px by h 80px;
Set the anchor to block context (display: block, float, whatever).
Set height and width on teh anchor equal to the amount of image you want the viewer to see (so in this case, width and height of the anchor is 40px).
Set anchor to overflow hidden. Now you should only see the 40 x 40 part of the image you want users to see before they do anything.
You can now either set the anchor to position:relative and the img to position: absolute, OR leave them and use negative margins (you'll have to make the img also in block context to do this). Let's say you do the latter:
a img {
display: block;
}
a:hover img, a:focus img {
margin-top: -40px;
}
Because the anchor has overflow hidden, you'll still only see a 40 x 40 window of the image, but now you see the bottom part. As a bonus you get keyboard working there too.
If you want to use positioning, you'd relative-position the anchor, absolute-position the img, set the image in normal state to top: 0 and left: 0, and on hover/focus of the image set top: -40px;
I'm still not totally sure what you mean, but i think you're trying to do this
a img {visibility: hidden;}
a:hover img {visibility: visible;}
but I think the best way would be to set the background image of the link to be the image, then change the background image on hover.
I've been designing a new theme out of boredom and found an idea I really liked. It uses the :before and :after pseudo-elements to put two images on top of the menu bar, to make it loo like some animals are walking/hanging on it.
The problem I'm having with this is the fact that these elements then make the button parts underneath unclickable. There are several pixels at the top where, even though not directly under an animal, can't be clicked. The logo, which is meant to sit behind the image at the left, can only be clicked at the top above where the generated block is.
If you're confused, see the jsFiddle. In this example, the logo isn't present so you can see that link behind it is completely unclickable without tabbing.
Is there any workaround/hack that can make the image still appear on top of all the content, but still allow the links below it to be clicked through the image? Perhaps an alternate way of adding the images on top so at least the space in between them is clickable?
Original Answer
Well, its not fully cross browser yet, but pointer-events: none on those pseudo-elements is probably what you really seek. Here's the fiddle.
Secondary Answer (perhaps more cross browser)
Taking some inspiration from Jimmie Lin's idea, but keeping it all semantic, if you make sure the stacking context remains unchanged for all the elements, then for every a you need "pushed forward" set something like this (see fiddle):
.pushForward {position: relative;}
.pushForward:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
}
One approach (this is extremely hacky, but theoretically should work) is that you should add a <div> with higher z-index than the animal icons, then set it to have an opacity of 0. I am not sure whether setting opacity to 0 will hide the element (it shouldn't), but once you create this <div>, copy-paste all of your links that are affected by your icons there.
Theoretically, this transparent DIV would effectively replicate the links again and catch all the click events that are supposed to go on the icons.
Try it out, maybe it works - just a hacky idea.
In here and here, there are some examples of the quiz questions that are used in Udacity.
How can I achieve such an effect ? (i.e. : how can I build a page where I have an image, and then some form elements over that image ?)
Maybe I could use a table with the image as background. Would that work ? Would it be reliable across browsers ?
There are different possibility.
You could place the elements with "absolute" or "relative" position in order to get the element exactly over the image.
You could also draw with a CSS3/HTML5 Canvas.
I think the best thing to do a simple form with an image should be following this tutorial
If you manage to create that then you can tweak the CSS code in order to be able to place the card where you want
They just have an image and then absolutely position form elements on top of it.
input {
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
Just need to change top and left until the input element is where you want it. The input elements can sit right on top of the image.