In menu item, i am using display: Flex
on hover there is space between items
Used: Align-content: stretch but no result
see image: space showing
My Code
.menu {
display: flex;
justify-content: space-between;
}
.menu li {
display: flex;
padding: 10px;
}
.menu li:hover {
background-color: #ddd;
}
.menu li a {
display: flex;
flex-direction: column;
align-items: center;
}
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<ul
class="menu dflx border-top-light px-10 container py-10 justify-between items-center"
>
<li>
<i class="fa-solid fa-magnifying-glass"></i> Explore
</li>
<li>
<i class="fa-solid fa-location-dot"></i> Attractions
</li>
<li>
<i class="fa-regular fa-star"></i> Latest Deals
</li>
<li>
<i class="fa-solid fa-bars"></i> Menu
</li>
</ul>
Just use flex: 1; justify-content: center; in .menu li
Working example
.menu {
display: flex;
justify-content: space-between;
}
.menu li {
display: flex;
padding: 10px;
flex: 1;
justify-content: center;
}
.menu li:hover {
background-color: #ddd;
}
.menu li a {
display: flex;
flex-direction: column;
align-items: center;
}
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<ul
class="menu dflx border-top-light px-10 container py-10 justify-between items-center"
>
<li>
<i class="fa-solid fa-magnifying-glass"></i> Explore
</li>
<li>
<i class="fa-solid fa-location-dot"></i> Attractions
</li>
<li>
<i class="fa-regular fa-star"></i> Latest Deals
</li>
<li>
<i class="fa-solid fa-bars"></i> Menu
</li>
</ul>
Related
My 3 images need to be in screen center. I use flexbox. After adding size to images all of them go to left. Also I can't throw off margin
This is what I need
This is what I have
My cod:
.collection {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
}
<ul class="collection">
<li><img class="col-img" src="images/bouquets.jpeg" alt=""><p class="col-text">Букети</p></li>
<li><img class="col-img" src="images/natural_flowers.jpeg" alt=""><p class="col-text">Живі квіти</p></li>
<li><img class="col-img" src="images/own_bouquet.png" alt=""><p class="col-text">"Свій" букет</p></li>
</ul>
This can be solved by absolutely positioning your p tag on top of your image. Use translate and top/left rules to move it to the center. Also make the a tag as display:block so it effectively covers the image. See below.
Edited:
There were a few small tweaks, the a tag had a 3 pixels below it which are space for descenders. This has been removed using line-height and means that images stack directly on top of each other. In the comments it was also stated that the images needed to be cropped and centered. This was done with display: flex on the anchor tag and then using align-self: center to prevent it from shrinking to the size of the parent div. Finally they were cropped using overflow:hidden. Now that the anchor tag is using flexbox the need to use inset and translate isn't needed as they center anyway.
Hope this helps
.collection {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 0;
}
a {
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: white;
line-height:1;
height: 200px;
overflow: hidden;
box-shadow: 0px 0px 20px 2px #757575;
}
a p {
position: absolute;
background-color: #A6BFEA;
padding: 1rem 2rem;
margin: 0;
box-shadow: 0px 0px 20px 2px #757575;
line-height:normal;
}
img {
align-self:center;
translate: auto -50%;
}
<ul class="collection">
<li>
<a href="#">
<img class="col-img" src="https://placekitten.com/500/300" alt="">
<p class="col-text">Букети</p>
</a>
</li>
<li>
<a href="#">
<img class="col-img" src="https://www.fillmurray.com/500/300" alt="">
<p class="col-text">"Свій" букет</p>
</a>
</li>
<li>
<a href="#">
<img class="col-img" src="https://www.placecage.com/500/300" alt="">
<p class="col-text">"Свій" букет</p>
</a>
</li>
</ul>
.collection {
list-style: none;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
Something like this?
li {
margin-bottom: 3rem;
}
.collection {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.container p {
position: absolute;
background: green;
color: white;
}
<ul class="collection">
<li>
<a href="#">
<div class="container">
<img class="col-img" src="https://dummyimage.com/300x150/000/fff" alt="">
<p class="col-text">Букети</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="container">
<img class="col-img" src="https://dummyimage.com/300x150/000/fff" alt="">
<p class="col-text">Букети</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="container">
<img class="col-img" src="https://dummyimage.com/300x150/000/fff" alt="">
<p class="col-text">Живі квіти</p>
</div>
</a>
</li>
</ul>
I am using React and this should be a very simple task yet I am stuck. I cannot get the home container to span the width of my page
Here is my Css code, I originally had two Css files one for the Nav and one for the Home section but started playing around trying to figure out where I went wrong. I have basically now stripped my css and code it all the way down still cant figure out why it wont span completely from side to side
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.site-title {
font-size: 2rem;
}
.nav {
background-color: #333;
color: antiquewhite;
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 2rem;
padding: 0 1rem;
}
.nav ul{
display: flex;
gap: 1rem;
padding: 0%;
margin: 0%;
list-style: none;
}
.nav a{
display: flex;
color: inherit;
text-decoration: none;
height: 100%;
align-items: center;
padding: .55rem;
}
.nav li.active {
background-color: #555;
}
.nav li:hover{
background-color: #777;
}
.home-container {
background-color: #111;
}
.home-parent {
display: flex;
align-items: center;
color: aliceblue;
}
My HTML
import Typical from "react-typical";
export default function Home() {
return (
<div className="home-container">
<div className="home-parent">
<div className="profile-details">
<div className="colz">
<div className="colz-icon">
<a href="#">
<i className="fa fa-facebook-square"></i>
</a>
<a href="#">
<i className="fa fa-instagram"></i>
</a>
<a href="#">
<i className="fa fa-youtube-square"></i>
</a>
<a href="#">
<i className="fa fa-twitter"></i>
</a>
</div>
</div>
<div className="Home-details-name">
<span className="primary-text">
{""}
Hello, I'm <span className="highlighted-text">Heather</span>
</span>
</div>
<div className="home-details-role">
<span className="primary-text">
{""}
<h1>
<Typical
loop={Infinity}
steps={[
"Fullstack Dev",
1000,
"Web Design",
1000,
"Data bases",
1000,
"Tech Support",
1000,
]}
/>
</h1>
<span className="home-role-tagline">
Knack for building applications with front and backend
operations
</span>
</span>
</div>
<div className="profile-options">
<button className="btn primary-btn">
{""}
Hire Me{""}
</button>
<a
href="Heather-Christensen.pdf"
download="Heather-Christensen.pdf"
>
<button className="btn highlighted-btn">Get Resume</button>
</a>
</div>
</div>
<div className="profile-picture">
<div className="profile-picture-background"></div>
</div>
</div>
</div>
);
}
I'm trying to learn more about flex.
I want to add more columns to a flex layout but I can only get two columns.
When I try to add a third column, the div's just stack.
Here's the two col version and my attempt to get a third column...
http://brinsterinc.com/footer.html
http://brinsterinc.com/footer1.html
Here's the CSS...
footer[is=footer] {
background: hsl(var(--tertiary));
display: grid;
gap: 3rem;
grid:
"menu"
"menu1"
"menu2"
"policies"
"copyright";
padding: clamp(4rem,8vw,8rem) max((100% - 80rem) / 2,4vw);
}
footer[is=footer]>div>ul {
all: unset;
display: flex;
flex-flow: column wrap;
gap: 1rem;
}
footer[is=footer]>div:nth-of-type(1) {
display: flex;
flex-direction: column;
gap: 2rem 4rem;
grid-area: menu;
}
footer[is=footer]>div:nth-of-type(2) {
display: flex;
flex-direction: column;
gap: 2rem 4rem;
grid-area: menu1;
}
footer[is=footer]>div:nth-of-type(3) {
display: flex;
flex-direction: column;
gap: 2rem 4rem;
grid-area: menu2;
}
footer[is=footer]>div:nth-of-type(4) {
grid-area: policies;
}
footer[is=footer]>p {
all: unset;
color: hsl(var(--on-tertiary));
grid-area: copyright;
}
#media (min-width: 50em) {
footer[is=footer] {
grid: "menu menu1 menu2" "copyright policies" / -webkit-max-content 1fr;
grid:
"menu menu1 menu2"
"copyright policies" / max-content 1fr;
place-items: start;
}
footer[is=footer]>div:nth-of-type(4)>ul {
-moz-column-gap: clamp(1rem,4vw,2rem);
column-gap: clamp(1rem,4vw,2rem);
flex-direction: row;
}
}
Put a flex wrapper round the items you want to put in a column. I think the grid markup is causing some problems though, you're allocating them to different grid areas and without setting grid-template-rows or grid-auto-rows, the child divs will stack on top of each other.
footer[is=footer] {
background: hsl(var(--tertiary));
/* display: grid;
gap: 3rem;
grid:
"menu"
"menu1"
"menu2"
"policies"
"copyright";
padding: clamp(4rem, 8vw, 8rem) max((100% - 80rem) / 2, 4vw); */
}
.flexContainer {
display: flex;
}
.flexContainer div {
flex: 1 0 auto;
}
footer[is=footer]>div>ul {
/* all: unset;
display: flex;
flex-flow: column wrap;
gap: 1rem; */
}
footer[is=footer]>div:nth-of-type(1) {
/* display: flex;
flex-direction: column;
gap: 2rem 4rem;
grid-area: menu; */
}
footer[is=footer]>div:nth-of-type(2) {
/* display: flex;
flex-direction: column; */
/* gap: 2rem 4rem;
grid-area: menu1; */
}
footer[is=footer]>div:nth-of-type(3) {
/* display: flex;
flex-direction: column; */
/* gap: 2rem 4rem;
grid-area: menu2; */
}
footer[is=footer]>div:nth-of-type(4) {
/* grid-area: policies; */
}
footer[is=footer]>p {
/* all: unset;
color: hsl(var(--on-tertiary));
grid-area: copyright; */
}
/* #media (min-width: 50em) {
footer[is=footer] {
grid: "menu menu1 menu2""copyright policies" / -webkit-max-content 1fr;
grid:
"menu menu1 menu2"
"copyright policies" / max-content 1fr;
place-items: start;
}
footer[is=footer]>div:nth-of-type(4)>ul {
-moz-column-gap: clamp(1rem, 4vw, 2rem);
column-gap: clamp(1rem, 4vw, 2rem);
flex-direction: row;
}
} */
<footer is="footer">
<div class="flexContainer">
<div>
<ul>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
</ul>
</div>
<div class="oakhide">
<ul>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
</ul>
</div>
</div>
<div>
<ul>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
<li>
<a href="">
link
</a>
</li>
</ul>
</div>
<p><small>Copyright © 2022</small></p>
</footer>
The problem is this image, I want to make it circular, I used border-radius:50% and set equal height and width. I searched for the question and found this one How to make a circular image in css and I tried to make something similar but I used flexbox.
<div className='nav-bar'>
<ul className='nav-links'>
<li className='nav-link'>
<Link >
Home
</Link>
</li>
<li className='nav-link'>
<Link >
Add question
</Link>
</li>
<li className='nav-link'>
<Link >
Leaderboard
</Link>
</li>
</ul>
<ul className='nav-user-sign-out'>
<li className='nav-item'>
<p>Welcome, </p>
</li>
<li className='nav-item'>
<div className='avatar'>
<img src={} alt='' />
</div>
</li>
<li className='nav-item'>
<button className='sign-out'>
Sign out
</button>
</li>
</ul>
</div>;
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-links {
display: flex;
}
Link {
padding: 10px;
}
.nav-user-sign-out {
display: flex;
align-items: center;
justify-content: space-around;
}
.sign-out {
padding: 10px;
}
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
}
img {
height: 100%;
width: 100%;
}
Either make height and width of fixed and equal value or if you are using percentage confirm to that image has same width and height.
I just made a codesandbox with your code, and it's working without an issue, maybe the issue is with another CSS class that declared somewhere else, or maybe the object-fit property on the image. I'll put the link to my sandbox here, feel free to go ahead and try it with your code. I added object-fit to the image styles there.
working example
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-links {
display: flex;
}
Link {
padding: 10px;
}
.nav-user-sign-out {
display: flex;
align-items: center;
justify-content: space-around;
}
.sign-out {
padding: 10px;
}
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
}
img {
height: 100px;
width: 105px;
border-radius: 50%;
}
<div className='nav-bar'>
<ul className='nav-links'>
<li className='nav-link'>
<Link >
Home
</Link>
</li>
<li className='nav-link'>
<Link >
Add question
</Link>
</li>
<li className='nav-link'>
<Link >
Leaderboard
</Link>
</li>
</ul>
<ul className='nav-user-sign-out'>
<li className='nav-item'>
<p>Welcome, </p>
</li>
<li className='nav-item'>
<div className='avatar'>
<img src="https://media.sproutsocial.com/uploads/2015/02/Facebook_Embed.png" alt=''width ="200" />
</div>
</li>
<li className='nav-item'>
<button className='sign-out'>
Sign out
</button>
</li>
</ul>
</div>
I want to style my unordered list like this one below
Link to what i want to achive
My structure looks like:
<div class="tabs">
<ul class="tabs__labels">
<li class="0">
<a class="active" href="#">
<img/>
<div>something</div>
</a>
</li>
<li class="1">
<a class="" href="#">
<img/>
<div>something1</div>
</a>
</li>
...
</ul>
</div>
Is it a good idea to name the list classes like 0,1 etc. and style them separately to somehow achive this effect? How to use flexbox to get similar effect? Should i group them into rows?
Would this be a start?
.tabs__labels {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
}
.tabs__labels li {
flex-basis: 45%;
margin: 20px 0;
padding: 0;
}
.tabs__labels li:nth-child(odd) {
display: flex;
justify-content: flex-end;
}
.tabs__labels li:nth-child(even) {
display: flex;
}
.tabs__labels li:nth-child(3),
.tabs__labels li:nth-child(4) {
flex-basis: 35%;
}
.tabs__labels li a {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
border-radius: 50%;
border: 1px solid red;
text-decoration: none;
}
.tabs__labels li:nth-child(1)::before {
content: 'some text';
text-decoration: underline;
margin-right: 10px;
}
.tabs__labels li:nth-child(2)::after {
content: 'some text';
text-decoration: underline;
margin-left: 10px;
}
<div class="tabs">
<ul class="tabs__labels">
<li>
<a class="active" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
</ul>
</div>