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
Related
http://jsfiddle.net/LFtHg/
I'm trying to create my first responsive website. For this, I'm including an image. This image has a caption which should be displayed in a transparent overlay. However because opacity settings are passed to child elements, I have removed the text from the container.
I cant get the overlay to display, at all (because it has no content inside it). I cant really add a fixed height as I want to image to respond to changes in browser size. How can I ensure this is displayed?
Thank you,
J
Edit, also what would the best way to scale the overlay as the browser resizes. I'm unsure if this approach is even possible.
First of all, you can use an RGBA background ( background: rgba(0,0,0,.5); ) instead of using opacity.
Secondly, you need explicitly set a width for your span.figcaption (you can also do that by specifying both left and right offset properties)
Perhaps this demo http://dabblet.com/gist/2778608 might also help you (image can be of any size - resize the browser window to see how everything resizes).
Adding the following rules to your existing sample effectively stretches the .figcaption elements to fully cover the .figure, fiddle:
.figure {position:relative;}
/*these could be different so that the overlay appears larger than the caption*/
span.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
p.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
You can arbitrarily adjust the values to a % setting so that the caption appears centered etc.
BTW, you know that your implementation is not yet liquid, right?
I've already had a look through some posts and couldn't find what I was after. I'm designing something in PS at the moment and I can foresee an issue when it comes to coding the design into html+css.
Imagine my centre div, it's 960px. It's going to have a semi-transparent .png as a background. The design is “full width” so this div will be contained in a larger div, set to 100% width. This is all ok until I get to the background on this outer div. It's also going to have a .png running the full width of the page. Problem is: I don't want it running through the middle, as it will result in the middle have a double thickness to it, if that makes sense?!
Basically, I need a way to either run a div either side that is elastic, or someway of stopping the background from running across the centre 960px portion of the browser window.
I have NO idea how this can be achieved, apart from using JS to set widths, which I don’t really want to do.
Any ideas?
Ok, I’ve tried to get the basic issue here: http://jsfiddle.net/8Bznc/1/
You can just put a non-transparent background on the center div, so the other background doesn't show through.
See here: http://jsfiddle.net/9bnHD/
Apply the background-image only to the wrapping div.
Alternatively, if the center and sides need to have different images, give the center div a non-transparent background-color as well.
Also, you could fake it by using multiple background-images. Demo
Keep in mind this won't work in old versions of IE, but something as non-essential as background transparency can be excepted as graceful degradation.
I'm working on a project in which I am using an image as a background for a menu. I have defined classes in my CSS stylesheet that dictate the appearance when items are or are not "selected", meaning the user is not on the page each item is linked to.
I have it structured with a div on top of the image with styles applied to it to make it have a semi-transparent white background, so it looks like that part of the image is highlighted. Each semi-transparent div also contains the text that makes up the link, with a color set to white. I would like the div to keep the opacity, while the text remains at an opacity of "1".
I have tried the method discussed in a similar question (CSS - Apply Opacity to Element but NOT To Text Within The Element) but the method does not seem to work for me.
I've posted the bit of code for the link on JSFiddle at http://jsfiddle.net/Cwca22/uG5y8/ if you'd like to take a look at it.
Thanks in advance for all the help.
If you're looking for a pure CSS solution, and are willing to change your markup a little, take a look at this example:
http://jsfiddle.net/jJ4MZ/3/
It treats each "link" as a combination of separate background and text elements, and then positions them over each other, so that only the background div uses transparency.
If I'm understanding you correctly, you want the background colour of the div to be partially transparent to show the image through, but keep the text opaque? That's simple :3
<div style="background-color: rgba(255,255,255,0.5);">Text</div>
If you want to provide support for browsers that don't allow this format, then you need:
<div style="background: #ffffff; background: rgba(255,255,255,0.5);">Text</div>
Old problem without any standard solutions yet! This is something known to be impossible with today's CSS. The only solution i know of is using JS. Using JS you can catch the mousemove of the affected H# and create/position an element. This new 'over' element should not be a child of the DIV with opacity 0.2.
Once i wrote a jsFiddle for a problem like this. Here it is http://jsfiddle.net/A53Py/5/
Create a same-level element which positions absolutely behind the elements without opacity. No need to tell it's cross browser.
Hope it helps
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
I want something that looks like this http://jsfiddle.net/mazlix/VBzau/3/
But I don't want to have to write the border-radius twice (in the div.left in the CSS). I mean, I can, but I just feel like it's wasteful and a sign that I've structured this wrong.
Please let me know if that seems the only way to properly achieve what I want.
Thanks!
border-radius:15px 0 0 15px;
See here:
http://www.css3.info/preview/rounded-border/
I'm about 98% sure that you can't get around that.
1.
So.. I dont know if it's an option, but you could use background image in the outer container. This background would be the desired width and 1px height and hold 2 desired colors side by side. And it would be repeated vertically.
2.
This however is a css3 option: You could use horizontal gradient. Basically the same as the option above, just maybe a tad more flexible as it doesnt use image but css3 gradient as mentioned. http://jsfiddle.net/VBzau/13/
The gradient was made using http://www.colorzilla.com/gradient-editor/
3.
Then theres the good old masking. To basically use an image or images that are negatives of border radius and are the same color as the background where the box is placed.
Much like what is being used here as a fallback in the main content area with the sliding content http://www.apple.com/imac/
4.
I got thinking about how you mentioned about the structure. So heres what i would recommend. http://jsfiddle.net/VBzau/14/
Basically i have put another container wrapping around the main container. Re-applied overflow: hidden; and taken away the radiuses from the left box. Also i moved the image inside the new outer-container.