With the simple code below I want to run a transition in CSS. Once you hover over the <button> the <panel> should appear. However, currently when I hover over the <button> the <panel> item does not appear at all and I cannot find the issue in my code.
Do you see the mistake in my code why the transition is not working?
You can also find my code here
html {
height: 100%;
}
body {
height: 100%;
}
.button {
height: 10%;
width: 70%;
float: left;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: orange;
}
.panel {
height: 30%;
width: 70%;
float: left;
overflow: hidden;
max-height:0px;
transition: max-height .5s linear;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: blue;
}
.button:hover .panel {
max-height: 300px;
}
.panel div {
height: 25%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
<div class="button">Menu</div>
<div class="panel">
<div> 1.0 Menu </div>
<div> 2.0 Menu </div>
<div> 3.0 Menu </div>
<div> 4.0 Menu </div>
</div>
You had a mistake in your CSS. .button:hover .panel means .panel is a child of the button div. However, it is a sibling. Therefore you need to use a adjacent sibling selector (+).
.button:hover + .panel does the trick.
html {
height: 100%;
}
body {
height: 100%;
}
.button {
height: 10%;
width: 70%;
float: left;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: orange;
}
.panel {
height: 30%;
width: 70%;
float: left;
overflow: hidden;
max-height:0;
transition: max-height .5s linear;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: blue;
}
.button:hover + .panel {
max-height: 300px;
}
.panel div {
height: 25%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
<div class="button">Menu</div>
<div class="panel">
<div> 1.0 Menu </div>
<div> 2.0 Menu </div>
<div> 3.0 Menu </div>
<div> 4.0 Menu </div>
</div>
please check this code i hope you will get your answer.
html {
height: 100%;
}
body {
height: 100%;
}
.button {
height: 10%;
width: 70%;
float: left;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: orange;
}
.panel {
height: 30%;
width: 70%;
float: left;
overflow: hidden;
max-height:0px;
transition: max-height .5s linear;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: blue;
}
.button:hover, .panel:hover {
max-height: 300px;
}
.panel div {
height: 25%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
<div class="button">Menu</div>
<div class="panel">
<div> 1.0 Menu </div>
<div> 2.0 Menu </div>
<div> 3.0 Menu </div>
<div> 4.0 Menu </div>
</div>
Related
In the below HTML and CSS I created a header and an image-animation which you can also find in the JSfiddle here:
body {
margin: 0;
}
/* 01.00 HEADER: Items in header */
.header_01 {
width: 80%;
height: 10vh;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
z-index:99;
text-align: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: orange;
}
.header_02 {
width: 80%;
height: 10vh;
margin: 10vh auto 0;
position: sticky;
z-index:99;
top:0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
height: 100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 70%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: aqua;
}
/* 02.00 NAVIGATION */
.navigation>ul {
height: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: blue;
}
.navigation>ul>li {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
/* 03.00 CONTENT */
.image_animation {
width: 80%;
margin-left: 10%;
margin-top: 15%;
float: left;
display: flex;
justify-content: space-between;
background-color: green;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image_list {
width: 100%;
position: relative;
background-color: red;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image_list img {
width: 100%;
height: 100%;
}
.image1 {
height: 100%;
width: 100%;
float: left;
position: absolute;
}
.image2 {
height: 100%;
width: 100%;
float: left;
animation-delay: 2s;
}
.image_list div {
animation-name: animation_home_images;
animation-duration:4s;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
opacity:0;
}
#keyframes animation_home_images {
50.0% {
opacity: 1
}
0%, 100%{
opacity: 0
}
}
<div class="header_01">
This is our webpage.
</div>
<div class="header_02">
<div class="image">
Image
</div>
<nav class="navigation">
<ul>
<li class="button_01"> 1.0 Main Menu </li>
<li class="button_01"> 2.0 Main Menu </li>
<li class="button_01"> 3.0 Main Menu </li>
</ul>
</nav>
</div>
<div class="image_animation">
<div class="image_list">
<div class="image1"><img src="http://placehold.it/101x101"></div>
<div class="image2"><img src="http://placehold.it/201x201"></div>
</div>
</div>
As you can see I have a header consisting of two parts. The first .header_01 should disappear once the user scrolls down the page whereas the second .header_02 should remain fixed. I originally achieved this with the answer from the question here.
All this worked fine so far.
Now I added an .image-animation below the header with a postion: absolute; property which is neccesary to make the animation work. Therefore, I also added a z-index to my CSS as described in the answers here to get the animation below the header once the user scrolls down the page.
However, somehow I cannot make the z-index work in combination with the position: sticky; property because when I scroll down both headers disappear.
Do you have any idea what I need to change in my code so once the user scrolls down:
a) the first .header_01 disappears and
b) the second .header_02 remains fixed and
c) the .image-animation goes behind the header.
Simply remove the float (it's not needed) that are making the body having as height only the top header thus the sticky will not work as expected:
body {
margin: 0;
}
/* 01.00 HEADER: Items in header */
.header_01 {
width: 80%;
height: 10vh;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
z-index:99;
text-align: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: orange;
}
.header_02 {
width: 80%;
height: 10vh;
margin: 10vh auto 0;
position: sticky;
z-index:99;
top:0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
height: 100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 70%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: aqua;
}
/* 02.00 NAVIGATION */
.navigation>ul {
height: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: blue;
}
.navigation>ul>li {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
/* 03.00 CONTENT */
.image_animation {
width: 80%;
margin-left: 10%;
margin-top: 15%;
display: flex;
justify-content: space-between;
background-color: green;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image_list {
width: 100%;
position: relative;
overflow:hidden;
background-color: red;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image_list img {
width: 100%;
height: 100%;
}
.image1 {
height: 100%;
width: 100%;
position: absolute;
}
.image2 {
height: 100%;
width: 100%;
display:block;
animation-delay: 2s;
}
.image_list div {
animation-name: animation_home_images;
animation-duration:4s;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
opacity:0;
}
#keyframes animation_home_images {
50.0% {
opacity: 1
}
0%, 100%{
opacity: 0
}
}
<div class="header_01">
This is our webpage.
</div>
<div class="header_02">
<div class="image">
Image
</div>
<nav class="navigation">
<ul>
<li class="button_01"> 1.0 Main Menu </li>
<li class="button_01"> 2.0 Main Menu </li>
<li class="button_01"> 3.0 Main Menu </li>
</ul>
</nav>
</div>
<div class="image_animation">
<div class="image_list">
<div class="image1"><img src="http://placehold.it/101x101"></div>
<div class="image2"><img src="http://placehold.it/201x201"></div>
</div>
</div>
I have the following simple HMTL and CSS code which you can also find in the JSfiddle here:
body {
height: 500px;
}
.image {
width: 100%;
height: 30%;
background-color: blue;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image_details {
height: 100%;
width: 100%;
background-color: yellow;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image img {
height: 100%;
width: 100%;
display: block;
float: left;
background-color: red;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.prev_button {
float: left;
width: 20%;
background-color: blue;
}
.next_button {
float: right;
width: 20%;
text-align: right;
background-color: blue;
}
<div class="image">
<div class="image_details"> <img src="http://placehold.it/101x101"> </div>
</div>
<div class="prev_button"> PREVIOUS </div>
<div class="next_button"> NEXT </div>
As you can see in the code above I want to have an image and a prev and next button. However, instead of having the prev and next buttons below the image I would like to have them on the left center and on the right center in the image.
What do I have to change in my code to make this work?
One easy method is to use absolute positioning. Insert the buttons as children of .image and set the parent to position: relative. The children need position: absolute; and have to be positioned, as you can see in my full example. I also remove the heights from your CSS so avoid stretching the img.
body * {
box-sizing: border-box;
}
.image {
width: 100%;
background-color: blue;
border-style: solid;
border-width: 1px;
position: relative;
}
.image_details {
width: 100%;
background-color: yellow;
border-style: solid;
border-width: 1px;
}
.image img {
width: 100%;
display: block;
background-color: red;
border-style: solid;
border-width: 1px;
}
.prev_button, .next_button {
width: 20%;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: blue;
}
.prev_button {
left: 0;
}
.next_button {
right: 0;
text-align: right;
}
<div class="image">
<div class="image_details"><img src="http://placehold.it/101x101"></div>
<div class="prev_button">PREVIOUS</div>
<div class="next_button">NEXT</div>
</div>
How can i set a div width with border:2px solid the border comes out from parent div
Note :- I want to fix in IE also.
posting an example to better understating.
.box {
width: 300px;
border: 1px solid;
padding: 10px 0;
}
.one {
width: 100%;
background: tomato;
height: 40px;
}
.two {
width: 100%;
border: 2px solid;
height: 40px;
}
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
.box {
width: 300px;
border: 1px solid;
padding: 10px 0;
}
.one {
width: 100%;
background: tomato;
height: 40px;
}
.two {
width: 100%;
border: 2px solid;
height: 40px;
box-sizing: border-box;
}
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
Just add display: block; to that div. Check updated Snippet below
.box {
width: 300px;
border: 1px solid;
padding: 10px 0;
}
.one {
width: 100%;
background: tomato;
height: 40px;
}
.two {
display: block;
border: 2px solid;
height: 40px;
}
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
Try this, box-sizing property can slove your problem.
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.box {
width: 300px;
border: 1px solid;
padding: 10px 0;
}
.one {
width: 100%;
background: tomato;
height: 40px;
}
.two {
width: 100%;
border: 2px solid;
height: 40px;
}
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
Just add box-sizing: border-box; to .two like this:
.box {
width: 300px;
border: 1px solid;
padding: 10px 0;
}
.one {
width: 100%;
background: tomato;
height: 40px;
}
.two {
width: 100%;
border: 2px solid;
height: 40px;
box-sizing: border-box;
}
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
No fancy tricks. Note that adding box-sizing: border-box; to *, *:before, *:after as showed above may break other parts of your layout.
Just add box-sizing: border-box; to class="two" like this:
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
.box {
width: 300px;
border: 1px solid;
padding: 10px 0;
}
.one {
width: 100%;
background: tomato;
height: 40px;
}
.two {
width: 100%;
border: 2px solid;
height: 40px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
With the code below I want to create a mobile menu button <container> inside my <navigation>. All this works fine so far.
However, somehow the mobile menu button does not stay inside the <nav> . (See the green container compared to the yellow navigation)
I am guessing it has something to do with the fixed px for the width and the height. However, when I change those to a %-width the bars completely dissapear.
What do I have to change in my code so the <container> remains inside the surrounding <nav>?
You can also find my code here
body {
margin: 0;
}
.header {
width: 80%;
height: 10%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
display: inline-block;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
<div class="header">
<nav class="navigation">
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
</div>
Remove height: 10%; from .header, it's taking 10% height of html
body {
margin: 0;
}
.header {
width: 80%;
/* height: 10%; */
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
display: inline-block;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
<div class="header">
<nav class="navigation">
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
</div>
The margin settings for the bar and the bar itself are too high. Try the CSS below
.bar1, .bar2, .bar3 {
width: 35px;
height: 1px;
background-color: #333;
margin: 3px 0;
transition: 0.4s;
}
I have a semi complicated website, and tucked inside a bunch of <div> is an image, I need that image to be moved up x number of pixels. I have the overflow hidden, so that it will cut the image off at the bottom (as expected) but I can't get the image to move where I want it to with the width maintaining 100%, and the image coming from the bottom
Here is a jsfiddle of the code
#DIV_8 {
cursor: pointer;
border-style: solid;
border-width: 1px;
height: 200px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
width: 300px;
overflow: hidden;
}
#DIV_9 {
max-height: 250px;
width: 100%;
height: auto;
display: inline-block;
vertical-align: bottom;
max-width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Seems to work by adding:
#DIV_9 {
position: relative;
top: -20px;
}
Adjusting top moves the image up and down.
https://jsfiddle.net/y197yjp2/
Is this what you are looking for?
#DIV_8 {
position: relative;
cursor: pointer;
border-style: solid;
border-width: 1px;
height: 200px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
width: 300px;
overflow: hidden;
}
#DIV_9 {
position: absolute;
bottom: -20px;
width: 100%;
height: auto;
display: inline-block;
max-width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#DIV_9 img {
width: 100%;
}
<div id="DIV_1">
<div id="DIV_2">
<div id="DIV_3">
<div id="DIV_4">
<div id="DIV_5">
<div id="DIV_6">
<div id="DIV_7">
<div id="DIV_8">
<div id="DIV_9">
<img src="http://img11.deviantart.net/a412/i/2012/145/9/9/google_chrome_by_juniorgustabo-d513nlo.png" width="360" height="308" alt="brazil" id="IMG_10" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Just use negative a negative margin-top
#DIV_8 {
cursor: pointer;
border-style: solid;
border-width: 1px;
height: 200px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
width: 300px;
overflow: hidden;
}
#DIV_9 {
max-height: 250px;
width: 100%;
height: auto;
display: inline-block;
vertical-align: bottom;
max-width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: -20px;
}