coolispaul
asked on
css transitions
Hi
I am trying to create a CSS transition whereby div areas fade in/out when a menu is clicked
I used display:none originally but noticed transtions dont work with this. I have tried visibiity:hidden but the divs now dont sit in correct place.
Any ideas how to fix this?
My page is here:
https://dl.dropboxusercontent.com/u/35928349/OW/UVEX/HTML/index.html
its the area "What we do"
Thanks
I am trying to create a CSS transition whereby div areas fade in/out when a menu is clicked
I used display:none originally but noticed transtions dont work with this. I have tried visibiity:hidden but the divs now dont sit in correct place.
Any ideas how to fix this?
My page is here:
https://dl.dropboxusercontent.com/u/35928349/OW/UVEX/HTML/index.html
its the area "What we do"
Thanks
ASKER
well its 2 divs that sit one after the other
so:
<div class="slide"></div>
<div class="slide"></div>
using display none pushes the second one up to the top as i intend. ( i dont want to show both at same time)
I guess i will have to use position absolute on these divs if i cant use display:none?
Thanks
so:
<div class="slide"></div>
<div class="slide"></div>
using display none pushes the second one up to the top as i intend. ( i dont want to show both at same time)
I guess i will have to use position absolute on these divs if i cant use display:none?
Thanks
yes. that sounds correct. Give that a try, and if it's not working, let us know.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
how do you deal with heights when positioning absolute like this though?
The parent container wont get an automatic height from the child elements?
The parent container wont get an automatic height from the child elements?
I'm not sure what exactly you are trying to do. I don't see any <div class="slide"></div> on your page.
Which items exactly do you want to fade in and out based on what conditions? Please be specific.
Which items exactly do you want to fade in and out based on what conditions? Please be specific.
ASKER
on here:
https://dl.dropboxusercontent.com/u/35928349/OW/UVEX/HTML/index.html
Under "What we do"
there are 2 buttons that show/hide 2 div's
It works but i have had to give the parent element a fixed height because the child elements are now positioned absolutely.
This could be a problem as its a content managed site so more content could go in theer and this fixed height may become incorrect
https://dl.dropboxusercontent.com/u/35928349/OW/UVEX/HTML/index.html
Under "What we do"
there are 2 buttons that show/hide 2 div's
It works but i have had to give the parent element a fixed height because the child elements are now positioned absolutely.
This could be a problem as its a content managed site so more content could go in theer and this fixed height may become incorrect
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yep guess will have to do that.
Thanks
Thanks
but, you can use opacity or background-color for fading type transitions.
core example:
Open in new window