Develop Reference

How to up my div inner overflow-x:auto;?

How to show my div inner overflow scroll? i need show this div. I did position absolute and z index but not showing div. it is showing inner parent div. Someone help me? Thanks a lot :)
<div class="otobus_alan">
<div class="otobus">
<a href="" class="koltuk">Koltuk
<div class="ekstra_div">
Test
</div>
</a>
</div>
</div>
.otobus_alan {
width:600px;
height:200px;
overflow-x:auto;
position:relative;
margin-top:100px;
z-index:1;
}
.otobus {
float:left;
display:block;
width:1000px;
height:180px;
background:red;
position:relative;
z-index:1;
}
.ekstra_div {
position:absolute;
display:none;
z-index:2;
padding:25px;
background:blue;
width:50px;
height:50px;
top:-40px;
left:100px;
}
.koltuk {
float:left;
background:white;
}
.koltuk:hover .ekstra_div {
display:block;
}
https://codepen.io/musti_nation/pen/RyZBoe

Simple HTML code can't work inside ion-content

I am facing a problem. I am trying to create something similar to this:
<div id="wrapper">
<div id="a" class="panels">FIXED PANEL</div>
<div id="b" class="panels">Scrolling-Panel 1</div>
<div id="c" class="panels">Scrolling-Panel 2</div>
<div id="d" class="panels">Scrolling-Panel 3</div>
</div>
html,body {
padding:0;
margin:0;
background:black;
}
#wrapper {
position:absolute;
height:100%;
width:100%;
}
.panels {
position:relative;
height:100%;
min-height:100%;
width:100%;
z-index:1000;
}
#a{
background:#eee;
position:fixed;
color:red;
top:0;
z-index:-99;
}
#b{
margin-top:100%;
background:yellow;
}
#c{
background:pink;
}
#d{
background:green;
}
When I put this code inside ion-content, it simply doesn't work. I just see the first div, but I can't scroll to see the rest.

slideDown menubar slides down other document

I made a menubar using a <div> tag. When it is clicked the <div> below it slides down, and another content below those two <div>'s should stay in its place, but it goes down too.
You can see picture here
As you see in this picture when I click to slide down <div> , the other <div> in bottom of that goes down too. How to fix it?
HTML
<div id="slide">click to slide down</div>
<div id="panel">Hello! this is my first slide down example.</div>
<div>this is another div</div>
CSS
#slide{
text-align:center;
border:solid 1px #101010;
width:500px;
height:30px;
background:#cccccc;
}
#panel{
text-align:center;
border:solid 1px #101010;
width:500px;
height:200px;
display:none;
background:#ff0000;
}
jQuery
$(document).ready(function(){
$('#slide').click(function(){
$('#panel').stop().slideToggle(570);
});
});

You can make a few position changes in your CSS, and place your second <div> inside your first. top:100% mean's that your second div will animate from the bottom of your first div:
HTML
<div id="slide">click to slide down
<div id="panel">Hello! this is my first slide down example.</div>
</div>
<div>this is another div</div>
CSS
#slide{
text-align:center;
border:solid 1px #101010;
width:500px;
height:30px;
background:#cccccc;
position:relative;
}
#panel{
position:absolute;
top:100%;
box-sizing:border-box;
text-align:center;
border:solid 1px #101010;
width:100%;
height:200px;
display:none;
background:#ff0000;
}
JSFiddle

Try this:
HTML
<div id="menu_container">
<div id="slide">click to slide down</div>
<div id="panel">Hello! this is my first slide down example.</div>
</div>
<div>this is another div</div>
CSS
#menu_container { position:relative; }
#panel { position:absolute; top:100%; left:0; }

Replace your code with this
#panel{
text-align:center;
border:solid 1px #101010;
width:500px;
height:200px;
display:none;
background:#ff0000;
z-index: 10;
position: absolute;
}

The content slider concept

