I have to align a child div which is inside a div of flex box container to bottom. I tried different options like setting bottom to 0 or margin-top but none of them are working.
<style>
.flex-container {
display: flex;
height: 500px;
background-color: #f1f1f1;
}
.flex-container > div {
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.vertical
{
box-shadow: inset 0px 4px 6px #ccc;
}
.progress {
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
box-shadow: inset 0px 4px 6px rgba(100,100,100,0.6);
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-bar {
box-shadow: inset 0px 4px 6px rgb(100 100 100 / 60%);
}
</style>
<div class="flex-container">
<div class= "progress vertical" >1
<div class="progress-bar progress-bar-info" style="height: 35%;">
how to align this div to bottom..... ?
</div>
</div>
</div>
You can add flex properties on flex-container>div like below:
.flex-container {
display: flex;
height: 500px;
background-color: #f1f1f1;
}
.flex-container>div {
color: red;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.vertical {
box-shadow: inset 0px 4px 6px #ccc;
}
.progress {
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
box-shadow: inset 0px 4px 6px rgba(100, 100, 100, 0.6);
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-bar {
box-shadow: inset 0px 4px 6px rgb(100 100 100 / 60%);
}
<div class="flex-container">
<div class="progress vertical">
<div>1</div>
<div class="progress-bar progress-bar-info" style="height: 35%;">Bottom</div>
</div>
</div>
Related
I've made this model using six div's inside a container div. It works fine just as it is, but I would need to make it responsive to be compliant with WCAG 2.1. I've tried to use flexbox and grid but don't really figure out what would be the best way to achieve responsiveness on the model. I would only need one break point which puts all the divs on on column with the main topi on the top and the sub topics in descending order like the examples I made in powerpoint:
This is my code:
.container {
display: relative;
width: 700px;
height: 400px;
background-color: #BEE5F4;
}
.subTopics {
width: 250px;
height: 100px;
background: #94D9F2;
color: #000000;
font-weight: 700;
font-size: large;
}
p {
padding: 10px;
}
#subTopic1 {
position: absolute;
left: 25px;
top: 50px;
}
#subTopic2 {
position: absolute;
left: 425px;
top: 50px;
text-align: right;
}
#subTopic3 {
position: absolute;
left: 25px;
top: 250px;
}
#subTopic4 {
position: absolute;
left: 425px;
top: 250px;
text-align: right;
}
#mainTopic {
width: 250px;
height: 250px;
border-radius: 50% 50% 50% 50%;
border: solid 1px rgb(255, 255, 255);
background-color: #ffffff;
position: absolute;
left: 225px;
top: 75px;
text-align: center;
color: #000000;
font-weight: 700;
position: absolute;
overflow: hidden;
}
.tittel {
color: rgb(0, 0, 0);
position: relative;
top: 40px;
font-size: xx-large;
text-align: center;
color: #000000;
font-weight: 700;
}
.circeBack {
width: 290px;
height: 290px;
border-radius: 50% 50% 50% 50%;
background-color: #BEE5F4;
position: absolute;
left: 205px;
top: 55px;
}
a {
text-decoration: none;
color: #000000;
}
#mainTopic:hover {
background-color: rgb(255, 255, 255);
box-shadow: 2px 2px 22px 2px #94D9F2;
-webkit-box-shadow: 1px 1px 21px 1px #94D9F2;
-moz-box-shadow: 1px 1px 21px 1px #94D9F2;
}
#subTopic1:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: -20px -20px 21px -4px #94D9F2;
-moz-box-shadow: -20px -20px 21px -4px #94D9F2;
}
#subTopic2:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: 20px -20px 21px -4px #94D9F2;
-moz-box-shadow: 20px -20px 21px -4px #94D9F2;
}
#subTopic3:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: -20px 20px 21px -4px #94D9F2;
-moz-box-shadow: -20px 20px 21px -4px #94D9F2;
}
#subTopic4:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: 20px 20px 21px -4px #94D9F2;
-moz-box-shadow: 20px 20px 21px -4px #94D9F2;
}
<div class="container">
<div class="subTopics" id="subTopic1">
<a href="">
<p>Sub topic 1</p>
</a>
</div>
<div class="subTopics" id="subTopic2">
<a href="">
<p>Sub topic 2</p>
</a>
</div>
<div class="subTopics" id="subTopic3">
<a href="">
<p>Sub topic 3</p>
</a>
</div>
<div class="subTopics" id="subTopic4">
<a href="">
<p>Sub topic 4</p>
</a>
</div>
<div class="circeBack"></div>
<div class="circeFront" id="mainTopic">
<a href="">
<p class="tittel">Main <br> topic</p>
</div>
</div>
Is this what you're looking for? You'll have to view it in full screen mode and then play around with the screen width.
I added the dashed borders just so that you can see what's going on. This is something I often do during development, I find it helps me visualise the layout.
Thanks!
body {
background-color: #BEE5F4;
overflow-x: hidden;
}
.container {
position: relative;
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
}
.row {
position: relative;
display: flex;
flex-grow: 1;
border: 1px dashed red;
padding: 5px;
margin: 5px;
align-content: center;
justify-content: center;
}
.subTopics {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: #94D9F2;
color: #000000;
font-weight: 700;
font-size: large;
margin: 30px;
}
.circle-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
}
.circeBack {
position: relative;
width: 100%;
height: 100%;
border-radius: 50% 50% 50% 50%;
background-color: #BEE5F4;
}
#mainTopic {
width: 250px;
height: 250px;
border-radius: 50% 50% 50% 50%;
border: solid 1px rgb(255, 255, 255);
background-color: #ffffff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #000000;
font-weight: 700;
overflow: hidden;
}
.tittel {
color: rgb(0, 0, 0);
position: relative;
top: 40px;
font-size: xx-large;
text-align: center;
color: #000000;
font-weight: 700;
}
#media only screen and (max-width: 700px) {
.row {
flex-direction: column;
}
.row-desktop {
display: none;
}
.row-mobile {
display: flex;
align-items: center;
}
.subTopics {
margin: 30px 0px 30px 0px;
min-height: 100px;
}
}
#media only screen and (min-width: 701px) {
.row-desktop {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
}
a {
text-decoration: none;
color: #000000;
}
#mainTopic:hover {
background-color: rgb(255, 255, 255);
box-shadow: 2px 2px 22px 2px #94D9F2;
-webkit-box-shadow: 1px 1px 21px 1px #94D9F2;
-moz-box-shadow: 1px 1px 21px 1px #94D9F2;
}
#subTopic1:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: -20px -20px 21px -4px #94D9F2;
-moz-box-shadow: -20px -20px 21px -4px #94D9F2;
}
#subTopic2:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: 20px -20px 21px -4px #94D9F2;
-moz-box-shadow: 20px -20px 21px -4px #94D9F2;
}
#subTopic3:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: -20px 20px 21px -4px #94D9F2;
-moz-box-shadow: -20px 20px 21px -4px #94D9F2;
}
#subTopic4:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: 20px 20px 21px -4px #94D9F2;
-moz-box-shadow: 20px 20px 21px -4px #94D9F2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row row-mobile row-desktop">
<div class="circle-container">
<div class="circeBack"></div>
<div class="circeFront" id="mainTopic"><a href="">
<p class="tittel">Main <br> topic</p>
</div>
</div>
</div>
<div class="row">
<div class="subTopics" id="subTopic1"><a href="">
<p>Sub topic 1</p>
</a>
</div>
<div class="subTopics" id="subTopic2"><a href="">
<p>Sub topic 2</p>
</a>
</div>
</div>
<div class="row">
<div class="subTopics" id="subTopic3"><a href="">
<p>Sub topic 3</p>
</a>
</div>
<div class="subTopics" id="subTopic4"><a href="">
<p>Sub topic 4</p>
</a>
</div>
</div>
</div>
</body>
</html>
I am trying to create a netflix type scroll bar but the problem is that my images can scroll up and down instead of side to side. Like this.
look at bottom
I want it to go side to side
here is my css snippet
.movies {
background-color: lightblue;
border: 1px solid black;
background-color: lightblue;
border: 1px solid black;
height: 15rem;
width: 100%;
overflow-x: scroll;
}
.sinmovie {
height: 10rem;
width: 15rem;
}
.movies-div {
position: absolute;
margin-top: 45rem;
height: 3rem;
}
here is my html
<div class="movies-div">
<h1 class="movies-heading">Movies preview</h1>
<div class="movies">
<img class="sinmovie" src="./movies/large-movie1.jpg" alt="">
<img class="sinmovie" src="/movies/large-movie2.jpg" alt="">
<img class="sinmovie" src="/movies/large-movie3.jpg" alt="">
<img class="sinmovie" src="/movies/large-movie5.jpg" alt="">
<img class="sinmovie" src="/movies/large-movie6.jpg" alt="">
<img class="sinmovie" src="/movies/large-movie8.jpg" alt="">
<img class="sinmovie" src="/movies/large-movie7.jpg" alt="">
</div>
</div>
It may be a problem with my whole code
if you dont want to see if you know whats wrong skip!
here is my css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--maincolor: #124E78;
--divcolor: #F0F0C9;
--divcolortwo: #6E0E0A;
---seccondcolor: #F2BB05;
---thirdcolor: #D74E09;
}
body {
background-color: var(--maincolor);
}
.nav-bar {
background-color: var(---seccondcolor);
display: flex;
font-size: 2rem;
font-family: Gulzar;
border: solid 3px black;
height: 6rem;
border-bottom: 5px solid black;
z-index: 1;
}
ul {
display: flex;
list-style: none;
column-gap: 7rem;
padding-left: 20rem;
}
li {
border: solid 2px black;
width: 150px;
height: 50px;
justify-content: center;
align-items: center;
box-sizing: content-box;
text-align: center;
margin-top: 7px;
padding-bottom: 20px;
overflow: visible;
-webkit-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
}
.nav-bar:hover {
transform: scale(1.01);
background-color: white;
-webkit-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
}
li:hover {
transform: scale(1.1);
background-color: var(---seccondcolor);
transition-duration: 0.5s;
}
.first-page-look {
background: url(./images/movie-background.webp);
height: 43rem;
width: 100%;
background-size: cover;
border: 4px solid black;
border-right: solid black 10px;
border-left: solid black 10px;
position: absolute;
}
.first-page-look:hover {
transform: scale(1.01);
background-image: url("./images/movie-background.webp"), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
background-blend-mode: overlay;
}
a {
text-decoration: none;
font-family: Splash;
font-size: 1.2rem;
text-align: center;
text-transform: capitalize;
}
#main-page-button {
background-color: #6E0E0A;
position: absolute;
bottom: 10px;
font-size: 1rem;
width: 12rem;
height: 3rem;
margin-bottom: 4rem;
margin-left: 2rem;
color: white;
-webkit-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
}
#main-page-button:hover {
transform: scale(1.1);
background-color: black;
}
.main-page-par {
font: BebasNeue-Regular;
color: white;
position: absolute;
bottom: 200px;
margin-left: 3rem;
font-size: 1.5rem;
background-color: rgba(0, 0, 0, 0.5);
padding: 7px;
padding-left: 10px;
padding-right: 10px;
border-radius: 20px;
-webkit-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
}
.main-page-par:hover {
transform: scale(1.1);
}
#our-part-but {
background-color: #6E0E0A;
position: absolute;
bottom: 10px;
font-size: 1rem;
width: 12rem;
height: 3rem;
margin-bottom: 4rem;
margin-left: 15rem;
color: white;
-webkit-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
}
#our-part-but:hover {
transform: scale(1.1);
background-color: black;
}
.movies {
background-color: lightblue;
border: 1px solid black;
background-color: lightblue;
border: 1px solid black;
height: 15rem;
width: 100%;
overflow-x: scroll;
}
.sinmovie {
height: 10rem;
width: 15rem;
}
.movies-div {
position: absolute;
margin-top: 45rem;
height: 3rem;
}
pls help
the suggested addition of display flex to .movies creates this
look at bottom it creates it unnsesarily long page at bottom
you can use scroll-snap:
<style>
.movies {
width: 600px;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.movies > div {
width: 200px;
flex-shrink: 0;
box-sizing: border-box;
padding: 10px;
scroll-snap-align: start;
}
.movies > div img {
width: 100%;
}
</style>
<div class="movies-div">
<h1 class="movies-heading">Movies preview</h1>
<div class="movies">
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
</div>
</div>
Why wont my css styling of background color ,width, and height work on my last div >gameover ?
this first part is my html code:
<head>
<title>Maths Game</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-
scalable=yes">
<link rel="stylesheet" href="styling.css">
</head>
<body>
<div id="container">
<div id="score">Score: <span id="scoreValue">0</span></div>
<div id="correct">Correct</div>
<div id="wrong">Try Again</div>
<div id="question">7x7</div>
<div id="instructionBox">Click on the correct answer</div>
<div id="choices">
<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
<div id="box4" class="box">4</div>
</div>
<div id="startReset">start Game</div>
Im guessing right here below is where it started getting messed up:
<div id="timeremaining">Time remaining:<span id="timeRemainingValue">
60</span> sec</div>
<div id="gameOver">
<p>Game Over!</p>
<p>Your score is __</p>
</div>
</div>
this second part is my css code and only the last style "game over" isn't working;
html {
height: 100%;
background: radial-gradient(circle, white, grey);
}
#container {
height: 440px;
width: 550px;
background-color: #9DD2EA;
margin: 100px auto;
/* this line directly above centers the container top and bottom 100px and left and
right to auto so that margin keeps getting
bigger and bigger on both sides till the element is center */
padding: 10px;
border-radius: 20px;
/* above line curves corners of element */
box-shadow: 4px 4px 6px 6px purple;
-webkit-box-shadow: 4px 4px 6px 6px purple;
-moz-box-shadow: 4px 4px 6px 6px purple;
/* [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]
*/
position: relative;
}
#score {
background-color: yellow;
padding: 10px;
position: absolute;
left: 475px;
box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
}
#correct {
position: absolute;
left: 240px;
background-color: green;
color: white;
padding: 10px;
display: none;
}
#wrong {
/* line 45 makes it to where this element does not interact with other elements and
other elements behave as if it doesent exist*/
position: absolute;
left: 240px;
background-color: red;
color: white;
padding: 10px;
display: none;
}
#question {
margin: 55px auto 10px auto;
height: 150px;
width: 420px;
background-color: rgb(184, 53, 240);
box-shadow: 0px 4px purple;
font-size: 100px;
text-align: center;
font-family: Arial, Helvetica, sans-serif, sans-serif;
line-height: 150px;
color: black;
border-radius: 5px;
position: relative;
}
#question:active {
box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
top: 4px
}
#instructionBox {
height: 60px;
width: 420px;
background-color: blue;
margin: 1px auto 1px auto;
text-align: center;
line-height: 55px;
box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
border-radius: 5px;
position: relative;
/* transition: all 0.2s; line 71 & 72 with line 77 make the transition happen on click
*/
}
#instructionBox:active {
box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
top: 4px;
}
#choices {
/* background-color: sandybrown; */
height: 100px;
width: 420px;
margin: 10px auto;
color: black;
text-align: center;
line-height: -50px;
margin: 10px auto;
border-radius: 5px;
}
.box {
/*these boxes are within a choices div to help them size together*/
margin-right: 26px;
width: 85px;
height: 85px;
background-color: white;
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 80px;
position: relative;
/* with position relative and .box:active { top: 4px; the box moves down 4px}*/
/* transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s; */
}
.box:hover,
#startReset:hover {
background-color: grey;
color: white;
box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
}
.box:active,
#startReset:active {
box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
top: 4px;
}
/* #box1{
margin: 10px 10px;
background-color: red;
width: 30px;
height: 30px;
}
#box2{
margin: 10px 10px;
background-color: white;
width: 30px;
height: 30px;
}
#box3{
margin: 10px 10px;
background-color: blue;
width: 30px;
height: 30px;
}*/
#box4 {
margin-right: 0;
}
#startReset {
/*these boxes are within a choices div to help them size together*/
margin-left: 230px;
width: 100px;
height: 45px;
background-color: rgb(255, 255, 255, 0.5);
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 45px;
text-align: center;
position: relative;
}
/* instead of writing these same pargraphs of code just at the element id to the similar
code alrady made like above */
/* #startReset:hover{
background-color: grey;
color: white;
box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
}
#startReset:active{
box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
top: 4px;
} */
#timeremaining {
/*these boxes are within a choices div to help them size together*/
visibility: hidden;
/* display: none; */
margin-left: 10px;
width: 200px;
height: 45px;
background-color: greenyellow;
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 45px;
text-align: center;
position: relative;
}
this below is the broken part with the >gameover style or gameOver div:
#gameOver {
height: 200px;
width: 500px;
background-color: linear-gradient(blue, green);
font-size: 1.0em;
}
I'm trying to add a little design flourish to some tabs.
The tabs are contained inside a tab bar, which has a bottom border.
When a tab is active I want it to appear as if it's on the same level of the content, with the other tabs appearing set back.
To do this, I need to make the section of border beneath the active tab disappear - my first thought was to set the tab background white and overlap the parent - but this doesn't work.
Anyone got any ideas as to how to get the effect I'm looking for?
.container {
padding: 30px;
}
.tab-bar {
display: flex;
background-color: #fff;
border-bottom: solid 1px rgba(0,0,0, .12);
height: 48px;
overflow: hidden;
}
.tab {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
height: 48px;
max-width: 200px;
min-width: 100px;
padding: 0 16px;
}
.tab[data-state="active"] {
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 1px 0 rgba(0,0,0,0.12);
color: red;
}
<div class="container">
<div class="tab-bar">
<div class="tab" data-state="active">Active</div>
<div class="tab">Not Active</div>
</div>
</div>
Link to JsFiddle
from earlier comment
draw the bottom border from the non active tabs
add eventually a pseudo element to fill the room left.
overflow:hidden on the parent hides shadows and also do not allow children to stand on top of the border in order to hide it
What you could do :
.container {
padding: 30px;
}
.tab-bar {
display: flex;
background-color: #fff;
height: 48px;
}
.tab {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
max-width: 200px;
min-width: 100px;
padding: 0 16px;
border-bottom: solid 1px rgba(0, 0, 0, .12);
}
.tab-bar::after {
content: '';
flex: 1;
border-bottom: solid 1px rgba(0, 0, 0, .12);
}
.tab[data-state="active"] {
box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.2), 0 -4px 5px 0 rgba(0, 0, 0, 0.14), 0 -1px 1px 0 rgba(0, 0, 0, 0.12);
color: red;
border-bottom: none;
}
<div class="container">
<div class="tab-bar">
<div class="tab" data-state="active">Active</div>
<div class="tab">Not Active</div>
</div>
</div>
You should overflow: hidden from .tab-bar.
But after you remove it. It seems not to be as you wanted ("the same level of the content").
So I edited box-shadow of active tab. to make it with no box-shadowfrom button.
border-bottom: 1px solid white is responsible to override tab-bar border
See Full Example here:
.container {
padding: 30px;
}
.tab-bar {
display: flex;
background-color: #fff;
border-bottom: solid 1px rgba(0,0,0, .12);
height: 48px;
}
.tab {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
height: 48px;
max-width: 200px;
min-width: 100px;
padding: 0 16px;
}
.tab[data-state="active"] {
box-shadow: -4px -2px 4px -1px rgba(0,0,0,0.1), 4px -2px 4px -1px rgba(0,0,0,0.1);
color: red;
border-bottom: 1px solid white;
}
<div class="container">
<div class="tab-bar">
<div class="tab" data-state="active">Active</div>
<div class="tab">Not Active</div>
</div>
</div>
This question already has answers here:
How to center a flex container but left-align flex items
(9 answers)
Closed 5 years ago.
Hello I have the following bit of code but i'm struggling to sort out a layout issue. Ideally i would like the rows to go from left to right as shown in the picture but I would like to center the entire structure.
Currently have
But I would like this
This is the css and code i'm currently using.
<div class="service_list_container">
<div class="service_tab"></div>
<div class="service_tab"></div>
<div class="service_tab"></div>
<div class="service_tab"></div>
<div class="service_tab"></div>
</div>
.service_list_container {
background: blue;
display: flex; /* or inline-flex */
flex-wrap: wrap;
justify-content: space-evenly;
}
.service_tab {
flex-basis: 300px;
flex-grow: 0;
flex-shrink: 0;
height: 400px;
background: #fff;
margin: 10px 20px;
-webkit-box-shadow: -2px -1px 5px 0px #efefef;
-moz-box-shadow: -2px -1px 5px 0px #efefef;
box-shadow: -2px -1px 5px 0px #efefef;
border: solid 1px #e8e8e8;
}
Is it possible using flexbox to achieve what I am after?
Thanks
You need to use flex-basis: 30%; instead of flex-basis: 300px;
.service_list_container {
background: blue;
display: flex; /* or inline-flex */
flex-wrap: wrap;
justify-content: space-evenly;
}
.service_tab {
flex-basis: 30%;
flex-grow: 0;
flex-shrink: 0;
height: 400px;
background: #fff;
margin: 10px 1.5%;
-webkit-box-shadow: -2px -1px 5px 0px #efefef;
-moz-box-shadow: -2px -1px 5px 0px #efefef;
box-shadow: -2px -1px 5px 0px #efefef;
border: solid 1px #e8e8e8;
}
<div class="service_list_container">
<div class="service_tab"></div>
<div class="service_tab"></div>
<div class="service_tab"></div>
<div class="service_tab"></div>
<div class="service_tab"></div>
</div>
.service_tab { flex-grow: 1; }
instead of
.service_tab { flex-grow: 1; }
.service_list_container {
background: blue;
display: flex; /* or inline-flex */
flex-wrap: wrap;
justify-content: space-evenly;
}
.service_tab {
flex-basis: 300px;
flex-grow: 1;
flex-shrink: 0;
height: 400px;
background: #fff;
margin: 10px 20px;
-webkit-box-shadow: -2px -1px 5px 0px #efefef;
-moz-box-shadow: -2px -1px 5px 0px #efefef;
box-shadow: -2px -1px 5px 0px #efefef;
border: solid 1px #e8e8e8;
}
<div class="service_list_container">
<div class="service_tab"></div>
<div class="service_tab"></div>
<div class="service_tab"></div>
<div class="service_tab"></div>
<div class="service_tab"></div>
</div>