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>
Related
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
So I have the following html code
header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo {
max-width: 60px;
padding: 5px;
}
.navigation {
align-self: flex-end;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #c5f3f7;
}
.banner {
margin-top: 30px;
}
<!doctype html>
<html>
<head>
<title>HTML Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<img src="logo.png">
</div>
<nav class="navigation">
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="banner">
<img src="pagebanner.png" alt="page banner">
</div>
</body>
</html>
However the banner image does not take up the full width of the page. Instead, it is very small. I have tried doing width = 100% but this does not fix it. What can I do to make the banner image full width?
I just added width: 100%; at the img, everything is fine for me.
header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo {
max-width: 60px;
padding: 5px;
}
body > header > div > img {
width: 7rem;
}
.navigation {
align-self: flex-end;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #c5f3f7;
}
body > div > img {
width: 100%;
}
.banner {
margin-top: 30px;
}
<header>
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png">
</div>
<nav class="navigation">
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="banner">
<img src="https://www.sci-techdaresbury.com/wp-content/uploads/2019/09/back_doitbetter-1200x300.jpg" alt="page banner">
</div>
This is an easy fix. All you need is a little CSS in the img link itself.
<!doctype html>
<html>
<head>
<title>HTML Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<img src="logo.png">
</div>
<nav class="navigation">
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="banner">
<img src="pagebanner.png" alt="page banner" style="width:100%;">
</div>
</body>
</html>
And if you want it to fit the entire page and not just left and right, paste this to where the img link is
<img src="pagebanner.png" alt="page banner.png" alt="page banner" style="width:100%;hight:100%;">
Remove the banner style from the css code and you should be good to go
One solution would be to make the image your background-image with the following styles associated. I inserted a dummy-image to reflect how your image would display.
header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo {
max-width: 60px;
padding: 5px;
}
.navigation {
align-self: flex-end;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #c5f3f7;'
height: 20vh;
}
.banner {
background-image: url('https://dummyimage.com/600x400/000/fff&text=pagebanner');
background-size: cover;
background-position: center;
height: 80vh;
}
body {
margin: 0;
}
<!doctype html>
<html>
<head>
<title>HTML Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<img src="logo.png">
</div>
<nav class="navigation">
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="banner">
</div>
</body>
</html>
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;
}
I am creating a navigation bar. I want the bottom border line to appear at the bottom of the navigation bar, like this:
But what i am getting out of my code is this:
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>batman</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<a href="#" class="logo">
<img src="./img/bat_logo.png" alt="batman" />
</a>
<nav>
<ul style="list-style-type: none;">
<li> Villains </li>
<li> Identity </li>
<li> Movies </li>
</ul>
</nav>
</div>
</body>
</html>
My CSS:
.logo {
float: left;
height: 50px;
}
#header {
padding: 5px 0px;
border-bottom: 1px solid;
}
Use flex with justify-content: space-between on the parent and you can also use align-items to vertically align things. Also changed <div id="header"> to <header id="header">, because it seems like a more semantically appropriate element.
img {
max-width: 50px;
}
.logo {
height: 50px;
display: block;
}
#header {
padding: 5px 0px;
border-bottom: 1px solid;
display: flex;
justify-content: space-between;
align-items: center;
}
nav li {
display: inline-block;
}
<header id="header">
<a href="#" class="logo">
<img src="https://images.coplusk.net/projects/19697/steps/33014/normal_big_cartoon_batman_symbol_1250787261.jpg" alt="batman" />
</a>
<nav>
<ul style="list-style-type: none;">
<li> Villains </li>
<li> Identity </li>
<li> Movies </li>
</ul>
</nav>
</header>
Yoy should use width and float on #header which is main wrapper. With that you should add ul li{float:left}
.logo {
float: left;
height: 50px;
}
#header {
padding: 5px 0px;
border-bottom: 1px solid;
display:block;
float:left;
width:100%;
}
ul li{float:left}
Codepen link: https://codepen.io/bravotanmoy/pen/qjZEbb
This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<title>Main Page</title>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills-justified">
<li><a href "#">about</a></li>
<li><a href "#">blog</a></li>
<li><a href "#">portfolio</a></li>
<li><a href "#">contact</a></li>
</ul>
</div>
</div>
</div>
<script src="js/bootstrap.js">
</script>
</body>
</html>
I want the text in the navbar to be centered-fixed-top.
Here i've posted simple navigation bar with centered nav text. you can use this...
HTML
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav-pills-justified">
<li>about</li>
<li>blog</li>
<li>portfolio</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
CSS
.nav-pills-justified
{
text-align: center;
width: 100%;
min-width:980px;
background: #EDEDED;
color: #000000;
height: 50px;
list-style-type: none;
}
.nav-pills-justified li
{
display: inline-block;
}
.nav-pills-justified li a
{
text-decoration: none;
padding: 15px 25px;
display: inline-block;
}
.nav-pills-justified li a:hover
{
background: red;
}
DEMO
.nav-pills-justified {
height:50px;
list-style-type:none;
}
.nav-pills-justified li {
display: inline-block;
margin-bottom:1000px;
margin-left:250px;
width:1px;
font-size: 20px;
}
.nav-pills-justified li a {
display: inline-block;
}