I want my text in the middle of the navigation bar. I tried vertical-align:center or middle but that didn't work.
Here is what I have:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
height: 60px;
}
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>
Set the line-height property equal to the height of your element :
li a {
height: 60px;
line-height: 60px;
}
In order to vertically centralise the text, you need set a line-height equal to the height of the element. In this case, it's 60px:
li a {
height: 60px;
line-height: 60px;
}
Hope this helps! :)
Use Flexbox (display: flex) to center the text. It's more flexible than line-height (height can be a percentage) and has good browser support. See caniuse.com.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: flex;
justify-content: center;
align-items: center;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
height: 60px;
}
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>
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
background-color: #333;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
color: white;
text-align: center;
text-decoration: none;
height: 22px;
}
li a:hover {
background-color: #111;
}
<ul class="nav">
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Related
Any one know how to do that active button with around space?
like this my sample image
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
You need to add some padding to your li elements, like the snippet below.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
padding: 10px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I have problem with my navigation. I try to center navigation elements and make them as block. Could you tell me why li elements are not block elements? I want to click on it not only on text.
html, body {margin: 0; padding: 0;}
body {
background: black;
color: yellow;
}
.nav {
list-style: none;
text-align: center;
padding-bottom: 30px;
border-bottom: solid brown 1px;
font-size: 25px;
}
.nav li {
display: inline-block;
border: solid yellow 0.5px;
padding-right: 30px;
}
.nav a {
text-decoration: none;
color: yellow;
}
and html:
<body>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</body>
Sorry for my English.
Simple answer, put your a tags outside the li tags like this: <li>Home</li>
html, body {margin: 0; padding: 0;}
body {
background: black;
color: yellow;
}
.nav {
list-style: none;
text-align: center;
padding-bottom: 30px;
border-bottom: solid brown 1px;
font-size: 25px;
}
.nav li {
display: inline-block;
border: solid yellow 0.5px;
}
.nav a {
text-decoration: none;
color: yellow;
display: block;
padding-right: 30px;
}
<body>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</body>
Make your a tags display: block; and move the padding from the li to the a
I'm trying to center the menu bar links. In the css every time I try to center it, it puts each link on a new line. So I make it float:center; and it makes each link a new line and just doesn't center it all. Any ideas?
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
use display:flex and justify-content:center in your ul (remove the float:left from li)
Float:center doesn't exist.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display:flex;
justify-content:center
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
Just add text-align:center to your ul and display:inline-block; to your li like this:
ul {
text-align:center;
}
li {
display:inline-block;
}
Here's a jsFiddle with above codes: https://jsfiddle.net/AndrewL32/4jendh7j/
HTML
Home
News
Photos
Videos
Schedule
Links
<ul id="HeaderMenu">
<li>Home</li>
<li>News</li>
<li>Photos</li>
<li>Videos</li>
<li>Schedule</li>
<li>Links</li>
<li>Contact</li>
</ul>
<ul id="footerMenu">
<li>Home</li>
<li>News</li>
<li>Photos</li>
<li>Videos</li>
<li>Schedule</li>
<li>Links</li>
<li>Contact</li>
</ul>
And address them separately in CSS as this :
body{
background: #cccccc url("http://www.paradise.lk/images/pattern.png") no-repeat;
width: 100%;
height:auto;
}
h1 {
text-align: center;
}
p.text{
text-align: center;
}
#HeaderMenu li {
float: left;
}
#HeaderMenu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#HeaderMenu li a:hover:not(.active) {
background-color: red;
color:black;
}
#footerMenu li {
float: left;
}
#footerMenu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#footerMenu li a:hover:not(.active) {
background-color: #2d6a05;
color:black;
}
ul.HeaderMenu {
list-style-type: none;
margin: -1px;
overflow: hidden;
background-color: #156611;
}
ul.footerMenu {
list-style-type: none;
margin: -1px;
overflow: hidden;
background-color: #156611;
}
#logo img {
height: 90px;
width: 212px;
}
.box {
background-color: #4b4244;
width: 300px;
padding: 25px;
margin: 25px;
}
.box1 {
background-color:white;
width: 300px;
padding: 25px;
margin: 25px;
}
Now do your styles separately for header and footer menus.
body{
background: #cccccc url("http://hdnaturewall.com/wallpaper/2015/10/sky-blue-wallpaper-background-18-desktop-background.jpg") no-repeat 0px -501px;
}
I am making a simple menu and I have a problem.
In my menu, there are several different options with a lightgrey top border. When you hover over the links i have there backgrounds turn lightgrey as well but there is still a small line above each link where they lightgrey background color does not cover.
See the picture below:
I do not want that line to be there. I have tried using padding but to no effect.
#wrapper {
width: 500px;
border-top: lightgrey 3px solid;
}
li a {
color: white;
font-size: 20px;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
height: 40px;
padding-left: 10px;
padding-right: 10px;
}
li a:hover {
color: black;
background: lightgrey;
}
ul {
display: inline;
list-style: none;
}
li {
display: inline;
}
nav {
height: 40px;
width: 100%;
background-color: darkgreen;
text-align: right;
}
<div id="wrapper">
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Articles
</li>
<li>Forum
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
</div>
<div id="wrapper">
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Articles</li>
<li>Forum</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</div>
css
#wrapper{
width: auto;
margin-right:25%;
margin-left:25%;
}
nav{
display: table;
background-color:darkgreen;
border-top:lightgrey 3px solid;
}
ul{
padding: 0;
margin:10px 0 0 0;
}
li{
list-style: none;
float: left;
}
a{
text-decoration: none;
color: white;
font-size:20px;
background-color: darkgreen;
padding: 10px;
}
a:hover{
text-decoration: none;
color: black;
font-size:20px;
background:lightgrey;
}
I decided just to float the <li>'s, instead of using inline-block or using a table layout:
li {
float: left;
}
li a {
font-size: 20px;
text-decoration: none;
padding: 0 10px;
height: 40px;
line-height: 40px;
display: block;
color: white;
}
Updated JSfiddle