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
Related
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.
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;
}
I am working on a project where we aren't allowed to touch the html, but instead, design a CSS page with flex box and whatnot to alter the design. The html code has links to other CSS page designs for this project with the design type, and the designer name. I want to put these two links in the same circle box. If you run the code, you'll see the design name and the designer name are in the same circle - how do I go about putting them in the same circle? I believe theres a way to without altering the html since the design is in "class="design-name" and the designer is in "class="designer-name". In the code, it looks like this:
body {
margin: 1%;
padding: 1%;
font-family: 'Playfair Display', serif;
font-family: 'Prata', serif;
}
header {
background-color: red;
font-family: 'Playfair Display', serif;
font-family: 'Prata', serif;
}
header h1 {
font-size: 72px;
}
.design-name {
color: black;
}
.designer-name {
color: black;
}
.designer-name li a {
background: green;
width: 120px;
height: 120px;
line-height: 115px;
border-radius: 50%;
display: block;
}
nav ul {
text-align: center;
}
nav ul li {
display: inline-flex;
}
li a {
background: red;
box-shadow: black;
width: 120px;
height: 120px;
line-height: 115px;
border-radius: 50%;
display: block;
}
li a:hover {
transition-duration: 300ms;
background: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Prata" rel="stylesheet">
<meta charset="utf-8">
<title>CSS Zen Garden: The Beauty of CSS Design</title>
<link href="zengarden.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Dave Shea">
<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design.">
<meta name="robots" content="all">
<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
</head>
<body id="css-zen-garden">
<div class="page-wrapper">
<aside class="sidebar" role="complementary">
<div class="wrapper">
<div class="design-selection" id="design-selection">
<h3 class="select">Select a Design:</h3>
<nav role="navigation">
<ul>
<li>
Mid Century Modern by Andrew Lohman
</li>
<li>
Garments by Dan Mall
</li>
<li>
Steel by Steffen Knoeller
</li>
<li>
Apothecary by Trent Walton
</li>
<li>
Screen Filler by Elliot Jay Stocks
</li>
<li>
Fountain Kiss by Jeremy Carlson
</li>
<li>
A Robot Named Jimmy by meltmedia
</li>
<li>
Verde Moderna by Dave Shea
</li>
</ul>
</nav>
</div>
</body>
</html>
Any guidance would be awesome!
Desired outcome, with both design name and designer being clickable links:
You can use the css of <a> to the <li>...
Also apply display:flex to the ul and li to adjust the alignment of inner items
Stack Snippet
body {
font: 13px Verdana;
}
nav ul {
text-align: center;
display: flex;
flex-wrap: wrap;
}
nav ul li {
background: red;
width: 120px;
height: 120px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 5px;
color: #fff;
}
nav ul li a {
color: #fff;
}
nav ul li:hover {
transition-duration: 300ms;
background: black;
color: #fff;
}
nav ul li:hover a {
color: #fff;
}
<body id="css-zen-garden">
<div class="page-wrapper">
<aside class="sidebar" role="complementary">
<div class="wrapper">
<div class="design-selection" id="design-selection">
<h3 class="select">Select a Design:</h3>
<nav role="navigation">
<ul>
<li>
Mid Century Modern by Andrew Lohman
</li>
<li>
Garments by Dan Mall
</li>
<li>
Steel by Steffen Knoeller
</li>
<li>
Apothecary by Trent Walton
</li>
<li>
Screen Filler by Elliot Jay Stocks
</li>
<li>
Fountain Kiss by Jeremy Carlson
</li>
<li>
A Robot Named Jimmy by meltmedia
</li>
<li>
Verde Moderna by Dave Shea
</li>
</ul>
</nav>
</div>
</div>
</aside>
</div>
</body>
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>