On the main menu, if a menu link is active, there is a border on the bottom. It works fine. I have the following CSS:
.active {
text-decoration: none;
border-bottom: 4px solid #888;
}
Currently the border-bottom is as wide as the text inside the list item. But I would like to make it much narrower. Is that possible?
Here is the HTML
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
</ul>
Try using the pseudo-element :after to achieve that, as I don't think it's possible to make the border narrower than the element's width.
Check this fiddle: http://jsfiddle.net/6QfNs/
A border can't be narrower than the element it is set on. So you can't achieve your aim with a border.
BUT
You can use a pseudo element, set the border on it and give it the desired width :
DEMO
CSS :
.active:after {
content:'';
display:block;
width:20px;
border-bottom: 4px solid #888;
}
The technique of using pseudo-elements is very familar and well-known in solving the problems of this kind. However I would like to introduce another way using linear-gradient background, just a share for every one:
/* span is your menu item here */
span {
font-size:20px;
padding:4px;
cursor:pointer;
}
span:hover {
background:linear-gradient(red,red) no-repeat;
background-size:60% 4px;
background-position:center bottom;
}
Demo.
Related
I'm trying to make an horizontal tabbed menu where every tab is the same width (given through CSS) and has a 3-sides border. Adjacent tabs' borders should collapse to a single pixel, but I haven't found a decent way to do this unless I use a negative 1px margin on one of the sides of each tab or turn everything into a display:table-cell and use border-collapse: collapse.
Either of those methods has a problem when it comes to the active tab display, since this element's borders should overlap its neighbors' ones on both sides.
Here's a small fiddle to show both cases: https://jsfiddle.net/0wet6rgr/1/
What's the best way to make this sort of menu?
You could use the adjacent selector, + to select the li after the active one and change the color of the left border like so:
#test1 li.active + li {
border-left: 1px solid #00FFFF;
}
JSFiddle
#test1 li.active {
border: 1px solid #00FFFF;
border-bottom: 0;
margin-top: 0;
height: 35px;
position: relative;
}
JSFiddle
#test li {
position:relative;
z-index:1;
}
#test li.active {
position:relative;
z-index:2;
}
I'm using jQuery-UI-Layout plugin that creates a pane on the east side of the screen. When I create a list in it and apply a background-color to each <li> element, it doesn't span the width of the entire pane.
I would like it so that there is no white space on either side of the <li>, even if it has a bullet or number next to it (meaning if I decide to include a bullet or number, it should also be covered by the color). How can I do this?
Fiddle: http://jsfiddle.net/5EECD/497/
HTML:
<div class="ui-layout-center">Center</div>
<div class="ui-layout-east">
<ol id="someList">
<li class="not-selected">step 1</li>
<li class="selected">step 2</li>
<li class="not-selected">step 3</li>
<li class="not-selected">step 4</li>
</ol>
</div>
CSS:
.selected {
background-color: #e90902;
padding-top: 10px;
border-bottom: 1px solid #808080;
padding-bottom: 10px;
}
.not-selected {
padding-top: 10px;
padding-bottom: 10px;
background-color: #e9e9e9;
border-bottom: 1px solid #808080;
}
Add this to your CSS file:
.ui-layout-pane-east {
padding: 0 !important;
}
Don't do this from the browser's inspector. jQuery UI's inner workings are supposed to calculate widths on page load.
Try Removing the
padding: 10px
from the following in css
body > div.ui-layout-east.ui-layout-pane.ui-layout-pane-east
It might not be the best way of doing it, though you can expand the margins of the <li> to fill the pane.
li{
margin: 0px -10px 0px -10px;
}
JSFiddle
Here is your edited working Fiddle, with a List Style Disc "inside" the actual list item, by using the list-style-position style. To remove the Disc icon, simple use the style "none" instead.
If you set the font-size to 0px and that will remove all white space from list items, as long as the list item has a given font size which is shown in the example.
I just added a little CSS to your working CSS:
ol#someList {
font-size:0px;
padding-left:0px;
list-style:disc;
list-style-position: inside;
}
ol#someList li {
font-size:14px
}
I also added a body style to remove the default margin of 8px to show you that there is no white space to left or right of the list items.
Hope that helps!
Michael G
I am trying to set the height of my top border. I have read around that this is not possible in traditional ways. But I am yet to find a workaround for this. I need my border to align at the very top of the page. So what can I do?
HTML
<li class="active">Hjem</li>
CSS
li.active
{
border-top:3px solid #000;
}
** The problem is that with the current code the height of the border, meaning the space between the border and the text is locked. I need to control this.
I had tried out. I dont see any problem with the current code. Created JsFiddle. It worked as expected.
li.active
{
border-top:3px solid #000;
}
JsFiddle
I am creating a set of styles for a dynamic breadcrumb.
Every previous step in the breadcrumb should have a border-bottom and a forward slash. The forward slash is done as a :before.
The problem is when there is a forward slash between two previous step's, there is no gap in the border on the right side.
To explain this problem better, please see this codepen... http://codepen.io/anon/pen/dJEen
I have tried doing a border-bottom:0 on the :before but this does nothing.
My code:
HTML
<div>
<a class="bcrmb" href="">Purchases</a>
<a class="bcrmb" href="">Order </a>
<span class="bcrmb">Delivery</span>
</div>
CSS
.bcrmb {
font-size:24px;
font-weight:bold;
margin: #6px 0;
display:inline-block;
letter-spacing:-1px;
font-family:sans-serif;
}
a.bcrmb {
color:#777;
border-bottom:2px solid #777;
margin-right:3px;
}
span.bcrmb {
color:#333;
}
a.bcrmb + .bcrmb:before {
content:"/";
margin-right:6px;
border-bottom:0;
}
Any help would be greatly appreciated.
You can do that in two ways, either by wrapping the text in a span element and assigning the border-bottom to span else you can use CSS positioning, by using absolute on the :before and relative to a
Demo (Using nested span elements)
Demo (Using CSS Positioning)
a.bcrmb {
color:#777;
border-bottom:3px solid #777;
margin-right:3px;
position: relative;
margin-right: 15px;
}
a.bcrmb + .bcrmb:before {
content:"/";
margin-right:6px;
border-bottom:0;
position: absolute;
left: -10px;
}
Also make sure you use text-decoration: none;, you aren't using that
In addition to Mr. Alien comment,
Using nested <span> is not always an option, because sometimes there is no access to HTML code.
Positioning of absolute element is not a good idea, because it will be hard or impossible to properly position it for different font sizes, font families, styles, or on different devices or screen sizes. Even on the demo link provided, arrow is a bit off on my screen.
So, I would add the third way, by adding a relative to parent (em), negative right margin to pseudo element.
Demo
a {
text-decoration: none;
}
.bcrmb {
font-size:24px;
border-bottom:3px solid #777;
}
.bcrmb:after {
content:">";
padding-left: 4px;
margin-right: -0.75em;
}
I'm trying to make a horizontal rule with some text in the left.
for example:
my title -------------------------------------
I can do it by putting a background to the text but without the colored background, I can not
Is anybody has an answer ?
<style>
h1 {
font-weight:normal;
line-height:0;
height:0;
border-bottom:1px solid #000;
vertical-align:middle;
}
</style>
<h1><span>my title</span></h1>
Thanks
Your suggestion of putting a background color on the span seems to work reasonably well. See it here.
Alternately, you could use a background image in place of the border on the h1.
h1 { background: url(http://i.stack.imgur.com/nomLz.gif) repeat-x left center; }
h1 span {
background-color: #FFF;
padding-right: 3px;
}
Example.
(A 1x1 black image for the background.1)
without using the background you could try with:
<style>
span:after{
content:"-------------------------------------";
}
</style>
<h1><span>my title</span></h1>
In this case you are using the CSS :after pseudo class.
Have a look to this article to check cross-browser compatibility.
And here you will find a pre-coded example.
Hope it helps!