I want to vertically middle the elements in the "li" but vertical-align: middle; command does not work. Display:table; and Display: table-cell; I tried commands like. I thought about importing the contents as a block but still didn't work. I centered it horizontally but not vertically. I would be glad if you help me.
.navigation {
display: flex;
position: relative;
margin: 0;
padding: 0;
height: 75px;
background: #222327;
align-items: center;
justify-content: center;
}
.navigation ul {
margin: 0;
padding: 0;
display: flex;
width: 750px;
}
.navigation ul li {
position: relative;
list-style: none;
text-align: center;
vertical-align: middle;
width: 150px;
height: 75px;
z-index: 1;
}
<!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">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Astronomical Observers</title>
<link rel="shortcut icon" href="title_logo_transparent.png">
</head>
<body>
<div class="navigation">
<ul>
<li class="nav_list">
<a class="nav_icon" href="#">
<span>
<ion-icon name="home-outline"></ion-icon>
</span>
</a>
<a class="nav_text" href="#">Home Page</a>
</li>
<li class="nav_list">
<a href="#">
<span>
<ion-icon name="newspaper"></ion-icon>
</span>
<span class="text">News</span>
</a>
</li>
</ul>
</body>
</html>
Define the parent withdisplay: table
and the element itself with vertical-align: middle and display: table-cell.
Related
I am trying develop sidebar for my UI, In my sidebar container I took the width in 20vw so that it can be adjustable according to the screen sizes of different laptops and desktop. Next I take the ul as a container to enter first menu in the list item. I am using flex box.
.sidebar {
height: 100vh;
width: 30vw;
background-color: lightgoldenrodyellow;
min-width: 200px;
}
ul {
list-style: none;
display: flex;
flex-flow: row nowrap;
border: 3px solid red;
justify-content: flex-start;
gap: 2rem;
}
li {
background-color: #8cacea;
}
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li><i class="fa fa-balance-scale" style="font-size:24px"></i> </li>
<li>Home</li>
<li>+ </li>
</ul>
</div>
</div>
</body>
</html>
I need to align icon and 2nd element to left side and + icon to the extreme right side which is not possible for me in flex box and second one is that when I reduce the screen size my elements overflow. I don't wrap the element I just want to shrink element at very small extant. When I use gap it evenly create gap all elements and when I tried margin-left:auto its doesn't maintain the gap in this case when I reduce the screen size gap doesn't consistent.
Please help to solve this issue.
I need the layout just in purchases menu in the image.
As you wanted to move the first two li to start of the webpage, i put those under a common parent span and applied styles accordingly.
check now.
.sidebar {
height: 100vh;
width: 30vw;
background-color: lightgoldenrodyellow;
min-width: 200px;
}
ul {
list-style: none;
display: flex;
flex-flow: row nowrap;
border: 3px solid red;
justify-content: space-between;
padding: 0;
}
.child1 {
display: flex;
}
li {
background-color: #8cacea;
}
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<span class="child1">
<li>
<i class="fa fa-balance-scale" style="font-size:24px"></i>
</li>
<li>Home 1</li>
</span>
<li>+</li>
</ul>
<ul>
<span class="child1">
<li>
<i class="fa fa-balance-scale" style="font-size:24px"></i>
</li>
<li>Home 2</li>
</span>
<li>+</li>
</ul>
</div>
</div>
</body>
</html>
When wanting to position 2 elements on the same side and another element on the other side, I'd recommend grouping the 2 elements together. Furthermore I wouldn't place every single item in a different list item.
*, *::after, *::before {
box-sizing: border-box;
outline: none;
}
* {
margin: 0;
padding: 0;
}
.sidebar {
height:100vh;
width:30vw;
background-color: lightgoldenrodyellow;
min-width:200px;
}
ul {
list-style: none;
border:3px solid red;
display: flex;
flex-direction: column;
gap: 1em;
}
li {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2em;
background-color: #8cacea;
}
li>div {
display: flex;
align-items: center;
gap: 1em;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="sidebar">
<ul>
<li>
<div>
<i class="fa fa-balance-scale" style="font-size:24px"></i>
<p>Home</p>
</div>
<p>+</p>
</li>
<li>
<div>
<i class="fa fa-balance-scale" style="font-size:24px"></i>
<p>Other</p>
</div>
<p>+</p>
</li>
</ul>
</div>
I am creating a project in HTML,CSS & Flask. Whenever I check my nav bar in the live server 'justify content' is not working, I try to figure out via fixing the sizing of ul & li elements and I give main container 100% width but this way is also not working!
How can I solve and avoid these mistakes when we are using justify-content and also give some tips for using justify-content?
<!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>
<style>
.navbar {
display: flex;
align-items: center;
border-bottom: 2px solid lightgray;
width: 100%;
justify-content: space-between;
justify-items: flex-start;
}
.logo {
color: blueviolet;
font-size: 35px;
width: 110px;
}
.navitems ul {
display: flex;
align-items: center;
width: 350px;
}
li {
color: tomato;
font-weight: 500;
list-style: none;
text-decoration: none;
}
li a {
text-decoration: none;
color: tomato;
padding: 3px;
font-size: 19px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">
xMu5<span class="titel">ic</span>
</div>
<div class="navitems">
<ul>
<li>
<a href="">
Home
</a>
</li>
<li>
<a href="">
Blog
</a>
</li>
<li>
<a href="">
Services
</a>
</li>
<li>
<a href="">
Contact Us
</a>
</li>
<li>
<a href="">
About Us
</a>
</li>
</ul>
</div>
<hr>
</nav>
<br>
<h1>
hi
</h1>
</body>
</html>
Because you add <hr> tag inside <nav class="navbar">. so move it outside <nav class="navbar"> then it works.
You placed a extra hr inside .navbar. I removed it. You have a border-bottom for .navbar so you don't need to hr. Also, justify-items isn't a correct style.
<!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>
<style>
.navbar {
display: flex;
align-items: center;
border-bottom: 2px solid lightgray;
width: 100%;
justify-content: space-between;
/*justify-items: flex-start; (removed) */
}
.logo {
color: blueviolet;
font-size: 35px;
width: 110px;
}
.navitems ul {
display: flex;
align-items: center;
width: 350px;
}
li {
color: tomato;
font-weight: 500;
list-style: none;
text-decoration: none;
}
li a {
text-decoration: none;
color: tomato;
padding: 3px;
font-size: 19px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">
xMu5<span class="titel">ic</span>
</div>
<div class="navitems">
<ul>
<li>
<a href="">
Home
</a>
</li>
<li>
<a href="">
Blog
</a>
</li>
<li>
<a href="">
Services
</a>
</li>
<li>
<a href="">
Contact Us
</a>
</li>
<li>
<a href="">
About Us
</a>
</li>
</ul>
</div>
</nav>
<br>
<h1>
hi
</h1>
</body>
</html>
text-align: center;
Please use the text-align property to align the content to center
i am trying to make an unordered list in the navbar and make anchors inline but the style doesn't apply. the below style of stylish navbar not working . but it applies when i try to change background color
<!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>portfolio</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="header">
<nav class="stylishnavbar">
<h1 class="logo">portfolio</h1>
<ul>
<li >home </li>
<li > about</li>
<li >services </li>
<li > skills</li>
<li >contact </li>
</ul>
</nav>
</div>
</body>
</html>
css style
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.logo{
padding: 5px;
}
.header{
height: 100vh;
width: 100%;
background-image:url(./img/code.jpg) ;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.stylishnavbar{
display: flex;
align-items: center;
}
Flex only applies to the immediate children. Right now, it's just applying to the h1 and ul.
Add
.stylishnavbar > ul { display: flex; }
To apply flex to your list.
I hope this code will solve your problem...
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.logo {
padding: 5px;
}
.header {
height: 100vh;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.stylishnavbar {
display: flex;
align-items: center;
}
nav.stylishnavbar ul {
display: flex;
list-style: none;
}
nav.stylishnavbar ul li{
margin-right: 30px
}
<!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>portfolio</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="header">
<nav class="stylishnavbar">
<h1 class="logo">portfolio</h1>
<ul>
<li>home </li>
<li> about</li>
<li>services </li>
<li> skills</li>
<li>contact </li>
</ul>
</nav>
</div>
</body>
</html>
Hey I want to make a navbar with flexbox.
How to make all 3 li's spread across entire ul with even space between li's? Here is my code and its not working :( I tried justify content: space-around and it doesnt work. The li's are still close to each other
/** global element styling **/
#import 'https://fonts.googleapis.com/css?family=Lato:400,700';
body {
background-color: #eee;
font-family: 'Lato', sans-serif;
}
.logo {
flex-basis:40%;
border: 1px solid red;
}
.logo img {
width:100%;
max-width: 300px;
}
header {
display: flex;
}
header nav {
border: 1px solid black;
width: 60%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
header nav ul {
}
#nav-bar ul li {
display: inline-flex;
justify-content: space-between;
flex: 1;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Product Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="page-wrapper">
<!--Header-->
<header id="header">
<!-- Logo -->
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo" />
</div>
<!-- Nav bar -->
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricng">Pricing</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>
I want Feaures, How it works and pricing to all have 33% of ul
the "flex" and justify-content goes in the parent element (ul).
like this:
/** global element styling **/
#import 'https://fonts.googleapis.com/css?family=Lato:400,700';
body {
background-color: #eee;
font-family: 'Lato', sans-serif;
}
.logo {
flex-basis:40%;
border: 1px solid red;
}
.logo img {
width:100%;
max-width: 300px;
}
header {
display: flex;
}
header nav {
border: 1px solid black;
width: 60%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
header nav ul {
display: inline-flex;
justify-content: space-between;
flex: 1;
}
#nav-bar ul li {
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Product Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="page-wrapper">
<!--Header-->
<header id="header">
<!-- Logo -->
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo" />
</div>
<!-- Nav bar -->
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricng">Pricing</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>
I have the following code, something is calculating too much height, that I can't see the footer and this causes scrolling when there should be no scrolling.
*note: I am using reactjs, sass so this is why I may have some extra wrappers and maybe some of the css is duplicated as I had to take it out of the nesting.
body,
html {
height: 100%;
margin: 0;
}
.hidden {
display: none !important;
}
ul.sidebar-menu {
padding: 0;
li a {
padding: 10px;
font-size: 1.1em;
display: block;
color: blue;
}
}
nav {
background-color: blue;
color: white;
flex: 0 auto;
height: 100%;
}
header,
footer {
background-color: blue;
color: white;
min-height: 50px;
}
.wrapper {
display: flex;
flex-flow: row wrap;
height: 100vh;
}
header {
flex: 0 0 100%;
}
main {
flex: 2 auto;
display: block;
}
footer {
flex: 1 1 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="wrapper">
<header>
header
</header>
<nav>
<ul class="sidebar-menu">
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
</ul>
</nav>
<main>
main
</main>
<footer>footer</footer>
</div>
</div>
</body>
</html>
Also for my ul.sidebar-menu how would I add scrolling to this area. I guess I have to set a height for it?
I've tryed something here that should do the job with the scrollbar when too much content https://jsfiddle.net/fnvgho41/11/
Needed to wrap you nav & main with a section to manage easily the height.
body,
html {
height: 100%;
margin: 0;
}
.hidden {
display: none !important;
}
ul.sidebar-menu {
padding: 0;
margin: 0;
li a {
padding: 10px;
font-size: 1.1em;
display: block;
color: blue;
}
}
.body {
flex: 1 1 auto;
display: flex;
flex-direction: row;
}
nav {
background-color: blue;
color: white;
flex: 0 0 100px;
overflow: auto;
max-height: 100%;
}
main {
flex: 1 0 auto;
overflow: auto;
max-height: 100%;
}
header,
footer {
flex: 0 1 auto;
width: 100%;
background-color: blue;
color: white;
min-height: 50px;
}
.wrapper {
display: flex;
flex-flow: nowrap;
flex-direction: column;
height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="wrapper">
<header>
header
</header>
<div class="body">
<nav>
<ul class="sidebar-menu">
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
</ul>
</nav>
<main>
main
</main>
</div>
<footer>footer</footer>
</div>
</div>
</body>
</html>
Remove the height: 100%; from your nav element
nav {
background-color: blue;
color: white;
flex: 0 auto;
}