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;
}
Related
This is my goal:
Some circular buttons that have an hover state: on mouseover, a black container with some text (with different length) should appear growing from left to right.
I didn't know how to do that. My doubts are about how to set the two different width because it should be from 0 to auto but if it's 0, then mouseover can't work.
Here is my sample code:
.container {
background-color: lightgray;
width: 60px;
height: 100px;
padding-top: 20px;
padding-left: 20px;
}
.item-container {
position: relative;
overflow: visible;
}
.item {
border-radius: 100%;
padding: 8px;
width: 10px;
height: 10px;
cursor: pointer;
background-color: white;
border: 1px solid black;
}
.circle {
width: 10px;
height: 10px;
border-radius: 100%;
background-color: tomato;
}
.hovered-elem {
position: absolute;
top: 0px;
left: 0px;
width: auto;
height: 100%;
white-space: nowrap;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 30px;
padding-right: 15px
}
.hovered-elem-text-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
padding-left: 40px;
color: white;
}
<div class="container">
<div class="item-container">
<div class="item">
<div class="circle"/>
</div>
<div class="hovered-elem">
<div class="hovered-elem-text-container">
Lilly Martin
</div>
</div>
</div>
<div>
Here's a start. I think it's all pretty self-explanatory. The max-width on the text elements is arbitrary--set it to something that will fit all possible names.
I simplified the markup a bit. You could take it further by making the inner circles pseudo-elements if you like.
* {
box-sizing: border-box;
}
.container {
display: inline-block;
background-color: #ddd;
width: 62px;
padding-left: 10px;
}
.item {
display: inline-flex;
align-items: center;
border-radius: 32px;
padding: 8px;
margin: 16px 0;
cursor: pointer;
border: 1px solid black;
background: white;
font-family: Verdana, Arial, sans-serif;
transition: all .5s;
}
.circle {
width: 24px;
height: 24px;
border-radius: 100%;
background-color: #CD4025;
}
.item:nth-child(2) .circle {
background-color: #0097A7;
}
.item:nth-child(3) .circle {
background-color: #FFAC40;
}
.text {
color: #fff;
max-width: 0;
overflow: hidden;
white-space: nowrap;
transition: all 1s;
}
.item:hover {
background: #000;
transition: all .5s;
}
.item:hover .text {
max-width: 200px;
margin: 0 16px;
transition: all 1s;
}
<div class="container">
<div class="item">
<div class="circle"></div>
<div class="text">Lilly Martin</div>
</div>
<div class="item">
<div class="circle"></div>
<div class="text">Philip McDaniel</div>
</div>
<div class="item">
<div class="circle"></div>
<div class="text">Tom Bombadil</div>
</div>
</div>
You can do this CSS transitions and altering the scale of the div while the circle item is hovered. Take a look what I did here:
.container {
background-color: lightgray;
width: 60px;
height: 100px;
padding-top: 20px;
padding-left: 20px;
}
.item-container {
position: relative;
overflow: visible;
}
.item {
border-radius: 100%;
padding: 8px;
width: 10px;
height: 10px;
cursor: pointer;
background-color: white;
border: 1px solid black;
}
.circle {
width: 10px;
height: 10px;
border-radius: 100%;
background-color: tomato;
}
.hovered-elem {
position: absolute;
top: 0px;
left: 0px;
width: auto;
height: 100%;
white-space: nowrap;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 30px;
padding-right: 15px;
scale: 0;
transform-origin: left;
transition: all 200ms ease-in-out;
}
.hovered-elem-text-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
padding-left: 40px;
color: white;
}
.item:hover .hovered-elem{
scale: 1;
}
<div class="container">
<div class="item-container">
<div class="item">
<div class="circle"/>
</div>
<div class="hovered-elem">
<div class="hovered-elem-text-container">
Lilly Martin
</div>
</div>
</div>
<div>
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>
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>
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;
}