Hey I can't understand if there is any easy way to solve this:
I want the black border to be on top of the blue border not extend the height of the navigation.
I've looked at inset and adding bottom in the a but I want to override the one from .navigationbar
HTML
<nav class="navigationbar">
<ul>
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul>
</nav>
CSS
* {
margin: 0;
}
.navigationbar {
background-color: #000000;
width: 100%;
border-bottom: .1em solid #0000FF;
}
.navigationbar ul {
list-style-type: none;
overflow: hidden;
}
.navigationbar ul li {
float: left;
color: #FFFFFF;
}
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
}
.navigationbar ul li a:hover {
background: #0000FF;
color: #FFFFFF;
border-bottom: .1em solid #000000;
}
.navigationbar img {
float: left;
}
https://jsfiddle.net/55r2e9bq/
Why not just set the border and change its color later?
.navigationbar ul li a
{
border-bottom: .1em solid transparent;
}
.navigationbar ul li a:hover
{
border-bottom-color: #000000;
}
The border you are seeing comes from the rule .navigationbar ul li a:hover{...} where you have border-bottom: .1em solid #000000;. It is not extending to 100% of width of the navigation bar, but is causing it becomes higher.
If you want the navigationbarstays of the same height you should assign the border also to the normal state of the a element then you can change its color to whatever you want.
This way:
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: .1em solid #ffcc00; /* add this property with the same value of the `:hover` state */
}
You can add border-bottom: 0.1em solid #000000; to .navigationbar ul li a to avoid that movement/height increase:
https://jsfiddle.net/p7L7adhe/1/
Related
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'm trying to increase the top and bottom padding in the following, but can't get it to work. I.e. notice the padding top and bottom code in ul.navbar li a. It has no effect. What's an alternative? Please advise.
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;
border-right: 1px solid #ffb366;
}
ul.navbar li:first-child {
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 30px;
padding-bottom: 30px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>Home</li><li>Photos</li><li>Videos</li><li>Logout</li>
</ul>
I don't want to disturb the navigation bar's layout in any way - hence can't include the padding top and bottom option in <ul> - that messes up the layout and the hover both.
9.4.2 Inline formatting contexts
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.
You can set it to inline block, if you need to apply vertical paddings etc.
ul.navbar li a {
display: inline-block;
}
inline elements don't have top and bottom padding. If you want to these padding you must use block or 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;
}
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: 30px;
padding-bottom: 30px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>Home</li><li>Photos</li><li>Videos</li><li>Logout</li>
</ul>
im wondering how to write my css so that when i hover the text the green line under the yellow box becomes yellow as well. thank you
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-bottom: 2px solid green;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
link
https://jsfiddle.net/18fk9sce/
i should add that i wish the green line to remain. some solutions seem to remove the green line running across the page.
Okay, I've just updated the solution now.
Just replace the overflow: hidden; in ul with a fixed height: 42px. And increase the padding bottom of the hovered link by 2px (i.e the border-bottom size). That would cover the border with yellow color of the link.
Check the updated fiddle
ul {
list-style-type: none;
margin: 0;
padding: 0;
height: 42px;
border-bottom: 2px solid green;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
padding-bottom: 14px;
}
HTML - added wrapper
<div class="menu__holder">
<ul class="main_menu_left">
<li id="left">Homehome</li>
<li id="left">Homehomehome</li>
<li id="left">Homehome</li>
<li id="right">Homehome</li>
<li id="right">Home</li>
</ul>
</div>
CSS
.menu__holder {
width: 100%;
padding: 0;
border-bottom: 2px solid green;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 9999;
margin-bottom: -2px;
}
ul li {
border-bottom: 2px solid transparent;
}
ul li:hover {
border-color: yellow;
z-index: 9999;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
Updated fiddle - NEW
You have to set the border in the li not in ul, so you can separately change the border.
Just change the Style to achieve it:
Updated fiddle
Updated Style
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
li{
border-bottom: 2px solid green;
}
li:hover {
background-color: yellow;
border-bottom: none;//you can set other color here
}
Updated CSS :-
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
border-bottom: 2px solid green;
}
a:hover {
background-color: yellow;
border-bottom: 2px solid yellow;
}
try with adding this to your css.if this is not the case tell me
ul:hover{
border-bottom:1px solid yellow;
}
thanks to everyone who contributed to this question.
in the end this is the code i use.
https://jsfiddle.net/4d0ghscu/
<style>
.menu{
height:40px;
border-bottom:4px solid green;
padding:0;}
.menu_left{
display:inline;
list-style-type:none;}
.menu_right{
display:inline;
list-style-type:none;}
.tab_left{
float:left;}
.tab_right{
float:right;}
a{
display:block;
color:black;
padding:12px 12px;
text-decoration:none;}
a:hover{
background-color:yellow;}
</style>
<ul class="menu">
<ul class="menu_left">
<li class="tab_left">Homehome</li>
<li class="tab_left">Homehomehome</li>
<li class="tab_left">Homehome</li>
</ul>
<ul class="menu_right">
<li class="tab_right">Homehome</li>
<li class="tab_right">Home</li>
</ul>
</ul>
key to the code:
*separating left from right within an overhead. which made it simpler and more flexible to add new elements to the navigation menu.
*adding height.
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;
}
This here is my code, what I want to do is that I have to place images right next to the vertical navigation bar without disturbing the order of the list. I tried it many times but I wasn't successful, here is my code
THE HTML PART
<ul class="navbar">
<li>» Computers
</li>
<li>» Storage Media</li>
<li><a href="#" >» Networking Solutions</a></li>
<li>» Security Solutions</li>
<li>» Office Automations</li>
<li>» Gadgets</li>
<li>» Projectors and Display Screens</li>
<li>» Softwares</li>
<li class="lastitem">» Customized Solutions</li>
</ul>
THE CSS PART(describes the behavior of the list only)
.navbar{
list-style-type: none;
margin: 0;
padding: 10 0px;
width: 280px; /* width of menu */
position:absolute;
}
.navbar li{
border-bottom: 1px solid white; /* white border beneath each menu item */
}
.navbar li a{
background: #333 url(media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.navbar li a:visited, .navbar li a:active{
color: white;
}
.navbar li a:hover{
background-color: black; /*color of menu onMouseover*/
color: white;
border-bottom: 1px solid black;
}
.navbar ul li:hover{
background-color: black;
color: #ff0066;
display:block;
width:200px;
height:200px;
opacity:0.75;
}
.navbar ul li:hover{
padding:5px;
margin:0px;
background-color:#666666;
border-width:1px;
border-style:solid;
border-color:#333333;
}
.navbar li {
border-bottom: 1px solid white;
margin-left: 40%;
}
.navbar {
list-style-type: none;
margin: 0px;
width: 100%;
position: absolute;
}
Take out the position: absolute and add display: block; float:left to .navbar.
And add an image with float: left;.
Fiddle