I am working with a menu tutorial found here and everything works fine except i would like border corners. I've tried setting them everywhere possible but nothing works. any ideas on where it should work?
I've tried:
.cbp-tm-show .cbp-tm-submenu{
border-radius: 5px;
}
also:
.cbp-tm-show-below .cbp-tm-submenu{ border-radius: 5px; }
every possible place i've tried it and haven't seen any effect.. :(
As #Dean Stalker mentions, you need to set a background color on the submenu's ul element. You also need to set padding or a border width > 0 to that same ul in order for border-radius to have something to "round off".
The below assumes the background color of the submenus is white, like in the demo you linked to:
.cbp-tm-submenu {
border: 5px solid #fff;
background-color: #fff;
border-radius: 5px;
}
#Andres Try setting a background color on the ul element (.cbp-tm-show .cbp-tm-submenu). At the moment the background color is set to transparent (in the demo).
Related
Alright, so when I use this code and hover over the object, the transition works. But if I take my mouse OFF of the object, the transition doesn't happen. I've seen other posts talk about this but the solutions don't work.
Here's my code in CSS:
.square{
margin-top: 20px;
height: 100px;
width: 400px;
border-radius: 20px;
background:#3d3434;
outline: none;
transition: 0.25s;
}
.square:hover{
outline: 3px solid #21ff46;
}
Also, I'm relatively new to coding and CSS.
You code works properly. The reason why you see no animation on mouseleave is that after hover pseudostate ends, there's no outline at all, and browser doesn't know to what position he has to shrink the outline. Also it doesn't understand what color it should preserve while shrinking, without hover state there's no color defined.
So, the solution is to add this line to your .square
outline: 0 solid #21ff46;
Leave the rest as it is, your problem is solved.
I'm having trouble styling two different styles of buttons. The first button should be a transparent background with a 2px border, and the next button is just foundation's default styling for buttons, i.e. no border. I thought that *{box-sizing: border-box;} would make it so that the buttons would come out to the same size regardless of padding/border/margin. I thought that maybe this wasn't working because I wasn't specifying a width/height, but even when I do that it just has the effect of pushing the normal button off alignment by 2px, and even still I want the buttons to be the natural width according to the text inside of them.
The easy solution for me is to just add a border on the normal button with the same color as the background, but then I end up having to also add styles for the border for hover, active, etc... just seems like there should be a better way. Am I doing something wrong here?
Here is a jsfiddle of where I'm at: http://jsfiddle.net/xa4d4bfv/
How about adding a border with transparent color.
a.button {
border: 2px solid transparent;
}
button outline class should be the following
.button-outline {
border:2px solid #222;
color: #222;
background-color: rgba(0,0,0,0.0);
padding: 0.9rem 2rem 0.9rem 2rem !important;
}
Suslov's answer is pretty good though, mine's alright if you leave the button the same size
border-style:dotted is not working in firefox
I have read in Here other than property hidden in IE all the properties support is all browser.
But with my code border-style:dotted is not working but if I will give border-style:solid it is working. (if i will just change border-style:solid it will work fine ?? but why?)
Can any explain me why it is happening ?
See Here
Please try to run fiddle in chrome and firefox.
Thanks !!
CSS triangles relies on the border property to render it as a triangle, making it dotted or solid does not matter in the rendering and does therefor not show the border as "dotted" - if you try it on the fiddle you can see changing the color on the border actually changes the entire triangle.
Triangles: http://css-tricks.com/snippets/css/css-triangle/
Maybe try this syntax:
element {
border: [thickness]px [type] [color];
}
Example:
body {
border: 10px solid black;
}
--
body {
border: 20px dotted black;
}
--
body {
border: 30px dashed black;
}
--
body {
border: 40px groove black;
}
UPDATE:
Upon your query, this IS NOT WORKING AND WILL NOT WORK because,
=> You are already applying border as background. If you look closely, border style dotted is stretched to form background as you are using border width property. Don't judge it as background color. You cannot apply border on a border.
=> To make it work, either introduce another pseudo or actual element and make it do that what you wanted to do.
I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div. Examples are worth a thousand words so here you go
http://jsfiddle.net/e5Sxt/2/
html
<div id="content">
<p>Generic Content</p>
<button class="button">Search</button>
</div>
css
#content{
width: 500px;
height: 500px;
background-color: black;
padding: 50px;
color: white;
}
button{
margin-top: 50px;
padding: 20px;
text-align: center;
background-color: #333;
box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
border: none;
cursor: pointer;
}
The red box-shadow is where the black of the containing div should come through. If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.
I have tried utilizing outlines, borders, and box-shadows to no avail so far. As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.
Thanks!
The answer depends on what browsers you need to support (and whether you'd be happy with a fall-back solution for older browsers).
There is a CSS feature called border-image, which, frankly, can do pretty much anything you could think of for a border. You could achieve this effect very easily using this style.
With border-image, you could simply specify a small image with your two colours and transparent middle section. Job done.
Learn more about border image here: http://css-tricks.com/understanding-border-image/
However... there is a big down-side: browser support. border-image is a relatively new addition to the CSS spec. Firefox and Chrome users should be okay, but IE users miss out -- this feature didn't even make it into IE10.
Full browser support details can be found here: http://caniuse.com/#search=border-image
If poor browser support for border-image is enough to kill that idea for you, then another viable answer would be to use :before or :after CSS selectors to create an pseudo-element sitting behind the main element. This would have a transparent background and be sized slightly larger than the main element and with it's own border. This will give the appearance of the triple border you're looking for.
Of course, you can only use this solution if you aren't already using :before and :after for something else.
Hope that gives you some ideas.
I think the only way to do this is by using a wrapper unfortunately. I'm not sure if it is possible to get the transparency through the button background.
Although, if you know the background color, you can use that in the border obviously, but of course this won't work for background gradients.
Here is a proposed jsFiddle showing knowing the color, and another using a wrapper:
http://jsfiddle.net/eD6xy/
HTML:
<div class="box one-div">(1 div, know color)</div>
<div class="two-div">
<div class="box">(2 divs, pure transparent)</div>
</div>
CSS:
/*
With one div, works fine with a constant color (#abc)
But with gradient, probably won't match up correctly
*/
.one-div {
margin: 15px 10px;
border: 5px solid blue;
box-shadow: 0 0 0 5px #abc,
0 0 0 10px red;
}
.two-div {
margin-top: 30px;
padding: 5px;
border: 5px solid red;
}
.two-div > .box {
border: 5px solid blue;
}
In the site I am currently building I am having trouble getting my border colors right for <input> and <button> elements. I would like to have the top, left, and right borders to be the same color and then have the bottom border a different color. I can get the styling to work for any other element to work except for those two, and this issue only exist in IE9. Any help or explanation would be greatly appreciated.
Example of my problem: http://jsfiddle.net/NyG3x/24/
Try setting to borders separately.
border: 1px solid #000;
border-bottom: 5px solid #CE181E
This appears a bug in IE9. If you set the bottom border to 1px, the red border appears to show correctly. However, if you set the value to anything more than 1px, it seems to revert the border-color to the value of the other border-color.
UPDATE
A simple solution would be to remove the styling from the button, wrap the inner text of the button inside a div and style the div. This works in IE9 as shown here.
I know this is more markup, but it will surely solve the issue.
Apply the 1px border as usual to the three sides, but wrap your form elements in a tag, say a div tag and apply a 5px bottom border on the div tag.
HTML would look something like this:
<form id="button-set-two">
<div class="btn-wrapper">
<input class="btn-style" type="submit" value="Btn1" />
</div>
</form>
And CSS would look like this:
#button-set-two .btn-style{
border: 1px solid #000;
border-bottom:none;
color: #000;
float: left;
font-size: 1.6em;
margin-right: 5px;
padding: 2px 10px;
background: none;
}
#button-set-two .btn-wrapper{
border-bottom:5px solid #CE181E;
}