I've just run into an interesting problem. I have 3 divs positioned next to each other with display:inline-block and with width:32%. All of them has a button inside which have box-shadow sets.
Output:
http://imgur.com/a/3HWyp
As you can see on the first picture there are shadows on the 1st and on the 3rd button, but the shadow's direction differs from the 2nd button's.
I've checked everything in the debugger, they have the same box-shadow setup.
If I change the inline-block to inline just for testing (second picture), the shadows are get into the same (right) direction, but - of course - there are problems with the widths.
I need to put the 3 buttons next to each other.
Please help :)
Thanks in advance!
I've got it:
JSFiddle: jsfiddle.net/bt4jvr8k
The problem was the "col-3" div's "overflow:hidden".
Almost same problem was with the button's "overflow:hidden", but it just crops the shadows from the sides, while the div's crops from the bottoms as well.
Related
I'm trying to achieve the effect of a horizontal accordion using exclusively CSS for animations and layout. So I have 4 columns set up and the main difference with a classic accordion is that when I click on a column, instead of expanding in one direction, it should expand in both directions and push the other columns left and right.
Here's a compact version of my code right now : http://jsfiddle.net/4ZGmj/183/
If you click on the red column, it works exactly as intended: the column is expanded in both directions and all other columns are pushed to the right. Now if you click on the green column, you'll notice something different: the column expands in both directions as intended, but it only pushes columns to the right while overlapping the column to the left. What I would like is for each column to push all neighboring columns when expanded.
I guess it might have to do with the fact that my columns are floated left. Do you guys have any insight on what is causing this behavior and what I can do to fix it ?
Thanks in advance
I think your issue may be in the .animate class, where you give it a negative 50px margin. Negative margins overlap the "previous" element (in all directions). If you remove the -50px, the images will only "flow" to the right, since they're "glued" via the float:left property, which will not do what you want anyway :(
I think the way to get around this is by using relative dimensions. Try setting up a div with a fixed width and use relative dimensions (like 25% for each). You probably have to set a behavior on the :not clicked divs aswell.
Like, if one div is ".animated", it has 33% width, while the others would have around 22%...
There's probably a better math you can arrange for it, though!
edit: typo
I was able to fix it and get the intended effect by removing the negative margin value from the "animate" class (this was responsible for expanding in both ways, but also caused the overlapping to the left). Instead, I added a new class "pushleft" that has this negative margin value and that I always apply to the first column. You can see the effect and get a better understanding of the idea here : http://jsfiddle.net/4ZGmj/185/
Thanks for your help, I wouldn't have fixed it if it wasn't for your input.
I have built a slider which expands to fit the window, and have #prev and #next pager buttons (which are highlighted in green). As the slider changes size I need to have these buttons positioned with a top margin as a percentage value. This is fine in Firefox but in Chrome and IE it doesn't read this margin. If I put it as a px value it works fine but obviously doesn't adjust to fit the slider size. Please advise...
http://subzerostudio.com/Clients/perkinreveller/index.html
Chris, instead of regularly changing the margin-top value, you could instead modify the top value regularly.
Since you've positioned the two buttons as absolute, it's better to work with left and top values instead of margins - frankly because margins don't make much sense once you're at liberty to use left,top,right,bottm values in CSS.
Hope this helps you. I tried removing margins in both Chrome and FF and they both looked the same after that. Once you get to this position, you can then modify the top values.
You could try absolutely positioning the buttons with a "top" value of 50% then a negative margin top of the height in pixels of the button.
If you make the buttons a relatively small fixed size that doesn't change then this will be do-able.
That seems to be how Flexi-SLider works and that is one of the leading responsive sliders out there.
http://flexslider.woothemes.com/
What I'm looking to achieve is a "half way" shadow using CSS3 in replacement of an image.
Below is a slightly zoomed example of what I'm trying to achieve:
There are three elements involved here, as displayed below (scaled down):
So far I've tried placing a box-shadow on element A and then pushing a higher z-index on element C so that the shadow is only visible over element B, but couldn't replicate the half-way cut off.
Has anyone attempted to achieve this before, or is the outcome always going to be as 'hacky' as I think it will be?
Make sure you're setting a position on the elements you're applying a z-index to:
http://jsfiddle.net/Vxz9f/
I just faced same problem and fixed it the following way:
Give the C div a higher z-index
Make it overlap (cover/go over) the A div for 5px (or whatever your
shadow px amount is).
If u do that with the same color, you will hide the shadow perfectly and you'll get your half way shadow.
So basically the website I'm designing has 3 divs inside a container div. One floating to the left. Two to the right one above and one below. They work fine when the browser is maximized. Problem is, when the browser is resized, the right divs wrap below the left div even though I've set min-widths. I want the divs to remain where they are and a scroll bar to appear instead. I did try overflow, no luck. Any solutions?
PS- Initially I had added min-width for the inner divs too. They didn't seem to solve the problem, so I removed them.
A solution or a nudge in the right direction would be really appreciated.
Here's a link to the jsFiddle - http://jsfiddle.net/R62w4/3/
Thank you, Matthew. Although that fixed the wrapping issue, my site now has a thin line of pixels on the right hand side. Any idea how I remove it? It continues from the header till the footer. It isn't affected by any changes to the CSS elements pertaining to the header or navigation bar or footer.
Okay, I found the reason to the extra space on the right side. If I increase my margins for the outer div, the space increases. Is there a way to increase the margins without getting a space?
You might be able to wrap them in this:
<div style="white-space:nowrap;">
</div>
... to prevent that from happening.
It's hard to know exactly where the problem is, could you post some code or make a JSFiddle?
Update:
I believe the problem is that you are using % based widths and px for margins - it's easy to lose track of how much available space you have and subsequently your layout falls apart. Consider that two left floated DIVs of 50% width with 1px of margin each will break on to two lines every time because that's more than 100%.
I changed your fiddle a bit: http://jsfiddle.net/R62w4/5/
... just by moving the left margin from your first DIV and right margin from your other two to the parent container seems to give enough room for everything.
P.S. You can use % based margins and just make sure everything you want to be on one line stays <= 100%.
the simpl css framework shows you how to do percentage based columns with pixel based margins which is what you want.
I essentially have two div tags I'm dealing with. On this page - www.employeratlas.com/search.html - when you click on any of the four tabs that tab has a border around it. The idea is that the border is black on the left, right, and top, and is white on the bottom to cover up the border of the div below it. This works fine in everything but IE6 and IE7 (IE6 example here http://www.employeratlas.com/images/ie_tabs.png). I've tried setting the z-index to make the top tab above the other, but it doesn't work.
IE has a different interpretation of z-index, taking into consideration parent elements' z-indexes. In essence, it's not possible to elevate an element above its parent's z-index.
Background info on quirksmode.org
An example of working around it