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;}
Related
My navbar is not centering properly and it's driving me nuts - there's slightly more white space on the left side of it. Thank you so much in advance. Here is the code
HTML:
<div class="navbar">
<ul class="navitems">
<li>
<a class="current" href="index.html">Home</a>
</li>
<li>
Podcasts
</li>
<li>
Articles
</li>
<li>
Merch
</li>
<li>
About Us
</li>
</ul>
</div>
CSS:
body {
margin:0
}
.navbar {
text-align: center;
border: 1px solid black;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.navitems ul {
list-style: none;
}
.navitems li {
display: inline-block;
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-right: 3%;
padding-left: 3%;
border: 1px solid blue;
width: 12%;
font-size: 20px;
}
.navitems a {
color: black;
text-decoration: none;
font-family: georgia;
}
.navitems li:hover a{
transition: all ease-in-out .5s;
color: #f88122;
text-decoration: underline;
}
<ul> tag has got default padding-inline-start style so it is needed to reset that value.
To align items in the middle, it is needed to set vertical-align: middle on <li> items.
.navitems ul indicates the <ul> selector inside .navitems selector. And from your html code, you should change it to ul.navitems.
Below is the working snippet.
body {
margin: 0
}
.navbar {
text-align: center;
border: 1px solid black;
width: 100%;
margin-left: auto;
margin-right: auto;
}
ul.navitems {
list-style: none;
padding-inline-start: 0;
}
.navitems li {
display: inline-block;
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-right: 3%;
padding-left: 3%;
border: 1px solid blue;
width: 12%;
font-size: 20px;
vertical-align: middle;
}
.navitems a {
color: black;
text-decoration: none;
font-family: georgia;
}
.navitems li:hover a {
transition: all ease-in-out .5s;
color: #f88122;
text-decoration: underline;
}
<div class="navbar">
<ul class="navitems">
<li><a class="current" href="index.html">Home</a></li>
<li>Podcasts</li>
<li>Articles</li>
<li>Merch</li>
<li>About Us</li>
</ul>
</div>
If you check your code, you will find that your selector is wrong in the .navitems you don't need to add ul and there is padding-left for ul, so the padding should be zero.
Good luck
body {
margin:0
}
.navbar {
text-align: center;
border: 1px solid black;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.navitems { /* Change the css selector */
list-style: none;
padding: 0 !important; /* Add this line */
}
.navitems li {
display: inline-block;
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-right: 3%;
padding-left: 3%;
border: 1px solid blue;
width: 12%;
font-size: 20px;
}
.navitems a {
color: black;
text-decoration: none;
font-family: georgia;
}
.navitems li:hover a{
transition: all ease-in-out .5s;
color: #f88122;
text-decoration: underline;
}
<div class="navbar">
<ul class="navitems p-0">
<li><a class="current" href="index.html">Home</a></li><li>Podcasts</li><li>Articles</li><li>Merch</li><li>About Us</li>
</ul>
</div>
I am trying to figure out how to remove the last black section of my secondary nav.
I want the "wishlist" link to be the last thing there, not have the border and then more black space afterwards basically. I'm just not sure how to do this.
my html:
<title>LOST Collector</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<!--Header-->
<header>
<a href="http://www.lostcollector.com">
<img src="images/logo.png" alt="Lost Collector" title="Lost Collector"/>
</a>
<!--Primary navigation-->
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!-- Secondary Navigation -->
<ul id="navigation_layout">
<li>Artwork</li>
<li>Autographs</li>
<li>Books/Magazines</li>
<li>Clothing</li>
<li>Dvds and Cds</li>
<li>Film Crew</li>
<li>Original Props</li>
<li>Special Events</li>
<li>Toys and games</li>
<li>Trading cards</li>
<li>Everything else</li>
<li>Wish list</li>
</ul>
my css:
body {
width: 1200px;
height: 130px;
margin: 0 auto;
background-color: #ffffff;
color: #111111;
font-family: "Georgia", "Times New Roman", serif;
font-size: 90%;
}
header a {
float:left;
display:inline-block;
}
header a img {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right:10px;
display: inline;
height: 112px;
width:; 113px;
}
nav {
display: inline;
float: right;
}
nav ul {
list-style: none;
display: inline;
}
nav ul li {
display: inline-block;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
margin-right: 50px;
padding: 40px 30px;
padding: right 10px;
}
nav li a {
display: inline-block;
padding: 4px 3px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
}
nav li a:hover {
color: #ff0000;
background-color: #ffffff;
}
/*secondary navigation*/
#navigation_layout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #000000;
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
}
#navigation_layout li {
float: left;
}
#navigation_layout li a {
display: block;
padding: 4px 3px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #ffffff;
border-right: 2px solid #ffffff;
}
#navigation_layout li a:hover {
color: #ff0000;
background-color: #fff;
}
I have put it into a jsfiddle here, so it is clearer what I am trying to do.
https://jsfiddle.net/thzfm0fe/1/
Apply the background color to your list items <li> and not the <ul>.
Remove background-color from here:
#navigation_layout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
/* background-color: #000000; */
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
}
And add to here:
#navigation_layout li {
float: left;
background-color: black;
}
https://jsfiddle.net/thzfm0fe/3/
A <ul> by default is a block level element and will fill up the full width of the parent element. Your list items <li> did not fill up the full width of the parent but your <ul> did, hence the extra black after your list items.
By applying the background color to the <li> you don't need to add white border to your anchors anymore. You could apply a margin instead.
All, I've searched around and I have a feeling it's something simple. When hovering over any of my navigation items it displays all levels of my navigation bar. I have tried a couple of different ways to select but here is my CSS code.
div#topnav {
margin: -1px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
height: 21px;
background-color: #666;
border-bottom: 1px solid black;
}
div#topnav ul {
margin: 0;
padding: 0px;
background: #666;
text-align: left;
width: auto;
font-size: 10px;
font-weight: bold;
}
div#topnav li {
position: relative;
list-style: none;
margin: 0px;
padding: 3px 8px 2px 8px;
float: right;
border-left: 1px solid silver;
}
div#topnav li:hover {
background-color: #0038A8;
}
div#topnav li li.submenu:hover {
background-color: #0038A8;
}
div#topnav li a {
display: block;
padding: 0;
text-decoration: none;
width: auto;
color: white;
}
div#topnav li a:hover {
text-decoration: none;
}
div#topnav>ul a {
width: auto;
}
ul.level2 {
position: absolute;
width: 175px;
display: none;
border-top: 1px solid black;
}
div#topnav ul ul li {
float: left;
width: 158px;
border-bottom: 1px solid gray;
}
div#topnav ul.level2 {
top: 19px;
left: -1px;
margin-top: 2px;
font-weight: normal;
}
div#topnav ul.level3 {
top: -1px;
left: 174px;
border: 1px solid #000;
font-weight: normal;
}
ul.level1:hover > li ul.level2 {
display: block;
}
<div id="topnav" class="menu">
<ul class="level1">
<li>Item 1</li>
</ul>
<ul class="level1">
<li>Help
<ul class="level2">
<li>Email us</li>
<li>Call Us</li>
<li>Online Support</li>
<li>Forums</li>
</ul>
</li>
<li>Shopping
<ul class="level2">
<li>Shoes</li>
<li>Shirts</li>
<li>Pants</li>
</ul>
</li>
<li>Home</li>
</ul>
</div>
I have also put the CSS as a direct descendant but still had the same problem (Below is what I used).
ul.level1:hover > li ul.level2
Here a working fiddle : http://jsfiddle.net/7w68q1f4/
ul.level1 li:hover > ul.level2 {
display:block;}
I'm planning to do a new sort of dropdown menu style but I'm unsure of how to do it, I want it so that it basically dropsdown a container.
I've kinda marked it out, but I'm unsure on how to do it?
HTML:
<div id="header">
<div class="nav">
<ul>
<li>Home</li>
<li>Community</li>
<li>Staff</li>
<li>Shop</li>
<li>Enter</li>
</ul>
</div>
CSS:
a:visited, a:link, a:active {
text-decoration: none;
color: white;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #4a8fbc;
}
div.nav {
font-family: 'Lato', sans-serif;
font-size: 14px;
margin-left: 200px;
margin-right: 200px;
float: right;
color: white;
line-height: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin: 0 30px 0 0;
}
li a:hover {
color: #256690;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #7d7d7d;
padding: 6px;
text-decoration: none;
background-color: #f2f2f2;
}
http://jsfiddle.net/UwRJ2/
This should get you a good start :
DEMO
HTML :
<div id="header">
<div class="nav">
<ul>
<li>Home
<ul>
<li>lala</li>
<li>lala</li>
<li>lala</li>
</ul>
</li>
<li>Community</li>
<li>Staff</li>
<li>Shop</li>
<li>Enter</li>
</ul>
</div>
</div>
CSS I added to your existing code + I also changed the display property on the li elements to display:inline-block; :
ul li > ul{
display:none;
border:1px solid red;
color:red;
position:absolute;
}
ul li:hover > ul{
display:block;
}
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