I'm trying to create a menu inside CSS, and this is how my HTML skeleton looks like:
<body>
<div class="menu-container">
<ul class="menu-list">
<li class="menu-item">Item1</li>
<li class="menu-item">Item2</li>
<li class="menu-item">Item3</li>
</ul>
</div>
</body>
This is the part of CSS I'm focusing on:
.menu-container {
background-color: #e5e5e5;
width: 100%;
height: 4rem;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
}
.menu-list {
margin: 0 auto;
}
.menu-item {
display: inline-block;
}
.menu-item:not(:last-child) {
margin-right: 5vw;
}
.menu-item:hover {
background-color: red;
}
Basically, what I'm trying to achieve is setting the background color of each element to red, on element hover (<li>). The problem is, the background color seems not to fill the whole height of its parent (the menu-container), although this is what I actually want to do.
I tried setting the menu-item padding to 100%, but it just fills the whole screen. It isn't relative to menu-container's height.
To be more precise, this is how it looks like:
But I want the red background's height all over the div, like this:
What can I do, in order to achieve that? Thank you.
So, Instead of giving a fixed height to parent div. I adjust this using by adding padding from the top and bottom to each lielement.
Made some changes on CSS Have a look the snippet below:
.menu-container {
background-color: #e5e5e5;
width: 100%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
}
.menu-list {
margin: 0 auto;
}
.menu-item {
display: inline-block;
padding: 1.25rem 0;
}
.menu-item:not(:last-child) {
margin-right: 5vw;
}
.menu-item:hover {
background-color: red;
}
<body>
<div class="menu-container">
<ul class="menu-list">
<li class="menu-item">Item1</li>
<li class="menu-item">Item2</li>
<li class="menu-item">Item3</li>
</ul>
</div>
</body>
Just add height:100% to both menu-list and menu-item. In case you want the item to be centered instead of sticking to the top you can use a display: flex and align-items: center, justify-content:center
.menu-container {
background-color: blue;
width: 100%;
height: 4rem;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
justify-content:center;
}
.menu-list {
height: 100%;
background-color:yellow;
display:flex;
align-items: center;
justify-content:center;
}
.menu-item {
display: flex;
align-items:center;
justify-content:center;
height:100%;
background-color:green;
}
.menu-item:not(:last-child) {
margin-right: 5vw;
}
.menu-item:hover {
background-color: red;
}
You can make your CSS like this,
Giving the height to 100% will take 100% height of the parent element.
I am trying to fix your css, please check my solution -
.menu-container {
background-color: #e5e5e5;
width: 100%;
height: 4rem;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
}
/* at first you inline the whole ul */
.menu-list {
margin: 0 auto;
display: flex;
list-style: none;
}
/* then center the options & set full height */
.menu-item {
display: flex;
align-items: center;
height: 4rem;
cursor: pointer;
padding: 0 1rem;
}
.menu-item:not(:last-child) {
margin-right: 5vw;
}
.menu-item:hover {
background-color: red;
}
Solution 2
.menu-container {
background-color: #e5e5e5;
width: 100%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
}
/* set full height */
.menu-list {
margin: 0 auto;
height: 100%;
}
/* set full height also */
.menu-item {
display: inline-block;
padding: 1.25rem 0;
height: 100%;
}
.menu-item:not(:last-child) {
margin-right: 5vw;
}
.menu-item:hover {
background-color: red;
}
Related
how to make the footer down below and vertical?
I want it for the mobile version to make the footer down below.
I tried many solutions but it didn't work very well.
the output
as you see it become like this, I don't know if it's from the footer or the content itself?
/* mobile styles */
.footer {
height: auto;
border: 1px solid red;
}
.footer .footer-content {
height: auto;
flex-direction: column;
}
.footer .footer-content .footer-section {
height: auto;
}
/* desktop styles */
.footer {
height: 200px;
width: 100%;
}
.footer .footer-bottom {
height: 20px;
width: 100%;
text-align: center;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
.footer .footer-content {
height: 180px;
display: flex;
}
.footer .footer-content .footer-section {
flex: 1;
}
Try this:
.footer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
If you are using bootstrap simply use col classes
I'm trying to style some HTML that appears in a flash card program that I use, and I feel pretty lost as to what I'm doing wrong. What I want is pretty simple (I think) and the use case struck me as ideal for flexbox, but perhaps my approach is wrong.
It's a single column of content. A primary image appears at the top of the column, while two secondary images appear side-by-side directly below the primary image. Some text appears below that.
The height of the outermost container is based on the browser height. As the browser area is reduced, the images to should scale down, but never up (beyond their nominal dimensions) if more browser area is available. The secondary images should scale down faster than the primary image; if there's limited space, more should go to the primary image. The secondary images do not usually share the same dimensions, so the bigger of the two images should begin shrinking before the smaller (i.e., only shrink when necessary). All aspect ratios should be maintained during scaling.
What I have so far (here's a fiddle) nearly does what I want, except that the secondary images won't scale down with browser height, while the primary image won't scale down with browser width. This is iteration 20 or 30 at this point, so apologies if there are a bunch of vestigial rules left behind. I could really use some help! Thanks!
EDIT: see below for a visualization of how I'd like the content to respond as browser height shrinks. Notice that 1) secondary images never exceed their yellow container 2) they only scale when they must (150x75 didn't have to scale at all since the adjacent image is tall) 3) the yellow container scales faster than the primary image and 4) all images maintain their aspect ratios.
Before Browser height reduction ---> After
body {
font-family: arial;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.smallhint {
font-size: 16px;
color: #8c8c8c;
}
img {
padding: 0;
margin: 0;
font-size: 0;
}
.flex-column {
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
height: 90vh;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
.flex-row {
display: flex;
flex-direction: row;
flex: 0 1.5 auto;
justify-content: center;
align-items: center;
padding: 0px;
margin: 0px;
font-size: 0;
min-width: 0;
min-height: 0;
background-color: yellow;
}
.context {
display: flex;
min-height: 0;
background-color: blue;
}
.content img {
height: 100%;
}
.primary {
position: relative;
z-index: 0;
right: 0;
bottom: 0;
padding: 0;
font-size: 0;
min-height: 0;
}
.primary img {
border-style: solid;
border-width: 3px;
border-color: black;
height: calc(100% - 2*3px);
}
.mobile .nightMode .primary img {
border-style: solid;
border-width: 3px;
border-color: black;
}
.mask {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0;
}
.nonimage {
padding-top: 5px;
display: inline;
}
<div class="container">
<div class="flex-column">
<div class="primary"><img src="https://via.placeholder.com/200">
<div class="mask"><img src="https://via.placeholder.com/200/FF000"></div>
</div>
<div class="flex-row"><img src="https://via.placeholder.com/75x150"><img src="https://via.placeholder.com/150x75">
</div>
<div class="nonimage">
<div class="smallhint">Some Text<br>Other Text</div></div>
</div>
</div>
</div>
I think this could be a possible solution, #img1 being the first of the secondary images:
img {
max-width: 100%;
}
#img1 {
height: 20vw;
max-height: 150px;
min-height: 75px;
}
.primary img {
height: 50vw;
max-height: 200px;
}
These rules address the question, although there are still some issues with this approach that could be of importance.
body {
font-family: arial;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.smallhint {
font-size: 16px;
color: #8c8c8c;
}
img {
padding: 0;
margin: 0;
font-size: 0;
display: block;
object-fit: scale-down;
min-height: 0;
}
.flex-column {
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
height: 90vh;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
.flex-row {
display: flex;
flex: 0 1.5 auto;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 0;
background-color: green;
}
.context {
display: flex;
flex-direction: column;
max-height: 100%;
background-color: blue;
}
.primary {
position: relative;
z-index: 0;
right: 0;
bottom: 0;
padding: 0;
font-size: 0;
min-height: 0;
align-items: end;
background-color: orange;
}
.primary img {
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 3px;
border-color: black;
height: calc(100% - 2*3px);
}
.mask {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0;
}
.nonimage {
padding-top: 5px;
display: inline;
}
I have a div appearing on top of an image when I hover the image itself. The div contains two divs (buttons) that also have a :hover that changes their color and sets the cursor to the pointer.
The issue is the hovering on the button doesn't trigger the hover.
Also, it seems that hovering on the image at the bottom where the btn_container will appear doesn't trigger to first :hover and doesn't make the btn_container appear.
//HTML
<div class="container">
<img src="src">
<div class="btn_container">
<div class=" btn">
<p>Select</p>
</div>
<div class="btn">
<p>Preview</p>
</div>
</div>
//SCSS
.container {
position: relative;
width: 100%;
img {
width: 100%;
height: auto;
}
.btn_container {
position: absolute;
width: 100%;
height: 40px;
background-color: var(--dark-purple-trans);
bottom: 0;
left: 0;
align-items: center;
display: none;
position: absolute;
}
img:hover + .btn_container,
.btn_container > * {
display: flex;
border: none;
text-align: center;
justify-content: space-around;
}
.btn {
padding: 6px 12px;
height: 14px;
background: var(--yellow-medium);
border-radius: 8px;
display: flex;
justify-content: space-evenly;
align-items: center;
color: var(--white);
font-family: roboto;
&:hover {
cursor: pointer;
background: var(--red);
color: var(--white);
}
}
}
Preview, button hovering not working:
If I force the hover on the img using the inspector, the button hovering seems to work:
The problem is in classes img:hover + .btn_container and .btn_container > *.
Here is the updated scss:
.container {
position: relative;
width: 100%;
img {
display: block;
width: 100%;
height: auto;
border: 0;
}
&:hover .btn_container {
display: flex;
}
.btn_container {
position: absolute;
bottom: 0;
left: 0;
display: none;
align-items: center;
justify-content: space-around;
width: 100%;
height: 40px;
text-align: center;
background-color: var(--dark-purple-trans);
border: none;
}
.btn {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 14px;
padding: 6px 12px;
color: var(--white);
font-family: roboto;
background-color: var(--yellow-medium);
border-radius: 8px;
cursor: pointer;
&:hover {
color: var(--white);
background-color: var(--red);
}
}
}
You can view it in action here: Codepen
I tried using opacity instead of display to toggle visibility of the btn_container and added a hover to btn_container and it seemed to work: https://jsfiddle.net/pr8dxe2g/1/
.btn_container {
width: 500px;
height: 100px;
background-color: var(--dark-purple-trans);
bottom: 0;
left: 0;
align-items: center;
opacity: 0;
position: absolute;
}
img:hover + .btn_container,
.btn_container:hover,
.btn_container > * {
display: flex;
opacity: 1;
border: 1px solid blue;
text-align: center;
justify-content: space-around;
}
There may be some issue with your current code with the fact that the the img div has a higher stack-order if the display is set to none initially, however I am not certain so if anyone knows I would like to know why this is the case as well.
I'm having trouble making my layout responsive
basically I only have one header and when I'm at lower resolutions the screen is completely buggy
the background which is 100vh and 100vw does not work
image:
in desktop resolution:
code:
function App() {
return (
<div className="Wrapper">
<div className="Header">
<div className="navtop Container">
<div className="LogoHeader">
<a>
<img className="img" src={Logo} />
</a>
</div>
<div className="SearchWrapper">
<form className="form">
<input className="input" />
</form>
</div>
<nav className="NavWrapper">a</nav>
</div>
</div>
</div>
);
}
css:
html,
body {
margin: 0;
padding: 0;
border: 0;
height: 100vh;
}
#root {
height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
}
.Wrapper{
height: 100% !important;
background: red;
display: flex;
flex-flow: row wrap;
}
.Header{
width: 100%;
height: 140px;
color: rgb(255, 255, 255);
background: rgb(113, 89, 193);
transition: all 0.2s ease 0s;
}
.navtop{
height: 100%;
display: flex;
flex-direction: row;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
background:yellow;
}
.Container{
max-width: 1140px;
padding: 0px 30px;
margin: 0px auto;
}
.LogoHeader {
background: red;
display: flex;
align-items: center;
padding: 0 15px;
height: 100%;
min-width: 10em;
}
.img {
width: 150px;
}
.SearchWrapper {
background: yellow;
height: 100%;
display: flex;
align-items: center;
}
.input {
min-width: 200px;
}
.input:focus {
min-width: 300px;
}
.NavWrapper {
background: black;
height: 100%;
}
i really tried every possible solution i know i could change that with media queries
but i know i did something wrong in my css so i'm having this
I'm not exactly sure what you're aiming at, but there are at least 3 elements that are causing your header to not be able to shrink down fully to a mobile width below 440px.
Adjusting these 3 elements will get you going in the right direction, like so:
.LogoHeader {
background: red;
display: flex;
align-items: center;
padding: 0 15px;
height: 100%;
/*min-width: 10em;*/ /*REMOVE THIS LINE*/
width: 100%; /*ADD THIS*/
max-width: 10em; /*ADD THIS*/
}
.img {
/*width: 150px;*/ /*REMOVE THIS LINE*/
width: 100%; /*ADD THIS*/
max-width: 150px; /*ADD THIS*/
height: auto; /*ADD THIS */
}
.input {
/*min-width: 200px;*/ /*REMOVE THIS LINE*/
width: 100%; /*ADD THIS*/
max-width: 200px; /*ADD THIS*/
min-width: 50px; /*ADD THIS*/
}
Or you could adjust these elements in a media query, like so:
#media (max-width: 480px) {
.LogoHeader {
min-width: unset;
width: 100%;
max-width: 10em;
}
.image {
width: 100%;
max-width: 150px;
height: auto;
}
.input {
width: 100%;
max-width: 200px;
min-width: 50px;
}
}
Of course, you may want to adjust the values as needed and make some other modifications, but this should at lease allow the header to shrink down to mobile width.
The point here is that .img had a fixed with 150px and the input had a min-width of 200px, and the .LogoHeader had a min-width of 10em so those fixed widths and min-widths along with the padding of the .Container and .LogoHeader was not allowing your entire Header to shrink below 440px.
I have a wireframe below and want to see what's the best way to code this with flexbox.
I have coded a simple flexbox grid system but my wireframe requires more customization than what I have on my grid system.
I have parent div has display: flex and have 2 child divs have flex:1 and flex: 0 0 40%.
What is the best way to add content div(gray boxes inside on blue and red) that will stay with rest of main wrapper(entire gray box sets to max-width: 1400px)?
Thank you.
Here's the general idea.
Positioned pseudo-elements, one for each section of the row. With a suitable width (note that the body should have overflow-x:hidden) and appropriate positioning values.
* {
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
.wrapper {
min-height: 100vh; /* for demo purposes */
width: 60%;
margin: auto;
background: grey;
display: flex;
flex-direction: column;
}
header {
height: 20vh;
background: green;
}
.inner {
height: 30vh;
display: flex;
}
main {
background: blue;
flex: 1;
border: 2px solid black;
}
aside {
background: red;
flex: 0 0 40%;
border: 2px solid black;
}
.other {
background: pink;
flex: 1;
}
/* magic section */
.extend {
position: relative;
}
.extend::after {
content: '';
position: absolute;
width: 100vw;
top: 0;
height: 100%;
background: inherit;
z-index: -1;
}
.left::after {
right: 0;
}
.right::after {
left: 0;
}
<div class="wrapper">
<header></header>
<div class="inner">
<main class="extend left"></main>
<aside class="extend right"></aside>
</div>
<div class="other"></div>
</div>