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
}
Related
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;
}
This is what I am trying to recreate. A basic nav.
As you can see here, there is an image next to the "ABOUT US" text, that is what I am having trouble with. How exactly can I make the img appear before the "ABOUT US" text? It always appears above it. Thanks in advance!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
body {
font-family: "Open Sans",sans-serif;
}
.container {
max-width: 900px;
margin: 0 auto;
}
header {
padding: 2em 4em;
background-color: #121b21;
}
.nav-area {
list-style: none;
text-align: center;
}
.nav-area li {
display: inline-block;
padding: 0 1.5em;
color: #c4cbcf;
font-weight: 700;
font-size: 0.9em;
background-color: transparent;
}
<header>
<div class="container">
<nav>
<img src="header_logo.png" alt="Logo header">
<ul class="nav-area">
<li>ABOUT US</li>
<li>CONSULTING</li>
<li>SKYLIGHT</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
Give a display:flex; property to nav and it will work :) Then you can adjust other CSS accordingly.
You may also set display:flex; on .nav-area, then you don't need inline-block on .nav-area li's.
.nav-area {
list-style: none;
text-align: center;
display:flex;
align-items:center;
}
CODEPEN WORKING DEMO: https://codepen.io/emmeiWhite/pen/WNGYJjq
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width:25px;
height: auto;
margin-left:1.5em;
}
body {
font-family: "Open Sans",sans-serif;
}
.container {
max-width: 900px;
margin: 0 auto;
}
header {
padding: 2em 4em;
background-color: #121b21;
}
nav{
display:flex;
align-items:center;
}
.nav-area {
list-style: none;
text-align: center;
}
.nav-area li {
display: inline-block;
padding: 0 1.5em;
color: #c4cbcf;
font-weight: 700;
font-size: 0.9em;
background-color: transparent;
}
<header>
<div class="container">
<nav>
<img src="https://picsum.photos/200" alt="Logo header">
<ul class="nav-area">
<li>ABOUT US</li>
<li>CONSULTING</li>
<li>SKYLIGHT</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
I tried like this.
nav {
display: flex;
align-items: center;
justify-content: center;
}
If you want logo goes to left and nav-menu goes to right, try like this.
nav {
display: flex;
align-items: center;
justify-content: space-between;
}
Add the float attribute to the img CSS declaration to obtain the desired lay-out.
img {
max-width: 100%;
height: auto;
float: left;
}
I want to make my links hover only the available 50px (height: 50px), that are in my header but they are taking more space, what am I doing wrong?
/ Image /
Setting padding to 14px in #main-nav ul li a isn't a solution for me. It becomes the exact opposite with less content inside the link.
My HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>Document</title>
</head>
<body>
<header id="main-header">
<nav id="main-nav">
<img src="img/logo.png" alt="" class="logo">
<ul class="main-menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="right-menu">
<li>EN</li>
</ul>
</nav>
</header>
</body>
</html>
My CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #EEE;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#main-header {
background-color: #333;
height: 50px;
width: 100%;
}
#main-nav {
height: 50px;
width: 90%;
max-width: 1400px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
#main-nav ul {
display: flex;
list-style: none;
}
#main-nav ul li {
}
#main-nav ul li a {
color: #C2C2C2;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
padding: 15px;
}
#main-nav ul li a:hover {
background-color: #4B4B4B;
color: #FFF;
}
#main-nav ul.main-menu {
flex: 1;
margin-left: 30px;
}
.logo {
width: 70px;
}
Because you have a set fixed on the outer parent, You need to let that height propagate down to the <a> then center the text within it vertically.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #EEE;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#main-header {
background-color: #333;
height: 50px;
width: 100%;
}
#main-nav {
height: 50px;
width: 90%;
max-width: 1400px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
#main-nav ul {
display: flex;
list-style: none;
height:100%;
}
#main-nav ul li {}
#main-nav ul li a {
color: #C2C2C2;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
padding: 15px;
}
#main-nav ul li a:hover {
background-color: #4B4B4B;
color: #FFF;
}
#main-nav ul.main-menu {
flex: 1;
margin-left: 30px;
}
.logo {
width: 70px;
}
/* Solution */
/* sinde the li is a flex item it will automatically take the height of it's parent */
#main-nav ul li a {
/* no need for top and bottom padding anymore */
padding: 0 15px;
height: 100%;
/* To center the text vertically with respect to the height */
display: flex;
align-items: center;
}
<header id="main-header">
<nav id="main-nav">
<img src="https://picsum.photos/50" alt="" class="logo">
<ul class="main-menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="right-menu">
<li>EN</li>
</ul>
</nav>
</header>
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>
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>