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 :)
Related
I have different css classes based on different actions. Everything is working good, but when I apply activeBackground class based on condition its making div background-color to green but border-left-color is not coming green its still using .arrow-div class. How can I resolve this issue and apply .activebackground class when needed?
HTML
<div class="text-arrow" ng-class="{'activeBackground': applyActiveFile, 'completeBackground':applyComplete}">File Selection
<span class="arrow-div"></span>
</div>
CSS
.text-arrow {
background-color:#BABABA;
color:#fff;
display:inline-block;
padding-left:45px;
}
.arrow-div {
border-style: dashed;
border-color: transparent;
border-width: 0.15em;
display: -moz-inline-box;
display: inline-block; /* Use font-size to control the size of the arrow. */
font-size: 100px;
height: 0;
line-height: 0;
position: relative;
vertical-align: middle;
width: 0;
background-color:#fff; /* change background color acc to bg color */
border-left-width: 0.2em;
border-left-style: solid;
border-left-color: #BABABA;
left:0.25em;
}
.activeBackground{
background-color: green;
border-left-color: green !important;
}
It appears to me that you're applying .arrow-div and .activeBackground to different elements, and the way your code is written, .activeBackground can't override .arrow-div because it's being applied to a different element (the parent). To affect the child element (the span containing the arrow) you need to set up a css rule that directly targets any child .arrow-div of .activeBackground.
My solution was to simply modify your css like so, providing a way to change the arrow div:
.activeBackground{
background-color: green;
}
.activeBackground .arrow-div{
border-left-color: green;
}
Here's a fiddle of it in action:
https://jsfiddle.net/cupno5g9/
I need a little help with my problem. I get following effect with this code:
#navLink{
font-family: oduda_bold;
font-size: 17px;
color: #fff;
text-decoration: none;
}
#navLink:focus{
border-radius: 10px;
border-style: solid;
border-width: 0px;
background-color: #ef5e99;
}
WRONG HIGHLIGHT
and I would like to have it highlighted like this:
NICE HIGHLIGHT
Is that possible to highlight link with larger (than its textvalue) area ?
Yes. Add padding and then fiddle around with the border radius until it meets your expectations:
#navLink:focus{
padding: 10px /*here*/
border-radius: 30px;
}
You need to use padding and set your link into an inline-block.
#navLink{
display:inline-block;
padding: 10px;
}
So I have a field that is supposed to have a black outline. Like this
Where the 237 is. But here's what I have
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
outline: 3px solid black;
}
For some reason when I select the field it gets smaller. And on initial load, there's kind of like an outline around it. A grayish one. You could call it a shadow Here's a demo. Ideas?
Use border instead of outline to remove the "shadow":
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
border: 3px solid black;
}
JSBin: http://jsbin.com/cuwurowu/2/edit
The “shadow” is the default border of the input element. To remove it, add
.r { border: none }
(but note that this affects the totals dimensions of the element, which may matter in pixel-exact layout).
The shrinking effect in Chrome (does not seem to happen in Firefox or IE) is apparently caused by a browser default style sheet that sets outline-offset: -2px on the element when it is focused. The outline-offset sets the distance between an outline and the outer edfes of the element, so a negative value shrinks the outline. To fix this, add
.r { outline-offset: 0 }
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...
I have a horizontal nav that looks as follows:
I'm trying to remove the bottom border for the actively selected li item, but for some reason the usual ways of doing this don't seem to be working. I've tried applying margin-bottom: -1px; and it didn't work.
Here's a JSFiddle with my CSS code:
http://jsfiddle.net/s5ynF/8/
Appreciate any help on this.
Simple.
update these CSS selectors to this:
ul.nav {
list-style: none;
margin: 0;
padding: 0;
padding-left: 25px;
border-bottom: 1px solid #E8E8E8;
height:25px;
}
#nav .home {
background-color: #FFF;
border: 1px solid #E8E8E8;
border-bottom: 1px solid #FFF;
margin-bottom: -1px;
}
I removed the overflow:hidden; that's why it wasn't working. I then applied a fixed height to the .nav
You will need to use a different clear fix method as the overflow: hidden is what is stopping it from working.
I added an explicit height and removed overflow: hidden and it worked.