If I have two layers on a page, split horrizontally, with the second layer overlapping part of the first layer, is it possible to make it "click through"?
I have links in the first layer, which the second layer overlaps, which stops the links from being clickable. Is there a way to make the layer display, but be click through, while still having it's own links clickable?
edit:
Here is an example, with html and a stylesheet.
The test links become unclickable when inline with the header in Layer3, but below that they are fine. Is there a way to rectify this?
<title>Test</title>
<link rel="stylesheet" href="test.css" type="text/css">
<body>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">Brands</h3>
</div>
<div id="Layer2" class="Layer2"><h1>TEST</h1>
<div id="rightlayer">
TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>
</div>
</div>
<div id="Layer3" class="Layer3"><h1>Ed Hardy Auctions</h1>
</div>
</div>
</body>
</html>
And the css
#Layer0 {
width:100%;
height:100%;
}
body {
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;
}
#Layer1 {
position:absolute;
left:10px;
width:200px;
margin-top:17px;
font-size:1.0em;
padding-left:12px;
padding-top:8px;
}
#Layer2 {
background:#fff;
margin-left:199px;
color:#000;
}
#rightlayer {
float:right;
}
.Layer3 {
position:absolute;
top:67%;
padding:20px;
width: 100%;
}
Thought I would update this as I'd been struggling with this for a few hours and think i've found a solution. Looked into using Jquery but the CSS property:
pointer-events:none;
...did exactly what I wanted.
It is not possible if you want the divs to stay in their current x,y, (and most importantly) z - only the "top" layer is clickable.
Addendum post OP edit:
Think of CSS layout as if you were physically working with bits of paper (this is much easier to visualise if you give all your "layer" divs a different background colour). The rendering engine cuts out a bit of paper in the dimensions you give it (or it works out) for each element it finds. It does this in the order it encounters them putting each bit of paper on the page as it goes - the last item is going to be on top.
Now you've told the rendering engine to put your 3rd div in a position where it overlaps the 2nd. And now you expect to be able to "see" the covered content. Wouldn't work with paper, won't work with HTML. Just because it's transparent doesn't mean it's not taking up space.
So you have to change something.
Looking at your CSS and markup (which honestly could be cleaned up, but I'll assume there's other mark-up you're not showing us which justifies it) there's a couple of easy win ways:
1). Set a z-index of -1 on Layer3 - z-index is how you can change the layering order from the default (as encountered). This just moves the entirety of Layer3 below the rest of the page so what was hidden becomes exposed, but also vice versa depending on content.
2). Change the width from 100% to e.g. 80%, or more likely given your use of pos:abs set left:0px and right:199px; (I'm guessing that padding-left on Layer2 is an intended column width?). The cost of this is that your Layer3 is no longer 100% width
3). Google "CSS column layout" and find a pattern that reflects what you need and adapt that. Every CSS layout which can be done has been done a million times already. Standard techniques exist which solve your problems. CSS is hard if you haven't built up the experience, so leverage the experience of others. Don't reinvent wheels.
It would be a mammoth job, but it is possible.
You would need to capture the click event on the top layer/div, and find the cursor x-y position.
Then find all links in the layer/div underneath the top layer, and see if it's position on the screen falls around the current mouse position.
You could then trigger the click of the matched link.
I would use jQuery (if you are not already) for this and then re-post with a jQuery tag if you run into troubles.
It is hard to tell without seeing some code.
You could try setting z-index on the bottom layer but that works on elements that have been positioned with absolute, relative or fixed (position:absolute).
edit after seeing code:
Add position:relative; z-index:100; to #rightLayer.
Or you could remove the width:100% from .Layer3.
You may want to refactor your code and go with a two column layout for #rightLayer and .Layer3.
css
#Layer0 {
width:100%;
height:100%;
}
body {
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;
}
#Layer1 {
width:200px;
margin-top:17px;
font-size:1.0em;
padding-left:12px;
padding-top:8px;
}
#Layer2 {
background:#fff;
margin-left:199px;
color:#000;
}
#rightlayer {
float:right;
}
.Layer3 {
}
html
<div id="Layer0">
<div id="Layer2" class="Layer2">
<h1>TEST</h1>
</div>
<div id="Layer1" class="Layer1">
<h3 align="left">Brands</h3>
</div>
<div class="content">
<div id="rightlayer">
TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>
</div>
<div id="Layer3" class="Layer3">
<h1>Ed Hardy Auctions</h1>
</div>
</div>
</div>
I'm assuming from the example that the links in the rightlayer are the only links that need to be clicked, and that you don't have links in the other layers. If so, you could solve the problem by changing the z-index order of the divs.
Layer1 and Layer3 have position absolute, so if you add a position style (absolute or relative) to Layer2, you will be able to pull that div to the front, also pulling the rightlayer div to be in a higher layer than Layer3.
I added the following to the CSS:
#Layer2 {
position: relative;
z-index: 1;
}
From what I can see that leaves the current page setup just the way it is, but pulls all the elements (including the rightlayer with the links) to the front, so you'd be able to click all the links in it.
For debugging purposes I suggest adding background colors to all the different layers to get an idea of the z-index order of the different layers. With the background color in place it was quite easy to spot the layer that was falling over the links, but also to verify that the new z-index order makes the links available.
Hope this helps!
I submitted a bug years ago to the Firefox Bugzilla saying that there was this very bug in Firefox.
I was told by a Mozilla engineer that this was not actually a bug and that it is the correct behaviour as per the HTML/CSS specifications.
Unfortunately I can't find the original bug to reference as it was about 6 years ago.
The reason I submitted the bug was because I could click through the top div onto the links below when using IE (6 I think) but Firefox would not let me.
As usual, it turned out hat IE had the incorrect implementation and Firefox was working as intended by the spec.
Just because a div is transparent does not mean you should be able to click through it.
I'm not sure how you could get around this with JavaScript or CSS. I would take a step back and have a re-think about what you're trying to achieve and how you're trying to achieve it.
Greg
Can you not simply set the width of the div to auto (the default for absolute positioning - i.e. just delete the width:100% from .Layer3).
That way the div will only be as wide as is necessary, rather than unnecessarily overlapping the links.
Related
I can't figure out how to make a div move when another div is clicked.
Here is a jsfiddle demo: https://jsfiddle.net/vufosn18/ (make sure you make it fullscreen so the image doesn't overlap with the text)
I have been googling around for a bit and can't find anything, so I tried:
#feas:focus #construct{
margin-top: 300px;
position: absolute;
}
When I click on feasibility it gives construction management a margin-top of 300px.
Any help is appreciated, if your answer could be in JavaScript/CSS that would be great.
It would be hard to fix all your issues in one answer. But I'll try to get you going:
Everything is absolute, I think this is not recommended for your case. Read more
You are using ID's everywhere, causing lots of duplicate styles. Try changing this to classes. This will be much easier to manage small changes.
I recommend checking that you are working html strict, this may prevent having rare situations in different browsers. (FYI)
To answer your question:
There are a lot of plugins out there that are easy to use. I suggest you to use one of them instead:
https://jqueryui.com/accordion/
A step by step example (just googled it)
..
For what you want to show in each tab you can have independent html/css. By default is img and p relative. So they won't overlap then.
here is a simple animation
Click on hello and the div with the word world will move down
function click(){
document.getElementById('bottom').style.top="50px"
}
document.getElementById('top').addEventListener('click',click,false)
#top{
width: 50px;
height:50px;
border:solid;
}
#bottom{
position:relative;
top:0px;
width: 50px;
height:50px;
border:solid;
transition-property:top;
transition-duration:3s;
}
<div id="top">
hello
</div>
<div id="bottom">
world
</div>
I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}
I am working on a page where I am trying to create the illusion of a colored band wrapping around and behind a canvas.
To do this I have exported my graphics as two images - one which is to be located behind the canvas and one which is to be located in front.
For the canvas (.footer-container in the link below) I set position:relative and a z-index of 2, for the "behind" layer I set position:absolute and a z-index of 1 and for the "in-front" layer i did the same thing but with a z-index of 3.
But no matter what I do, I cannot seem to get any of my pictures to go behind the canvas. Currently the two IMG's are nested in the div of the canvas, but I also tried same procedure where they where not. Also, I did a similar thing another place on the same page and it works - I really can't seem to sort out what I am doing wrong?
Here is a link to the implementation:
http://dl.dropbox.com/u/706446/SFB%20html%20mockups/z-index-problem.html
Thanks!
I found a solution:
Don't set a z-index on the div#footer-container.
Set the z-index of div.footer-stripes_back to -1.
You can delete the z-index of div.footer-stripes_front, it's not neccessary and you can leave the DOM structure as it is.
Works for me in Chrome.
It's difficult to see the result, because the containers don't have a background.
#footer-top {
background:#fff;
position:relative;
z-index:3; }
#footer-back {
background:#fff;
position:relative;
z-index:3; }
.footer-stripes_front {
position:absolute;
z-index:4; }
.footer-stripes_back {
position:absolute;
z-index:2; }
What I want to achieve is something like this.
::::::::::
...hi....
..........
..........
The hi is in the middle of the 2 colors.
I have it working for 1 color, and another color underneath, but would like the colors to split up in the middle of the text. (I'll be using button images if no one can come up with a solution using css (Trying to avoid using images)
EDIT: Of course the css result has to be across browsers (ie 7+, FF3.0+, chrome, opera (newest))
Thanks
HTML:
<div class="fancyButton">
<div class="background top"></div>
<div class="background bottom"></div>
<p>hi</p>
</div>
CSS:
.fancyButton
{
width:100px;
position:relative;
}
.fancyButton .background
{
width:100%;
height:50%;
position:absolute;
}
.fancyButton .background.top
{
top:0;
background-color:red;
}
.fancyButton .background.bottom
{
bottom:0;
background-color:blue;
}
.fancyButton p
{
position:relative;
text-align:center;
}
Tested, and hopefully copy-pasted correctly. It uses a div that takes it's height from the <p> inside of it. The two backgrounds are set to the top and the bottom of the button div and are 50% of it's height so they meet nicely in the middle, no matter what height the button is. You can take out the fixed width and replace it with a left-right padding declaration for the button div if you want, so that the width is determined by the <p> too. (just realizing this and don't want to retest)
Nothing fancy; just solid, robust css!
You can achieve this with multiple nested elements, although your mark-up will be less semantic.
Alternatively you can use gradients; this is a good resource for generating cross-browser CSS - http://www.colorzilla.com/gradient-editor/
Or you can use the CSS3 multiple background property, which is obviously not yet cross browser compliant. See this link for more info - http://www.zenelements.com/blog/css3-background-images/
If none of these help please show us the code for what you've achieved so far and it'll be easier to advise.
You could create a css gradient with two stops really close to each other: firefox css gradients. It won't be cross browser yet. The second example on this page is pretty close to what you want: webkit simple gradients (only in webkit).
Probably the only option here is to use CSS3 gradients as other answers have mentioned. However, if you do decide to use images (because some browsers don't support CSS3 for instanct), this tutorial about transparent sprites is very useful.
What is the best way to go about displaying an html table with text in the background of each cell? I am making a calendar and I would like to have grey dates in the background of actual text.
The only thing I can think of at this point is to have the date and the cell content in separate divs that float over one another but even that isn't implementing well within a table.
By the way using an image to display the date is not really an option IMHO.
Use relative positioning in the content span:
<tr>
<td>
<span class="day">6</span>
<span class="contents">Contents go here</span>
</td>
</tr>
And in CSS:
span.day {
line-height: 20px; /* just to give it a height */
display: block;
color: #aaa;
}
span.contents {
position: relative;
top: -20px;
}
Now the spans are overlapping, with contents over day number. You might want to adjust the position but this should work.
Even though this would work, I would advise you to use images. You can embed all the required dates in one image file (the CSS sprite technique), it gives you greater control with less browser specific issues.
Hmm... if I understood correctly, the way I would do it is probably something like the following in each cell:
<div class="cell_container" style="position:relative;">
<div class="cell_bg" style="position:absolute; width:100%;
height:100%; z-index:0; color: gray;">29/12/2009</div>
<div class="cell_fg" style="position:absolute; width:100%;
height:100%; z-index:1;">Jim's birthday</div>
</div>
Naturally, you can move the styles into a seperate css file. You might also be able to do away with the container div and just apply the "position:relative;" style to the containing cell. The major downside to this method is that you will lose the ability to vertically align in IE, without some trickily implemented workaround.
I realize you said that using an image is "not an option IMHO", but may I suggest that using images would give you a lot more flexibility in the appearance of the date. You could use any font available to your image editor, rather than the limited set of fonts you can count on in a browser. And all sorts of image tweaking tricks could be aplied that would be immpossible in the browser.