I'm trying to make the underline from the active / hovered tab transparent. But I didn't get it working. Anyone knows how to do this?
Screenshot: http://i.imgur.com/m6ogRjB.png
I want the red marked white line removed.
Setting blue border bottom color isn't the correct solution because I need it transparent/removed.
JSFiddle: http://jsfiddle.net/mULUv/6/
border-color: #fff #fff transparent;
I guess I need something to do here.
But still don't get it working like I want.
Since you can only cover up borders in css, and since you do not want to set a blue color to overlap one of your borders, the only remaining (and quite tricky) way of achieving the effect you are looking for is to "build" the borders block by block.
The idea is to remove the bottom border from the ul container bar and add fillers between the tabs and after them that would have a bottom border. Then, the tabs which are not hovered nor active will have a bottom border displayed closing the gaps between fillers. Hovering or activating will cause the tab to lose the bottom border and to gain a right, left and top border. Using a custom css class such as your .tab-advanced this can be done safely without overwriting the built-in BootStrap classes.
Here is a working demo.
The html code to add the fillers changes the list to:
<ul class="nav nav-tabs tabs-advanced">
<li class="active">1</li>
<li class="in-between-filler"></li>
<li>2</li>
<li class="in-between-filler"></li>
<li>3</li>
<li class="filler"></li>
</ul>
and the corresponding additional css is:
.tabs-advanced {
display: table;
border: none;
}
.tabs-advanced > li{
display: table-cell;
float: none;
}
.tabs-advanced > li > a{
margin-right: 0;
border-bottom-style: none;
}
.tabs-advanced > li:not(.active):not(:hover) {
border-bottom: 1px solid #ddd;
}
.tabs-advanced > li.filler{
width: 100%;
border-bottom: 1px solid #ddd;
}
.tabs-advanced > li.in-between-filler{
min-width: 2px;
border-bottom: 1px solid #ddd;
}
You could either do...
border: none;
or
border: 1px solid transparent;
(if you want a 1px line there still)
Related
I've created a basic nav with the following structure:
<div class="nav">
<ul>
<li>Home</li>
<li>Another Link</li>
<li>Another Link</li>
</ul>
</div>
The nav is a typical horizontal one with lis floated to the left. The thing is, the nav is dynamic per user, and the nav will never take up 100% the width of the screen.
However, I want the hovered/current nav link to have a red underline, and the rest of the nav across the remaining width of the site container to have a different colored bottom border.
Here's an image of what I want:
I can do this by attaching a background image of the default border color to the nav div, but I'm not sure how to do this with pure CSS.
Is this possible?
Thank you.
Edit: Here's the CSS (and please note that the CSS does not give me the intended effect):
.nav ul {
border-bottom: #DDD solid 5px;
list-style: none;
overflow: hidden;
}
.nav li {
float: left;
}
.nav a {
border-bottom: #FFF solid 5px;
display: block;
font-size: 16px;
font-weight: bold;
padding: 5px 20px;
text-decoration: none;
}
.nav_link:hover {
border-bottom: #F00 solid 5px;
color: #F00;
}
.current_page {
border-bottom: #F00 solid 5px;
color: #F00;
}
Here's a possible solution.
Set a top and bottom border on your nav element. Then with your a tags, set them with a bottom border matching the non-hover color and size. Set a negative margin-bottom on the a tag equal to the size of the nav border-bottom. And then change the border color of the a element on hover.
Here's a fiddle showing it: http://jsfiddle.net/FNLmf/
*Note: I did not use floats, I used inline-block. You can use floats, just be sure to clearfix your nav element.
I have a CSS problem that I've been unable to figure out. Basically, I have a menu which is a fixed width and height. The background of the menu is simply a graphic, with a gray bar, and a drop shadow beneath. Here is the css for that menu:
#menu
{
width:1024px;
height:63px;
background: url(../images/menuholder.jpg);
margin:0px;
}
I have a CMS controlling the menu options, however for this example, I have them hardcoded. I am using CSS to position the elements in the correct place vertically, over the gray bar, centered vertically, which is fine. Here is the issue: I am trying to place a 1px wide white (#fff) line in between each menu option. I would prefer to do this via CSS entirely, rather than with a saved image. I was able to do it (sort of) using this code:
<div id="menu">
<div id="upperNavLinks">
<ul>
<li style="border-right: 1px solid #fff;">Option 1</li>
<li style="border-right: 1px solid #fff;">Option 2</li>
<li style="border-right: 1px solid #fff;">Option 3</li>
<li style="border-right: 1px solid #fff;">Option 4</li>
<li style="border-right: 1px solid #fff;">Option 5</li>
</ul>
</div>
</div>
The css behind it is:
#upperNavLinks
{
float:left;
padding-top:0px;
padding-left:0px;
}
#upperNavLinks ul
{
list-style-type:none;
}
#upperNavLinks ul li
{
float:left;
}
#upperNavLinks ul a {
padding-right: 18px;
padding-left: 18px;
display: block;
text-decoration: none;
font-family:PT Sans, Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight:bold;
color: #333333;
}
#upperNavLinks ul a:hover
{
font-weight:bold;
color: #a31624;
}
The problem is, it generates a white line where I want it to, however I need it to start at the top of the gray bar, and proceed down to the bottom of the gray bar, but not over the drop shadow. The size (vertically) of the gray bar is : 44px.
So, the question I have is: How do I make the white line lock to the top of the gray bar, and cover 44px (and not over) of vertical space over the gray bar, while leaving the actual menu options floating in the center of the graphic as they are now?
If this doesnt make any sense I could post the actual graphic and code somewhere.
Between each li with an anchor, place another li, now with a class (I named it border). Give that class a display: block;, a width: 1px; and a height: 20px;.Now you can play with the height to get the effect you looking for.
http://jsfiddle.net/skeurentjes/4hJrb/1/
What's the semantic implications of placing empty 's? Personaly I would use background image for something like this rather than creating empty tags.
I'm sure this is an easy one but I just can't figure it out. I have this HTML
(http://jsfiddle.net/qzr3X/)
<div id="wrapper">
<ul id="tabs">
<li>Dashboard</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
<div id="content"></div>
and CSS:
* {
margin: 0;
padding: 0;
}
ul#tabs {
list-style-type: none;
overflow: hidden;
}
ul#tabs li {
float: left;
}
ul#tabs li a {
z-index: 99;
display: block;
margin: 0 0.416em -6px 0;
padding: 1.66em 0.833em;
border: 1px solid lightgray;
background: lightgray;
border-bottom: none;
}
div#content {
background: lightgray;
height: 100px;
border: 1px solid black;
}
and I want to make it look like a navigation menu. However, as it's usual, I want to have the border of the content area covering all but the active tab (in this case, that would be "Dashboard"):
I already tried to increase z-index but it doesn't work. What am I missing?
Regards
I'm not 100% certain what it is your'e after.
From what I gather you want the border to appear around inactive tabs and have no border separating the active tab from the content. Is that correct?
This is basically don't by tricking the active tab into covering the content border with a border color which matches the content.
You can see a demo here
But you'll need to note the class which is added to the "dashboard" tab. It's that active class which covers the border at the bottom of the tab it's applied to.
I have added some jquery to dynamically alter the borders when you click tabs.
I have implemented my webpage menu by inline li-s of ul. li has a colored border and contains a. Now onmousehover I need to change color of the text inside a and move it 2px up by not moving the li border. How can I do that?
The trick is to remove the top padding a bit and increase the bottom padding a bit to maintain the markup integrity.
I have set up a simple example of what you want. Check it on the fiddle here
The HTML:
<ul>
<li>Home</li>
</ul>
The CSS:
ul { width: 200px; margin: 20px; }
li { border-top: 2px #000 solid; padding: 5px; }
li a { padding: 5px; display: inline-block; }
li:hover a { padding: 3px 5px 7px 5px ; }
Add this to your CSS:
a:hover.jump {
color: [Insert whatever];
position: relative;
bottom: 2px;
}
And then add a class to your link
<ul>
<li>My Link Text</li>
</ul>
You can add background colors or whatever else you need on the hovering text. The cliche-named but pretty useful website CSS Ninja has a bunch of examples
I decided on an effect I would like for a vertical drop down list. Basically, each list element is separated by a 1px grey bar. This effect is easy, apply bottom-border: solid 1px black;
On hover, I want the top and bottom borders of the selected item to become white. Unfortunately, setting the top and bottom borders on the list item element, does not change the bottom border of the list item above it and I end up with the top border staying black and the bottom border becoming white.
Is there a css only way to achieve this effect?
The desired effect is shown here:
This would be a perfect use of the nonexistent previous-sibling selector. Unfortunately, it being nonexistent at all, I'd take a different approach. If you can change the border to be on top, the next-sibling selector will work perfectly:
ul > li:hover, ul > li:hover + li {
border-top: 1px solid white;
}
Demo: http://jsfiddle.net/mattball/ZNR94/
there is apparently looking at a CSS selector to the elements prior siblings, only for the following, look at this example:
<html>
<head>
<title></title>
</head>
<style type="text/css">
ul {
list-style: none;
width: 50%;
margin: 50px auto;
}
li {
background: #ccc;
border-bottom: 1px solid #000;
height; 20px;
}
li:hover + li, li:hover {
border-bottom: 1px solid #FFF;
}
</style>
<body>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<p></p>
</body>
</html>
so it is difficult only with css