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;
}
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
After I was done working on side bar I wanted to head to the content page to the right so I added a container div that I wanted to set to flex So that I make the two boxes to start styling, but right after adding it, the footer's position is ruined and the side bar isn't taking as much space as it should.
Here's a picture:
.side-bar {
font-family: 'Montserrat', sans-serif;
font-size: large;
font-weight: bold;
display: flex;
justify-content: left;
background-color: rgb(235, 235, 235);
width: 20%;
height: 80%;
flex-direction: column;
}
.side-bar ul {
display: flex;
flex-direction: column;
margin-left: 0%;
list-style: none;
margin-top: 5%;
}
.side-bar ul li {
margin-bottom: 10px;
display: inline;
cursor: pointer;
}
.togglable:hover {
border-radius: 7px;
background-color: rgb(216, 216, 216);
}
.togglable:active {
background-color: rgb(221, 221, 221);
}
.side-bar ul a {
color: black;
text-decoration: none;
}
.side-bar h2 {
font-family: 'Josefin Sans', sans-serif;
margin-bottom: 20px;
}
.container {
display: flex;
}
.task-container {
background-color: red;
}
<!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>ToDoList</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav-bar">
<img src="logo.png" alt="logo">
<nav>
<ul>
<li>Services</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
<a class="cta" href="#"><button>Contact</button></a>
</div>
<div class="container">
<div class="side-bar">
<ul>
<li class="togglable"><img src="gym.png" alt="gym" id="gym">Gym</li>
<li class="togglable"><img src="today.png" alt="calendar" id="today"> Today</li>
<li class="togglable"><img src="week.png" alt="calendar" id="week">This Week</li>
<li class="togglable"><img src="month.png" alt="calendar" id="month"> This Month</li>
<h2>Projects : </h2>
<li id="addPr" class="togglable"><span id="plus-sgn">+</span> Add Project</li>
<!-- <li class="togglable"><img src="checklist.png" alt="checlist" id="list"> Testing</li> -->
</ul>
</div>
<div class="task-container">
<p>Some Text To test the box</p>
</div>
</div>
<div class="footer">
<p id="copyright">Copyright © 2021 FaroukHamadi</p>
</div>
<script src="main.js"></script>
</body>
</html>
Add width attribute to task-contianer and add your fotter class attribute on your CSS file.
.task-container {
background-color: red;
width: 100%;
}
.footer{
position: absolute;
bottom: 0px;
width: auto;
}
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 am trying to have a navigation bar that doesn't have any extra space on the sides and on the top and bottom. However nothing seems to be. Is there a way I can fix this. An example of how I would like my navigation bar to look is dootrix.com
Here is an image to illustrate what the problem is: image
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
ABOUT
</li>
<li>
PRODUCTS
</li>
<li>
COUPONS
</li>
<li>
FEEDBACK
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>
You have to disable the margin (https://www.w3schools.com/css/css_margin.asp) of your body tag. You can do this in your css. Look at what I did at the top of this css file. That should work.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
ABOUT
</li>
<li>
PRODUCTS
</li>
<li>
COUPONS
</li>
<li>
FEEDBACK
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>