I've tried this from so many angles but can't figure it out.
See my map here: http://defendiendovidas.org/test.html
I need the country names in to appear on top of everything else. z-index isn't helping, even though my span is position:absolute.
Any pointers to achieve this would be greatly appreciated!
P.S. if anyone has a suggestion for how to build this map better, I'd be keen to hear. Thing is, I want the fade-on-hover effect. But my images are overlapping and therefore as you can see with Brazil, the hover is kind of conflicting with nearby countries (images) that are positioned "on top" of Brazil. map/area is no good because it doesn't allow for area:hover...
Thanks!
The solution is to apply the opacity to the img and not to the entire li,
since opacity and z-index are somehow connected.
Also, since you've asked if anyone has a suggestion how to make this map better, well...
Your code was really messy and you've also used lis outside of a list for some reason, so I kind of changed a lot of the HTML too.
Here's the Fiddle: Link
Hope it helps :)
I am not able to see a full map here. You have mentioned it too. Well there is also no other span found!
The map is somehow cool. But if you want the images to ride over the image. You might use the position relative!
Have you tried that? You have an absolute, but absolute works on the div or container its relative too. If there is no container having position relative the main body tag is considered to be the one. So try giving this image a relative position. Then add the z-index and absolute position!
Try Position:relative or Position:absolute
Give z-index a shot too, z-index:50
Related
I'm creating my personal website build on wordpress and now I'm remaking template. After whole day of doing css, html and php...and looking for a lot of things of internet, I encountred for a lot of people known problem.
Somewhere in my site, some element is giving me margin which i don't want. You can see it on the picture below:
I know the rules of this website, to give code and you will try to help me, but now, I don't know where is the problem. So if someone with bigger experience and little bit of time can look at my page, I would be really thankfull.
My site si svrcek.webfix.sk
You front slider has a <p> in it that has margin.
delete this node and the space goes.
As it is empty do you need it? and if so can you add styling to it?
I don't know why you have this margin, but this CSS will fix that :
.front-slider {
float: left;
}
Your .front-slider element is causing the gap. Add a position:absolute to fix it. (If it's not the markup of the slider, you could also remove the redundant <p> which initially is causing the problem.)
To have really clean code, you should remove all absolute positioning from the child elements and just position the .front-slider wrapper accordingly. Also it seems like your green navigation buttons don't work. Probably there is an option to position and style the soliloquy-next and soliloquy-prev buttons which seem a but redundant at the moment.
I'm having trouble getting my head around an absolutely positioned :before element. I'm after a big quote mark to sit behind a testimonial. I used a :before element as it is a font and is therefore scalable for retina displays, saves an extra http request for the image (I don't have any other images I could make a sprite with) and it also affords me more flexibility of position (a background image would need padding on the left of the element, which would mean playing about with my grid and losing uniformity across other pages I'm using the CSS on).
Hope that makes sense! The problem I'm encountering is that the :before element is covering the text above it. Not much of an issue if it's just text (although still an issue), but there's a link there that isn't completely clickable…
Here's a jsFiddle of my issue:
http://jsfiddle.net/tempertemper/KzQZQ/
I'd assume as the :before is on the li element it would sit behind the blockquote and cites but it doesn't look like that's the case.
I've tried z-index and can't seem to get it all working properly. I've also tried changing the blockquote and cite's position value but no joy.
Thanks for taking a look :)
I did notice the problem in Chrome as well. By just adding a background to the :before you can actually see what is happening (a trick i often use), or you could try the 3D view in Firefox. Your suspicion was right, the brace is actualy lying on top of the link. This makes sence as the DOM is rendered before the css is apllied. Adding a z-index did solve the problem though. I updated your fiddle: http://jsfiddle.net/KzQZQ/1
This should solve it. Strange that this did not work for you, but perhaps you where doing something wrong... Let us know if you have any more issues with this.
I've designed a website with an elaborate transparent header that has to pass over part of the main section of the page. I'm trying to keep the number of images used in the website down to a minimum, partly for size and partly for cleaner markup.
I want to start putting clickable items in a blank area under the transparency. I managed to get the image to overlap the div in question by playing with the z-index. Now of course, it's unclickable.
Does anyone have a clever solution to this problem? I can think of several different ways "around" the problem that are less ideal, but I'm hoping to avoid those and find a solution that doesn't use JS or an imagemap. I've tried to use a nested div with a higher z-order (outer div is -1, inner div is 1), but it doesn't work.
It turns out that it wasn't necessary at all to change the z-index. All I had to do was use the negative margin and I could click the content in the transparent area under the image. My mistake was making the initial assumption that I would need to change the z-index for some reason. If I had attempted it without touching the z-index, It wouldn't have been an issue at all.
you can $.Event to make an event and then trigger it when ever needed :)
prefectly cross browser and easy
Considering the attached image, I want each "cell" (so to speak) to have a DOM element over it so that it can be clicked, set a background and so on.
I tried making a table and with slight adjustments, made it work for Firefox. I opened other browsers and the fine tunning in Firefox did not apply to them.
How would you do this? There are 465 cells that need to be clickable and all superimposed over the cells in the image with as little error in positioning as possible.
EDIT:
Here's the JSFiddle: http://jsfiddle.net/Francisc/PUPHz/embedded/result/
This is how the table looks in various browsers:
http://89.45.196.35/~francisc/chrome.jpg
http://89.45.196.35/~francisc/firefox.jpg
http://89.45.196.35/~francisc/ie.jpg
Thank you.
Here is what I would do, it's messy but it could work. Make a single div fit over the top left and find out the best width and height (Guessing you know that from the table that you tried)
You will have to make the image go under the divs so I think you have to give it an overlay attribute or something like that (Can't remember what it's called) so with that in mind you have the class for each div to be width: XXpx height: XXpx float:left and that should be it. From there you can make the :hover class to make the background change and a selected class also if you need to.
Hope it helps
Hey there. I have an image that I am absolutely positioning. In Firefox it is where it is supposed to be, in Safari it is all whack. What is going on and what is a surefire way to know where it sits.
Without more details, I'd make sure you understand you have a firm understanding of CSS positioning by reading a page like this one.
Make sure it's parent element is set to a position such as relative. I'd start there.