How can I centralise my navigation bar?
I've tried a few things, like <center>, but, I don't know what I'm doing wrong!
CSS:
.NavBar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.NavItem {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #080808;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
text
}
a:hover, a:active {
background-color: #7A991A;
}
HTML:
<ul class="NavBar">
<li class="NavItem">Home</li>
<li class="NavItem">Snippets of Divinity</li>
<li class="NavItem">Contact</li>
<li class="NavItem">Donate</li>
</ul>
Excuse the title of the navigation buttons, I'm making a website devoted to me and the wonderful things that I say and do.
Here is a JSFiddle: https://jsfiddle.net/ryfv3499/
Update the .NavBar CSS rule
.NavBar {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
width:90%;
}
You can use any width but 100%
use display: inline-block for .NavItem
for .NavBar - text-align: center
.NavBar {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 0;
text-align: center;
}
.NavItem {
display: inline-block;
vertical-align: top;
font-size: 15px;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #080808;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
text
}
a:hover, a:active {
background-color: #7A991A;
}
body { background-color: #D0D0D0; }
<ul class="NavBar">
<li class="NavItem">Home</li>
<li class="NavItem">Snippets of Divinity</li>
<li class="NavItem">Contact</li>
<li class="NavItem">Donate</li>
</ul>
You can use the following addition to your CSS:
.NavBar {
list-style-type: none;
/* margin: 0; */
margin-left:auto;
margin-right:auto;
padding: 0;
overflow: hidden;
}
This will centre your box provided it has a fixed width; you may need to explicitly specify the width for your navbar too.
Hope this helps
You must add margin: 0 auto; and define width of your element.
.NavBar {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
width:500px;
}
Here is fiddle: https://jsfiddle.net/ryfv3499/11/
Related
I want the blue of the navbar to extend across the screen, while the About, Updates, and Who am I? to stay in the middle? I want the background to remain a background so that it will change if I resize anything. I am fine with a different centering method, if that works better.
.centered {
display: flex;
justify-content: center;
}
#navbar {
background: #0099CC;
color: #FFF;
height: 51px;
padding: 0;
margin: 0;
border-radius: 0px;
}
*{
padding:0;
margin:0;
}
#navbar ul, #navbar li {
margin: 0 auto;
padding: 0;
list-style: none
}
#navbar ul {
width: 100%;
}
#navbar li {
float: left;
display: inline;
position: relative;
}
#navbar a {
display: inline-block;
display:flex;
line-height: 51px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 16px;
text-align: center;
}
#navbar li a:hover {
color: #0099CC;
background: #F2F2F2;
}
#navbar label {
display: none;
line-height: 51px;
text-align: center;
position: absolute;
left: 35px
}
<div class="centered">
<nav id='navbar'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Updates</a></li>
<li><a href='#'>Who am I?</a></li>
</ul>
</nav>
</div>
You can add 100% width to #navbar to extend across the screen and change display & width properties for #navbar ul, like this
#navbar {
width: 100%;
}
#navbar ul {
display: flex;
width: fit-content;
}
I want to know how to put a logo in my css navbar because I don't know how to put a logo in my css navbar. I have no clue on how to put the logo in the css navbar so it would be very nice if one of yall can help me out.
body {
margin: 0px;
}
ul {
list-style-type: none;
overflow: hidden;
margin: 0px auto;
background: #222;
padding: 0px;
}
li {
float: right;
font-size: 20px;
}
li a {
text-decoration: none;
color: white;
padding: 20px 20px;
display: block;
text-align: center;
}
ul li a:hover {
border-bottom: 3px solid grey;
padding-bottom: 17px;
}
img {
height: 70px;
}
<img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325">
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
The first thing you need to do is to create a columnar structure and have the background on the parent. And then add the logo to the left and links to the right. The best way to do is to use the <header> and <nav> tags as they are really semantic.
Here's something you might find useful:
body {
margin: 0px;
}
/* Add these */
header {
overflow: hidden;
background: #666;
}
header h1 {
float: left;
padding: 0 20px;
}
header nav {
float: right;
padding: 20px 0 0;
}
/* End Add these */
ul {
list-style-type: none;
overflow: hidden;
margin: 0px auto;
padding: 0px;
}
li {
float: left; /* Changed here. */
font-size: 20px;
}
li a {
text-decoration: none;
color: white;
padding: 20px 20px;
display: block;
text-align: center;
}
ul li a:hover {
border-bottom: 3px solid grey;
padding-bottom: 17px;
}
img {
height: 70px;
}
<header>
<h1>
<img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325" />
</h1>
<nav>
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
</header>
Also, I just changed the background colour from #222 to #666 to keep it websafe and also make the logo visible. Feel free to change it.
Preview
Here is a fiddle that I hope will help you get you on the right track;
https://jsfiddle.net/Lyrw49mj/7/
HTML
<ul>
<li class="NavHeader"><a><img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325"></a></li>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
CSS
body {
margin: 0px;
}
ul {
list-style-type: none;
overflow: hidden;
margin: 0px auto;
background: #222;
padding: 0px;
}
li {
float: right;
font-size: 20px;
}
li a {
text-decoration: none;
color: white;
padding: 20px 20px;
display: block;
text-align: center;
}
ul li a:hover {
border-bottom: 3px solid grey;
padding-bottom: 17px;
}
.NavHeader a img{
position: relative;
top: 0px;
left: 0px;
height: 70px;
width: auto;
}
.NavHeader a:hover{
border-bottom: none;
padding-bottom: 20px;
}
So I am trying to create a navbar for a school project, however I cannot get all the buttons to be evenly spaced across the whole navbar. I have been trying to do this for a while now, and the navbar code is all messy which doesn't help my situation. Any solutons?
The HTML code is:
<ul>
<li> <img src="Images/homepage/logo.png" width="20" height="20" href="#home"> </li>
<div class="other";>
<li>Films</li>
<li>Contact</li>
<li>About</li>
<li>FAQ</li>
</div>
</ul>
The CSS code is:
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
z-index: 1;
width: 100px;
}
li a:hover:not(.active) {
background-color: #111;
}
li a:hover{
text-decoration: none;
color: white;
}
.active {
background-color: #222;
color:white;
}
Please help, this has been confusing me for a while now and I would rather not write up a new navbar code unless absolutely necessary!
Use Flex
ul{ display:flex;}
li{flex:1;}
* {
margin: 0;
}
ul {
display: flex;
flex-direction: row;
list-style-type: none;
padding: 0;
background-color: #333;
position: fixed;
z-index: 1;
height: 50px;
line-height: 50px;
width: 100%;
}
li {
flex: 1;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
z-index: 1;
}
li a:hover:not(.active) {
background-color: #111;
}
li a:hover {
text-decoration: none;
color: white;
}
.active {
background-color: #222;
color: white;
}
img {
margin: -15px;
}
<ul>
<li>
<img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" width="40" height="40px" href="#home">
</li>
<li>Films</li>
<li>Contact</li>
<li>About</li>
<li>FAQ</li>
</div>
</ul>
You can only nest li elements within the ul element. Nesting div inside the ul is not semantically correct. Also, the incorrectly nested div element within ul has a semicolon after its class name: this is not legal.
The flex box module is the best option to use in order to achieve what you are after. You can read more about it here.
One way to get the results you are after is as follows:
ul,
li,
a,
img {
box-sizing: border-box;
padding: 0px;
margin: 0px;
border: 0px;
height: 50px; /* Adjust this value to whatever height you want your nav to be */
}
ul {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
list-style-type: none;
background-color: #333;
text-align: center;
display: flex;
justify-content: space-around;
align-items: center;
}
ul li {
flex: 0 1 100%;
}
ul li a{
display: block;
color: white;
text-decoration: none;
line-height: 50px; /* This value should be the same as your nav's height is in order for text to stay centered. */
padding: 0px 1em;
}
ul li a img {
height: 100%;
width: auto;
padding: 5px; /*You can adjust this value to whatever you want. */
}
li a:hover:not(.active) {
background-color: #111;
}
li a:hover{
text-decoration: none;
color: white;
}
.active {
background-color: #222;
color:white;
}
<ul>
<li> <img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_White.png" href="#home"> </li>
<li>Films</li>
<li>Contact</li>
<li>About</li>
<li>FAQ</li>
</ul>
I hope this is helpful.
In HTML5 : How to control the stretch of the bar? Is there any way to increase spaces in between the texts?
https://www.w3schools.com/code/tryit.asp?filename=FMPL7UBRZEEE
setiing width propery for li will do
ul {padding: 16px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
width:150px;
}
ul { display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="text-align:right">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</body>
</html>
You can add a margin to each link to create space between them. Also if you wanted to stretch the nav you could set the width to 100%.
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
margin-right: 20px;
}
ul {
padding: 16px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
width: 100%;
}
I've looked at so many questions of people asking how to centre a navigation bar, and I've tried lots of things and just cannot get it to move...
HTML:
<div id="header">
<h1>Midlands Car Club</h1>
<ul id="nav">
<li>Home</li>
<li>Members</li>
<li>Cars</li>
</ul>
</div>
CSS:
//header
#header {
width: 100%;
height: 150px;
}
#header h1{
font-family: "Vernada", sans-serif;
font-size: 1.8em;
text-align: center;
}
//navigation
#nav ul {
list-style-type: none;
padding: 0;
text-align: center;
}
#nav a {
display: inline-block;
width: 80px;
background-color: #dddddd;
text-align: center;
}
#nav li {
display: inline;
color: black;
font-family: "Vernada", sans-serif;
font-size: 1.2em;
}
#nav a:link {
width: 120px;
padding: 10px;
display: inline-block;
text-decoration: none;
color: black;
}
#nav a:visited {
display: inline-block;
text-decoration: none;
color: black;
}
#nav a:hover {
text-decoration: none;
color: grey;
}
#nav a:active {
text-decoration: none;
color: blue;
}
Most likely missed something out, or just gone about it wrong altogether. I've managed to get it working in the past but have completely forgotten how I did it...
#nav {
width : "however wide you want it";
margin: 0 auto;
}
It's the margin: 0 auto; that centers the element.
You could also use text-align on the parent element, but the margin trick is most commonly used.