I have a fairly simple navigation bar with a bottom border but I would like to box it off on either side - but not the top. So I get a |______________| surrounding all of my links but I am just starting out and whatever I try seems to border every single link which I don't want.
<nav>
<div align="center">
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>News</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
</div><!--navigation-->
</nav>
and css
nav {
width: 100%;
margin:0 auto;
}
nav ul li {
width: 16.6%;
float: left;
border-bottom: 1px solid #A2A2A2;
list-style-type: none;
display: inline;
}
nav ul li a {
display: block;
width: 100%;
text-align: center;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
color: #202020;
font-family: "Myriad Pro Light";
text-transform: uppercase;
text-decoration: none;
font-size: 12pt;
}
nav ul li a:hover {
color: #89ccca
}
nav ul{
width: 80%;
list-style: none;
margin: 0;
padding: 0;
}
Use first-child and last-child properties and apply it like below.
CSS
nav ul li:first-child
{
border-left: 1px solid #A2A2A2;
}
nav ul li:last-child
{
border-right: 1px solid #A2A2A2;
}
FIDDLE DEMO
maybe i can help you
try this
nav ul li {
width: 16.0%;
float: left;
border-bottom: 1px solid #A2A2A2;
border-right: 1px solid #A2A2A2;
list-style-type: none;
display: inline;
}
nav ul li:first-child{border-left: 1px solid #A2A2A2;}
fiddle here
http://jsfiddle.net/zfdxko8h/
try including this one..
#navigation ul li:first-child {
border-left: 1px solid #A2A2A2;
}
#navigation ul li:last-child {
border-right: 1px solid #A2A2A2;
}
Here is The Fiddle
Related
My problem is that I want to have spacing between the navigation links. I have searched over the internet but all I get are reducing the space.
To be specific, I want to have spacing in between each navigation link that are bordered with a black border.
These are my codes for the navigation bar. I would really appreciate some help. thank you.
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
border: 5px solid #000;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 5px solid #000;
}
li:last-child {
border-bottom: none;
}
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Here it is:
<style>
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
border: 5px solid #000;
background-color: #fff;
}
li {
text-align: center;
margin-bottom:10px;
}
li:last-child {
margin-bottom:0;
}
li a:hover {
background-color: #555;
color: white;
}
</style>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Demo: https://jsfiddle.net/4fLbx4xa/
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<style>
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
}
li{
width:100%;
display: block;
margin-top:10px; //this is the height you want
border: 5px solid #000;
color: #000;
background:#000;
padding:10px 0;
}
li a {
text-align: center;
padding: 8px 16px;
text-decoration: none;
color:#fff;
}
li:first-child {
margin-top:0;
}
li:hover {
background-color: #555;
color: white;
}
</style>
You need to use margin to add the white space, but the borders needed a little tweaking, see comments below
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
/*border: 5px solid #000; moved to LI element*/
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
margin-bottom:10px; /*add some margin to create the white space*/
border: 5px solid #000; /*add the border to each LI element rather than UL*/
}
li {
text-align: center;
/*border-bottom: 5px solid #000; remove this bottom border as handled in LI css*/
}
Not sure what you want to achieve but i understood a line between the links, this might help you also if you want it below the links..
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 400px;
background-color: #fff;
border: 5px solid #000;}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;}
li {
text-align: center;
float: left;
border-right:solid 1px black;
}
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I'm having trouble coming up with a solution here. I have a menu with a bar between list elements. However rather than a standard border, there is a break at the top and bottom.
The only solution I came up with is to use li:after in the CSS to place an image but for some reason the padding and margin gets all messed up. So far I have the CSS and HTML embedded below (I'm using Bootstrap as the framework here).
Any ideas on how to get these bars working?
Screenshot:
(Ignore the red color ... things were messed up in illustrator).
#reviews .review-actions {
text-align: center;
z-index: 2;
padding-top: 1px;
}
#reviews nav {
display:inline-block;
margin:0 auto;
}
#reviews nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#reviews nav ul li{
display: inline;
margin: 0;
float: left;
padding: 10px;
background-color: #fff;
font-size:1.2em;
}
/*#reviews nav ul li:after{
content: url('./img/menu-splitter.png');
}*/
#reviews nav ul > li:first-child {
border-top-left-radius: .5em;
border-bottom-left-radius: .5em;
border: 1px solid #ccd0d0;
border-right: none;
}
#reviews nav ul > li:nth-child(2){
border: 1px solid #ccd0d0;
border-right: none;
border-left: none;
}
#reviews nav ul > li:last-child {
border-top-right-radius: .5em;
border-bottom-right-radius: .5em;
border: 1px solid #ccd0d0;
border-left: none;
}
#reviews nav ul li a{
}
<section id='reviews'>
<!-- Navigation -->
<div class="review-actions">
<nav>
<ul>
<li><a href='#'>The App</a></li>
<li><a href='#'>Our Service</a></li>
<li><a href='#'>Surprises</a></li>
</ul>
</nav>
</div>
</section>
You can set it directly in the background of the li
#reviews .review-actions {
text-align: center;
z-index: 2;
padding-top: 1px;
}
#reviews nav {
display:inline-block;
margin:0 auto;
}
#reviews nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#reviews nav ul li{
display: inline;
margin: 0;
float: left;
padding: 10px;
background-color: #fff;
font-size:1.2em;
}
/*#reviews nav ul li:after{
content: url('./img/menu-splitter.png');
}*/
#reviews nav ul > li:first-child {
border-top-left-radius: .5em;
border-bottom-left-radius: .5em;
border: 1px solid #ccd0d0;
border-right: none;
}
#reviews nav ul > li:nth-child(2){
border: 1px solid #ccd0d0;
border-right: none;
border-left: none;
}
#reviews nav ul > li:last-child {
border-top-right-radius: .5em;
border-bottom-right-radius: .5em;
border: 1px solid #ccd0d0;
border-left: none;
}
#reviews nav ul li a{
}
li:nth-last-child(n+2) {
background-image: linear-gradient(blue, blue);
background-size: 2px 90%;
background-repeat: no-repeat;
background-position: right center;
}
<section id='reviews'>
<!-- Navigation -->
<div class="review-actions">
<nav>
<ul>
<li><a href='#'>The App</a></li>
<li><a href='#'>Our Service</a></li>
<li><a href='#'>Surprises</a></li>
</ul>
</nav>
</div>
</section>
One solution is to deploy 4 single-pixel-width box-shadows around the <ul> as a faux border, and then give the <ul> an actual border the same color as the <li> background-color:
#reviews .review-actions {
text-align: center;
z-index: 2;
padding-top: 1px;
}
#reviews nav {
display:inline-block;
margin:0 auto;
}
#reviews nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 6px solid #ffffff;
box-shadow: 1px 1px #ccd0d0, -1px 1px #ccd0d0, -1px -1px #ccd0d0, 1px -1px #ccd0d0;
border-radius: .5em;
}
#reviews nav ul li{
display: inline;
margin: 0;
float: left;
padding: 10px;
background-color: #fff;
font-size:1.2em;
border-left: 1px solid #ccd0d0;
}
#reviews nav ul > li:first-child {
border-left: none;
}
<section id='reviews'>
<!-- Navigation -->
<div class="review-actions">
<nav>
<ul>
<li><a href='#'>The App</a></li>
<li><a href='#'>Our Service</a></li>
<li><a href='#'>Surprises</a></li>
</ul>
</nav>
</div>
</section>
I have borders on the left and right sides of some items in a list, but I'm getting these white gaps that I don't want, but it's only on the right side which is weird and I haven't been able to figure out what I'm doing wrong.
Any help would be great.
The code:
ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
position: relative;
line-height: 21px;
width: 150px;
border: 1px solid white;
background: white;
}
ul li:hover {
border: 1px solid black;
}
ul li:hover ul.dropdown {
display: block;
}
ul li:hover li {
border-left: 1px solid black;
border-right: 1px solid black;
}
ul li:hover li.top {
border-top: 1px solid black;
}
ul li:hover li.bottom {
border-bottom: 1px solid black;
}
ul li a {
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul.dropdown {
font-size: 14px;
width: 150px;
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: -1px;
}
<ul style="font-size: 16px; width: 500px; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: 4px;">
<li><u>Products</u>
<ul class="dropdown">
<li class="top">Apples
</li>
<li>Cans
</li>
<li>Bowls
</li>
<li class="bottom">Cups
</li>
</ul>
</li>
</ul>
The style in ul li
border: 1px solid white;
is causing extra white lines to be drawn
Remove it and you should be good
Struggling to center the nav bar in the middle of the browser... Tried a number of the things found through google but no luck as yet. Seems like it should be such an easy thing to do but its turned out to be a pain in the neck!
Heres the code.
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="detail">About</li>
<li class="work">Work</li>
<li class="contact">Contact</li>
</ul>
</div>
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
Try not using floats but rather display:inline-block instead.
JSfiddle Demo
CSS
ul {
padding: 0;
margin: 0;
}
#nav {
//width: 100%; /* not required */
//float: left; /* not required */
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
width:100%;
display: block;
list-style-type: none;
text-align: center; /* add this */
}
#nav li {
//float: left; /* remove */
display: inline-block; /* add this */
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
EDIT - added reset of ul padding/margin
Add a margin-top:50%; to it
just like this:
#nav {
width: 100%;
float: left;
margin-top:50%;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
Does this solve your problem?
Or didn't I understand your question ?
Just add text-align: center; in you #nav style. And reset UL default margin It should be like this
HTML
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="detail">About</li>
<li class="work">Work</li>
<li class="contact">Contact</li>
</ul>
</div>
CSS
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
margin: 0;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
I am new to CSS and I am trying to pop up a sub menu in my vertical menu, but it is not doing it... Please see my CSS and HTML below:
.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 130px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
position: relative;
top: 15px;
}
.glossymenu li a{
background: white url(../images/glossyback.gif) repeat-x bottom left;
font: bold 11px/1.5em Verdana;
font-size: 120%;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
}
// IE only. Actual menu width minus left padding of A element (10px)
* html .glossymenu li a{
width: 130px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(../images/glossyback2.gif);
}
ul.sub-level {
display: none;
}
li:hover .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 100px;
}
ul.sub-level li {
border: none;
float: left;
width: 150px;
}
and my HTML:
<div id="side">
<ul class="glossymenu">
<li>MENU</li>
<ul class="sub-level">
<li><span>Appetizer</span></li>
<li><span>Beverages</span></li>
<li><span>Desserts</span></li>
</ul>
<li>LOCATIONS</li>
<li>HOURS</li>
</ul>
</div>
The submenu element should be inside one of the li elements.
Check this out.
HTML
<div id="side">
<ul class="glossymenu">
<li>MENU
<ul class="sub-level">
<li><span>Appetizer</span></li>
<li><span>Beverages</span></li>
<li><span>Desserts</span></li>
</ul>
</li>
<li>LOCATIONS</li>
<li>HOURS</li>
</ul>
</div>
CSS
.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 130px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
position:relative;
top:15px;
}
.glossymenu li a{
background: white url(../images/glossyback.gif) repeat-x bottom left;
font: bold 11px/1.5em Verdana;
font-size:120%;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
}
* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 130px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(../images/glossyback2.gif);
}
ul.sub-level {
display: none;
}
.glossymenu li:hover > .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 100px;
}
ul.sub-level li {
border: none;
float:left;
width:150px;
}