I created the menu with css but in IE it shows with a problem.
Internet Explorer:
(source: picofile.com)
Firefox:
(source: picofile.com)
CSS:
<style>
.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 5px solid #D10000;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.invertedshiftdown ul{
float:right;
margin:0;
padding: 0;
list-style: none;
}
.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.invertedshiftdown a{
float: left;
display: block;font-size:11px;
color: black;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px 9px 10px;
background-color: white;
}
.invertedshiftdown a:hover{
background-color: #D10000;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}
.invertedshiftdown .current a{
background-color: #FF7400;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}
</style>
HTML:
<div style="width:600px;height:30px;float:right;">
<div class="invertedshiftdown">
<ul>
<li >Home</li>
<li>New</li>
<li >Revised</li>
<li>Tools</li>
<li>CSS</li>
<li >Forums</li>
l>
</div>
</div>
How can I fix this?
Use css line-height instead of padding and it should solve your problems.
Related
Is it possible to make a capsule shape using border-radius without a set width or height and include between delimeter?
Yes, You can try this way
.container {
width: 90%;
padding:20px;
margin: 10px auto;
background:#000;
}
ul {
list-style: none;
padding: 7px;
background: #333;
border-radius: 12px;
display: inline-flex;
}
li {
padding: 0 10px;
border-right: 1px solid #999;
line-height: 1;
color: #999;
font-size: 12px;
display: inline-block;
vertical-align: middle;
}
li:last-child {
border-right: none;
}
<div class="container">
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
</div>
JavaScript
nav{
width: 100%;
height: 60px;
background: linear-gradient(to bottom, #fff, #bbb);
border-bottom: 1px solid #fff;
}
.wrapper{
max-width:1200px;
margin:0 auto;
}
li{
float:left;
width: 15%;
list-style: none;
margin-top: 5px;
}
a{
text-decoration: none;
box-sizing: border-box;
display: block;
padding: 10px 10px;
text-align: center;
color: #052537;
}
.nav01,
.nav03,
.nav05{
border-right: 1px solid #999999;
border-left: 1px solid #fff;
}
.nav02,
.nav04{
border-left: 1px solid #fff;
border-right: 1px solid #999999;
}
<nav>
<div class="wrapper">
<div class="nav-global">
<ul>
<li class="nav01">go1</li>
<li class="nav02">go2</li>
<li class="nav03">go3</li>
<li class="nav04">go4</li>
<li class="nav05">go5</li>
</ul>
</div>
</div>
</nav>
Nav bar
Hello, everyone, I have the problem to design the nav bar very first and the last border. I want to make borders like in the shared picture. I can't figure it out how to design nav01 first border and nav 05 last border because I want a combination of two borders as I did in nav02,nav03 and nav04. Please help me
One way is to use border and use different properties of border to get your desired result. You can experiment and be as creative as you can. Just for once, go through all the possibilities and what CSS is capable of. Then you can easily figure out which properties to combine to make your own prototype into code.
nav {
width: 100%;
background: #e4e4e4;
font-family: 'arial';
}
.navbar-ul a {
text-decoration: none;
list-style-type: none;
display: block;
float: left;
font-size: 20px;
width: 120px;
border: 1px solid #000;
text-align: center;
margin: 10px 0px;
border-left: none;
border-top: none;
border-bottom: none;
color: #1f1f1f;
}
ul a:last-child {
border-right: none;
}
li {
margin: 5px;
}
a:hover {
text-decoration: none !important;
}
li:hover {
margin: 5px;
background: #1f1f1f;
color: white;
text-decoration: none !important;
transition: all .2s;
border-radius: 4px;
}
.navbar-ul a:hover {
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="clearfix">
<ul class="navbar-ul">
<a>
<li>Home</li>
</a>
<a>
<li>Profile</li>
</a>
<a>
<li>Contact</li>
</a>
<a>
<li>Blogs</li>
</a>
</ul>
</nav>
I've built a simple center aligned navigation bar for my website. However, the borders of the elements in the navigation bar aren't perfectly overlapping, giving a disjointed look. Here's what I mean:
Notice the double-borders for each link. Note that even I remove one of the borders, the hover effect still reveals the imperfection:
How can I fix this via creating borders that perfectly overlap?
Here's the code:
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>Home</li>
<li>Photos</li>
<li><b>New Account</b></li>
<li>Old Account</li>
</ul>
Well, inline-block elements have a some surrounding 'space', by default:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
box-sizing:border-box;
margin-left:-4px;
}
ul.navbar li:first-child {
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
box-sizing:border-box;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>Home</li>
<li>Photos</li>
<li><b>New Account</b></li>
<li>Old Account</li>
</ul>
Also, keep just right border, and place left border to first li....
If you set both the li and the a element's display value to inline-block it will fix the issue you have:
/* navigation bar*/
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>
Link 1
</li><li>
Link 2
</li><li>
Link 3
</li><li>
Link 4
</li>
</ul>
This will also allow you to hover the entire item in the menu (and not only part of it).
Another option
(without changing the HTML structure) is to change the font-size of the ul element (and set font-size to the li):
l.navbar {
font-size: 1px;
}
ul.navbar li {
font-size: 14px;
}
Working example:
/* navigation bar*/
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size: 1px;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
border-left: 1px solid #ffb366;
font-size: 14px;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
Add only border-left to all li items. And for the last one add border-right as well
ul.navbar li {
margin: auto;
display: inline;
border-left: 1px solid #ffb366;
}
ul.navbar li:last-child, ul.navbar li:hover{
border-right: 1px solid #ffb366;
}
Update: The issue was in the font-size of the ul
ul.navbar {
margin: 0;
padding: 0;
background-color: #ff9933;
text-align: center;
font-size: 0;
}
ul.navbar li {
margin: 0;
font-size: 14px;
padding:0;
display: inline-block;
border-left: 1px solid #ffb366;
border-right: 1px solid #ffb366;
width:auto;
}
Plnkr: https://plnkr.co/edit/8j5It4jlrZRgTMxsArAu?p=preview
I have a navigation bar with four links. I want to remove the extra space to the left of "Projects" and the the right of "Contact". It appears to be part of the unordered list, and not padding or margin.
Here is the fiddle http://jsfiddle.net/95g12kpe/
<nav class="navbar">
<div class="container">
<ul class="navbar-list">
<li>Projects</li>
<li>Schedule</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
</nav>
.navbar {
/*position: fixed;*/
top: 0;
left: 0;
z-index: 9999;
padding: 0;
text-align: center;
}
.navbar ul {
list-style: none;
background-color: #fff;
border-bottom: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-left: -4px;
margin-right: -4px;
}
.navbar li {
position: relative;
display: inline;
margin-bottom: 0;
margin-left: -20px;
}
.navbar li:hover {
color: #000033;
}
.navbar a {
display: inline-block;
padding-right: 25px;
padding-left: 25px;
text-decoration: none;
line-height: 6.5rem;
color: #222;
font-size: 1.6rem;
font-weight: 600;
}
.navbar a:hover {
color: #006699;
background-color: #000033;
}
It is a block element, so it has width 100% by default, set it to display: inline-block; and it should be fine.
http://jsfiddle.net/95g12kpe/1/
Set a width attribute to your .navbar ul, and to keep it centered, set your horizontal margin attributes to auto, like this for example :
.navbar ul {
list-style: none;
background-color: #fff;
border-bottom: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-left: auto;
margin-right: auto;
width: 500px;
}
I have a top navigation bar that still has the white borders around. I would like to know how to remove them using css.
This is the css:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #4c4c4c;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: grey;
background-color: white;
}
This is the HTML:
<body>
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
Thanks.
Not sure about the question. In #nav li a You are giving border-right: 1px solid #ccc; remove this and I can not see any border any more. Let me know in case you needed something else.
Change border-right: 1px solid #ccc; to border-right: 0px solid #ccc; .Hence,
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
border-right: 0px solid #ccc;
}
please check the below code and modify accordingly. The issue will be resolved.
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
}