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
Related
I recently made a vertical navigation bar and was wondering how I could make it horizontal and make it display in the same sized boxes equally spaced apart
I have tried to float text to the left but that doesn't work as well as followed W3 School tutorial on creating a horizontal navigation bar. W3 School isn't useful. I am a HTML and CSS newbie.
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
width: 100px;
border: 1px solid;
}
li a {
display: block;
color: #000000;
padding: 8px 16px;
text-decoration: none;
text-align: center;
border: 1px;
border-bottom: 1px solid;
}
li:last-child a {
border-bottom: none;
}
li a:hover {
background-color:red;
color:white;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>LinkedIn</li>
</ul>
I expect a horizontal navigation bar that is centred and equally spaced apart in the same sized boxes that appear.
Start changing display property and add it to li element like the following snippet. You must play with the values and the properties to achieve what you need.
ul {
font-size: 0;
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
border: 1px solid;
}
ul li {
display: inline-block;
list-style-type: none;
width: 20%;
font-size: 1rem;
}
li a {
color: #000000;
padding: 8px 16px;
text-decoration: none;
text-align: center;
border: 1px;
border-bottom: 1px solid;
}
li:last-child a {
border-bottom: none;
}
li a:hover {
background-color:red;
color:white;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>LinkedIn</li>
</ul>
Use flex. You can read more about it here.
ul {
list-style-type: none;
display: flex;
align-items: center;
justify-content: center;
margin: 0px;
padding: 0px;
width: 400px;
border: 1px solid;
}
li a {
display: block;
color: #000000;
padding: 8px 16px;
text-decoration: none;
text-align: center;
border: 1px;
border-bottom: 1px solid;
}
li:last-child a {
border-bottom: none;
}
li a:hover {
background-color: red;
color: white;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>LinkedIn</li>
</ul>
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>
I am having trouble styling a basic nav.
I would like the nav menu colour to be grey and when it is hovered over turns to the green colour with a bottom border. It also jumps around on hover. I tried to add in border-bottom: transparent; but I think it is being overridden. I have played about moving the code and the a tag seems to be the culprit but I am not sure how to solve it. Hence all the styles.
HTML
<body>
<div class="header">
<img class="Logo" alt="Rigare logo" src="logoweb_1.1.png"/>
<div class="nav">
<ul>
<li>About</li>
<li>Technical Capabilities</li>
<li>Staff and Associates</li>
<li>Courses</li>
<li>Products and Hire</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS
.header {
padding-top: 16px;
}
.logo {
float: left;
}
.nav {
display: inline-block;
vertical-align:top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
background: #fff;
}
.nav li{
display: inline;
text-align: right;
color: #70B0A8;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
border-bottom: transparent;
}
.nav li:hover {
color: #97A6AA;
border-bottom: 1px solid #97A6AA;
cursor: pointer;
padding: 10px;
}
a {
text-decoration: none;
}
.nav a {
color: #70B0A8;
}
Here is a fiddle to see what I'm talking about.
You have define
.nav a {
color: #70B0A8;
}
at the end of your CSS which will surely override your :hover effect and also you've defined :hover color for .nav li:hover { instead of .nav li:hover a { viz not a right way to define hover effect for a tag inside li.
Further you should first define the border-bottom and padding for your li tag initially instead of :hover to prevent the jumping issue.
You have to change your CSS like the Snippet below.
Code Snippet
a {
text-decoration: none;
}
.header {
padding-top: 16px;
}
.logo {
float: left;
}
.nav {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
background: #fff;
}
.nav li {
display: inline;
text-align: right;
color: #70B0A8;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
padding: 10px;
border-bottom: 1px solid transparent;
}
.nav li a {
color: #70B0A8;
}
.nav li:hover {
border-bottom-color: #97A6AA;
cursor: pointer;
}
.nav li:hover a {
color: #97A6AA;
}
<body>
<div class="header">
<img class="Logo" alt="Rigare logo" src="logoweb_1.1.png" />
<div class="nav">
<ul>
<li>About</li>
<li>Technical Capabilities</li>
<li>Staff and Associates</li>
<li>Courses</li>
<li>Products and Hire</li>
<li>Contact</li>
</ul>
</div>
</div>
The padding on your hover style was causing it to jump around.
Replace your .nav li:hover with the below.
.nav li:hover a{
color: #97A6AA;
text-decoration: underline;
cursor: pointer;
}
https://jsfiddle.net/c1egheLy/
So you remove the padding on hover and simply change the CSS around to suit what you need such as below:
.header {
padding-top: 16px;
}
.logo {
float: left;
}
.nav {
display: inline-block;
vertical-align:top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
}
.nav li{
display: inline;
text-align: right;
color: grey;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
border-bottom: transparent;
}
.nav li a:hover {
color: #70B0A8;
border-bottom: 1px solid #97A6AA;
cursor: pointer;
}
.nav a {
color: grey;
text-decoration: none;
}
<div class="header">
<img class="Logo" alt="Rigare logo" src="logoweb_1.1.png"/>
<div class="nav">
<ul>
<li>About</li>
<li>Technical Capabilities</li>
<li>Staff and Associates</li>
<li>Courses</li>
<li>Products and Hire</li>
<li>Contact</li>
</ul>
</div>
</div>
Im slightly baffled as to why you don't have your logo beside the menu links too but thats simply moving the <img> into <class="nav"> but then within this instance you'd need to add width:100%; to .nav {} CSS
Replace this lines in your code
.nav li:hover {
color: #97A6AA;
border-bottom: 1px solid #18961d; //Green Color
cursor: pointer;
/* padding: 10px; */ //Remove this padding line
}
I hope this helps..
I am having trouble removing the last border divider after 'PART C'. I would like to keep the border on the right of each element in the navigation list apart from the last one.
a {
text-decoration: none;
color: #000000;
display: block;
width: 150px;
}
li {
list-style: none;
float: left;
padding-left: 10px;
width: 150px;
}
ul {
width: 900px;
margin: 0px auto;
}
.nav {
padding: 25px 50px 10px 0px;
z-index: 1;
font-family: "Avenir";
}
.nav a:hover {
color: #cccccc;
}
.nav a {
color: #000;
display: block;
line-height: 14px;
padding-left: 10px;
padding-right: 30px;
text-decoration: none;
border-right: 1px solid #000;
text-align: center;
width: 100px;
}
<div class="header">
<div class="container">
<div class="nav">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li>PART A
</li>
<li>PART B
</li>
<li>PART C
</li>
</ul>
</div>
</div>
</div>
You could use :last-child css selector.
a {
text-decoration: none;
color: #000000;
display: block;
width: 150px;
}
li {
list-style: none;
float: left;
padding-left: 10px;
width: 150px;
}
ul {
width: 900px;
margin: 0px auto;
}
.nav {
padding: 25px 50px 10px 0px;
z-index: 1;
font-family: "Avenir";
}
.nav a:hover {
color: #cccccc;
}
.nav a {
color: #000;
display: block;
line-height: 14px;
padding-left: 10px;
padding-right: 30px;
text-decoration: none;
border-right: 1px solid #000;
text-align: center;
width: 100px;
}
.nav li:last-child a {
border-right: none;
}
<div class="header">
<div class="container">
<div class="nav">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li>PART A
</li>
<li>PART B
</li>
<li>PART C
</li>
</ul>
</div>
</div>
</div>
Reference: MDN
Add this rule:
.nav li:last-child a{border-right:none}
Demo :http://jsfiddle.net/lotusgodkk/Lewza63r/
Another solution is add class to last li a{ which li doesn't need border} and write style to class.
'a.no_border { border-right: 0; }'
Demo link
:last-child do not work below IE9
Use this it will work on all browser
a#button2 {border-right: none;}
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