I've been trying to center the items within the navigation but no such luck. Every single solution turns my navigation bar from this: horizontal navigation bar to this: vertical navigation bar.
Any help would be greatly appreciated!
HTML with CSS code:
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<html>
<head>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Just remove the float from the li and make the inline-block
li {
/* float: left; */
display:inline-block;
}
The first rule of centering is..."Don't use floats"
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
I removed your css on li tag with float and changed it to display and width:
li {
display: -webkit-inline-box;
width: 60px;
}
https://i.stack.imgur.com/LbYd4.png`
I hope this helped you #C. Lagos
Related
This is my HTML:
<nav class="navbar">
<ul>
<li><a class="active home_button" href="#home">Home</a></li>
<li>Profile</li>
<li>Results</li>
<li>About Us</li>
</ul>
</nav>
This is the CSS:
.navbar {
height: 73px;
width: 100%;
}
.navbar ul {
list-style-type: none;
margin: 0;
height: 70px;
padding: 0;
overflow: hidden;
background-color: #362890;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: #fff;
text-align: center;
padding: 22px 20px;
text-decoration: none;
font-size: 26px;
I want to do two things. Firstly I want to make the color of Home orange. Secondly, I want to move About Us on the right side while keeping others on the left side. How can I do that?
Use float:right for the About Us item, and color:orange for the Home item.
.navbar {
height: 73px;
width: 100%;
}
.navbar ul {
list-style-type: none;
margin: 0;
height: 70px;
padding: 0;
overflow: hidden;
background-color: #362890;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: #fff;
text-align: center;
padding: 22px 20px;
text-decoration: none;
font-size: 26px;
}
.home_button{
color:orange !important;
}
#about-us{
float:right;
}
<nav class="navbar">
<ul>
<li><a class="active home_button" href="#home">Home</a></li>
<li>Profile</li>
<li>Results</li>
<li id="about-us">About Us</li>
</ul>
</nav>
I think adding a
!important to .home_button should do the trick, give it a try...
Example
.home_button {
color: orange !important;
}
The !important property in CSS is used to provide more weight (importance) than normal property. In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule
For more info on how !important works check here
give home and about a class, then style it
I have already put a div tag along the place where I want to split the list items. However, when I do float left or right, it doesn't work. I want to create a navigation bar where the user can browse the website on the left and manage their account on the right. Can anyone help me?
This Is The HTML and CSS Code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0f0f0f;
border-radius: 50px;
}
li {
float: left;
background-color: #0f0f0f;
}
li a {
display: block;
color: #8ca2ff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: #111;
}
<div class="header">
<ul>
<div class="first">
<li>Home</li>
<li>Updates</li>
<li>Blog</li>
</div>
<div class="last">
<li>Sign In</li>
<li>Login</li>
</div>
</ul>
</div>
How The Navigation Bar Looks Now
Can you please check the below code? Hope it will work for you.
As per Html standards, we can not use div directly inside ul(unordered list) so we added 2 ul inside .navigation div. With the help of flex properties, display:flex; and justify-content:space-between; we have separated items in .navigation as per your requirement.
Please refer to this link:
https://jsfiddle.net/yudizsolutions/764rdezq/1/
.navigation {
background-color: #0f0f0f;
border-radius: 50px;
overflow: hidden;
display:flex;
display: -webkit-flex;
justify-content:space-between;
-webkit-justify-content:space-between;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display:flex;
display: -webkit-flex;
}
li {
background-color: #0f0f0f;
}
li a {
display: block;
color: #8ca2ff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: #111;
}
<div class="header">
<div class="navigation">
<ul>
<li>Home</li>
<li>Updates</li>
<li>Blog</li>
</ul>
<ul>
<li>Sign In</li>
<li>Login</li>
</ul>
</div>
</div>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0f0f0f;
border-radius: 50px;
display: flex;
justify-content: space-between;
}
.last,
.first {
display: flex;
}
li {
background-color: #0f0f0f;
}
li a {
display: block;
color: #8ca2ff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: #111;
}
<div class="header">
<ul>
<div class="first">
<li>Home</li>
<li>Updates</li>
<li>Blog</li>
</div>
<div class="last">
<li>Sign In</li>
<li>Login</li>
</div>
</ul>
</div>
i am learning html css, now i want to create nav bar as my task. so when am trying to create horizontal nav bar, my menus are not showing at the center of my nav bar div ? why its attached with top corner ? i want them at center from top and bottom here is my code correct my mistake
* {
margin: 0;
padding: 0;
}
nav {
background-color: red;
}
ul {
list-style: none;
height: 35px;
background-color: purple;
width: 50%;
}
nav ul li {
display: inline;
padding: 10px;
margin-top: 10px;
}
nav ul li a {
text-decoration: none;
color: black;
}
nav ul li:hover {
background-color: blue;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
</ul>
</nav>
Here is what you can do, you can use flex and tweak your code if needed.
body {
margin: 0;
padding: 0;
justify-content: center;
text-align: center;
display: flex;
}
nav {
background-color: red;
}
ul {
justify-content: center;
text-align: center;
list-style: none;
height: 35px;
background-color: purple;
width: 50%;
display: flex;
flex-direction: row;
}
ul li {
margin-top: 10px;
}
ul li a {
text-decoration: none;
color: black;
padding: 5px;
}
ul li:hover {
background-color: blue;
}
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
</ul>
I added display:inline-block to both li and ul and text-align:center to nav.
and that will make margin-top works.
* {
margin: 0;
padding: 0;
}
nav {
text-align: center
}
ul {
list-style: none;
height: 35px;
background-color: purple;
width: 50%;
display: inline-block
}
nav ul li {
display: inline-block;
padding: 10px;
}
nav ul li a {
text-decoration: none;
color: black;
}
nav ul li:hover {
background-color: blue;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
</ul>
</nav>
check here: https://jsfiddle.net/w3hn1L95/
You need to add a
test-align: center;
to your ul element in css.
I am trying to center my ul, but I can't seem to get it to center. I have tried using display: table margin: 0 auto That puts the ul in the middle, but not exactly in the center. I have also tried using display: block with margin: 0 auto but that doesn't center it either
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
You can add this rule to the <ul>:
display: inline-block;
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
I assume that the issue isn't so much that you want the ul element centered, but rather you want the menu items (the li items) inside the ul to be centered.
The entire issue is solved by simply changing the style on your li from float:left to display:inline-block. See below.
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
display:inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
Updated answer: use flexbox
For the best control over spacing of elements in a column or a row, I'd recommend using flexbox now that it has widespread browser support.
To use flexbox here, set display: flex; on the ul, making it the flex container. By default, this will make the ul act as a row with the li acting as flex items within that row. CSS Tricks has a great guide about using flexbox.
I've left my original answer which uses display: inline-block; below.
Original answer
Sounds like display: inline-block; is exactly what you need.
As the name alludes, an element with display: inline-block; acts as if it's an inline element as far as its parent is concerned, and internally it acts like a block element.
Its use here requires a container with width: 100%; and text-align: center;. I've used the <nav> element below. The <ul> can then be given display: inline-block; to achieve the effect you want.
You can also use display: inline-block; in combination with display: inline; for the <li> and their child <a> elements as follows, in order to avoid the float: left; use.
li {
display: inline;
}
li a {
display: inline-block;
...
}
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
}
li {
display: inline;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
nav {
width: 100%;
margin: 0 auto;
text-align: center;
}
<header>
<h1>DROPLET GAMES</h1>
<nav>
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Games
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
</header>
I am fairly new to this kind of stuff. I just want my nav bar to cover the page from side to side instead of having the white spaces on both sides and the top.
Here is my CSS
nav ul {list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3E3F43;}
nav li {float: left;}
nav li a {display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
li a:hover{background-color: #7559A6;}
Here is my HTML
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Resume</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
Firstly, remove the default margin from the body
body {
margin: 0;
}
Then:
CSS tables
body {
margin: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3E3F43;
display: table;
width: 100%;
}
nav li {
display: table-cell
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #7559A6;
}
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Resume
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</nav>
Flexbox
body {
margin: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3E3F43;
display: flex;
}
nav li {
flex:1;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #7559A6;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Resume</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
give your nav an id
<nav id=nav">
And set it's width to 100%
#nav{
width:100%;
}
Add in your css
nav{ position: absolute; width: 100%;left: 0;top: 0;}