My question is how do I put the menu in the middle of the header block because I can't figure it out.
I am trying to make a website for my dad's business by using some templates that I find on the internet, this is one of them and I really like but I can't figure out how to center the navbar. I am not the best when it comes to CSS.
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: black;
height: 70px;
width: 100%;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
color: white;
text-align: center;
}
.navigation-bar li a {
color: white;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
text-align: center;
}
#menu {
float: right;
color: white;
text-align: center;
}
<html>
<link rel="stylesheet" href="index.css" type="text/css">
<head>
<div class="navigation-bar">
<div id="navigation-container">
<img src="images/logo.png">
<ul>
<li>Home</li>
<li>Services</li>
<li>Rent a Boat</li>
<li>Gallery</li>
<li>Contact</li>
<li>Location</li>
</ul>
</div>
</div>
</head>
<body>
</body>
</html>
I rewrote most parts of your code to fix the invalid markup and to include the correct semantic tags for screenreaders. Also, I changed a bit the structure to be semantically correct. Simplified your CSS.
For the invalid Markup, read my comment below your question.
Use the <header>-tag for your header. It is a semantic tag.
The image is part of the header but not part of the navigation, semantically speaking. AS such place it inside the header but not inside the navigation
Use the <nav>-tag for your navigation bar as it is also a semantic tag.
Learn about Flexbox and use it! float is a property to float an element within a text block (like in a newspaper). It is not for aligning purposes. Since 2013 we have Flexbox which is well supported since 2015!
Side Note:
I know this sounds hard but it must be said. If the coding is done for a business Homepage then no unexperienced or beginner without proper skill/knowledge-base should attempt to do it. At least not without the supervision of an experienced coder. A Business Homepage is one of the most important marketing aspects. If you screw this up, then the business will be hurt from it and your dad would lose money!
Then even for experienced coders, it is a NO-GO to just copy code from the internet and include it without correction or knowing what they include. The coder is responsible for the code and can not just state that he didn't write those code pieces originally. It is a coder's job to correct errors such as invalid markups.
body {
margin: 0;
padding: 0;
}
/* ~~ Top Navigation Bar ~~ */
header {
display: flex;
width: auto;
align-items: center; /* vertically center the links */
}
nav {
margin: 0 auto; /* horizontally center the links */
}
nav > ul {
display: flex;
gap: 10px;
list-style: none;
padding: 0;
}
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
<header>
<img src="https://via.placeholder.com/50.jpg">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Rent a Boat</li>
<li>Gallery</li>
<li>Contact</li>
<li>Location</li>
</ul>
</nav>
</header>
</body>
</html>
#navigation-container set max-width instread of width.
margin:0 auto will push from left and right side to #navigation-container so it will be center.
I have replace you css with better approach by using display:flex and setting justify-content:center sets it center to horizontally.
Ans it's good practice to use <header></header> tag for header and include it inside of <body> rather than in <head>
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
max-width: 1200px;
/*you just need to set this*/
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.navigation-bar {
background-color: black;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: flex;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
color: white;
text-align: center;
}
.navigation-bar li a {
color: white;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px 15px;
opacity: 0.7;
text-align: center;
line-height: 70px;
}
<body>
<header>
<div class="navigation-bar">
<div id="navigation-container">
<img src="images/logo.png">
<ul>
<li>Home</li>
<li>Services</li>
<li>Rent a Boat</li>
<li>Gallery</li>
<li>Contact</li>
<li>Location</li>
</ul>
</div>
</div>
</header>
</body>
I suppose you are trying to center the navbar at the top of the page. To the (.navigation-bar li) class, add the following property: display: inline-block;
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: black;
height: 70px;
width: 100%;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
display: inline-block;
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
color: white;
text-align: center;
}
.navigation-bar li a {
color: white;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
text-align: center;
}
#menu {
float: right;
color: white;
text-align: center;
}
Related
When I zoom my page in and out it works, but homepage button loses its color, it doesn't expand to the right side.
So I have 2 aims:
1) To center selected area (on the picture allotted by red color).
2) To have homepage's green color expanded to the right to the end of the page.
Sorry for my English. Ask me if I didn't make the question clear.
what I'm trying to do
what I have
what makes me cry
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Infusion</title>
<link rel="stylesheet" type="text/css" href="infusion.css">
<meta charset="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul class="unlist">
<li class="homepage"><p class="parhome">infusion</p></li>
<li class="nav-elements">design folio</li>
<li class="nav-elements">services</li>
<li class="nav-elements">our business</li>
<li class="nav-elements">how we help</li>
<li class="nav-elements">take the tour</li>
<li class="nav-elements">contact</li>
</ul>
</div>
</body>
</html>
CSS Code
body, html {
margin: 0;
padding: 0;
}
.navbar {
width: 2000px;
margin: 0 auto;
}
.unlist {
display: flex;
margin: 0;
padding: 0;
}
.homepage {
background-color: #63C6AE;
display: inline-block;
list-style: none;
width: 360px;
height: 70px;
color: white;
font-size: 25px;
text-align: right;
vertical-align: middle;
line-height: 75px;
}
.parhome {
height: 50px;
padding: 0;
margin-right: 30px;
margin-bottom: 0;
margin-top: 0;
}
.parhome:hover {
color: #586165;
}
.unlist.a:first-child {
width: 148px;
}
.nav-elements {
display: inline-block;
list-style: none;
height: 70px;
padding-right: 25px;
padding-left: 25px;
text-align: center;
vertical-align: middle;
line-height: 70px;
}
.unlist a {
text-decoration: none;
color: #63C6AE;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-weight: bold;
}
.inlist, a:hover {
color: #586165;
}
It's not valid HTML to put a p tag into an li element. You can use a span instead.
Apart from that, you are limiting the width of your navbar with this CSS rule .navbar { width: 2000px; [...] }.
So when you zoom out, those 2000px (on a large monitor at full screen view) are less than what the window shows (zoomed!), therefore the green area's left border starts where those zoomed 2000px start.
You might want to change the navbar width setting to 100%.
Different approaches can be used to achieve what you want. But all of these approaches that i can think of, need a little bit hack. Meaning, the solution that i am posting here is not an elegant way of handling things.
The reason for that, is what you aim consists of two things.
Center the navbar
Make the homepage container fill with green to all the way left.
Trying to solve both, creates some conflicts which are not easy to solve. And especially if you also want your page to be responsive.
Before start as #Johannes stated, your code consists of elements which are not valid, therefore i tried to change your code a little bit, as much as i could.
So here is my approach:
body, html {
margin: 0;
padding: 0;
}
.navbar {
width: 100%;
padding: 0;
}
.cont {
width: 1280px;
display: flex;
margin: 0 auto;
height: 70px;
}
.unlist {
display: flex;
margin: 0;
padding: 0;
}
.homepage {
background-color: #63C6AE;
display: inline-block;
list-style: none;
width: 360px;
height: 70px;
color: white;
font-size: 25px;
text-align: right;
vertical-align: middle;
width: 1200px;
margin: 0;
margin-left: -950px;
}
ul.homepage a {
color: #fff;
}
.parhome {
height: 50px;
padding: 0;
margin-right: 30px;
margin-bottom: 0;
margin-top: 0;
}
.parhome:hover {
color: #586165;
}
.unlist.a:first-child {
width: 148px;
}
.nav-elements {
display: inline-block;
list-style: none;
height: 70px;
padding-right: 20px;
padding-left: 20px;
text-align: center;
vertical-align: middle;
line-height: 70px;
}
.unlist a {
text-decoration: none;
color: #63C6AE;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-weight: bold;
}
.inlist, a:hover {
color: #586165;
}
<link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet">
<div class="navbar">
<div class="cont">
<ul class="homepage">
<li class="nav-elements parhome">infusion</li>
</ul>
<ul class="unlist">
<li class="nav-elements">design folio</li>
<li class="nav-elements">services</li>
<li class="nav-elements">our business</li>
<li class="nav-elements">how we help</li>
<li class="nav-elements">take the tour</li>
<li class="nav-elements">contact</li>
</ul>
</div>
</div>
NOTE: You can play with numbers, such as margin-left and width for exact results.
This question already has answers here:
How to disable margin-collapsing?
(12 answers)
Closed 5 years ago.
Here is the HTML code (the white gap started appearing as soon as I added h3 to the last div):
body {
margin: 0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #343434;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover {
color: yellow;
}
.welcome {
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3 {
text-align: center;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
I am fairly new to web development and stackoverflow. So I am sorry for any inconveniences. Any help is appreciated. Thank you.
Set margin: 0px; on h3 tag to resolve this issue. Check updated Snippet below..
body{
margin:0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container{
width: 80%;
margin : 0 auto;
}
header{
background: #343434;
}
header::after{
content: '';
display: table;
clear:both;
}
.logo{
float: left;
padding:10px;
}
nav{
float:right;
}
nav ul{
margin: 0;
padding: 0;
list-style-type: none;
}
nav li{
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a{
text-decoration: none;
color:white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover{
color:yellow;
}
.welcome{
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3{
text-align: center;
margin: 0px;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
Just remove the margin from h3 like
.welcome h3 {
text-align: center;
margin:0;
}
body {
margin: 0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #343434;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover {
color: yellow;
}
.welcome {
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3 {
text-align: center;
margin:0;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
This is due to collapsing margins
Remove the margin on the h3. Replace it with padding if you want to create space between the header and maintain the background colour.
body {
margin: 0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #343434;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover {
color: yellow;
}
.welcome {
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3 {
text-align: center;
margin-top: 0;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
You can try adding style="display: inline; margin:0px; padding:0px;" to your <h3> Tag.
Another way is to apply a rule of overflow: auto to the .welcome div... thus creating a new block formatting context and avoiding the collapsing margins.
Edit: Let's add a little more context. In the spec, you can read that adjoining margins will collapse under certain circumstances. In particular, the margins need to belong to block-level boxes participating in the same block formatting context.
Even though .welcome and h3 are block-level boxes in your example, neither automatically establishes a new block formatting context (meaning they participate in the same block formatting context, meaning their margins collapse). Looking at the spec again, we see that some of the ways to establish a new block formatting context is to have a float, an absolutely positioned element, or a block box with the property of overflow set to something else than visible.
That's why the suggestions regarding overflow: auto or floating one of the elements work. My understanding is that if we make .welcome establish a new block formatting context, the context it participates in is different from the one it establishes itself. Removing the margin (possibly replacing it with padding) is another way to get around the problem.
Either apply margin-top:0 for H3-Tag
or
apply a float:left for .welcome
Both will fix your issue
I've been having trouble getting my buttons to center in CSS. I know the correct code to do so but all I have tried so far hasn't worked. I think that something is interfering with the code to center it but after an hour of looking I haven't been able to figure out the issue.
Here's my HTML:
#font-face {
font-family: BebasNeue;
src: url('BebasNeue Regular.otf');
}
body {
font-family: helvetica;
background-color: #F6F6F6;
margin: 0 auto;
width: 1400px;
}
.button {
background-color: #DE1B1B;
/* Red */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
ul {
margin: 0 auto;
list-style-type: none;
background-color: #2B2B2B;
font-size: 25px;
font-family: BebasNeue, sans-serif;
}
h1 {
float: left;
margin: 0px 0 20px 0;
padding: 5px 0 0 0;
width: 100%;
font-size: 50px;
font-family: BebasNeue, sans-serif;
color: #E9E581;
background-image: url('classroomb.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
#heading {
margin-top:
}
li {
display: inline;
}
a {
padding: 6px;
text-decoration: none;
color: #DE1B1B;
position: center;
}
p {
font-size: 22px;
padding: 40px;
margin: 0 auto;
width: 1000px;
}
<!DOCTYPE html>
<html>
<head>
<title>Ms. Houck's Math Class</title>
<link rel="stylesheet" href="HouckStyle1.css">
</head>
<body>
<header>
<div>
<ul>
<li> Home </li>
<li> Homework </li>
<li> HW Solutions </li>
<li> Documents </li>
<li> Calendar </li>
</ul>
</div>
</header>
<center>
<h1>
<div id="heading">Ms. Houck's Math Classes<br><br><br><br></h1>
</div>
</center>
<p>
Welcome students! Please use the navigation bar at the top of the page to access what you need. You can also access the homework and schedule by clicking the links below. <br>
<br>Homework
Homework Answers
</p>
</body>
</html>
The best and the easiest way is to use flexbox and use justify-content:center which aligns the items in the center of the main axis. You can learn more about flexbox here.
You could just wrap the two buttons in a new <div> which you then tell to have its content centered:
Add to css:
.center {
text-align: center;
}
HTML:
<div class="center">
Homework
Homework Answers
</div>
JSFiddle
Please consider using <div class="center"> instead of deprecated <center> tag.
You can just use flexbox and justify-content: center; on the navigation ul (took out div)
Use margin on the li a to modify spacing.
#font-face {
font-family: BebasNeue;
src: url('BebasNeue Regular.otf');
}
body {
font-family: helvetica;
background-color: #F6F6F6;
margin: 0 auto;
width: 1400px;
}
.button {
background-color: #DE1B1B;
/* Red */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
ul {
margin: 0 auto;
list-style-type: none;
background-color: #2B2B2B;
font-size: 25px;
font-family: BebasNeue, sans-serif;
}
h1 {
float: left;
margin: 0px 0 20px 0;
padding: 5px 0 0 0;
width: 100%;
font-size: 50px;
font-family: BebasNeue, sans-serif;
color: #E9E581;
background-image: url('classroomb.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
#heading {
margin-top:
}
header ul {
display: flex;
justify-content: center;
}
li {
display: inline;
}
a {
padding: 6px;
text-decoration: none;
color: #DE1B1B;
position: center;
}
p {
font-size: 22px;
padding: 40px;
margin: 0 auto;
width: 1000px;
}
<!DOCTYPE html>
<html>
<head>
<title>Ms. Houck's Math Class</title>
<link rel="stylesheet" href="HouckStyle1.css">
</head>
<body>
<header>
<ul>
<li> Home </li>
<li> Homework </li>
<li> HW Solutions </li>
<li> Documents </li>
<li> Calendar </li>
</ul>
</header>
<center>
<h1>
<div id="heading">Ms. Houck's Math Classes<br><br><br><br></h1>
</div>
</center>
<p>
Welcome students! Please use the navigation bar at the top of the page to access what you need. You can also access the homework and schedule by clicking the links below. <br>
<br>Homework
Homework Answers
</p>
</body>
</html>
#font-face {
font-family: BebasNeue;
src: url('BebasNeue Regular.otf');
}
body {
font-family: helvetica;
background-color: #F6F6F6;
margin: 0 auto;
width: 1400px;
}
.button {
background-color: #DE1B1B;
/* Red */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
ul {
margin: 0 auto;
list-style-type: none;
background-color: #2B2B2B;
font-size: 25px;
font-family: BebasNeue, sans-serif;
}
h1 {
float: left;
margin: 0px 0 20px 0;
padding: 5px 0 0 0;
width: 100%;
font-size: 50px;
font-family: BebasNeue, sans-serif;
color: #E9E581;
background-image: url('classroomb.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
li {
display: inline;
}
a {
padding: 6px;
text-decoration: none;
color: #DE1B1B;
position: center;
}
p {
font-size: 22px;
padding: 40px;
margin: 0 auto;
width: 1000px;
}
.center{
text-align:center;
}
<header>
<div>
<ul>
<li> Home </li>
<li> Homework </li>
<li> HW Solutions </li>
<li> Documents </li>
<li> Calendar </li>
</ul>
</div>
</header>
<br/>
<div class="center"><h1>Ms. Houck's Math Classes</h1></div><br/><br/><br/><br/><br/>
<p>
Welcome students! Please use the navigation bar at the top of the page to access what you need. You can also access the homework and
schedule by clicking the links below.
</p>
<br><br>
<div class="center">
Homework
Homework Answers</div>
Your buttons are not centered. They are in <p> code.
If you want to center them - make other block with align tag
<center> tag is deprecated, should not use this
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 trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>