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.)
Related
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.
http://jsfiddle.net/MzqYL/3/
In the example above the border of the frame is thinner than the inner borders.
How can I fix this difference?
Image: http://i.stack.imgur.com/FEtio.png
Here's what I have:
body {
margin: 10px;
}
ul {
list-style: none;
width: auto;
margin: 0;
padding: 0;
border: 1px solid black;
border-bottom: 0;
border-right: 0;
}
ul:after {
content: "";
display: table;
height: 0;
}
li {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
float: left;
width: 50%;
}
/* Styles for Menu Items */
ul li a {
text-decoration: none;
color: #777;
padding: 5px;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
li > a {
display: block;
}
ul li a:hover {
color: #E2144A;
background: #f9f9f9;
}
/* Hover Styles */
li ul li a {
padding: 2px 5px;
}
/* Sub Menu Styles */
Some points:
Please indent code properly, for yours and ours sake.
What I did is set a left and bottom border on the a elements, and a top and left border on the ul element. This makes a consistent 1px border.
I use clearfix to give the ul height with the floated elements.
I use box-sizing: border-box to make it so that when I set width: 50%, it'll be 50%, including padding and border (not margin).
There is how: http://jsfiddle.net/MzqYL/9/
Basic idea is to define border on two sides for inner elements and add missing borders to main wrapper element.
The problem is that you are stacking the borders so the 1px from the box above + the 1 px from the box below = 2 px. That is why it seems to be thicker.
The way you solve this is by applying different styles to each type of box.
There are 4 types,
Normal box (border on left and on top) Style added
Boxes on the right (border on the left right and top)
Boxes on the bottom (border on the left top and bottom)
The one box that is on the bottom right (all 4 borders)
jsfiddle example
In the example two css classes are added: .right and .last You can just give one box multiple classes <li><a class="right last">...</a></<li> so you can apply styles to the list items easily.
I tried the following code css3 style for 5 px wide horizontal line
<hr style=" border: solid 1px red;padding-top:10px; margin:25px auto 15px auto;clear:both" />
but I am getting 5px wide red rectangle.
Please advise me with a proper CSS3 style code.
As long as the element has the right width, a simple:
border-bottom:5px solid red;
Will do the trick.
You should use width and height properties instead of border:
width: 5px;
height: 1px;
color: red;
http://www.sovavsiti.cz/css/hr.html
Just use the "border-width" property and set it to 5px.
<hr style="border-width: 5px !important;">
Get rid of the top-padding, and use the border-bottom suggested above... http://jsfiddle.net/ZdLfJ/
My CSS for HR Line Styling;
.line_height { height:4px; }
.line_width { width:100%; }
.line_hcenter { margin-left: auto; margin-right: auto; }
.line_vcenter { margin-top: 10px; margin-bottom: 10px; }
.line_color { color:black; }
.line_bgcolor { background-color:black; }
.line_bordercolor { border-top: solid black; border-bottom: solid black; }
Add these classes to the hr tag.
All three color ( color , bgcolor, bordercolor ) classes are needed to get a solid colored line across.
Classes .color and .bgcolor needed for browser cross compatibility or else you just get double lines.
Dont use any other thing after border property just make 5px instead of 1 px in border.
I.e
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;
}
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.