Could someone help me with creating a simple concept for content sliding?
What I want can be seen in this website's (https://www.palatine.fr) bottom part - 4 panels, which slide out on hover, and coming back to their original state after unhovering. I already tried a few fiddles with css blocks, but it gets up very complex, plus I know that I'll need jQuery in the end anyway for things like not stopping animation when the mouse unhovers a panel.
So what I'm asking is if anyone would be so kind and help me create a simple concept of this type of animation for content?
EDIT: http://jsfiddle.net/z3gY7/ is what I've done, yet it's not much at all, and probably won't be compatable at all. It's basicly done by div's and animations.

LIVE DEMO
HTML:
<div class="slideContent">
<p>Content here</p>
<div class="slideIn"><p>Sub Content</p></div>
</div>
CSS:
.slideContent, .slideIn{
height:300px;
width:180px;
}
.slideContent{
position:relative;
overflow:hidden;
}
.slideIn{
position:absolute;
left:0;
bottom:0px;
display:none;
}
jQ:
$('.slideContent').hover(function(){
$('.slideIn',this).stop().slideToggle();
});
Important note: This one works even better than the one on the website you provided :)

<div class="wrap">
<div class="wrap-inner">
<div class="normal">
Original text
</div>
<div class="hover">
other text
</div>
</div>
</div>
.wrap
{
display:block;
width:300px;
height: 300px;
position:absolute;
top:0px;
overflow:hidden;
}
.wrap-inner{
position:absolute;
height:600px;
width:300px;
top:0;
-webkit-transition: top 300ms ease;
}
.wrap-inner:hover{
top:-300px;
}
.normal
{
display:block;
width:300px;
height:300px;
background-color:green;
}
.hover
{
width:300px;
height:300px;
background-color:red;
}
I think you are close, just have to keep a 600px container inside wrap, that could hold the two 300px items one below other. Otherwise the second item wont be rendered when wrap height is made 300px.
http://jsfiddle.net/z3gY7/4/

http://jsfiddle.net/z3gY7/19/
HTML:
<div class="wrap">
<div class='box'>
<div class="normal">
Original text
</div>
<div class="hover">
other text
</div>
</div>
<div class='box'>
<div class="normal">
Original text222
</div>
<div class="hover">
other text2222
</div>
</div>
</div>
CSS:
.wrap
{
width:100%;
height: 300px;
position:absolute;
overflow:hidden;
}
.box {
width:25%;
height:600px;
float:left;
}
.normal {
width:100%;
height:300px;
background-color:blue;
}
.hover {
width:100%;
height:300px;
background-color:red;
}
And, jquery:
$('.box').hover(
function () {
$(this).stop().animate({ 'margin-top':'-300px' }, 1000);
},
function () {
$(this).stop().animate({ 'margin-top': '0px' }, 1000);
}
);
You can change speed, to fit your needs...

Footer under fixed divs

I'm currently having difficulty getting the footer of my website to work properly. I think it's because of my fixed positioned header and container divs but I need them to be fixed to stay on top when scrolling. I'm not sure how to take this into account for the footer to appear at the bottom when the container div is empty.
HTML:-
<body>
<div id="wrapper">
<div id="header">
<div id="headerContent">
</div>
</div>
<script>
$(document).ready(function() {
$('#container').css('marginTop', $('#header').outerHeight(true) + $('#navbar').outerHeight(true) );
});
</script>
<div id="navbar">
<div id ="navbarContent">
</div>
</div>
<div id="container">
</div>
<div id="footer">
<div id="footerContent">
</div>
</div>
</div>
</body>
</html>
CSS:-
#container{
width:960px;
margin:auto;
overflow:hidden;
}
#wrapper{
min-height:100%;
position:relative;
}
#navbar{
width:100%;
height:40px;
margin:auto;
background-color:#4e8885;
position:fixed;
top:120px;
padding:0px;
}
#header{
width:100%;
height:120px;
margin:auto;
background-color:#8bbcba;
position:fixed;
top:0px;
}
#footer{
width:100%;
min-height:20px;
margin:auto;
background-color:#8bbcba;
position:absolute;
bottom:0;
left:0;
}

In your example using fixed heights, it's not necessary to dynamically calculate the margins. You should just be able to set the margins of container to match the totals of your headers and footer for margin-top and margin-bottom respectively. See this jsFiddle: http://jsfiddle.net/9Jdrr/
If you need to dynamically calculate it, you should be able to do it based on this arrangement.