I am trying to put a border around a link on hover, and the style applies to it, but it jumps (the element jumps) when i hover over it... what can I do?
code:
.navigation li:hover {
border: 1px solid #ccc;
}
You 'jump' is caused by the 1px height of the border, that make your li move
You might use
.navigation li:hover {
border-color: #ccc;
}
.navigation li {
border: 1px solid #<parentBackgroundColor/transparent>;
}
instead. This way, the border is here from the beginning, so no jump on hovering, and it's invisible, since it's the same color of the parent container or transparent.
.navigation li {
border: 1px solid transparent;
}
You can add a transparent border when you're not hovering, then it won't jump.
Or, you can remove a total of 2px vertical padding around the element, for example:
.navigation li {
padding: 10px
}
.navigation li:hover {
padding: 9px;
border: 1px solid #ccc;
}
Related
I have this style for the opencart category menu:
#menu .dropdown-inner a {
border-bottom: 1px solid #1f90bb;
}
And I am trying to remove the bottom border:
#menu.dropdown-inner a li:last-child {
border-bottom: none;
}
But it's not working. Please help!
JS Fiddle Example
Change your second style so that the a is inside the li:
.... li:last-child a {
border-bottom: none !important;
}
The bootstrap tabs work great, but users want me to increase the thickness of the borders. But, when I increase the thickness from 1px the active tab ends up with a line on the bottom border. I tried increasing the thickness of the bottom border on the active tab, but does not hide the line.
.nav-tabs {
border-bottom: 3px solid #DDDDDD;
/* works with 1px */
}
.nav-tabs > .active > a {
border-bottom: 3px solid #FFFFFF;
/* works with 1px */
}
The following fiddle show the issue : http://jsfiddle.net/jerrykur/FEuC3/
i've amended your jsfiddle, is this what you're after?
.nav-tabs {
border-bottom: 3px solid #DDDDDD;
/* works with 1px */
}
.nav-tabs > .active > a {
border-bottom: none;
position: relative;
top: 3px;
/* works with 1px */
}
http://jsfiddle.net/FEuC3/2/
You can try moving the tab down a bit further so that it will cover the line. This will work so long as the bottom border is not too thick. (You will notice the active tab will not stay in line with the other tabs)
.nav-tabs > .active.active {
position: relative;
top:2px;
}
Adjust the margin-bottom for the active class.
.nav-tabs>.active>a,
.nav-tabs>.active>a:hover,
.nav-tabs>.active>a:focus {
margin-bottom: -3px;
}
You may or may not want to use the :hover and :focus, too.
I have this site here http://jamessuske.com/freelance/paoladi/ and I applied a border-top and bottom to my nav so I have two borders inbetween. But for some reason the two borders are at the top... What am I doing wrong?
.navigation{
border-top:1px solid #000;
border-bottom:1px solid #000;
text-transform:uppercase;
}
above this class is a header class and inside the header class is a logo class and socialMedia class, one floats left and the floats right. the header class does not have a float assigned.
Add float: left to the .navigation class
All your li elements are floated left. You need to clear after the list.
Try adding
<div class="clearboth"></div>
after the ul
There are a few ways of doing this.
Option 1.
Try applying display:inline-block and width:100%;
For Instance:
.navigation {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
display: inline-block;
text-transform: uppercase;
width: 100%;
}
WORKING SOLUTION
Option 2.
Using a fixed height in pixels.
For Instance:
.navigation {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
height: 65px;
text-transform: uppercase;
}
WORKING SOLUTION
Hope this helps.
I've got the following CSS.less
header.section-header ul {
width: 100%;
list-style-type: none;
li {
display: inline-block;
padding-right: 10px;
.bordered(0,0,0,#compcolor);
margin-right: 10px;
.font-size(12);
color: #compcolor;
}
li:first-child {
.bordered(0,0,0,0);
}
}
This is a simple horizontal list. I wish to turn the border off on the first item, but it's not showing in FF or Chrome. The item appears but doesn't have the specificity. Any ideas?
Edit:
The mixin is
//.bordered(COLOR, COLOR, COLOR, COLOR);
.bordered(#top-color: #bordercolor, #right-color: #bordercolor, #bottom-color: #bordercolor, #left-color: #bordercolor) {
border-top : solid 1px #top-color;
border-left : solid 1px #left-color;
border-right : solid 1px #right-color;
border-bottom : solid 1px #bottom-color; }
0 is not a valid color value. Perhaps you meant transparent?
li:first-child {
.bordered(0,0,0,transparent);
}
(You have to have a zero border width or a border style of none in order to actually disable the border, but it's hard to make out what exactly your .bordered() function is doing.)
I am trying to replicate the effect I see
Currently I have http://jsfiddle.net/GWkk3/
How can I remove the border between the active li and the 2nd level nav?
Draw the border on the parent <li> elements rather than the child <ul>. Add/change these properties:
.appTabs li {
border-width: 1px 0 1px 1px; /* was 1px 0 0 1px */
}
.appTabs li.active {
border-bottom: 1px solid #EEE;
}
.appTabs li ul {
top: 25px; /* was 24px */
}
And remove this property:
.appTabs li ul {
border-top: 1px solid #CCC;
}
That gets us this far:
Now the inner border just needs to be extended all the way to the right (I'm working on that part).
Make the active tab have 1px extra bottom padding, and have a bottom margin of -1px, so it sits over the line.