I'm trying to make multiple nested 3D transformed elements. I.e. several nested elements all have 3D transformations and the transform-style:preserve-3d property.
However, when an element has an overflow property, all of its ancestors are flattened.
For example:
<style>
div{transform-style:preserve-3d;}
</style>
<div style="transform:rotateY(30deg) rotateX(-30deg);">
<div style="transform:translateZ(30px)">
<div style="transform:translateZ(30px)">
<div style="transform:translateZ(30px);overflow:hidden"><!-- everything beyond here is flat -->
<div style="transform:translateZ(30px)">
<div style="transform:translateZ(30px)">
<div style="transform:translateZ(30px)">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/Lqfy3mgs/
I tested this in Chrome and FF. Is it possible to make the ancestors 3D even with a overflow?
I'm afraid that's per the spec:
The following CSS property values require the user agent to create a
flattened representation of the descendant elements before they can be
applied, and therefore force the used value of transform-style to
flat:
overflow: any value other than visible....
Source: http://dev.w3.org/csswg/css-transforms/#grouping-property-values
w3:
hidden
This value indicates that the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region.
As you can see this is for 3d transformed elements aswel so even the transform cant escape the clipping that happends when setting overflow:hidden.
Related
I want to place a div element a relativ below another one b. The html has the following structure:
<div id="a"></div>
<form>
<div id="b"></div>
<div id="c"></div>
</form>
a cannot be moved to be contained in the form because it contains another form. I need a to be shown between b and c.
CSS can't really do this unless everything has a fixed size (then you could use positioning)...so it's not really recommended. You'd need Javascript. –
Jquery would make this very simple.
$('#a').insertAfter('#b');
JSfiddle Demo
I've tried several remedies after searching here but can't seem to make this work.
2 separate divs: 1 div with 4 image links in separate columns (each has a CSS fade rollover effect), and one div underneath with a simple line of text in a full-width column. I'm trying to hide the text div and reveal it upon triangle image rollover.
Here's a link with the images and the first text blurb shown below: http://goodsouldesign.com/redmont
<div id="triangles>
<a>image1</a>
<a>image2</a>
<a>image3</a>
<a>image4</a>
</div>
<div id="blurb1>Text here</div>
<div id="blurb2>Text here</div>
<div id="blurb3>Text here</div>
<div id="blurb4>Text here</div>
Any ideas are appreciated!
Now that I know exactly how you have it laid out, I'm writing a new answer. While you may need the blurbs to span the full width, they are still very close to the elements, which means they could be made into siblings. Take this for example:
<div id="wrapper">
<a id="tri1"></a>
<a id="tri2"></a>
<a id="tri3"></a>
<a id="tri4"></a>
<div id="blurbs">
<div id="blurb1">Text here 1</div>
<div id="blurb2">Text here 2</div>
<div id="blurb3">Text here 3</div>
<div id="blurb4">Text here 4</div>
</div>
</div>
The blurbs are now a child of the blurbs container, which in turn is a sibling of the triangles. This would allow you to use the css sibling selector ~ to access them.
Alternatively, you don't even need the blurbs container.. It might make styling a little easier, but you could accomplish this layout simply by having the blurbs be block elements, whilst the triangles are display: inline-block;. This would put all the triangles on the same line, and bump a blurb down below it. Give it 100% width, and it should be what you want.
Here's a fiddle that shows how to do this with no container, and the sibling selector:
#wrapper #tri1:hover ~ #blurb1 { display: block; }
http://jsfiddle.net/cJJtc/1/
Hope that helps!
UPDATE:
I realized that my answer might have been a bit to quick to dismiss what you were doing.. I assumed that you had the text blurbs in a different area than the triangles which would make this impossible... However, if the text is meant to be right underneath the images or some similar layout, you can move the blurbs to be inside of the triangles wrapper, underneath their corresponding triangle image, and then use an adjacent css selector (exactly like the example you posted in the comments) to hide and show them. Let me know if you need an example.
Pure CSS cannot be used to create an effect such as this. The reason for this is that CSS is sequential, and can only be applied in an inward and onward fashion.. Basically, a CSS selector can only apply to an element, it's siblings which come after it, or it's children. Selecting parent elements, or elements outside of an element's "family" is not something that CSS should be used for.
An effect like this would typically be done with Javascript, which has much more power of selection.
For example:
document.getElementById('tri1').onmouseover=function(){
document.getElementById('blurb1').style.display = "block";
};
document.getElementById('tri1').onmouseout=function(){
document.getElementById('blurb1').style.display = "none";
};
See this fiddle for a full example:
http://jsfiddle.net/tQjd4/
(I'm not expert on javascript, so I'm sure there are more efficient ways to do it, but that works!)
I tend to use jQuery to shortcut my javascript, which would be something like:
$('#triangles a').hover(function(){
$('#'+$(this).attr('rel')).css('display','block');
}, function(){
$('#'+$(this).attr('rel')).css('display','none');
});
assuming that you've given each triangle a rel attr equivalent to the blurb text id
I am positioning points on a map through divs.
I have the following code:
<div id="map" style = "background-image:url('map.gif');width:382px;height:524px;">
<DIV STYLE="position:absolute; top:222px; left:204px;">
<img src="bullet.gif" border=0>Point
</DIV>
</DIV>
When I add this code on my page, the point is not on the map so I added a position:relative
<div id="map" style = "background-image:url('map.gif');width:382px;height:524px;position:relative;">
Now the point is on the map but its a bit off from where I initially wanted. Does anyways have a fix for this? Also The points are in different positions in different browsers. Is there a way to standardize where the position is?
I recommend only using one level (instead of cascading), also, spans for the overlay.
<div>
<div>
</div>
<div>
use
<div style=...> the map
</div>
<span style=...></span> an overlayed rectangle
<span style=...></span> an overlayed rectangle
is this ok for you? If not pleas specify and i will adapt it.
well you may need to adjust the "top" and "left" values, since the "point" is now positioned absolutely relative to the "map" div.
Check this out if it helps http://jsfiddle.net/DK9wT/6/
Ok, so I'm working on a prototype of my UI before I start coding the webapp. I got the design mostly done while working in Firefox and (of course) when I tested it in IE, there were a lot of rendering issues. One of those issues is that if I have a div that contains some text and another div that's set to float:right, that nested div shows up on the next line, below its parent div. This is the problem markup in its simplest form...
<div style="background-color:red;">
Text
<div style="background-color:yellow; float:right;">Right</div>
</div>
I scoured the internet for solutions and the only working relevant solution I found that makes this work in IE is to place the floating div at the beginning of its parent like this...
<div style="background-color:red;">
<div style="background-color:yellow; float:right;">Right</div>
Text
</div>
In reality, the nested div has a class and my CSS is floating that class. But what happens if I eventually make another stylesheet to target mobile devices and I no longer want that inner div to be floated? Then the content itself would be out of order in HTML, just for the sake of accommodating a CSS issue in IE. Is there a better way to solve this?
A colleague of mine recently had a very similar problem. I recommended simply using positioning rather than floating. I believe you could do the same here:
<div style="background-color:red; position:relative;">
Text
<div style="background-color:yellow; position:absolute; right:0; top:0;">Right</div>
</div>
I don't know if you have a requirement to use floats or not. Using the positioning method will cause the positioned element to not take up space in normal flow, but otherwise keep the correct source order and visually accomplish what I think you want to do.
Set a width value on your inner div and make it display: inline-block. Div's are block elements that take 100% width of the parent, that's why IE puts it on the next line.
I am not sure if it is a possibility for you, but putting the text within the outer div in a div of its own seems to solve the problem
<div style="background-color:red;">
<div style="float: left;">Text</div>
<div style="background-color:yellow; float:right;">Right</div>
</div>
I just hit this problem in IE7 - in my case, the item that was going to clear the float was going to be full width anyway. I just set that to "float: none;clear: left" and it seems to work.
I am trying to identify this bug. Is this a known issue already or is it totaly new? Is there a workaround (like a zoom:1 or position:relative that I can add to fix it?), idealy without modifying the html here but just adding to it.
If you display the below html in IE8 you will see the text from the select (combo box), is displayed twice. One outside of the combo box. This is messing up the flow of my document (not to mention looking weird).
<html><body>
<div style="width: 800px;">
<div style="float: right" >
</div>
<div style="display: none">
ijklmno
</div>
<div style="float:left">
<select>
<option>abcdef</option>
</select>
<div style="float: right">
</div>
</div>
</div>
</body></html>
This is definitely a bug, since you are pretty explicit in the layout style rules. But it's also a really weird arrangement to begin with. If you unhide the hidden div, add text OR hide the div below the select, the problem goes away. My best guess is that since you have overlapping block level elements with one hidden and one empty, IE is ignoring the float and trying to fit them on top of each other, which is forcing the option down, but since the select stays in place, its showing the option within the select as well.
Very strange and a very cool catch. Your options as I see them is to either add some content to the the last div (non-breaking space, probably) or hide the div (display: none), or both.
In Firefox, that last div is also not floating right and is overlapping with the select (you can tell by outlining block-level elements with the Developer Toolbar) which makes me think that Firefox is just better about handling overlapping block level elements.
If you set the last div to have a border, you'll see that it's not floating to the right of the main div.