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; }
Related
I'm having a bit of trouble with text selection on my website. I want to be able to select the text-only & not the excess white space between paragraphs on any sides of the text.
At the moment, I can, with using the ::selection & having it's own background colour. However I believe my code is all screwy & I just can't find out how to do it.
This website below is exactly what I want it to do, when selecting the text, the white space between paragraphs is never selected.
Demo site - Formula one
Any & all help is greatly appreciated, thank you!
If you just use <p> element to wrap each paragraph (that's what the <p> element exists for, that's its destiny. Do you want to deny it from doing what its meant for???), the browser will do the magic himself :-)
Check out the simplest JsFiddle i've ever created :-)
If you are interested in how they achieved the effect in the formula website, here are all relevant parts - jsfiddle. (I altered fiddle by #Ronen Cypis).
As you can see, thay use an hidden overlay layer
.fom-modal-shim {
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
width:100%;
height:100%;
z-index:1000;
-moz-opacity:0;
-khtml-opacity:0;
-webkit-opacity:0;
opacity:0;
-ms-filter:alpha(opacity=0);
filter:alpha(opacity=0);
visibility:hidden
}
The final effect is achieved by setting position of the page container to relative.
.site-wrapper {
position:relative
}
My Problem
I want to be able to handle my CSS this way, that when I add a class named "sold-out" to my div , it should add a sold-out overlay stamp. At the moment I have the problem, that it seems like I am destroying the CSS of other classes. However I hope you can help me with a good solution.
My HTML:
<div class="rotate sold-out">
<a href="images/packages/background01.jpg" rel="imagebox" title="">
<img src="images/packages/background01.jpg" alt=""/></a>
</div>
As you can see I have inserted an image there and the sold-out stamp (which is a transparent .png) should be shown at the highest layer ofcourse.
My CSS try:
.sold-out {
content: url(../images/sold_out_stamp.png);
}
This is what happened:
The image inside the div is completely gone. I only see the Sold-out-stamp with a white background.
You are on the right track. Instead of replacing the sold-out element's content with the overlay image (and thereby replacing it entirely) you should set the pseudo element's content and position it over the sold-out element.
.sold-out{ position:relative; }
.sold-out::before{
content:url(../images/sold_out_stamp.png);
position:absolute;
z-index:2;
top:0;
left:0;
}
*didn't test, but should work in theory... If you make a fiddle with the correct images linked I'm happy to refine, but this should at least be close.
Let me know if you need further direction.
I have a question I am trying to use z-index to make the feel of 3D to my design but I can not see any change when I use it
my css is as follow:
.test1
{
background-color:#666;
opacity:0.4;
width:500px;
height:500px;
z-index:1000px;
position:absolute;
top:0;
left:0;
}
and the fiddle link is :
http://jsfiddle.net/hminaee/a89Z4/
Can anyone tell me what is the problem?
z-index takes a number, not a measurement.
z-index : 30;
Also, it doesn't magically make anything 3D; all it does is move that box in front of any other box in the same position as it, which has a lower z-index (or is position:static;).
If you expected scaling or shearing, then you should do research on transform : rotate3d, and its ilk.
For one, z-index should be a unitless number. (e.g. z-index : 1000; not z-index: 1000px;)
But also your jsfiddle only contains one element, so I'm not sure what you expect to happen. It seems like maybe you don't understand what z-index does. You might want to read:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index
is there some good way to create a flow / swimline diagram without resorting to scripting or tables? I'm talking about showing different hosts sending packets (so hosts on the X axis, time on the Y and arrows to the destination host). It seems like too much elements for tables (especially the arrows spanning multiple columns either way), but on the other hand, divs would be hard to position in the right place horizontally (they'd have to be basically aligned to a specified "column").
Is there any good way out? Any helper frameworks? (I don't want to do canvas stuff unless really needed)
Edit: Forgot to add why I didn't mention images at all - some elements of the diagram should have :hover actions and should be clickable in the future.
I would suggest using PNG files with a transparent alpha layer (for overlaps), and positioning them absolutely with CSS. I haven't seen your overall layout, so I can't say that this is the best approach for your particular situation though.
Sample CSS code for a circle such as this: <a class="circle" id="myCircle" href="foo">Foo</a>
a.circle {
display:block;
height:100px;
width:100px;
background-image:url(/path/to/circle.png);
background-repeat:no-repeat;
position:absolute;
line-height:100px;
text-align:center;
}
code for an individual circle element:
a#myCircle {
top:234px;
left:357px;
}
The class definition creates a set of attributes for all anchor elements that share the class "circle". The anchor with the ID of "myCircle" would then be positioned with the coordinates of 234,357 in pixels from the top left corner of the parent element with position:relative; set.
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.