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;
}
Related
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/]
Okay so I am currently using this for my <a> tags in HTML, and here is my css for it
#button {
border-style: solid;
border-width: 1px;
border-bottom-width: 5px;
width: auto;
padding-left: 2px;
padding-right: 2px;
text-decoration:none;
color: gray;
}
#button:hover {
color: black;
}
But sadly the buttons are bigger then a standard line and just overlap eachother, for example:
Here is some text [button]
here is some more text [button]
Where the [button]s is beneath/ontop of the other it overlaps in the browser, (if that makes sense)
Here is a screenshot:
How can I make it so it creates a kind of area around it where it cant overlap and will push other elements outwards or so, margin seems to not work (top and bottom does nothing) and padding seems to make the 1px border bigger in height, thanks!
Add
display:inline-block;
to your button selector, e.g.:
#button {
border-style: solid;
border-width: 1px;
border-bottom-width: 5px;
width: auto;
padding-left: 2px;
padding-right: 2px;
text-decoration:none;
color: gray;
display:inline-block;
}
As an aside, i'd recommend that button is a class rather than an id, because you shouldn't really have multiple elements with the same id on the same page.
The distance between the lines in your example is too short to display a Button-Text surrounded by border with space that fits into that line.
So I sugesst to increase the line-height of the default Text.
Here an example: JSFiddle-Example
I'm working on something in my free time, a little selection tool for a game I play, Dota2.
I've poured the entire HTML output of the current situation in to a fiddle: http://jsfiddle.net/a8T6L/
This has a list of checkboxes and a list of items. These are figures, all set to display: table. The idea is that when I click one or more checkboxes, only items possessing the selected attributes will remain shown. That functionality isn't complete yet, so if you click a checkbox, everything will disappear. Simply uncheck everything to make it appear again.
Each item is a <figure> with and <img> and <figcaption>. Locally I'm generating the entire set with some PHP, I just copied the HTML/CSS/JavaScript so I could make the fiddle.
I was trying to add a border when you hover over an item, but this is shifting the items in some cases.
The relevant CSS code can be found on the fiddle at line 438:
figure {
text-align: center;
display: table;
width: 120px;
height: 90px;
padding: 15px auto; /* not needed unless you want centered */
margin-top: 5px;
}
figure:hover {
cursor: hand;
cursor: pointer;/*Should be good with all browsers*/
border-style: inset;
border-color: #000;
border-width: 1px;
}
I've tried playing with margins and padding(some of that left in the code), even with border-collapse, but nothing seems to work. What I'm trying to achieve here is that when I hover over the figure, an inset appears to let the user know which item is highlighted without anything moving even a pixel. Just the inset appearing.
I realize I could do this with background-color instead, if my intent is simply to let the user know which item is being hovered over, but then I wouldn't know the answer to this problem.
The reason this is happening is because it's adding pixels around the image when you hover. You should set your initial class with a border: 1px solid transparent; so that when you hover you aren't adding pixels but just changing the border color.
figure {
text-align: center;
display: table;
width: 120px;
height: 90px;
padding: 15px auto; /* not needed unless you want centered */
margin-top: 5px;
border: 1px solid transparent;
}
figure:hover {
cursor: hand;
cursor: pointer;/*Should be good with all browsers*/
border-color: #000;
}
Mathew is spot on with the reason (+1) another approach is to use outline instead of border:
figure:hover {
cursor: hand;
cursor: pointer;/*Should be good with all browsers*/
outline-style: inset;
outline-color: #000;
outline-width: 1px;
}
This should have the added benefit of working on browsers that don't support transparent for borders (i.e. IE6) if you are bothering to support such dodery old things. The down side is that the outline will caculate outside of the element, so if you run these elements up against the side of the page you may loose part of your border.
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/
Am sure this one is basic :) I have a webpage with the following css
.gameboard-table
{
border: solid 3px black;
padding: 0px;
border-collapse: collapse;
}
.gameboard-table tr
{
padding: 0px;
margin: 0px;
}
.gameboard-table td
{
padding: 0px;
margin: 0px;
vertical-align: bottom;
border: solid 1px black;
}
And I then put an imagebutton control (asp.net) into it setting the size to 64*56. In IE7 this works perfectly, the black borders meet my image.
However in IE8 I get a gap of approx 5px at the bottom of my image, which increases the size of my table and makes it look silly. Toggling between compatibility mode on/off makes this issue apparent.
Any ideas how to fix it: without using emulate!
Ta.
What html does asp.net generate?
What css is applying to your button?
how big is your button really?
how big is the image on your button?
what is the whitespace, is it really whitespace, or is the button?
Give us something to go on!