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.
Related
I created a to-do list and applied styling that sets even list items to have a light grey background color with li:nth-child(even), but there's a gap to the left of these lines where the white doesn't continue due to setting margin-left: 15px for li elements. I would like the white to be filled in all the way to the left side of the container, but for the text to remain starting 15px to the right of it. How can I accomplish this? Here's the relevant CSS (view CodePen for more):
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
background: white;
/* distance from the top of the first line of text to the top of the second */
line-height: 40px;
min-height: 40px;
color: #666;
margin-left: 15px;
position: relative;
}
/* Sets color of even li elements */
li:nth-child(even) {
background: #f7f7f7;
}
/* Sets appearance of span content (Bootstrap trash can icon) when user hovers over list item */
li:hover span {
width: 40px; /* Applies to icon background */
opacity: 1.0;
}
Change
margin-left:15px;
to
padding-left:15px;
I have a nav bar that consists of an UL with several LI items. The active nav button has a different background color, but I also need a small bottom border on the button.
When applying a border, this appears outside of the LI. When working with divs, you can use box-sizing:border-box to get the borders inside the div. But how can you offset the border on a LI item ??? (list-style-position seems to have no effect)
My scss code:
nav {
ul {
li {
float: left;
padding: 0;
box-sizing: border-box;
list-style-position: inside;
&.active {
background-color: white;
border-bottom: solid 6px blue;
box-sizing: border-box;
list-style-position: inside;
}
}
}
}
When working with divs, you can use box-sizing:border-box to get the
borders inside the div.
To clarify, box-sizing:border-box does not make the border to be within the element (change offset), it make the border size be included in the width or height, when set, so i.e. if you give li a height of 25px and bottom border 5px, the inner height will decrease to 20px.
But how can you offset the border on a LI item
You can't offset the border, one workaround to show/hide a border on an element is to use a pseudo element, which will avoid having the element jump/resize when toggle the border, but there are more ways, such as linear-gradient (shown in below sample when hover)
body {
background: lightgray;
}
nav ul li {
position: relative;
float: left;
padding: 0 5px;
list-style-type: none;
}
nav ul li.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: -6px;
background-color: white;
border-bottom: solid 6px blue;
z-index: -1;
}
/* or one can use linear-gradient */
nav ul li:hover {
background: linear-gradient(
to bottom, white calc(100% - 5px), blue 5px
) no-repeat left bottom;
}
<nav>
<ul>
<li>
Some text
</li>
<li>
Some text
</li>
<li class="active">
Some text
</li>
<li>
Some text
</li>
</ul>
</nav>
Updated
There is actually a way to offset the border, using border-image-outset, shown in this answer:
border-image-outset in CSS
Another fast and clean way to create an inside border is to create an inset shadow without a blur. You don't even need box-sizing or list-style.
nav {
ul {
li {
float: left;
padding: 0;
&.active {
background-color: white;
box-shadow: 0px -6px 0px red inset;
}
}
}
}
I'm having difficulty getting an <ul> divided evenly in safari so that the inline <li> elements make up 100% of the width.
The html code is basically:
<ul>
<li>red</li>
<li>blue</li>
<li>green</li>
<li>orange</li>
<li>purple</li>
</ul>
with css:
ul {
list-style: none;
margin: 0;
padding: 0;
width: 500px;
background-color: #9999ff;
}
li {
text-align: center;
text-decoration: none;
display: inline-block;
border-left: 1px solid #000;
width: 20%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
li:last-child {
border-right: 1px solid #000;
}
It seems like this would make 5 evenly spaces list elements which take up 20% (including borders) of the total width each. Works perfectly in Firefox and Chrome but Safari leaves an extra 6 pixels or so at the end. When I remove the box-sizing property then the list becomes too long. I can't seem to make this simple thing work for the life of me.
Here's JSFiddle: http://jsfiddle.net/z2Xdf/7/
It was rendering the wrong way for me in Chrome...at least using jsFiddle.
Inline-block puts some white space on the sides. Remove from li display:inline block and add
display:block;
float:left;
Also, move your background color to li from ul.
If you wanted to keep display:inline-block, you can apparently do this...
<ul><!-
-><li>stuff</li><!-
-><li>stuff</li><!-
-></ul>
but that seems like a hassle to type?
More "hacks" here (check comments)...
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.
I have a horizontal menu. I want to have a border around the menu (not the entire-row, only the space menu is covering). When I put border on ul, it covers the entire row, when I put border on li, it has border between menu items as well.
<ul id="menu" style = "text-align:left;">
<li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...</li>
</ul>
Here is the CSS:
ul#menu
{
padding: 0 0 0px;
position: relative;
margin: 0 0 0;
text-align: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#menu li
{
display: inline;
list-style: none;
}
ul#menu li a
{
padding: 0px 0px;
margin-right:20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
}
Kill display: inline on the list items and float them left instead. Float the container as well, which will ensure that it's only as wiide as its contents. Finally, set overflow: hidden on the ul.
Declare ul with display:inline-block. It'll cause ul to take only space necessary to display its contents, not 100% of it.
An example
Use display: inline-block on the ul and add the border to the ul.
If you need IE6 compatibility:
#menu li {
border-top: 1px solid #000;
border-bottom: 1px solid #00;
}
You might be able to use li:first-child (I can't remember, and don't have a copy of IE6 to test with) to apply:
#menu li:first-child {
border-left: 1px solid #000;
}
But you'll likely have to add either a class-name, or id, to the first and last li elements to give them the appropriate border-left and border-right.