So I'm just trying to make a simple navbar and I just started playing around with flexbox. Why doesn't align-content work here? I can get justify-content to work but I just can't align vertically. Here's the code.
* {
margin: 0;
padding: 0;
}
#Navbar_Wrapper {
}
#Navbar {
width: 100%;
height: 300px;
background: darkslategray;
}
#Navbar_Content_Wrapper {
width: 100%;
display: flex;
list-style: none;
justify-content: center;
align-content: center;
}
#Navbar_Content_Wrapper li {
display: inline-block;
}
#Navbar_Content_Wrapper a {
color: white;
font: 16px normal Arial;
text-decoration: none;
padding: 5px 10px 5px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="CSS Files/Navbar.css"/>
</head>
<body>
<section id="Navbar_Wrapper">
<div id="Navbar">
<div id="Navbar_Content_Wrapper">
<div id="#Navbar_Content_Left">
<ul>
<li>Home</li>
<li>Forum</li>
<li>Search</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>
Why on earth doesn't this center my items vertically? Please help me out because I'm just completely stumped as to why this isn't working. Even though its probably just something simple.
You have 2 problems here:
You're using the wrong property. align-content is for distributing space between multi-line flex items (eg. using flex-wrap: wrap). You're looking for the align-items property instead.
There's no extra space to distribute. The height is set on the flex container's parent element (#Navbar), not the flex container itself (#Navbar_Content_Wrapper). In other words, your flex container is only as tall as its contents.
http://jsfiddle.net/qdv54k6f/
This has nothing to do with flexboxes. Just set the line height to 300px and you're done. (Also works for non-flexboxes.)
* {
margin: 0;
padding: 0;
}
#Navbar_Wrapper {} #Navbar {
width: 100%;
height: 300px;
background: darkslategray;
}
#Navbar_Content_Wrapper {
width: 100%;
display: flex;
list-style: none;
justify-content: center;
align-content: center;
line-height: 300px;
}
#Navbar_Content_Wrapper li {
display: inline-block;
}
#Navbar_Content_Wrapper a {
color: white;
font: 16px normal Arial;
text-decoration: none;
padding: 5px 10px 5px 0px;
}
<section id="Navbar_Wrapper">
<div id="Navbar">
<div id="Navbar_Content_Wrapper">
<div id="#Navbar_Content_Left">
<ul>
<li>Home</li>
<li>Forum</li>
<li>Search</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</section>
Edit: or the height or course. Silly me.
* {
margin: 0;
padding: 0;
}
#Navbar_Wrapper {} #Navbar {
width: 100%;
height: 300px;
background: darkslategray;
}
#Navbar_Content_Wrapper {
width: 100%;
display: flex;
list-style: none;
justify-content: center;
align-content: center;
height: 300px;
align-items:center;
}
#Navbar_Content_Wrapper li {
display: inline-block;
}
#Navbar_Content_Wrapper a {
color: white;
font: 16px normal Arial;
text-decoration: none;
padding: 5px 10px 5px 0px;
}
<section id="Navbar_Wrapper">
<div id="Navbar">
<div id="Navbar_Content_Wrapper">
<div id="#Navbar_Content_Left">
<ul>
<li>Home</li>
<li>Forum</li>
<li>Search</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</section>
Related
I have this HTML code:
<body>
<header id="masthead">
<div id="container">
<!-- logo -->
<img src="logo.png" alt="" width="200px" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>About Developers</li>
<li>History</li>
<li>Economy</li>
<li>Why Study in Dublin?</li>
<li>People and Culture</li>
</ul>
</nav>
</div>
</header>
And this CSS code:
.container {
width: 80%;
margin: 0 auto;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
header::after {
content : '';
display: table;
clear: both;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 2px;
position: relative;
padding-right: 0.1rem;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
However I want to make my nav bar to the left from the logo, but not down below. How can I do it using the given initial code that i hav pointed ? As you can see, align: right and align: left has been used, but had not helped me
Like on photo (Used arrows to point it )
Create two columns. In one column, place your logo, and in the second column, place your navigation bar.
<div class="row">
<div class="column" style="background-color:#aaa; width:20%;">
<!--pLACE Logo here--->
</div>
<div class="column" style="background-color:#bbb; width:80%">
<!--Place Navbar code here-->
</div>
</div>
Remember Adjust your css accordingly
Give your div with id container a display property of flex, direction property of row and then align or justify items as per your liking
#container{
display:flex;
flex-direction:row;
justify-content:space-between;
}
Also in your HTML code you've given tags ids but you're using class selectors in your CSS
Some resources that'll help you:
A Complete Guide to Flexbox
Basic Concepts of Flexbox
Flexbox Cheatsheet
You will have to change your CSS as shown below:
/*add this line to adjust paddings on the columns and remove default margin padding for all the html elements*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*change class to # it's ID and not class*/
#container {
width: 80%;
margin: 0 auto;
}
/*recommended to add width in percentage in css and remove fix width from <img width='200px' /> tag*/
.logo {
float: left;
width:20%;
padding: 10px 0;
}
/*add width 80% for <nav> tag*/
nav {
float: right;
width: 80%;
margin-top: 10%;
}
nav li {
display: inline-block;
/* margin-left: 70px; */ /*remove*/
/* padding-top: 2px; */ /*remove*/
position: relative;
/* padding-right: 0.1rem; */ /*remove*/
padding: 0 5px; /*instead add this for space between li content*/
}
I would recommend you to use CSS FLEXBOX.
I used flexbox to do this. your id="container" was not the same as the CSS so I changed it to class="container"
I added some simple 1px borders just to illustrate what is where on the page.
This is likely not a finished solution and only a starting point.
.container {
width: 90%;
margin: 0 auto;
display: flex;
flex-direction: row;
flex: space-between font-size: 16px;
justify-content: center;
align-items: center;
}
.logo {
padding: 10px 0;
height: 3em;
border: 1px solid lime;
}
header::after {
content: '';
display: table;
clear: both;
}
nav {
border: 1px solid cyan;
justify-content: center;
align-items: center;
}
nav ul li::before {
content: "\200B";
}
nav ul {
display: flex;
flex-direction: row;
border: 1px solid blue;
list-style-type: none;
justify-content: center;
list-style-position: inside;
margin-left: 0;
padding-left: 0;
}
nav ul li {
padding-top: 0.2em;
padding-right: 0.1rem;
border: 1px solid pink;
margin-left: 0;
padding-left: 0;
}
nav li a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 0.875em;
margin-left: 1em;
margin-right: 1em;
}
<header id="masthead">
<div class="container">
<img src="logo.png" alt="logo png" width="200px" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>About Developers</li>
<li>History</li>
<li>Economy</li>
<li>Why Study in Dublin?</li>
<li>People and Culture</li>
</ul>
</nav>
</div>
</header>
I am trying to create a NAV bar and I have tried putting 'display: inline-block;' in every single element but for the life of me it won't cross the whole page. Any idea's? I want to have my logo in the center of the navigation bar with the other links centered across the rest of the top of the page. It doesn't matter where I put the 'display: inline-block;' it never centers it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gingerich Tiling</title>
<link href="main.css" type="text/css" rel="stylesheet">
<link type="text/css" rel="stylesheet">
</head>
<body>
<header>
<nav class="nav1">
<div class="left-nav-bar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div class="logo">
<li><a class="logo" href="index.html"><img src="Images/Gingerich%20Final%20Logo.jpg" alt ="Gingerich Tiling Logo" height="250" width="300"</a></li>
</div>
<div class=right-nav-bar>
<ul>
<li>Tiling</li>
<li>Earthmoving</li>
<li>Septic</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
color: black;
}
body {
}
header {
text-align: center;
display: inline-block;
}
.nav1 {
align-content: center;
list-style: none;
text-decoration: none;
text-transform: uppercase;
}
nav a {
text-decoration: none;
}
nav ul {
}
.nav1 li {
display: inline-block;
}
.left-nav-bar {
margin: 0;
padding: 0;
text-decoration: none;
}
.logo {
}
.right-nav-bar {
margin: 0;
padding: 0;
text-decoration: none;
}
After re-reading the question, I think I got how you want it to look. The problem was that you were using inline-block a bit too much, actually!
You can achieve the look using display: flex (display: grid would also work, but I think flex layout is more straight-forward in this case) in conjunction with justify-content: space-evenly on your <nav> element.
Please also note that you cannot have a <li> element anywhere other than as a direct child element of a <ul> (that was not the case with your logo!)
Once you add a little padding to the sides of your navigation links, it should look good.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
color: black;
}
body {}
header nav {
text-align: center;
display: flex;
justify-content: space-evenly;
}
.nav1 {
align-content: center;
list-style: none;
text-decoration: none;
text-transform: uppercase;
}
nav a {
text-decoration: none;
padding: 0 0.3em;
}
nav ul {}
.nav1 li {
display: inline-block;
}
.left-nav-bar {
margin: 0;
padding: 0;
text-decoration: none;
}
.logo {
width: 48px;
}
.right-nav-bar {
margin: 0;
padding: 0;
text-decoration: none;
}
<header>
<nav class="nav1">
<div class="left-nav-bar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div class="logo">
<a class="logo" href="index.html"><img src="//placekitten.com/48/48" alt="Gingerich Tiling Logo" height="48" width="48"> </a>
</div>
<div class=right-nav-bar>
<ul>
<li>Tiling</li>
<li>Earthmoving</li>
<li>Septic</li>
</ul>
</div>
</nav>
</header>
You have a lot of unnecessary containers. But I didn't change the HTML but I did change your CSS. The best way to make navigation is by using display: flex;. They are easy to use and very effective.
Here is the CSS, just copy-paste this and see if you like the result :)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
color: black;
}
/* body {
} */
header {
width: 100vw;
height: 100px;
max-width: 100%;
}
.nav1 {
list-style: none;
text-decoration: none;
text-transform: uppercase;
width: 90%;
height: 100%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
text-decoration: none;
}
/* nav ul {
} */
.nav1 li {
display: inline-block;
}
.left-nav-bar,
.right-nav-bar {
width: 33%;
height: 100%;
text-decoration: none;
display: flex;
justify-content: space-around;
align-items: center;
}
.left-nav-bar ul,
.right-nav-bar ul {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
row-gap: 20px;
}
My problem is that I have a header that is supposed to take up the whole top of the page but for some reason, there is a margin on both sides.I tried * margin :0 padding :0 but doesn't work.
when I add div.container margins appears. i added .container because when i grow the page i want my name and nav to stay in the middle withsome space from the sides.as the picture that i shared but without whitespace/that margins. i hope i could explained
appreciate your help
thanks.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: black
}
html {
font-family: 'Space Mono', monospace, sans-serif;
}
#navbar {
background-color: yellow;
color: black;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 2rem 0.75rem 1rem;
}
#navbar ul {
list-style-type: none;
display: flex;
align-items: center;
}
#navbar ul li a {
padding-left: 0.75rem;
}
.container {
max-width: 1100px;
margin: 0 auto;
<html>
<head>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<h1 class="">Hayden Dominic Christiansen</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Bio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Add the color to the header. See below:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: black
}
html {
font-family: 'Space Mono', monospace, sans-serif;
}
header { background: yellow; }
#navbar {
color: black;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 2rem 0.75rem 1rem;
}
#navbar ul {
list-style-type: none;
display: flex;
align-items: center;
}
#navbar ul li a {
padding-left: 0.75rem;
}
.container {
max-width: 1100px;
margin: 0 auto;
<html>
<head>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<h1 class="">Hayden Dominic Christiansen</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Bio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
You might need to add margin and padding on the body tag.
body{
margin:0;
padding:0;
box-sizing: border-box;
}
a{
text-decoration: none;
color:black
}
header {
width: 100%;
}
html{
font-family: 'Space Mono', monospace,sans-serif;
}
#navbar{
background-color: yellow;
color: black;
display: flex;
justify-content: space-between;
align-items: center;
padding:0.75rem 2rem 0.75rem 1rem;
}
#navbar ul{
list-style-type: none;
display: flex;
align-items: center;
}
#navbar ul li a {
padding-left: 0.75rem;
}
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<h1 class="">Hayden Dominic Christiansen</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Bio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Remove the max-width attribute from the the .container selector as it is fixing the width of your navbar to a max of 1100px. Removing it will solve your problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: black
}
html {
font-family: 'Space Mono', monospace, sans-serif;
}
#navbar {
background-color: yellow;
color: black;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 2rem 0.75rem 1rem;
}
#navbar ul {
list-style-type: none;
display: flex;
align-items: center;
}
#navbar ul li a {
padding-left: 0.75rem;
}
.container {
/* max-width: 1100px; Remove this line as it is fixing the navbar to a max of 1100px */
margin: 0 auto;
}
<html>
<head>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<h1 class="">Hayden Dominic Christiansen</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Bio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Then try this header.container {margin: 0 !important; padding: 0 >!important}
and lose your job for that xD
first, if you find yourself using important in your own styles, you are doing something wrong.
second, his container is a div, divs do not have any default margins or paddings - nothing to set to 0.
If you don't want margin on your container class, try adding
.container {
margin: 0;
padding: 0
}
I'm a complete beginner in web development so please excuse me if my question seems to be foolish.
After learning about the flexbox concept I tried to apply the concept for developing a simple header. Everything was going perfect but then even after using align-items:center property the items are not looking perfectly centred.
Then I tried to use the border-bottom for the nav-main class to give an underline but I don't understand why the underline is not covering the whole space.
* {
font-family: Arial, Helvetica, sans-serif;
}
html,
body {
margin: 0;
padding: 0;
}
.mainContainer {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
background-color: lemonchiffon;
align-items: center;
}
.heading {
order: 2;
}
.nav-main {
border-bottom: 1px solid red;
order: 1;
}
.nav-main li {
display: inline;
margin: 5px;
}
<div class="mainContainer">
<h1 class="heading">The Peace</h1>
<nav class="nav-main">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
Edit
My first problem is solved by the following code but the underline problem still remains the same.
.nav-main ul{
padding-left: 0;
}
Set .nav-main ul padding to 0:
* {
font-family: Arial, Helvetica, sans-serif;
}
html,
body {
margin: 0;
padding: 0;
}
.mainContainer {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
background-color: lemonchiffon;
align-items: center;
}
.heading {
order: 2;
}
.nav-main {
border-bottom: 1px solid red;
order: 1;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nav-main ul {
padding: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nav-main li {
display: inline;
margin: 5px;
}
<body>
<div class="mainContainer">
<h1 class="heading">The Peace</h1>
<nav class="nav-main">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
For the underline problem you need set the width of nav-main as 100% and those flexbox values
width: 100%;
justify-content: center;
display: flex;
Finally, I solved both the problems by using only one flexbox with text-alignment option as follows:
*{
font-family: Arial, Helvetica, sans-serif;
}
html, body{
margin: 0;
padding: 0;
}
.mainContainer{
display: flex;
flex-direction: column;
border: 1px solid #ccc;
background-color: lemonchiffon;
justify-content: center;
align-items: center;
}
.heading{
order:2;
}
ul{
padding: 0;
}
.nav-main {
width: 100%;
text-align: center;
border-bottom: 1px solid red;
order:1;
}
.nav-main li{
display: inline;
margin: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="trialStyle.css">
</head>
<body>
<div class="mainContainer">
<h1 class="heading">The Peace</h1>
<nav class="nav-main">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
Hello Your content properties in the li in the ul doesn't align perfectly because you gave it a margin of 5px and this makes the rightmost li to be shifted by 5px to the right. Try to make your ul also a flexbox and give it a justify-content property of space-evenly...
RESULT:
CSS:
.mainContainer {
display: flex;
flex-direction: column;
background-color: lemonchiffon;
}
.nav-main {
border-bottom: 1px solid red;
order: 1;
}
.heading {
order: 2;
text-align: center;
}
.nav-main li {
display: inline;
margin: 5px;
}
.nav-main ul {
display: flex;
justify-content: center;
}
HTML:
<div class="mainContainer">
<h1 class="heading">The Peace</h1>
<nav class="nav-main">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
The<nav> element is not rendered inside the <header> element even though it is nested inside.
I tried adding the over-flow:hidden property to the <header> element, using the index-head class. I also tried adding both position:relative and position:absolute.
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.index-head{
height: 90px;
width: 100%;
background-color: #000;
overflow: hidden;
}
.logo{
width: 50px;
float: left;
margin: 20px;
margin-right: 0;
}
.brand-name{
color: #ffc107;
line-height: 90px;
font-family: 'Catamaran', sans-serif;
}
.index-head nav{
float: right;
margin-top: 0;
width: 50%;
}
.index-head nav ul li{
list-style: none;
display: inline-block;
font-size: 25px;
padding-left: 50px;
}
<body>
<header class="index-head">
<img class="logo" src="images/logo.png">
<h1 class="brand-name">Eeat</h1>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Signup</li>
<li>Login</li>
</ul>
</nav>
</header>
</body>
Because you added a "h1" tag inside the header, which by default has
display: block
property that stretches the element to the entire width of the "header" element.
to solve this problem, you must add a css rule to the "h1" element
display: inline-block;
JSFiddle link: https://jsfiddle.net/nzf1egcr/1/
The simplest way to get the <nav> inside the <header> is to set the <h1.brand-name> element to display:inline-block. By default browser agents set <hX> tags to display:block, which spans those elements 100% of the available space and in this case is was pushing your <nav> down below it. Since the <header> has a fixed height this forced the <nav> outside.
I also added...
display: flex;
align-items: center;
justify-content: space-between;
To <header.index-head> to space the child elements evenly vertically and horizontally.
I then added flex-grow: 1; to the <nav> element, which makes sure it takes 'priority' when flex-box determines its width relative to its siblings.
Learn more about Flex Box
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.index-head{
height: 90px;
width: 100%;
background-color: #000;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
width: 50px;
float: left;
margin: 20px;
margin-right: 0;
}
.brand-name{
color: #ffc107;
line-height: 90px;
font-family: 'Catamaran', sans-serif;
display: inline-block;
}
.index-head nav{
float: right;
margin-top: 0;
width: 50%;
flex-grow: 1;
}
.index-head nav ul li{
list-style: none;
display: inline-block;
font-size: 25px;
padding-left: 50px;
}
<body>
<header class="index-head">
<img class="logo" src="images/logo.png">
<h1 class="brand-name">Eeat</h1>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Signup</li>
<li>Login</li>
</ul>
</nav>
</header>
</body>