I am currently have an issue which I wasn't able to solve myself, so I am turning my issue to you guys and hope that you could help me.
I am trying to create a dropdown list/menu and it works perfect, though the background border extends with the dropdown list, which look like a mess.
So I would like to get your opinion to solve this problem. I have put the code online and have a little demo for the menu with the dropdown list:
Demo: http://test.xavizus.eu/test2/
CSS: http://codepaste.net/zjyeha
Thank you very much in advance.
You can:
#menu {
height: 30px;
overflow: visible;
border-radius: 5px;
background-color: #484848;
color: #FFFFFF;
padding: 5px 5px 0px 5px;
margin: 5px 5px 5px 5px;
font: 8pt verdana, arial, sans-serif;
}
That will allow the ul submenu to display, but will keep the #menu from growing to accommodate it's height.
Related
When I use the following CSS, I go from the output of the image at the top to the image at the bottom:
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
The purpose is to have a larger hover area for the mega menu, otherwise the mega menu disappears when the mouse is between the ''Assessment'' menu and the mega menu box. However, when my padding is at 30px, all the menu items shift higher up. What would I need to add to keep this large box (the edges will be white - I put black so it is easier to see now) without affecting the rest of the menu?
edit1: the menu is generated from the pearl theme for wordpress. The .menu-border is an added css class for the ''assessment'' menu.
If we could get a working snippet it would be easier to help.
Also, there are two menus in your capture. I guess that adding the code it's the second one. Looks you're missing vertical-align property
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
vertical-align: middle;
}
I'm unsure what you're exactly looking for but have a crack at this CSS that's using the inline-block property -
.menu-border {
display: inline-block;
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
Further reading on CSS inline-block
https://www.w3schools.com/css/css_inline-block.asp
If someone ever face that problem, the solution was to replace my code with this
body .stm-header .stm-navigation__default > ul > li > a {
padding: 30px 30px;
}
I am designing a custom arrow (using background image) for a group of select boxes.
Problem is that each select box should be very short in width and therefore if the text is longer than this width it appears over the background arrow.
I need to find a way to display the background image over the text.
The other problem is that there are about 500 such select boxes and I do not wish to add a span layer in the HTML code for each of those boxes to accomplish the goal.
Therefore I am looking for a CSS solution only. JS would not work either.
Here is the CSS:
.dropdown{
width:57px;
border: 1px solid #cfcfcf;
height: auto;
border-radius: 5px;
padding:3px 4px 4px;
position: relative;
z-index: 0;
overflow:hidden;
}
.dropdown select{
border: none;
background-color: transparent;
outline: none;
padding: 1px 0 0 5px;
width:145%;
background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right;
background-position: 55%;
}
JSFiddle here:
http://jsfiddle.net/pazzesco/r6c9zcpc/
Any comments or ideas will be greatly appreciated.
Have you considered just increasing the right padding on your .dropdown selector to say 10px?
padding:3px 10px 4px; should make sure your text never overlaps over the arrow.
Or do you actually want the text to display behind the arrow (which won't work as you've got the arrow as a background image)? :)
I hope I haven't misunderstood the question!
Cheers
Ines
Just increase padding-right values by 30px.
.dropdown select{ padding: 1px 30px 0 5px; }
Result: This will clip the text; 30px from right side.
JSFiddle Here: [http://jsfiddle.net/nvishnu/Lq7hosrd/2/]
Spent 2 hours already, trying to get it work, but so far I only get this:
.btn-custom{ width:100%; border-bottom: 100px solid blue; border-left:80px solid transparent; }
.btn2 {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0px;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);
}
and this would be the button itself:
test
What I'm trying to make is this:
I think I would also need the transform:rotate function to rotate the button, but is there a way to rotate it, without rotating the text?
At the moment, with the code I've posted above the button isn't looking the way it should look, it's a bit shorter (height), the text is not where it should be and if I rotate it, the text rotates too. That is what it looks like now:
Could anyone help me with this?
Is there a reason why you don't want to use css shapes? Check out the demo I put together (result and snippet) it might help you.
You can do this by using that image as background for that particular div.
I am new to the Vaadin framework.I'm now trying to learn it by rebuilding the demo on their front page of Quciktickets dashboard using the Eclipse vaadin plug-in. Now I'm using css in my Theme to configure the sidebar part of that page.
My problem is after I add the buttons in the sidebar, they seems to be too far away from each other. So how can I fix it? I've tried to use padding, but that will only change the size of the button block while I wanna change the spacing between the blocks. Thx for anyone paying attention or giving hints for such a noob question.
code define the nativebutton layout:
.sidebar .sidemenu .v-nativebutton {
-webkit-appearance: none;
display: block;
padding: 10px 14px 10px;
width: 100%;
border: none;
margin: 0;
/*position: relative;*/
border-top: 1px solid #4b4c4d;
border-top-color: rgba(255,255,255,.05);
border-bottom: 1px solid #353637;
border-bottom-color: rgba(0,0,0,.18);
background:transparent;
color: #888a8c;
font-weight: normal;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
text-align:center;
}
I'm having the weirdest issue in IE (7, specifically) when implementing CSS borders. I first noticed this a few months ago.
The CSS is literally this: #donate {border:1px solid #299ae5;}
As you can see from the attached image, both of these screenshots were taken in IE7, from the same website, different pages - same template file. It's like the border has a "tail" in the bottom left corner.
Does anyone have any insight about this???
Edit: Here is the HTML (although I've seen this also on random sites in IE7 recently on input fields as well)
<li><span>Donate</span></li>
And here's the CSS:
li { display: inline; }
li a { color: #fff; display: block; float: left; margin-right: 8px; padding-right: 8px; line-height: 1.2em; }
li a span { background: url(bg-gradient.png) repeat-x 0 0; border: 1px solid #299a35; padding: 1px 5px 2px 4px; }
Thanks in advance!
I tend to use display:inline-block...the only other thing I'd change is making the anchor the button rather than the span. here's a quick example http://jsfiddle.net/3x4fR/2/
Does giving the li a span element the display: block; declaration do the trick? It may be having trouble applying vertical padding to an inline element.
jsfiddle makes testing stuff easy.
If you don't need the span get rid of it if not try *zoom:1 or some other way to give 'hasLayout' to the element. see example here http://jsfiddle.net/ShaggyDude11/zbZr8/3/