In the organization chart below, when you hover over an element in A, B or C column, there is a weird thing happening. The lines and boxes after hovered element are moving down as the hovered element is changing size, but after it has finished resizing, those lines and boxes return to previous position. (I want to keep this position always, even during resizing of an hovering element)
Can anyone help me fix this?
Code:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
transition: all linear 1s;
}
.tree{
width: 50%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 20px;
}
ul{
list-style: none;
padding: 0;
}
ul a{
display: block;
background: #ccc;
border: 2px solid #000;
text-align: center;
font: bold 11px "Times New Roman", Times, serif;
text-decoration: none;
height: 90px;
box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.5);
}
img {
width: 29%;
height: 80px;
float: left;
margin: 3px 0 0 6px;
border: 1px solid #FFF;
border-radius: 5px;
}
a:hover{
font: bold 11.5px "Times New Roman", Times, serif;
}
a:hover span{
font-size: 16px;
}
a:hover > img{
width: 30%;
height: 90px;
}
.tree span{
font-size: 15px;
}
.leader{
width: 35%;
margin: 0 auto;
}
.leader:after{
content: "";
display: block;
height: 60px;
border-left: 2px solid #000;
margin: 0 0 -20px 50%;
}
.leader a{
margin: 0 auto;
border-radius: 10px;
width: 85%;
}
.leader a:hover{
box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1);
height: 100px;
width: 90%;
margin: -10px auto 0 auto;
}
.teams{
margin-left: -3%;
}
.teams li{
float: left;
width: 30.3%;
margin-left: 3%;
}
.teams:after{
content: "";
display: block;
width: 66.5%;
height: 20px;
border-top: 2px solid #000;
border-right: 2px solid #000;
border-left: 2px solid #000;
margin-left: 18%;
}
.team li{
margin: 0 auto;
}
.team a{
height: 35px;
margin-top: 20px;
}
.team li a{
margin-left: 10%;
}
.team > a:first-child{
pointer-events: none;
}
.employees li{
float: none;
width: 100%;
}
.employees li:before{
content: "";
display: block;
height: 60px;
border-left: 2px solid #000;
border-bottom: 2px solid #000;
width: 9%;
}
.employees li:nth-child(1n+2):before{
height: 100px;
margin-top: -43px;
}
.employees li a{
width: 90%;
height: 90px;
border-radius: 10px;
margin-top: -47px;
z-index: 1;
}
.employees li a:hover{
box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1);
height: 100px;
width: 95%;
margin: -52px 0 -48px 5%;
}
<body ondragstart="return false">
<div class="tree">
<ul>
<li class="leader">Leader</li>
<ul class="teams">
<li class="team a">A
<ul class="employees">
<li>A1</li>
<li>A2</li>
<li>A3</li>
<li>A4</li>
</ul>
</li>
<li class="team b">B
<ul class="employees">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="team c">C
<ul class="employees">
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
</li>
</ul>
</ul>
</div>
</body>
I would suggest using transform:scale(x) for the hover effect instead of actually changing the element size. Transform does not affect the overall layout so the surrounding elements stay where they are. Also transforms don't cause the browser to repaint and can use the GPU for the animating process so they are generally much smoother.
Related
I am working on Expandable Search but facing one problem. When i click on search bar then search bar is expanding. But right side content is moving down. I wanna hide right side content when search bar is expand similar to stackoverflow search bar.
body {
margin: 0;
padding: 0;
}
.mainheader {
width: 100%;
background-color: #FAFAFB;
border-top: 3px solid #F48024;
float: left;
padding-bottom: 10px;
-moz-box-shadow: 3px 3px 5px 1px #ccc;
-webkit-box-shadow: 3px 3px 5px 1px #ccc;
box-shadow: 3px 3px 5px 1px #ccc;
}
.innerheader {
width: 1000px;
margin: auto;
}
.logo_name {
display: inline-block;
margin-top: 13px;
line-height: 1em;
font-family: helvetica, arial, sans-serif;
font-weight: bold;
background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 22px;
}
.ga_a {
float: left;
}
.ga_b {
float: left;
padding: 5px;
padding-bottom: 10px;
margin-top: 5px;
}
.ga_b ul {
margin: 0px;
padding: 0px;
margin-left: 7px;
line-height:1;
}
.ga_b ul>li {
display:inline-block;
margin-left: 5px;
padding: 5px;
}
.ga_b ul>li a {
text-decoration: none;
color: black;
font-size: 15px;
font-family: "Lucida Grande",Arial,Helvetica,Verdana,sans-serif;
}
.ga_b ul>li:hover {
background-color: #ECECEC;
}
.ga_c {
float: left;
}
.ga_c input {
outline: none;
}
.ga_c input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
margin-left: 10px;
}
.ga_c input::-webkit-search-decoration,
.ga_c input::-webkit-search-cancel-button {
display: none;
}
.ga_c input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ffffff;
padding: 9px 10px 9px 32px;
width: 175px;
border-radius: 5px;
margin-top: 5px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.ga_c input[type=search]:focus {
width: 400px;
background-color: #fff;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
.ga_c input:-moz-placeholder {
color: #999;
}
.ga_c input::-webkit-input-placeholder {
color: #999;
}
.ga_d {
float: left;
}
.ga_d ul>li {
display: inline-block;
display: fixed;
}
<div class="mainheader">
<div class="innerheader">
<div class="ga_a">
<a class="navbar-brand logo_name" href="#">WebSiteName</a>
</div>
<div class="ga_b">
<ul>
<li>Text One</li>
<li>Text Two</li>
<li>Text Three</li>
</ul>
</div>
<div class="ga_c">
<form>
<input type="search" placeholder="Search">
</form>
</div>
<div class="ga_d">
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</div>
You can do it with the positioning:
* {box-sizing: border-box} /* recommended */
body {
margin: 0;
padding: 0;
}
.mainheader {
width: 100%;
min-width: 1000px; /* added / needs to match the .innerheader width */
margin: 0 auto; /* added */
background-color: #FAFAFB;
border-top: 3px solid #F48024;
float: left;
padding-bottom: 10px;
-moz-box-shadow: 3px 3px 5px 1px #ccc;
-webkit-box-shadow: 3px 3px 5px 1px #ccc;
box-shadow: 3px 3px 5px 1px #ccc;
}
.innerheader {
width: 1000px;
margin: 0 auto; /* modified */
}
.logo_name {
display: inline-block;
margin-top: 13px;
line-height: 1em;
font-family: helvetica, arial, sans-serif;
font-weight: bold;
background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 22px;
}
.ga_a {
float: left;
}
.ga_b {
float: left;
padding: 5px;
padding-bottom: 10px;
margin-top: 5px;
}
.ga_b ul {
margin: 0;
padding: 0;
margin-left: 7px;
line-height: 1;
}
.ga_b ul>li {
display:inline-block;
margin-left: 5px;
padding: 5px;
}
.ga_b ul>li>a {
text-decoration: none;
color: #000; /*black*/
font-size: 15px;
font-family: "Lucida Grande",Arial,Helvetica,Verdana,sans-serif;
}
.ga_b ul>li:hover {
background: #ECECEC;
}
.ga_c {
position: relative; /* needs to be set because of the absolute positioned child */
float: left;
}
.ga_c input {
outline: none;
}
.ga_c input[type=search] {
position: absolute; /* needs to be positioned absolutely, i.e. be removed from the normal document flow so that it can "overlay" and other element, of course the z-index needs to be set */
z-index: 9999; /* usually something big just to be sure it stays on top / in front of everything else */
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
margin-left: 10px;
}
.ga_c input::-webkit-search-decoration,
.ga_c input::-webkit-search-cancel-button {
display: none;
}
.ga_c input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #fff;
padding: 9px 10px 9px 32px;
width: 175px;
border-radius: 5px;
margin-top: 5px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.ga_c input[type=search]:focus {
width: 400px;
background-color: #fff;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
.ga_c input:-moz-placeholder {
color: #999;
}
.ga_c input::-webkit-input-placeholder {
color: #999;
}
.ga_d {
position: relative; /* positioned relative to its normal position so that we can move it with "directional" properties */
left: 229px; /* moved to the right by the width of the .ga_c (inspected the element) */
float: left;
}
.ga_d ul>li {
display: inline-block;
display: fixed;
}
<div class="mainheader">
<div class="innerheader">
<div class="ga_a">
<a class="navbar-brand logo_name" href="#">WebSiteName</a>
</div>
<div class="ga_b">
<ul>
<li>Text One</li>
<li>Text Two</li>
<li>Text Three</li>
</ul>
</div>
<div class="ga_c">
<form>
<input type="search" placeholder="Search">
</form>
</div>
<div class="ga_d">
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</div>
With your structure, it is not possible using css only. However if change the structure you could have something like this.
*{
box-sizing: border-box;
font-family: arial;
}
input{
padding: 10px;
background: #eee;
border: 1px solid #ddd;
display: inline-block;
transition: .3s;
margin-right: 10px;
width: 250px;
}
input:focus{
width: 400px;
}
input:focus + div{
opacity: 0;
visibility: hidden;
}
ul{
padding: 0;
margin: 0;
}
ul li{
display: inline;
margin-right: 5px;
}
div {
display: inline-block;
transition: .3s;
}
<input type="search" placeholder="Search">
<div class="ga_d">
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</div>
I am using HTML lists for dropdown menus in my navbar. The problem I have come across is that when the browser window is small, the dropdown goes off-screen to the left.
I am wondering on the best way to simply center it and stretch the content across 100% at a small screensize.
The problem is the notifications menu (hover over the little envelope).
I've put up some code I ripped from the site which gives you an idea: http://codepen.io/anon/pen/eBeYXd
Hover over the far-right item and the menu will appear, make the browser the size of a mobile screen and see the dropdown move off to the left being cut off.
Code below:
<div class="navigation-main">
<div class="container group">
<ul class="header-navbar">
<!-- notes test -->
<li class="dropdown pull-right alerts-box">
<img src="/templates/default/images/comments/envelope.png" alt=""/> <span class="badge badge-important">1</span> <b class="caret"></b>
<ul class="dropdown-menu">
<li><strong>liamdawe</strong> replied to "test a test test a test test a test test a test te…"</li>
<li class="divider"></li><li>Clear all</li>
<li class="divider"></li>
<li>See all</li>
</ul>
</li>
<!-- notes test -->
</ul>
</div>
</div>
CSS code:
*, *:before, *:after {
box-sizing: inherit;
}
.navigation-main {
position: fixed;
top: 0;
width: 100%;
height: 49px;
z-index: 10001;
background-color: #222;
}
.header-navbar {
list-style: none;
padding: 0;
margin: 0;
}
.header-navbar>li {
float: left;
}
.header-navbar>.pull-right {
float: right;
}
.header-navbar>li>a {
display: block;
color: #999;
padding: 14px;
}
.header-navbar>.active>a {
color: #FFF;
background-color: #000;
}
.header-navbar>li>a:hover {
color: #FFF;
text-decoration: none;
}
.header-navbar>.header-brand>a {
line-height: 0;
padding: 9px 14px;
margin-left: -14px;
}
.header-search {
padding: 9px 0;
}
.header-search .search-field {
width: auto;
background-color: #333;
border: 1px solid #5c5c5c;
outline: none;
line-height: 19px;
height: 30px;
color: #fff;
margin: 0;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.header .dropdown-menu {
border-top-width: 1px;
}
.header .dropdown:hover .caret {
border-top-color: #FFF;
}
.header-avatar {
padding: 9px 0 9px 14px;
}
.dropdown {
position: relative;
}
.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-top: 4px solid #999;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: ""
}
.dropdown-menu {
position: absolute;
top: 49px;
left: 0;
z-index: 999;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 0;
list-style: none;
text-align: left;
background-color: #222;
border: 1px solid #000;
box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
display: none;
}
.dropdown-menu li {padding: 0 15px 2px;}
.dropdown-menu .divider {
*width: 100%;
height: 1px;
padding: 0px;
margin: 9px 0;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #383838;
}
.dropdown-menu a {
display: block;
clear: both;
line-height: 26px;
color: #999;
white-space: nowrap;
padding: 2px;
}
.dropdown-menu li>a:hover, .dropdown-menu li>a:focus {
text-decoration: none;
color: #fff;
}
.pull-right .dropdown-menu {
right: 0;
left: auto;
}
.pull-right {
float: right;
}
.nav-avatar {
vertical-align: middle;
background-color: #333;
}
play with min-width: or max-width: and probably allow your text to wrap
something like this
.dropdown-menu a {
display: block;
clear: both;
line-height: 26px;
color: #999;
min-width: 200px;
white-space: wrap;
padding: 2px;
}
Im working on menu, which is text justified. To make this working, I add an new line. the problem is that it should be zero pixels. However, it's breaking layout
JS fiddle to see it in work
https://jsfiddle.net/z1qsL739/1/
<div class="registration-menu">
<ul class="reg-menu-list">
<li class="active">some </li>
<li>some</li>
<div class="justify-fix"></div>
</ul>
</div>
Css
.registration-menu{
background: white;
border-top: 4px solid green;
border-bottom: 4px solid green;
}
.reg-menu-list{
list-style: none;
display: inline-block;
text-align: justify;
width: 100%;
line-height: 0em;
color: green;
font-size: 0px;
margin: 0;
padding: 0;
.justify-fix{
width: 100%;
line-height: 0em;
height: 0;
display: inline-block;
content: ' ';
}
li{
display: inline-block;
line-height: 1em;
font-size: 18px;
&.active{
background: #fde8be;
border-top: 4px solid #ffb642;
border-bottom: 4px solid #ffb642;
margin: -4px 0 -4px 0;
}
a{
padding: 10px;
display: inline-block;
}
&:hover{
#include transition(all .4s ease);
background: #fde8be;
}
}
}
Try by adding the following rules, height: 46px; to the .registration-menu and padding: 4px 0; to the .reg-menu-list
.registration-menu {
background: white none repeat scroll 0 0;
border-bottom: 4px solid green;
border-top: 4px solid green;
height: 46px;
}
.reg-menu-list {
color: green;
display: inline-block;
font-size: 0;
line-height: 0;
list-style: outside none none;
padding: 4px 0;
text-align: justify;
width: 100%;
}
A div is not allowed inside a list as a direct child. A modern and straightforward way to go is using flexbox positioning, e.g.
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
}
Example: http://codepen.io/anon/pen/dpbWJk?editors=0100
You don't need the div at all, use a pseudo-element
.registration-menu {
background: white;
border-top: 4px solid green;
border-bottom: 4px solid green;
}
.reg-menu-list {
list-style: none;
text-align: justify;
width: 100%;
line-height: 0em;
color: green;
font-size: 0px;
margin: 0;
padding: 0;
}
.reg-menu-list::after {
width: 100%;
line-height: 0em;
height: 0;
display: inline-block;
content: ' ';
}
li {
display: inline-block;
line-height: 1em;
font-size: 18px;
background: pink;
}
li.active {
background: #fde8be;
border-top: 4px solid #ffb642;
border-bottom: 4px solid #ffb642;
margin: -4px 0 -4px 0;
}
a {
padding: 10px;
display: inline-block;
}
a:hover {
#include transition(all .4s ease);
background: #fde8be;
}
<div class="registration-menu">
<ul class="reg-menu-list">
<li class="active">some
</li>
<li>some
</li>
<li>some
</li>
<li>some
</li>
<li>some
</li>
<li>some
</li>
</ul>
</div>
remove display: inline-block from .reg-menu-list
My drop down menu in mobile view hides behind my banner. I can't seem to fix it. I have added the z-index, and I've gone as high as 999 and still no difference.
this is the test page
Here is HTML:
<li class="dropdown">
<a class="dropdown-toggle provinces-btn" data-toggle="dropdown">Select Province<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Alberta</li>
<li>British Columbia</li>
<li>Manitoba</li>
<li>New Brunswick</li>
<li>Newfoundland and Labrador</li>
<li>Nova Scotia</li>
<li>Nunavut</li>
<li>Ontario</li>
<li>Prince Edward Island</li>
<li>Quebec</li>
<li>Saskatchewan</li>
</ul>
</li>
Here is CSS:
.dropdown-menu {
left: 40% !important;
margin-left: -30px;
z-index: 50;
}
#media screen and (max-width: 768px) {
.provinces-btn {
width: 100%;
margin-top: 1px;
border-radius: 12px;
background-color: #3498db;
border-color: rgba(0,0,0,0.3);
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
color: #FFF !important;
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
padding: 10px 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border: 1px solid rgba(0,0,0,0.3);
border-bottom-width: 3px;
text-decoration: none;
z-index: 60;
}
.provinces-btn:hover, .provinces-btnActive {
color: #FFEE00 !important;
background: #1975D1;
font-weight: 900;
}
.provinces-btn ul{
margin: 0 auto;
}
}
#media screen and (max-width: 604px) {
.provinces-btn {
width: 100%;
margin-top: 1px;
margin-left: 15px;
border-radius: 12px;
background-color: #3498db;
border-color: rgba(0,0,0,0.3);
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
color: #FFF !important;
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
padding: 10px 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border: 1px solid rgba(0,0,0,0.3);
border-bottom-width: 3px;
text-decoration: none;
z-index: 60;
}
.provinces-btn:hover, .provinces-btnActive {
color: #FFEE00 !important;
background: #1975D1;
font-weight: 900;
}
.provinces-btn ul{
margin: 0 auto;
}
}
Other CSS with z-index that I'm not sure if it is affecting it:
nav {
padding: 0;
position:relative;
z-index:10;
height: 0;
}
.showMenu {
display: block;
background: url() no-repeat center;
background-size: 48px 48px;
height: 80px;
right: 0;
top: 0;
text-indent: -999999px;
font-size: 0;
position: absolute;
z-index:11;
border-left: 1px solid #DDDDDD;
}
the problem isnt z-index problem the real problem is your header, just change
header {
width: 100%;
height: auto;
background: #FFFFFF;
overflow: auto;
overflow-y: hidden;
overflow-x: hidden;
margin-bottom: 2%;
}
To
header {
width: 100%;
height: auto;
background: #FFFFFF;
margin-bottom: 2%;
}
Z-Index only works on positioned elements, try adding this to your .dropdown-menu:
position: relative;
Don't make the overflow hidden. If it is set to hidden, it will not allow your new divs (inside the parent element where overflow:hidden) to pop up or overlap other divs.
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;
}