I have a few tabs like this one:
As you may notice, the selected tab (the first one) is separated by it's parent border.
How can I make the tab to go over the border so that it will have the same color as the container (which on the lower side)?
The CSS for the first tab look like this:
tab-active{
float: left;
background-image: url("../xyz.gif");
background-repeat: no-repeat;
background-position: center right;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
padding: 3px 8px;
background-color: #D4DFFA;
}
tab {
float: left;
}
tab_container {
border-bottom: 1px solid #000000;
}
<div id="tab_container">
<ul>
<li class="tab-active">tab 1 selected</li>
<li class="tab">tab 2 not selected</li>
</ul>
</div>
There are no other elements between the tab and the tab container.
Update:
The red area is the selected tab. The green area is another tab which is not selected. The light blue from the bottom is the separator between tabs and content. The dark blue from the bottom is the content area.
I want to connect the red area to the dark blue area so that I won't have a separator (parent border) between them.
On the ul, put overflow:visible;
On the tab li, put padding-bottom:10px; (or whatever depth you want)
jsFiddle Demo
Related
i want to add border to the bootstrap form box.i had added border style properties but its not working . suggest please
thia is the form box class:
<div class="form-box">
<div class="form-top">
<div class="form-top-left">
And this is the css :
.form-box {
margin-top: 0px;
border-radius: 25px;
border-bottom-style: solid;
border-color: #50e54b;
}
Because of other classes, use the "!important"
border: solid 2px #50e54b!important;
You can add border to your box by using the border CSS property [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
Here's an example usage:
border: 1px solid #FFFFFF;
The code above will add a solid border of 1px in thickness and white in colour.
Click the link above to see more about the border property.
From what I can tell, the code works fine. But if you want you can add an 8px padding so the content has room for placement instead of being crammed in there with the border. By the way, a 2px or 4px border radius looks better for the border, but it's up to you.
.form-box {
padding: 8px; /*makes it look neat*/
border-radius: 4px; /*or 2px*/
border: 1px solid red;
}
I am trying to create some kind of selector menu which has active and nonactive elements and depending on which one is selected it shows one thing or another.
I have set a border for the menu and for the content but I would like to make it "connected" by removing the bottom-border when you select a different menu option. It looked fine since I decided to set a transparent background color to this: rgba(150,150,150,0.5). The border from parent is visible because the background of the selected menu child is not solid.
Simplified html:
<div class="menu-alias fac">
<div id="menu_fac_1" class="alias afac aliselected">
<a style="cursor:pointer" onclick="facalias(1);" class="alias-fac-a">D</a>
</div>
<div id="menu_fac_0" class="alias afac ali-nuevo">
<a style="cursor:pointer" onclick="facalias(0);" class="alias-fac-a">+</a>
</div>
</div>
<div class="facturacion" id="fac_1" style="display: block;">
<label for="acc_f_nombre_1" class="acc-label required">
Nombre:<span class="required">*</span><input id="acc_f_nombre_1" value="D" type="text" class="acc-text upp">
</label>
</div>
<div class="facturacion" id="fac_0" style="display: none;">
<label for="acc_f_nombre_0" class="acc-label required">
Nombre:<span class="required">*</span><input id="acc_f_nombre_0" value="" type="text" class="acc-text upp">
</label>
</div>
And css:
.menu-alias {
float: left;
width: 100%;
border-bottom: 1px solid;
display: flex;
}
.menu-alias .alias.aliselected {
background-color: rgba(255,100,0,0.3);
margin-bottom: -1px;
}
.menu-alias .alias{
float: left;
border: 1px solid;
border-bottom: 0;
border-right: 0;
background-color: rgba(255,100,0,0.1);
}
.menu-alias .alias.ali-nuevo{
border-right:1px solid;
}
.menu-alias .alias a{
display: block;
padding: 5px 10px;
cursor: pointer;
}
.facturacion{
padding: 5px;
background-color: rgba(255,100,0,0.3);
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 1px solid;
float:left;
}
Here a fiddle to better understanding. I have not put the jquery code so clicking not works but it is undertandable what it has to do in my opinion.
If you change the 0.3 transparency on aliselected to 1 you will see that it puts itself over the border, which is what I would like but maintaining the transparency.
You could always put the "transparent" color as .menu-alias .alias.aliselected background-color.
.menu-alias .alias.aliselected {
background-color:#f7caad;
margin-bottom: -1px;
}
Fiddle here: https://jsfiddle.net/w0mp3r/Lpcrd6jx/1/
EDIT: this answers is the opposite of what the OP looked for (my fault), but i leave it here since it brought some infos on how to paint background (background-clip).
You may fake this border with an inset shadow : http://jsfiddle.net/DytDA/32/
.menu-alias .alias.aliselected {
background-color: rgba(255,100,0,1);
box-shadow:inset 0 -1px black;/* unblured inset shadow showing at bottom */
margin-bottom: -1px;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Or you may use background-clip to see it through with padding over the area to be translucide : http://jsfiddle.net/DytDA/33/
.menu-alias .alias.aliselected {
background-color: rgba(255, 100, 0, 1);
padding-bottom: 1px;/* size of border underneath to see */
background-clip: content-box;/* only paint the inside where content
stands except padding and borders area */
margin-bottom: -1px;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
I'm trying to create just a solid white 10px border at the top of this main content (.tab-pane) element but no matter what I try, I keep getting this boxed outline and a white border at top with grey in the middle and white on the sides. Maybe I'm trying to do it on the wrong element (but i want it right below the nav in between the nav and the main content).
here's some of my css:
.tab-pane {
border-top: 10px;
border-color: #ffffff;
border-style: solid;
border-width: 100%;
}
Try this short version
border-top: 10px solid #FFF;
Otherwise, the full code should be:
border-top-color: #FFF;
border-top-style: solid;
border-top-width: 10px;
Looking at your markup the area that you want to target is the id = home so if you add a background color of white to that id in your css that gray bar will go away. so at the bottom of your stylesheet/css just add the following code.
CSS
#home {
background-color: white;
}
I'm making a Navigation bar. It has a border at the bottom. Now I want to give the active class a other color for the border. It should be in place of the navigation border, but it shows above it.
How can I put the blue line on the place of the green line under the active Home button and keep green at the rest?
CSS Code:
https://gist.github.com/matthijs110/9859d4e2a3983383bbb0
HTML Code:
https://gist.github.com/matthijs110/a09c4cb045eebeb89a4a
This is pretty simple.. You just need to set the margin-bottom: -3px.
Your CSS should look like this:
.navbar {
border-bottom: 3px solid #5cb85c;
width: auto;
}
.active {
border-bottom: 3px solid #5bc0de;
margin-bottom: -3px;
}
Here's a fiddle: http://jsfiddle.net/4NLYZ/
What is happening
I am running into a problem. I have a menu like this:
<div id='feeds'>
<div class='feed'>Super Dense</div>
<div class='feed'>Everything</div>
<div class='feed current-feed'>Smashing Magazine Feed</div>
<div class='feed'>Hot Questions - Stack Exchange</div>
</div>
I style this with CSS (I only show the border and background properties here):
.feed {
background: -webkit-gradient(linear, left top, left bottom, from(#DDD), to(#CCC));
border-bottom: solid 1px #AAA;
border-left: solid 1px #AAA;
border-right: solid 1px #AAA;
}
.feed:first-child {
border-top: solid 1px #AAA;
}
.feed.current-feed, .feed:active {
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#444));
border-bottom: solid 1px #000;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
.feed.current-feed:first-child, .feed:active:first-child {
border-top: solid 1px #000;
}
This is the result (view on jsFiddle WebKit only):
Yes, Jeff, all the extra Stack Exchange feed traffic comes from me constantly reloading my feed reader. Sorry :)
The Problem
This might look nice, but there is a little problem. There is a #AAA line above a black box, and this does not look nice (pixel perfection):
My Question
Is there a way in CSS to check if the next element is of a certain class, so I can set border-bottom to solid 1px #000, or is there another way to solve my problem?
My web app heavily uses JavaScript, so if this is required, it's not a problem, but CSS is cleaner in my opinion.
One way I can think of:
Position every .feed relatively:
.feed {
position: relative;
/* ... */
}
Then find the next immediate sibling using the + combinator, make it sit above its previous sibling using a greater z-index and a negative margin, and give it the desired border (notice that this is a top border):
.feed + .feed.current-feed, .feed + .feed:active {
margin-top: -1px;
border-top: 1px solid #000;
z-index: 1;
}
The top black border will sit above the previous sibling's bottom border and thus be visible over it. The W3C box model means that the content height of each .feed isn't affected, so an equally thick negative margin is all you need to counter the thickness of the added top border.
Take a look at the preview and see if that's what you're looking for. Also, a screenshot:
You can use the jQuery .parent() function to do this:
http://api.jquery.com/parent/
JSFiddle