I want to make the list centered with the given width.
body {
background-color: rgb(26, 40, 114);
}
h1 {
color: white;
text-shadow: 7px 7px 10px black;
}
li {
list-style: none;
border-radius: 5px;
border: 2px solid white;
background-color: black;
padding: 7px;
width: 200px;
}
#menu {
text-align: center
}
#list {
margin: 0px;
padding: 0px;
overflow: hidden;
text-align: center;
}
<body>
<h1 class="text-center">MENU</h1>
<div id="menu">
<ul id="list">
<li>text_1</li>
<li>text_2</li>
<li>text_3</li>
<li>text_4</li>
<li>text_5</li>
</ul>
</div>
</body>
simply give display: flex; and justify-content:center; to the id #menu
body {
background-color: rgb(26, 40, 114);
}
h1 {
color: white;
text-shadow: 7px 7px 10px black;
text-align:center;
}
li {
list-style: none;
border-radius: 5px;
border: 2px solid white;
background-color: black;
padding: 7px;
width: 200px;
}
#menu {
display:flex;
justify-content: center;
}
#list {
margin: 0px;
padding: 0px;
overflow: hidden;
text-align: center;
}
<body>
<h1 class="text-center">MENU</h1>
<div id="menu">
<ul id="list">
<li>text_1</li>
<li>text_2</li>
<li>text_3</li>
<li>text_4</li>
<li>text_5</li>
</ul>
</div>
</body>
Just add this one rule:
#list li {
margin: auto;
}
And, by the way, it seems you forgot to add this:
.text-center {
width:100%;
text-align:center;
}
body {
background-color: rgb(26, 40, 114);
}
h1 {
color: white;
text-shadow: 7px 7px 10px black;
}
li {
list-style: none;
border-radius: 5px;
border: 2px solid white;
background-color: black;
padding: 7px;
width: 200px;
}
#menu {
text-align: center
}
#list {
margin: 0px;
padding: 0px;
overflow: hidden;
text-align: center;
}
/*added:*/
#list li {
margin: auto;
}
.text-center {
width:100%;
text-align:center;
}
<body>
<h1 class="text-center">MENU</h1>
<div id="menu">
<ul id="list">
<li>text_1</li>
<li>text_2</li>
<li>text_3</li>
<li>text_4</li>
<li>text_5</li>
</ul>
</div>
</body>
One of the options is to change the default behaviour of the ul element and render it as a table. Add this css to #list selector:
display: table;
margin-left: auto;
margin-right: auto;
Result:
body {
background-color: rgb(26, 40, 114);
}
h1 {
color: white;
text-shadow: 7px 7px 10px black;
}
li {
list-style: none;
border-radius: 5px;
border: 2px solid white;
background-color: black;
padding: 7px;
width: 200px;
}
#menu {
text-align: center
}
#list {
padding: 0px;
overflow: hidden;
text-align: center;
display:table;
margin-left:auto;
margin-right:auto;
}
<h1 class="text-center">MENU</h1>
<div id="menu">
<ul id="list">
<li>text_1</li>
<li>text_2</li>
<li>text_3</li>
<li>text_4</li>
<li>text_5</li>
</ul>
</div>
Related
I'm having a little positioning error and I'm sure it's a simple fix, but after trying lots of different combinations of margin and padding, I can't get it perfect. The problem is I can't seem to get my drop-up menu (footer-nav ul ul) to move down 10px when it appears by hovering over #info. If I remove the margin from the css under #info, it drops the footer-nav ul ul down 10px where I need it, but it removes the 10px margin between the black box (streaks-content) and the footer-nav. Anyone know how to fix this? I appreciate it so so much! I don't know what I would do without you geniuses!
Here is the JS Fiddle: https://jsfiddle.net/fe2zk4L8/19/
Here is the html:
<header id="header">
<div id="nav">
<ul>
<li id="projects">PROJECTS
<ul>
<li id="one"> ONE </li>
<li id="two"> TWO </li>
<li id="three"> THREE </li>
<li id="four"> FOUR </li>
</ul>
</li>
</ul>
</div>
</header>
<div id="color">
<div id="streaks-content">
</div>
</div>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="info">INFO
<ul>
<li id="twitter">
TWITTER
</li>
<li id="instagram">
INSTAGRAM
</li>
<li id="email">
EMAIL
</li>
</ul>
</li>
</ul>
</div>
</footer>
Here is the css:
a {
text-decoration: none;
color: inherit;
display: block;
}
#header {
width: 100%;
position: fixed;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#nav {
width: 100%;
background-color: #FFFFFF;
}
#projects {
display: inline-block;
padding-bottom: 10px;
}
#nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#nav ul li:hover>ul {
display: block;
position: absolute;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#one {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#one:hover {
background-color: black;
color: white;
}
#two {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#two:hover {
background-color: black;
color: white;
}
#three {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#three:hover {
background-color: black;
color: white;
}
#four {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#four:hover {
background-color: black;
color: white;
}
#footer {
width: 100%;
background-color: white;
position: fixed;
margin: 0px;
bottom: 0;
left: 0;
text-align: center;
z-index: 11;
}
#footer-nav {
width: 100%;
}
#info {
display: inline-block;
padding-top: 10px;
}
#footer-nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#footer-nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#twitter {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#twitter:hover {
background-color: black;
color: white;
}
#email {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#email:hover {
background-color: black;
color: white;
}
#instagram {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#instagram:hover {
background-color: black;
color: white;
}
#color {
width: 100%;
align-content: center;
}
#streaks-content {
background-color: black;
width: 300px;
height: 1000px;
display: block;
margin: 0 auto;
}
Please add to the following CSS selector #footer-nav ul li:hover>ul that rule padding-bottom: 0;
so, in total you should have:
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
padding-bottom: 0;
}
I'm making an assignment that I can only use HTML/CSS to make a website. I'm having a problem with my website footer on my posts page. The footer goes from the beginning of a wrapper that I have and overlaps the other post and doesn't fit the body as well. I'll send two links, one of the posts page and other with the CSS classes and id's that I'm using! Hope I can get some help!
Here is the link with the page + the CSS that I'm using on it:
https://codepen.io/brumone/pen/wjgJBxLink
PS: I've put the whole CSS on it, so it doesn't look weird.
There were two issues
- The div tag for the wrapper was not closing
- The position for footer css is changed from absolute to static
* {
box-sizing: border-box;
}
html{
position: relative;
min-height: 100%;
}
body{
margin: 0;
height: 100%;
}
.home{
background-image: url("../imgs/imgburgerbg.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.form-group{
padding: 10px;
}
.msg-erro{
color: red;
font-size: 0.8em;
font-style: italic;
}
header{
padding: 1em;
color: white;
background-color: rgb(204, 36, 47);
clear: left;
text-align: center;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(204, 36, 47);
text-align: center;
}
.navbar li {
display: inline-block;
text-align: center;
}
.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover:not(.active) {
background-color: #111;
text-align: center;
}
.active {
background-color: #4CAF50;
}
#content{
text-align: center;
padding-top: 10%;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0 , 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.1);
color: white;
}
hr{
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
footer {
position: static;
bottom: 0;
width: 100%;
height: 75px;
text-align: center;
color: white;
background-color: rgb(204, 36, 47);
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid black;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=email] {
width: 100%;
padding: 12px;
border: 1px solid black;
border-radius: 4px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 19px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
input[type=submit]:hover {
background-color: #45a049;
}
.form-container{
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75{
float: left;
width: 25%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.wrapFooter{
position: static;
bottom: 0;
width: 100%;
height: 75px;
text-align: center;
color: white;
background-color: rgb(204, 36, 47);
font-size: small;
}
#wrapper {
width: 600px;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
overflow: auto;
}
.post {
border-radius: 10px;
padding: 5px;
margin-bottom: 5px;
background: #ffffff;
border: 3px solid red;
}
.imgburger{
height: 100%;
width: 100%;
object-fit: contain;
}
<html>
<head>
<meta charset="utf-8">
<title>Reviews</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<h1>burgeReview</h1>
</header>
<div class="navbar">
<nav>
<ul>
<li class="active">Home</li>
<li>Sobre</li>
<li>Contato</li>
<li>Reviews</li>
</ul>
</nav>
</div>
<div id="wrapper">
<div id="conteudo">
<div class="post">
<h2>Titulo</h2>
<h5>28 de abril, 2018</h5>
<img src="assets/imgs/burger1.jpeg" class="imgburger" alt="">
<p>Great burger, really salty and</p>
</div>
<div class="post">
<h2>Titulo</h2>
<p>Great burger, really salty and</p>
</div>
<div class="post">
<h2>Titulo</h2>
<p>Great burger, really salty and</p>
</div>
</div>
</div>
<footer>
<h2>Copyright © Daniel Brum</h2>
</footer>
</body>
</html>
You need to major improvement in your code but here the link of codepen
Hopefully that help you. Below are footer CSS
footer {
width: 100%;
height: 75px;
text-align: center;
color: white;
background-color: rgb(204, 36, 47);
}
I have been working on fixing this but cannot figure out what I am missing. I would like for drop down list to show right below its parent. The list shows but all go to far left and forces the remaining nav items to drop down to another line. i have included a snippet for what is currently looks like and an image of what I want it to look like. Also, I have been trying to figure out how to add down fa fa-caret to nav items with drop down list. Please help!
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
overflow: hidden;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
font-size: 20px;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
You can achieve this by first making the div.list element into an absolute positioned. The 'display:block' property was pushing all the other content down to the next row because the block element was taking up space.
As you see now the list is no longer pushing the content down but now it is not aligned to the correct nav item. We are also going to add a left:0 so that the div.list is to the left of the parent property.
Now the parent property needs a position of relative so that the left:0 on the child element is being positioned relative to the parent element.
.dropdown:hover .list {
display: block;
position: absolute;
left: 0;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
The problem with your CSS code is, you missed to add position: relative and position: absolute to the .dropdown and .list selectors, which is compulsory to create dropdown. Try this code.
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar li:hover > a {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
position: relative;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
left: 0;
top: 100%;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background-color: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
--> Please update following code in your existing file
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
}
.list {
opacity: 0;
visibility: hidden;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
top: 20px;
left: 0;
transition: 0.3s ease-in-out;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #dddddd;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
opacity: 1;
visibility: visible;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
I'm looking to get rid of the "inbetween" borders of the nav bar.
I have numerous ul's and li's and it seems to be interfering with my nav bar even though I assigned classes to it.
Here's a pic what it should look like:
body{
background-image: url("../Images/bg.jpg");
color: white;
}
h1{
font-family: sans-serif;
font-size: 4em;
}
h2{
height: 56px;
font-family: sans-serif;
text-align: center;
}
.white{
color: white
}
.blue{
color: #00bfff
}
li{
display: block;
border-style: solid;
border-color: white;
border-width: 1px;
padding: 4px;
}
ul{
border-style: solid;
border-color: white;
border-width: 1px;
width: 100%;
margin: 0px;
padding: 0;
font-family: sans-serif;
}
.small{
width: 270px;
float: left;
}
.red{
background-color: #FF4500;
}
.orange{
background-color: #FF8C00;
}
.yellow{
background-color: #FFBF00;
}
.brown{
background-color: #9C6E03;
}
.black{
background-color: #0d1a00
}
img{
width: 100%;
height: 184px;
}
.zoom{
width: 370px;
height: 600px;
font-size: 20px;
float: left;
background-image: url("../Images/bg.jpg");
margin-top: -50px;
}
.menuUl{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden
}
.menuLi{
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: firebrick;
border-radius: 5px:
}
note: I am aware that the href links aren't in yet.
JS fiddle:
https://jsfiddle.net/rsgq3v5e/
html, body {
background-color:#222;
}
.menuUl {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
}
.menuLi {
float: left;
}
li a {
border-radius:5px;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: firebrick;
}
<ul class="menuUl">
<li class="menuLi"><a class="active" href="EindOpdracht.html">COURSES</a>
</li>
<li class="menuLi">INFO DAY
</li>
<li class="menuLi">LOCATIONS
</li>
</ul>
html, body {
background-color:#222;
}
.menuUl {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-top: solid 1px #EEE;
border-bottom: solid 1px #EEE;
}
.menuLi {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-radius: 10px;
}
li a:hover {
background-color: firebrick;
}
li a.active {
background-color: firebrick;
}
<ul class="menuUl">
<li class="menuLi"><a class="active" href="EindOpdracht.html">COURSES</a>
</li>
<li class="menuLi">INFO DAY
</li>
<li class="menuLi">LOCATIONS
</li>
</ul>
.menuUl {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #424242;
border-top: 2px solid white;
border-bottom: 2px solid white;
}
.menuLi {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #e65e0f;
border-radius: 7px;
}
I have a slight problem with my code trying to get on the navbar, each section to have an equal amount of space and not have space according to how many characters they have in the title. For example, MAP should have as much as ABOUT.
Here is what it looks like now:
.wrap {
width: 90%;
background-image: url(images/navbarbackground.png);
background-repeat: no-repeat;
margin: auto;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
padding: 0px;
font-family: minecrafter;
}
.wrap:after {
content: " ";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.wrap ul {
display: table;
width: 95%;
}
.wrap li {
display: table-cell;
vertical-align: middle;
}
.wrap li a {
text-decoration: none;
background-color: #EEEEEE;
color: #666666;
padding: 6px 0 6px 0;
border: 1px solid #CCC;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
display: block;
text-align: center;
}
.wrap h2 {
margin-top: 10px;
margin-bottom: 10px;
text-transform: uppercase;
color: #ffffff;
width: 6em;
text-align: center;
line-height: 1.0;
letter-spacing: .04em;
display: in line-block;
vertical-align: middle;
float: left;
}
.wrap h2 span {
display: block;
letter-spacing: .17em;
}
.navwrap {
margin-top: 0px;
overflow: hidden;
padding-top: 16px;
padding-bottom: 0px;
margin-bottom: 10px;
}
<div class="wrap">
<h2 class="minecrafter">Miners <span>Union</span></h2>
<div class="navwrap">
<ul class="nav">
<li>Home
</li>
<li>Forums
</li>
<li>Donate
</li>
<li>Apply
</li>
<li>Map
</li>
</ul>
</div>
</div>
You could try this: fiddle
.wrap ul {
width:100%;
padding: 0;
}
.wrap li {
display:inline-block;
float: left;
width: 20%;
vertical-align:middle;
}
You just need
.wrap ul {
table-layout:fixed; /* this */
}
.wrap {
width: 90%;
background-image: url(images/navbarbackground.png);
background-repeat: no-repeat;
margin: auto;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
padding: 0px;
font-family: minecrafter;
}
.wrap:after {
content: " ";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.wrap ul {
display: table;
width: 80%; /* adjusted for demo only */
table-layout:fixed;
}
.wrap li {
display: table-cell;
vertical-align: middle;
}
.wrap li a {
text-decoration: none;
background-color: #EEEEEE;
color: #666666;
padding: 6px 0 6px 0;
border: 1px solid #CCC;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
display: block;
text-align: center;
}
.wrap h2 {
margin-top: 10px;
margin-bottom: 10px;
text-transform: uppercase;
color: #ffffff;
width: 6em;
text-align: center;
line-height: 1.0;
letter-spacing: .04em;
display: in line-block;
vertical-align: middle;
float: left;
}
.wrap h2 span {
display: block;
letter-spacing: .17em;
}
.navwrap {
margin-top: 0px;
overflow: hidden;
padding-top: 16px;
padding-bottom: 0px;
margin-bottom: 10px;
}
<div class="wrap">
<h2 class="minecrafter">Miners <span>Union</span></h2>
<div class="navwrap">
<ul class="nav">
<li>Home
</li>
<li>Forums
</li>
<li>Donate
</li>
<li>Apply
</li>
<li>Map
</li>
</ul>
</div>
</div>
Or look this way
.nav{
list-style: none;
}
.nav li{
display: inline-block;
min-width: 100px;
}
.nav li a{
text-decoration: none;
background-color: #EEEEEE;
color: #666666;
padding: 6px;
border: 1px solid #CCC;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
display: block;
text-align: center;
}