I'm using pseudo content and a flex layout. Why does li:before not have the 10px width that Ive set?
https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/MWmwyOE
<ul>
<li>
<p>Lorum 123 dfjsd 3ijfadsifj sdfjoifj oijas fdjasf ijaio</p>
</li>
<li>
<p>37dkj dfjkasdfjdsijf dksdjf jfjiasdfmdafom</p>
</li>
</ul>
ul {
width: 150px;
margin: 0;
padding: 0;
list-style: none;
}
li {
display: flex;
margin-bottom: 20px
}
li:before {
content: "";
display: flex;
width: 10px;
flex-basis: 10px;
height: 10px;
background: red;
}
p {
margin: 0;
}
By default flex items don't shrink below their minimum content size. To change this, set the item's min-width or min-height.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
by default flex is setting the shrink value to 1.
If you add flex: 0 0 auto; to the pseudo element your code works.
ul {
width: 150px;
margin: 0;
padding: 0;
list-style: none;
}
li {
display: flex;
margin-bottom: 20px
}
li:before {
content: "";
display: flex;
width: 10px;
flex-basis: 10px;
height: 10px;
background: red;
flex: 0 0 auto;
}
p {
margin: 0;
}
<ul>
<li>
<p>Lorum 123 dfjsd 3ijfadsifj sdfjoifj oijas fdjasf ijaio</p>
</li>
<li>
<p>37dkj dfjkasdfjdsijf dksdjf jfjiasdfmdafom</p>
</li>
</ul>
try this
https://codepen.io/MuhammadRizwan/pen/bGWdpxB
update your class properties
li:before {
content: "";
display: flex;
width:100%;
min-width: 10px;
flex-basis: 10px;
height: 10px;
background: red;
}
Related
In my header, I'm trying to put my name in the middle item below the first item "brush up". I've tried justify-content and align-items and just can't get it to move. I also want the navigation to stay on the right side. New to flexbox thank you for any help.
.container {
display: flex;
margin: 0 auto;
max-width: 960px;
flex-direction: column;
}
/* HEADER SECTION***************************************/
header {
width: 100%;
height: 8vh;
display: flex;
flex-direction: row;
outline: 1px solid red;
}
header * {
margin: 0;
padding: 0;
display: block;
}
header h1 {
outline: 1px solid red;
height: 50px;
flex: 3;
}
header p {
flex: 2;
outline: 1px solid red;
height: 25px;
align-items: baseline;
}
header ul {
flex: 1;
justify-content: flex-end;
outline: 1px solid red;
list-style-type: none;
}
header ul li {
margin: 0 0.5em;
}
<header>
<h1>Brushing up</h1>
<p>by Keller Johnson</p>
<ul>
<li>home</li>
<li>project 1</li>
<li>project 2</li>
</ul>
</header>
Are you looking for this?
header {
width: 100%;
display: flex;
}
header, header > * {
outline: 1px solid red;
}
header > div {
flex-grow: 1;
}
header > ul {
flex: 0 0 200px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
list-style-type: none;
}
header * {
margin: 0;
padding: 0;
}
header h1 {
height: 50px;
}
header p {
outline: 1px solid red;
height: 25px;
}
header ul li {
margin: 0 0.5em;
}
<header>
<div>
<h1>Brushing up</h1>
<p>by Keller Johnson</p>
</div>
<ul>
<li>home</li>
<li>project 1</li>
<li>project 2</li>
</ul>
</header>
If this is not the result you want, consider explaining more clearly exactly what you're trying to achieve. Since we're talking about styling, a picture would help.
I have to create button animation like below:
https://media.giphy.com/media/YLgJHbH1u916XSo3JD/giphy.gif
I did it with "transition" but now can't implement that solution to my website.
my button animation solution: http://jsfiddle.net/guhqcxzt/
My website part where I wanna implement it on 'li' tags. (html and scss)
<nav class="left-side">
<ul class="navigations">
<li>ABOUT US</li>
<li>HOTEL</li>
<li>CONTACT US</li>
</ul>
<div class="rights">© 2021 All rights reserved.</div>
</nav>
nav,
.left-side {
#include flex(space-between, center, column);
min-height: 90vh;
background: $color-grey-dark-1;
padding: 5rem 0 3rem 0;
width: 18%;
color: $color-grey-light-1;
}
.navigations {
width: 100%;
li {
list-style: none;
a {
text-decoration: none;
color: $color-grey-light-1;
display: block;
padding: 2rem 0;
margin: 0.5rem 0;
padding-left: 30%;
font-size: 2.5rem;
}
}
}
a:hover {
background: $color-primary-light;
}
try this :
add transition in <a> tag
navigations {
width: 100%;
li {
list-style: none;
a {
text-decoration: none;
color: $color-grey-light-1;
display: block;
padding: 2rem 0;
margin: 0.5rem 0;
padding-left: 30%;
font-size: 2.5rem;
transition:0.5s;
}
}
}
a:hover {
background: $color-primary-light;
}
do you want this one?
try this code :
nav,.left-side
{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
min-height: 90vh;
background: black;
padding: 4rem 0 3rem 0;
width:300px;
color: grey;
}
.navigations
{
width: 100%;
}
li
{
position:relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
height: 100px;
}
li::before
{
content:'';
position:absolute;
width:0%;
height:70px;
background:red;
left:-20px;
transition:0.5s;
}
li:hover::before
{
width:100%;
}
a
{
position:relative;
color: grey;
margin: 0.5rem 0;
width:92.4%;
text-decoration:none;
}
.rights {
font-size: 1.5rem;
}
<nav class="left-side">
<ul class="navigations">
<li >ABOUT US</li>
<li> HOTE </li>
<li>CONTACT US</li>
</ul>
<div class="rights">© 2021 All rights reserved.</div>
</nav>
I have a list of items that I want to turn into a progress steps in CSS.
ol {
width: 800px;
}
li {
display: inline-block;
color: transparent;
height: 25px;
width: 25px;
background-color: #abc;
border-radius: 50%;
border: 2px solid #08f;
margin-right: 150px;
}
li:last-child {
margin-right: 0;
}
li:not(:last-child)::before {
content: "";
border: 2px solid #08f;
margin-left:25px;
width: 153px;
display: inline-block;
}
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
</ol>
What I ideally want to do is:
Stop Step 4 from disappearing off the bottom
Use the content of the <li> as a label above the circle
Make the total width equal to 80% of the viewport width
I'm just trying to teach myself some more advanced CSS, and I've seen this pattern used somewhere else - but I've been trying for an hour or so to get there with no joy.
This is a learning exercise for me, so would love some explanation with the answer if you have the time.
Thanks,
body {
display: grid;
place-items: center;
margin: 0;
padding: 36px;
}
ol {
display: flex;
width: 80%;
padding: 12px 0;
}
li {
position: relative;
padding: 0;
flex-grow: 1;
height: 2px;
background: #08f;
display: flex;
align-items: center;
}
li:last-child {
margin-right: 0;
flex-grow: 0;
}
li::after {
content: "";
position: absolute;
left: 0;
display: inline-block;
color: transparent;
height: 24px;
width: 24px;
background: #abc;
border-radius: 50%;
border: 2px solid #08f;
}
span {
position: absolute;
top: -36px;
left: 12px;
width: max-content;
transform: translateX(-50%);
z-index: 1;
}
<ol>
<li><span>Step 1</span></li>
<li><span>Step 2</span></li>
<li><span>Step 3</span></li>
<li><span>Step 4</span></li>
</ol>
In my code the nodes are the pseudo elements, and I use the flex-grow property so that the rules (that are the li tags) are properly distributed. font-size: 0 hides the text and removes it from the content-size of the elements as well.
---- edit:
I removed the font-size: 0 and added span tags for the labels and the css to position it.
I am trying to center the outer 'div' container using Flexbox. I have an unordered list with 3 li's. The li's width is: width: calc(100%/3). The ul's width is 70%. The problem is that when I try centering the ul (justify-content: center), it doesn't get centered.
I finally figured out the source of the problem. When I remove the line: width: calc(100%/3), it centers properly. My question is: How can I get it to center properly?
I tried margin: auto, but that didn't work.
Here's the JSFiddle, and here's the code snippet:
#flex-container {
width: 70%;
list-style-type: none;
padding: 0;
margin: 0;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-justify-content: center;
justify-content: center;
}
li {
box-sizing: border-box;
background-color: tomato;
width: calc(100%/3);
}
<ul id="flex-container">
<li class="flex-item">First</li>
<li class="flex-item">Second</li>
<li class="flex-item">Third</li>
</ul>
When I remove the line: width: calc(100%/3), it centers properly
You should not calculate the width when you are using flex layout, because that is what flex is itself supposed to do.
If you are looking to align the text inside of the lis then text-align is what you need. You should also remove the width from the lis and use the flex property instead.
Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
#flex-container {
list-style-type: none;
width: 70%; display: flex;
}
li {
flex: 1 1 auto;
background-color: tomato; border: 1px solid #fff;
text-align: center;
}
<ul id="flex-container">
<li class="flex-item">First</li>
<li class="flex-item">Second</li>
<li class="flex-item">Third</li>
</ul>
If you are looking to have variable width lis then justify-content is what you need. You should control the width via the width property and use flex property as required to expand or shrink.
Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
#flex-container {
list-style-type: none; width: 70%;
display: flex; justify-content: center;
background-color: #eee;
}
li {
flex: 0 0 auto; width: 15%;
background-color: tomato; border: 1px solid #fff;
}
li:first-child { width: 20%; }
li:last-child { width: 30%; }
<ul id="flex-container">
<li class="flex-item">First</li>
<li class="flex-item">Second</li>
<li class="flex-item">Third</li>
</ul>
I modified your code:
http://jsfiddle.net/hrr65ajr/2/
#flex-container {
width: 70%;
list-style-type: none;
padding: 0;
margin: 0;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-justify-content: center;
justify-content: center;
}
li {
box-sizing: border-box;
background-color: tomato;
margin: auto;
width: calc(100%/3);
text-align: center;
}
<ul id="flex-container">
<li class="flex-item">First</li>
<li class="flex-item">Second</li>
<li class="flex-item">Third</li>
</ul>
Try this:
HTML
<div class="center">
<ul id="flex-container">
<li class="flex-item">First</li>
<li class="flex-item">Second</li>
<li class="flex-item">Third</li>
</ul>
</div>
CSS
.center {
display:flex;
-webkit-justify-content: center;
justify-content: center;
}
#flex-container {
width: 70%;
list-style-type: none;
padding: 0;
margin: auto 0;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-justify-content: center;
justify-content: center;
}
li {
box-sizing: border-box;
background-color: tomato;
width: calc(100%/3);
}
I have a top menu made by a list. All <li>s centers depending on the text though I want to center one the <li>s and then the rest of the <li>s should center on both sides. I want to center the image.
The top menu looks like this:
<div id="topMenu">
<ul>
<li>Forside</li>
<li>Kampe</li>
<li>Truppen</li>
<li><img id="logoMenu" src="images/logo.png"></li>
<li>Galleri</li>
<li>Statistik</li>
<li>Om Klubben</li>
</ul>
</div>
Then I have some CSS:
#topMenu {
background: #51a047;
width: 100%;
height: 50px;
line-height: 25px;
margin: 0 auto;
}
#topMenu ul {
list-style-type: none;
margin: 0;
padding: 10px;
text-align: center;
}
#topMenu li {
display: inline;
padding: 0 20px;
text-transform: uppercase;
}
#logoMenu {
background-image: url("images/logo.png");
width: 80px;
}
#topMenu img {
vertical-align: text-top;
}
Here's a jsFiddle
Personally I wouldn't have the logo as an element in the navigation. Semantically it doesn't make sense and its difficult to style. If you divide the menu items in to two ULs you can do the following:
HTML
<div id="topMenu">
<ul id="menu-left">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<img src="URL" />
<ul id="menu-right">
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
</ul>
</div>
CSS
#topMenu {
background: #51a047;
width: 100%;
height: 50px;
line-height: 25px;
margin: 0 auto;
position: relative;
}
#topMenu ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 10px;
box-sizing: border-box; /* percentage width + padding */
width: 45%;
position: absolute;
top: 0;
}
#topMenu #menu-left {
left: 0;
}
#topMenu #menu-right {
right: 0;
}
#topMenu li {
display: inline;
padding: 0 20px;
text-transform: uppercase;
}
#topMenu a {
color: white;
text-decoration: none;
}
#logoMenu {
display: block;
width: 10%;
margin: 0 auto; /*center*/
}
#topMenu img {
margin: 0 auto;
display: block;
max-height: 100%;
max-width: 100%;
}
https://jsfiddle.net/vvu5k79r/2/