This question already has an answer here:
Proper use of flex properties when nesting flex containers
(1 answer)
Closed 2 years ago.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins' , sans-serif;
}
header{
height: 10vh;
width: 90%;
margin: auto;
align-items: center;
display: flex;
}
nav {
flex:1;
background-color: darkorchid;
}
.nav-links {
display: flex;
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 18px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="decorate.css">
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<header>
<nav>
<ul class = "nav-links">
<li ><a class="nav-link" href="#">education</a></li>
<li ><a class="nav-link" href="#">work</a></li>
<li ><a class="nav-link" href="#">certificates</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
This outputs the expected results with the space between navigation links . whereas the below code has a different output when div is included.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins' , sans-serif;
}
header{
height: 10vh;
width: 90%;
margin: auto;
align-items: center;
display: flex;
}
nav {
flex:1;
background-color: darkorchid;
}
.nav-links {
display: flex;
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 18px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="decorate.css">
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul class = "nav-links">
<li ><a class="nav-link" href="#">education</a></li>
<li ><a class="nav-link" href="#">work</a></li>
<li ><a class="nav-link" href="#">certificates</a></li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
why does including the tag give a different output even when the div tag is not used in CSS . I am novice , so I might not be understanding some of the concepts in both HTML and CSS .
header has display: flex wich is why the nav can grow, if you put the container div around the nav without display flex. it cant anymore.
adding display: flex to the container fixes this issue
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins' , sans-serif;
}
header{
height: 10vh;
width: 90%;
margin: auto;
align-items: center;
}
.container{display: flex;}
nav {
flex:1;
background-color: darkorchid;
}
.nav-links {
display: flex;
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 18px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="decorate.css">
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul class = "nav-links">
<li ><a class="nav-link" href="#">education</a></li>
<li ><a class="nav-link" href="#">work</a></li>
<li ><a class="nav-link" href="#">certificates</a></li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
because div is a block element that means it sets your tag into a block or a square which uses the whole line where as without div it works as inline elements which only occupy the space bounded by the tags
Related
I want to change horizontal navigation bar go through a line to other edge in the same color.
Expected:
What I got:
To make it happen, I tried entirely different ways like：
adding more buttons
using horizontal line with same color
All attempts failed.
Can anyone help me to make it happen?
This is my code:
.ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #333;
}
.li {
float: left;
}
.li a {
display: block;
color: blue;
background-color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.li a:hover {
background-color: #9900cc;
}
<!doctype html>
<html lang="EN">
<head>
<link rel="stylesheet" href="src/styles/styles.css">
<title>My shopping cart</title>
</head>
<body>
<ul class="ul">
<li class="li">Home</li>
<li class="li">News</li>
<li class="li">Contact</li>
<li class="li">About</li>
</ul>
</body>
</html>
Use a <nav> to enclose the <ul>.
nav {
background: #333;
overflow: auto;
}
.ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #333;
}
.li {
float: left;
}
.li a {
display: block;
color: blue;
background-color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.li a:hover {
background-color: #9900cc;
}
<!doctype html>
<html lang="EN">
<head>
<link rel="stylesheet" href="src/styles/styles.css">
<title>My shopping cart</title>
</head>
<body>
<nav>
<ul class="ul">
<li class="li">Home</li>
<li class="li">News</li>
<li class="li">Contact</li>
<li class="li">About</li>
</ul>
</nav>
</body>
</html>
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
I've had an issue with my header. The nav links I have just won't go to the center no matter what I do. Here are the codes.
Can anyone tell me why isn't it working ?
body {
background-color: black;
color: #6e07a6;
font-size: 16px;
font-family: 'Poppins', sans;
font-weight: 400;
}
.header-part {
width: 100%;
height: 5rem;
background-color: #6e07a6;
color: white;
margin: 0;
padding: 0;
top: 0;
}
.nav-links {
display: flex;
list-style: none;
text-decoration: none;
justify-content: space-evenly;
align-items: center;
}
<div class="header-container">
<div class="header-part">
<header id="header">
<ul class="nav-links">
<li class="nav-link">Home</li>
<li class="nav-link">Projects</li>
<li class="nav-link">Contact</li>
<li class="nav-link"><span class="sign-in">Sign in / Login</span></li>
</ul>
</header>
</div>
</div>
<div class="main-page"></div>
body {
background-color: black;
color: #6e07a6;
font-size: 16px;
font-family: 'Poppins', sans;
font-weight: 400;
}
.header-part {
width: 100%;
height: 5rem;
background-color: #6e07a6;
color: white;
margin: 0;
padding: 0;
top: 0;
display: flex;
align-items: center;
}
#header {
display: flex;
align-items: center;
width: 100%;
}
.nav-links {
display: flex;
list-style: none;
text-decoration: none;
justify-content: space-evenly;
align-items: center;
width: 100%;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test site</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
</head>
<body>
<div class="header-container">
<div class="header-part">
<header id="header">
<ul class="nav-links">
<li class="nav-link">Home</li>
<li class="nav-link">Projects</li>
<li class="nav-link">Contact</li>
<li class="nav-link"><span class="sign-in">Sign in / Login</span></li>
</ul>
</header>
</div>
</div>
<div class="main-page">
</div>
</body>
</html>
I set the display types for your wrapping elements, and also defined their width to fill the purple area. By default they are set to display: block;
they are in center , the thing is your ul height doesn't match to your header
add this line to .nav-links
height : 5rem;
Here is the code I tried to make nav bars with. I have troubles to get familylink at the left then the population in the middle and the contact in the right. I tried to add and remove padding but I cannot find a way.
.buttons {
background-color: #0d3c4b;
border: none;
color: white;
padding: 15px 32px;
padding-left: 674px;
padding-right: 467px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.navbar {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Welcome</title>
<div class="navebar">
<ul class="buttons">
<li style="display:inline-block;" classe="family">
The Family</li>
<li style="display:inline-block;">
Population</li>
<li style="display:inline-block;">
Contact</li>
</ul>
</div>
</head>
<body>
</body>
</html>
I'm looking it to make it more presentable.
Your css missing family class and in html you have classe instead of class="family"
Also <div class="navebar"> should be <div class="navbar">
The spelling of the class navbar in your HTML is wrong, you can change it to navbar from navebar and then for the css use padding: 0;
And for the links
#royal { display: flex; justify-content: flex-start; }
#population { display: flex; justify-content: center; }
#contact { display: flex; justify-content: flex-end; }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Welcome</title>
<div class="navbar">
<ul class="buttons">
<li style="display:inline-block;" classe="family">
The Family</li>
<li style="display:inline-block;">
Population</li>
<li style="display:inline-block;">
Contact</li>
</ul>
</div>
</head>
<body>
</body>
</html>
i modified navbar but i can still not find a way to turn buttons as here
Try using a display: flex;
here is brief tutorial
you should use
flex-wrap: nowrap;
for the row to not be for two lines according your previous inline-block styling
and
order: 1-3;
for positioning elements from 1 that is far left to 3 that is all the way to the right
Start with assigning li id so you can do styling for each element
and then assign order 1, 2, 3 for them.
.navebar{
display: flex;
}
#family{
order: 1;
width: 100%;
}
#population{
order: 2;
width: 100%;
}
#contact{
order: 3;
}
<div class="navebar">
<div id="family" >
The Family</div>
<div id="population">
Population</div>
<div id="contact">
Contact</div>
</div>
I'm learning CSS3 and I practicing creating a navbar, that I want to do is to expand the width of input text to 50% into a navbar, I try to apply a class:
.main-nav__searchbar{
width: 50%;
margin: 0;
padding: 0;
}
But it no works
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
margin:0px;
}
#product-overview {
background-color: #ff1b68;
width: 100%;
height: 528px;
padding: 10px;
}
.section-title{
color: #2ddf5c;
}
#product-overview h1{
color:white;
font-family: 'Anton', sans-serif;
}
.main-header{
width:100%;
background: #2ddf5c;
padding:8px 16px;
}
.main-header > div{
display: inline-block;
vertical-align: middle;
}
.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.main-nav__searchbar{
width: 50%;
margin: 0;
padding: 0;
}
.main-nav{
display: inline-block;
text-align: right;
width: calc(100% - 300px);
}
.main-nav__items{
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS course</title>
<link rel="shortcut icon" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a></div>
<div><input type="text" placeholder="search" class="main-nav__searchbar"></div><nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
Packages
</li>
<li class="main-nav__item">
Customers
</li>
<li class="main-nav__item">
Start Hosting
</li>
</ul>
</nav>
</header>
</body>
</html>
Why it does not work if my parent class has display:inline-block property as all my markups there? Regards
Basically, display: inline-block tries to fit all elements in one line. For that reason, your 50% seems very small. If you set it to 100% of the remaining space it is much bigger.
Nevertheless, I believe it is also a good idea to become familiar with flexbox. You can see I used flexbox to re-arrange your navbar.
Now, your elements are nicely spaced between each other. Each of them takes just enough space (you can still adjust the %). Additionally, you achieve a decent level of responsiveness out of the box with flexbox.
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
margin:0px;
}
#product-overview {
background-color: #ff1b68;
width: 100%;
height: 528px;
padding: 10px;
}
.section-title{
color: #2ddf5c;
}
#product-overview h1{
color:white;
font-family: 'Anton', sans-serif;
}
.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
background: #2ddf5c;
padding:8px 16px;
}
.main-header > div{
vertical-align: middle;
}
.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.main-nav__searchbar{
width: 100%;
margin: 0;
padding: 0;
}
.main-nav{
width: 50%;
text-align: right;
}
.main-nav__items{
display: flex;
justify-content: space-evenly;
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS course</title>
<link rel="shortcut icon" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a></div>
<div><input type="text" placeholder="search" class="main-nav__searchbar"></div><nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
Packages
</li>
<li class="main-nav__item">
Customers
</li>
<li class="main-nav__item">
Start Hosting
</li>
</ul>
</nav>
</header>
</body>
</html>
I am trying to push my navbar up and align my navbar up to the label which is supposed to be the logo but I don't know how I can do that ...any help would be appreciated...here is the code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana;
}
html, body {
height: 100%;
}
.container1 {
min-height: 100%;
}
.main {
overflow: auto;
padding-bottom: 50px;
}
div.footer>a {
text-decoration: none;
color: red;
}
div.footer {
background-color: black;
color: white;
position: relative;
height: 50px;
margin-top: -50px;
clear: both;
display: flex;
justify-content: center;
align-items: center;
}
nav ul li a {
text-decoration: none;
background-color: black;
color: white;
font-size: 17px;
margin: 20px;
}
nav ul li {
list-style: none;
}
nav ul.navbar {
display: flex;
justify-content: center;
}
<!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>Home</title>
<link rel='stylesheet' href='../Css/styles.css' </head>
<body>
<nav>
<span><label id='logo'>Logo</label></span>
<ul class='navbar'>
<li><a href='#' class='active'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
<div class='container1'>
<div class='main'>
</div>
</div>
<div class='footer'>
Created by <a href='https://www.youtube.com/channel/UCLJQcARXQmADJADQO3ZZqfQ?
view_as=subscriber' target='_blank'>Precious Nyaupane</a>|© 2020 All rights reserved
</div>
</body>
</html>
Displaying nav as flex should do the trick
nav {
display: flex;
}
Demo