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>
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;
}
Instead of it all being to the left how do i go about spreading it all across evenly or near enough? I have tried reading some blogs and posts on how to solve this solution however i still have not came to a conclusion.
Also how do i put the logo and heading side by side each other?
Thanks in advance, much appreciated.
.header img {
width: 100px;
height: 100px;
background: #555;
}
.header h1 {
display: inline;
}
ul {
display: flex;
justify-content: space-around;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
display: inline-block;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Chollerton Tearooms</title>
</head>
<body>
<div class="header">
<img src="Logo.png" alt="logo" />
<h1>Chollerton Tearooms</h1>
</div>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li>Find out more</li>
<li>Credits</li>
<li>Wireframe</li>
<li>Admin</li>
</ul>
</body>
</html>
flexbox to the rescue!
As for header - h1 has display:block by default so i've change it to display: inline;
Flexbox is ideal for this. Add display: flex to the parents css and flex: 1 to the li, so they occupy the full width of the viewport. display: block for the a-tag allows the whole space to be clickable, but that's more of a design decision.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: flex;
}
li {
flex: 1;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<ul>
<li><a class="" href="index.html">Home</a></li>
<li>Find out more</li>
<li>Credits</li>
<li>Wireframe</li>
<li>Admin</li>
</ul>
.body-color {
background: rgb(27,39,57)
}
a {
text-decoration: none;
color: red;
padding-right: 20px;
}
li {
display: inline-block;
padding-right: 30px;
}
#menu {
text-align: center;
background-color: white;
padding-bottom: 100px;
}
I have tried to padding/margins in both the anchor and li but nothing happens.
How do I add spacing in between each menu option?
My HTML, am I assigning it to the wrong place?:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<title>My Website</title>
</head>
<body class="body-color">
<h1 class="logo"><h1>
<div id="menu">
<ul>
<li>Home</li>
<li>Portrait</li>
<li>Product Showcase</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Assuming you aren't targetting edge or IE, display: flex is a better way of doing what you're doing.
#menu {
display:flex;
justify-content: space-between;
}
Would result in each list item being evenly spaced. For practicing basic css skills using flex, I would take a look at this website. They have a lot of great tutorials for basic flex usage.
Have you tried this? you don't have to give width but will manage equal width for each element.
ul {
width: 100%;
display: table;
table-layout: fixed; /* the magic dust that ensures equal width */
background: #ccc
}
ul > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
ul > li > a {
display:block;
padding:50px;
}
Answer Solved. Followed
.body-color {
background: rgb(27,39,57)
}
#menu {
text-align: center;
background-color: white;
padding-bottom: 100px;
margin-left: 0;
padding-left: 0;
}
li {
display: inline-block;
padding-left: 15px;
padding-right: 15px;
}
a {
text-decoration: none;
color: red;
}
<ul id="menu">
<li>Home</li>
<li>Portrait</li>
<li>Product</li>
<li>Showcase</li>
<li>Contact</li>
</ul>
.body-color {
background: rgb(27,39,57)
}
a {
text-decoration: none;
transition: .3s;
}
#menu {
text-align: center;
background-color: white;
padding-bottom: 100px;
}
#menu ul li {
display: inline-block;
}
#menu ul li + li {
margin-left: 30px;
}
#menu ul li a {
color: #000;
}
#menu ul li a:hover {
color: #f10;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<title>My Website</title>
</head>
<body class="body-color">
<h1 class="logo"></h1>
<div id="menu">
<ul>
<li>Home</li>
<li>Portrait</li>
<li>Product Showcase</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
If it doesn't need to support IE 9 or lower. I recommand flex:
* { margin: 0; padding: 0; }
#menu {
position: relative;
display: flex;
justify-content: space-evenly; /* 'space-around' for just filled space */
width: 100%;
/* list nav normalization */
list-style: none;
margin: 0;
padding: 0;
/* Additional Options */
align-items: center;
align-content: center;
/* For clarity in this example, remove this when your done */
background-color: rgba(0,0,0,.1);
}
#menu li {
display: inherit;
/* For clarity in this example, remove this when your done */
background-color: rgba(0,0,0,.1);
}
#menu a {
padding: 10px;
text-decoration: none;
color: red;
/* For clarity in this example, remove this when your done */
background-color: rgba(0,0,0,.1);
}
<nav id="menu">
<li>Home</li>
<li>Portrait</li>
<li>Product Showcase</li>
<li>Contact</li>
</nav>
I think that adding display: inline-block; to the menu item might work.
Check this link, you can add padding to any direction.
https://codepen.io/jackstride/pen/JLpPgZ
li a { padding: 50px;
}
I am trying to use CSS so when you hover on something it changes background colors. The code I am using does not work though. I can't seem to find out why though. It should work, right?
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a :hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
Please help!
Adjust your on-hover rule slightly and consider the a element as well:
li:hover, li:hover a {
background: blue;
}
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
transition: .7s;
}
li:hover, li:hover a {
background: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
You have a VERY simple mistake.
When you have this code...
li a: hover
remove the space between a and :hover and see the magic.
Now, it should look like this.
li a:hover
#Joseph Young mentioned this, don't forget to upvote his comment.
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a:hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.wrapper {
padding-top: 10px;
width: 320px;
margin: 0 auto;
overflow: hidden;
}
.menu {
background: #093;
}
.menu ul {
margin-left: 0;
list-style: none;
text-align: center;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
display: block;
padding: 10px;
color: #CC0;
text-decoration: none;
}
.menu ul li a:hover {
background: #C30;
color: #FFF;
}
<div class="wrapper">
<div class="menu">
<ul>
<li>HOME
</li>
<li>CONTACT
</li>
<li>ABOUT
</li>
</ul>
</div>
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