I have a button on my wordpress site titled 'try apptive free' in my header with a 2px border around it. The border already inherits a 10px padding. I want to bring the padding down to 5px to shrink the border distance however, changing the padding movies the 'try apptive free' out of line with the logo on the left side of the header titled 'Apptive'.
Is there an easy way to change the padding to 5px without moving the button out of line with the logo?
www.allaboutcats.wordpress.com
You could always add some margin to it, to compensate for the removed padding. Or you could place both elements in one container and give them vertical-align: middle.
Give it a margin-top: 5px; It should work.
Related
Newbie question: Can someone tell me what is governing the height of the menu with inspect element? (this is a wp template) Changing the padding on the ".li a {" makes the menu buttons smaller but I cant seem to vertically shrink the container..
Thanks for spotting it in advance!
If the height property is not explicitly stated, it is inherited from one of its ancestor.
If .li a contains the padding property with value 10px, then you must alter the values like
.li a {
padding: 5px 10px 5px 10px; // Padding: top right bottom left
}
Thus we need to work with top and bottom values only.
I don't see what would control text to be offset on different computers, as seen below. One is centered within the blue area correctly, the other seems offset somehow. It's happening in a text field and a button. Live site: http://www.muuzik.me:8000
The key is in adjusting the padding around that element. Currently there is 18px of padding on the top and 4px of padding on the bottom. That's not balanced, so the text won't be centered vertically. To get it centered horizontally, make sure that the left and right padding are the same; to get it centered vertically, make sure that the top and bottom padding are the same.
It probably helps things that you can use a shorthand declaration to create this effect:
padding: 10px 20px; will set the top & bottom to 10px and the left & right to 20px.
I think that is the padding settings. See the green areas? Those are the paddings. Your curren t padding is
padding-top:14px;
padding-right:18px
padding-bottoem:4px;
padding-left:18px;
That is why the text is not presented in center;
You can try to set the padding to
padding: 12px;
I tried this, it works for me on Chrome and Firefox
You should show the whole CSS, but did you try to set text-align: center; and line-height: 46pxto the button?
I am building a page using blocks of sections:
http://jsfiddle.net/NrkTn/3/
You can see I have added margin to the section elements, however I'm unable to add both top and bottom margins, it uses whichever is the largest value.
Each section should have a top and bottom margin of 20px, making the space between them 40px, however it is showing a margin of only 20px.
Margins collapse on themselves: http://jsfiddle.net/NrkTn/4/
That is expected behavior. It will always take the largest margin and not a combination of the two. Here's an article that explains this.
Margins collaspe on themselves, so that is expected behavior. You could do what you want by changing your section CSS to use borders instead
#page section{ border-top: 20px solid white; border-bottom: 20px solid white; }
http://jsfiddle.net/SAcK8/
Another way to do what you want is to wrap your sections in divs and use padding
I have implemented a dropdown menu into a website, here:
http://www.gardensandhomesdirect.co.uk/
However, The dropdowns themselves seem to contract prematurely. Its sometimes difficult to keep the dropdown open when moving from the initial button onto an option in the dropdown.
Is this a problem with the code or something is affecting it? Is there anything I can do?
Thanks!
Your dropdown divs .dropdown_Xcolumns have a top margin of 4px, When the mouse is on these 4px it's breaking the hover (unless it's done really fast!).. remove the top margin and all should be well.
If you want the effect of a gap between the <li> and the dropdown div - try a top white border on that div
or alternatively, leave the top margin, and add 4px bottom padding to the container <li>s to make them meet up better
try to change for margin: 4px auto; to margin: 2px auto; for .dropdown_buildings in menu.css
You can try to add padding to each li element. It increase the active surface area of the hover area. When the user hover over the top nav and the sub-menu appears, the user can move the mouse downwards, and since he is now still within the padding area the hover is still activated.
My goal is to add a drop shadow to the left and to the right side of a #container div, which is 960px wide.
The #container itself contains a header, a nav menu, main content, sidebar, and foot. But the header itself juts out of the #container with a custom width due to a graphic.
As such, it does not get a drop shadow added to its right and left. Only the nav menu down needs the drop. This is because the header is set to a custom width, and juts out beyond the #container itself. A drop shadow to the left and right of a thing that already juts out would ruin the aesthetics.
For better visualization, my site looks similar to http://www.doubleyourdating.com/, but the header element juts out on both sides.
I've tried to add a drop shadow to the left and to the right side of the #container, from the nav menu down with the following solutions:
I Photoshopped a 1px high, 1010px wide image which contains a 25px "fade" on opposite ends. I CSS'd that as the #container div background-image, but, probably because the #container itself is set to 960px wide, the 1010px wide background can't show up. Note that changing the 960px width will create a cascade of death in this simple 2 column layout.
I tried CSSing up a makeshift shadow box div "around" the container div, but that isn't working because my header has a custom width that extends wider than the container.
How do I make this work?
You could try something like this:
box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
Of course, mess around with the values until it suits you.
Single line of code :
box-shadow: 4px 0 2px #222, -4px 0 2px #222;
Just insert in corresponding css style element
Done!