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
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've been following this tutorial:
http://www.mrc-productivity.com/techblog/?p=1049
I want to make a single item in the navigation bar float to the right, but simply adding float:right; to that particular item didn't do anything. In fact, changing the float:left to float:right only reversed the ordering of the navigation bar items.
Here's a snippet:
#CHARSET "UTF-8";
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
height: 50px;
margin: 0;
z-index: 99;
position: relative;
background-color: #366b82;
}
.navbar {
height: 50px;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #54879d;
}
.navbar li {
height: auto;
width: 150px;
float: left;
text-align: center;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}
#navright {
float: right;
}
.navbar a {
padding: 18px 0;
border-left: 1px solid #54879d;
border-right: 1px solid #1f5065;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover, a:hover {
background-color: #54879d;
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
background-color: #54879d;
}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {
background-color: #366b82;
}
<body>
<div id="wrap">
<ul class="navbar">
<li>Home</li>
<li>Registers
<ul>
<li>People</li>
</ul>
</li>
<li>Operational</li>
<li>Financial</li>
<li>Reports</li>
<li id="navright"><a id="logout" href="/login">Logout</a></li>
</ul>
</div>
</body>
<li id="navright"><a id="logout" href="/login">Logout</a></li>
Just need to get that "Logout" button to be on the right.
Make the containing UL element have a width of 100%
.navbar {
height: 50px;
width: 100%;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #54879d;
}
https://jsfiddle.net/txve55jn/2/
I have made a navigation bar and I am trying to make it centered to fit all screens, with position absolute and then use left: 50%; and then place it by margin-left: 100px; to get it exactly where I want it. I have done this to all my buttons and it worked, but when I try doing it on my navigation bar, it moves the whole bar to the middle and when I then move it, it won't work.
html code:
<div id="navBarTop">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
css code as it is normally:
#navBarTop {
width: 100%;
float: left;
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
position: absolute;
bottom: 0;
}
#navBarTop ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
margin-left: 350px;
}
#navBarTop li {
float: left;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#navBarTop li:first-child a {
border-left: 1px solid #4c4c4c;
}
#navBarTop li a:hover {
background-color: #ffffff;
}
css when I am trying to make it centered(doesn't work):
#navBarTop {
width: 100%;
float: left;
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
position: absolute;
left: 50%;
margin-left: 100px;
bottom: 0;
}
#navBarTop ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
margin-left: 350px;
}
#navBarTop li {
float: left;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#navBarTop li:first-child a {
border-left: 1px solid #4c4c4c;
}
#navBarTop li a:hover {
background-color: #ffffff;
}
I think you're trying too hard.
#navBarTop {
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
position: absolute;
text-align: center;
top: 50px;
left: 0;
right: 0;
}
#navBarTop ul {
list-style: none;
margin: 0 auto;
padding: 0;
display: inline-block;
}
#navBarTop li {
display: inline-block;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family:"Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#navBarTop li:first-child a {
border-left: 1px solid #4c4c4c;
}
#navBarTop li a:hover {
background-color: #ffffff;
}
<div id="navBarTop">
<ul>
<li>test
</li>
<li>test
</li>
<li>test
</li>
<li>test
</li>
</ul>
</div>
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 have created a simple .arrow-up class of CSS:
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
I want this arrow to come on exact top of the second level menu, here is my menu code:
HTML:
<header>
<div class="welcome_area">
<p>
Welcome, <b>Arkam Gadet </b>
</p>
</div>
<div class="menu">
<nav>
<ul>
<li>My Profile
<ul>
<li>My Questions
</li>
<li>Settings
</li>
</ul>
</li>
<li>Inbox
</li>
<li>Notifications
</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
background-color: #eee;
height: 45px;
box-shadow: 0px 2px 3px 1px #bbb;
}
a {
color: black;
text-decoration: none;
}
h2 {
color: #f79a1d;
}
.welcome_area {
float: left;
margin-left: 5%;
}
.menu {
float: right;
margin-right: 5%;
}
.menu nav > ul {
position: relative;
padding:0px;
}
.menu nav ul li {
display: inline;
padding: 5px;
}
.menu nav ul li a {
padding: 2px;
}
.menu nav ul li a:hover {
background: #eee;
border: 0;
border-radius: 3px;
box-shadow: 0px 0px 2px 1px #000;
}
.menu nav > ul ul {
position: absolute;
left: -30px;
top: 40px;
padding:0px;
width: 150px;
border-radius: 3px;
display: none;
background-color: #eee;
box-shadow: 0px 0px 2px 3px #bbb;
}
.menu nav > ul li > ul li {
display: block;
}
Demo.
I tried to add it as a li of the list but then it's coming inside it not on top of it.
How can I bring the .arrow-up on top of the second level menu?
What about something along these lines:
.menu nav ul ul:before {
width:0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
display:block;
clear:both;
position:absolute;
top:-5px;
border-bottom: 5px solid black;
content:'' ;
}