I want to highlight multiple elements under the overlap page, the expected result will be like this:
I have tried to increase the z-index of this element (I have tried this, but I met some issues to cause z-index not to work), can we use canvas to do it?
Are there any detailed steps about it?
Try to switch off the pointer-events of your overlapping element: https://developer.mozilla.org/ru/docs/Web/CSS/pointer-events
(also you may switch it off when the cursor is over the circle)
Related
We are trying to create a menu style layout. I'm using a css-columns properties to achieve the effect of columns. The content is variable, so we'd like to stick to this solution because we want the browser to organise the content for best fit.
In the example below we are seeing some odd behaviour in Chrome (Version 32.0.1700.77) and some different (but equally odd) issue in Firefox (Version 24.0) so I'm assuming it's our implementation.
In Chrome, we see a large gap underneath the first column as if it's placing the 3rd LI there to start off with, then moving it to the top of the second column at some point in the render process.
In Firefox, we see the H3 "scrambled egg" being left at the bottom of the first column, when the rest of the 3rd LI's content moved to the top of the second column.
Live Example: http://codepen.io/daviddarnes/pen/BeEIp
Speculations:
- We are using "break-inside: avoid;" on every element inside the OL. This could be causing the issue, but we can't seem to rectify it.
- Based on the H3 issue... might be something to do with that? Or the elements near to this H3 tag.
The point of the page-break properties is not to shrink content to fit on a page, but to help decide the optimal place for a page break to occur.
So, if you use 'page-break-inside:avoid' on an element, and there's not enough space on the current page to fit the entire element, the browser will consider inserting a break so as to force the element onto a new page, theoretically giving it more space.
However, if the element is so big that moving it onto a new page won't help, then there's nothing to be done (in terms of page breaks at least).
If you know in advance that your content will need to be shrunk when printing, you could try adding a scale transform on the problem elements (restricted to the print media type), so that they're a more manageable size.
Is this of any help to you?
In this fiddle http://jsfiddle.net/dAHqe/2/ I've created examples for the 2 main uses (that I've seen) of border-radius for lists.
Apply border-radius (and therefore background-color) to the container (a div or a ul).
Apply border-radius (and therefore background-color) to the first and last content items (lis or nested divs) via the :first-child and :last-child pseudo-classes.
At first glance, it looks like the first way (applying it to the container) is much more concise, yet I see the second way all the time.
Is there any good reason (i.e., scalability) to use the second way?
Update: This is for a mobile app, so I won't need the :hover pseudo-class.
Personally, in the examples you've given, I'd always just go with the simple option and put it on the container.
However, reasons for doing it the other way:
Maybe you don't have a container, and you can't change the code to add one.
You have some reason to want the flexibility to change individual list items in a way that having a single container wouldn't work. eg Maybe you want to make them semi-opaque on hover?
You have to work around an awkward HTML structure. I had a case like this a while back where I had to add rounded corners to cells in a complex table. The cells in question were sub-heading rows and columns in a bigger table, but the way it all fitted together meant I had to put the rounded corners individually into separate cells. It was fiddly and awkward but ended up looking how they wanted it.
The coder doesn't know CSS all that well and simply cribs it from somewhere else that does it that way.
Those are the only reasons I can think of. But I suspect most cases fall into one or other of those.
Hope that helps.
I have a set of ASP:Images in my project.When the mouse pointer mouses over a tab then the particular tab's image is shown. Till now its working well by keeping Visibility=true and style.visibility:hidden and on Mouse over event i am keep style.visibility:visible.
image is showing but its location is not in the correct position.I thought its all because of visibility true for remaining images.
can anyone suggest me to make visibility false .or to make images to be shown at particular location.
Thanks,
Rakesh.
try to use style
display:none
and
display:block
instead of visibility:hidden and visibility:visible
Maybe I am misunderstanding here, but this seems to be more of a css, javascript question than an asp/c# question. It would also be easier to formulate a useful answer if we had a bit of example code that clarified the question a little bit, but I suggest 2 possible solutions:
position these elements with absolute positioning based on the parent containers.
Add a visible wrapper div around the elements to keep the position the same.
I tried searching for this on Google, but to no avail.
Can someone point me to a good resource that explains the rendering and visibility rules for CSS ? Or if it is very simple, can someone please write it down here ?
To give you an example, let's say that I have 2 large divs, DIV_LARGE1, DIV_LARGE2, that are not contained within each other and a small div, DIV_SMALL. When DIV_SMALL is defined within DIV_LARGE1, I can see that part of it which falls inside DIV_LARGE1, but the area that is shared with DIV_LARGE2 gets hidden beneath DIV_LARGE2. I am displaying DIV_SMALL (by setting its display:inline) after the page has rendered (on some click), so it should not matter that DIV_LARGE2 comes after DIV_LARGE1 in the HTML code.
What takes precedence over what ? Since my smaller div has position:relative and both the other divs (DIV_LARGE*) have position:absolute, I can infer that absolute positioning takes precedence over relative if the div is not defined inside it. But is this correct ? What are the precise rules ?
Phelios is correct, the issue you're running into is related to the z-index property.
Here's a great article from SmashingMag that explains it in detail: http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
For the tl;dr - positioned elements get stacked in the order they're placed in the html code, so your div_small inside the first large div is by default always going to be stacked "under" the second large div. You can fix this by setting the small div's z-index property in css.
Good Day, I used position:absolute for many div's in my website. I have used nearly 35 - 40 divs with absolute property.
Now i have a issue with z-index say some divs get hides, I realize this is because of z-index problem. I never declared z-index in my css.
I need to track the z-index of each divs. Is there any programs or scripts to find the z-index of the div's in my website?
Thanks in Advance
You can use https://addons.mozilla.org/de/firefox/addon/60 for that.
Use the topography feature or the display z-index featur under "Information"
First, it sounds like really bad programming having nearly 40 divs all using position:absolute and z-index. I would strongly recommend that you change the code to something more "user friendly".
But in this case, I would use jQuery to track your DIVs.
create an array where you put the ID for each div in.
Then you can loop through it and compare z-index values.
Or loop through the divs using the $.()each function.
Readmore about jQuery each here: http://docs.jquery.com/Core/each
You can use a usual DOM recursive iteration to get to the id of the particular div you want and then display the z-index.
element = getFromDOM(your_div_id);
alert (element.style.zindex);
However, I would suggest you install Firebug in Firefox and view / alter the z-index of the div you want dynamically. Get Firebug here - http://getfirebug.com/