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/
Related
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 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
I'm attempting to style my navigation menu design to reflect the one on timeanddate.com, as seen in this image:
To create the colors, they're using a simple bottom and left border in CSS.
I'm attempting to add a border to my <li> tags on my website sandbox, http://www.escapetech.com:8080.
I'm using the following CSS:
.anylinkcss li {
list-style-type: none;
}
.participate li {
list-style-type: square;
border-left-color: #fa514d;
}
#navigation_bar {
height: 31px;
list-style: none;
width: 1000px;
margin-top: 15px;
}
#navigation_bar li {
float: left;
padding-right: 35px;
padding-left: 10px;
margin: auto 0px;
vertical-align: middle;
}
#anylinkmenu3, #anylinkmenu4, #anylinkmenu5, #anylinkmenu6, #anylinkmenu7 {
position: absolute;
line-height: 18px;
z-index: 20;
background-color: #000;
text-align:left;
visibility: hidden;
left: 421px;
top:207px;
padding: 7px;
padding-left: 25px;
}
The #anylinkcss3 and further represent styles for the drop downs, while the #navigation_bar styles are for the whole bar. No matter where I add any border styles, none appear, even after I comment out all CSS code and just include a border on these IDs and classes.
My current menu is live at the link I posted above, I would greatly appreciate if someone could take a look and let me know why there may be any issues with borders appearing. This is my first Stack Exchange post so I hope that this was correctly formatted!
Although you set the width and color, you can not leave out the style parameter with borders.
To get the desired effect as you presented in the image - jsFiddle demo
dark background color for the <ul>
a wide border-left on the <li>
a margin-bottom: 2px as bottom border - shows ul background
and a few small tweaks like text-indent etc
Some information regarding borders
CSS borders consist of 3 parameters
border-width
border-style
border-color
You can set one value, which applies to all sides
border-width: 5px;
border-style: solid;
border-color: red;
Or with short hand border: 5px solid red; and also applies to all sides.
You can style each border side individually, as you are doing above.
border-side-width
border-side-style
border-side-color
Example:
border-left-width: 5px;
border-left-style: solid;
border-left-color: white;
Which can be accomplished also with shorthand: border-left: 5px solid white;
For more information and other border opportunities
https://developer.mozilla.org/en-US/docs/Web/CSS/border
https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
ahhh... Brian you beat me to it.
I inserted border-style, and then there is "BORDER"
border: 5px solid white;
Actually the trick in his case is that border is applied to the anchor tags not the lists! Cheers! :) And yes if you apply border-color as a property you should also apply border-style and border-width :)
Essentially i have a pricing table with the class of .priceblock, and i have a border-bottom on my <li> tags, i simply want it to change color when i hover on the priceblock. The code to me seems correct but nothing changes.
Heres the initial li tag:
ul.pricingtable .priceblock .contents li {
font-family: 'OpenSans';
font-size: 13px;
width: 81.904762%;
height: 35px;
margin:0 auto;
padding: 10px 0;
border-bottom: 1px solid rgba(221,221,221,1);
}
And here hover state css code, this hover class works for he coloring of texts, but i can't change the border color.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
Any ideas?
I think you might need to change the hover state from.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
To:
.contents li:hover {
border-bottom: 1px solid rgba(255,117,109,1);
}
HTML may be able to read it better.
The css attributes need to be equals.
for example:
If in the first style block you write "ul.pricingtable" then you need to do that in the second block two.
And in the content of block, they need to be same.
for example:
border-bottom: 1px solid rgba(221,221,221,1);
and
border-bottom: 1px solid rgba(255,117,109,1);
You cann'ot use once with "border-bottom" and then with "border-color" only...
So I saw this http://cre8tivenerd.com/demos/css/Line-separator.html and wanted to create a divider with that "pressed" effect. The problem is, I don't have a clue of what the divider colors should be for me, tested it out and it didn't get the same effect. My background color is #222222. Anyone that can help me and maybe explain how I "calculate" which colors I should use for the divider?
You can easily get this effect like this:
<div class="vDivider"></div>
css:
.vDivider {
width: 80%;
height: 1px;
margin: 10px auto;
background: #434343;
border-bottom: 1px solid black;
}
The contrast between the background color and the bottom border creates this effect.
Here is a DEMO
It won't look good as #222 is already too dark. Only option as #Dim13i suggested is using black as bottom color, but it won't look distinct.
How about make it a little thicker?
.line-separator {
background: none repeat scroll 0 0 #777;
border-bottom: 2px solid #000;
height: 2px;
}