#menu a {
display: block;
margin-right: 67px;
text-decoration: none;
font-family: Novecentosanswide-Book;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased !important;
text-transform:lowercase;
font-size: 18px;
color: #81878b;
border: none;
padding: 4px 9px 9px 0px;
}
#menu a:hover {
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
background-color: #ff672a;
color: white;
text-decoration: none;
}
I have this css code which basically just creates a rounded rectangle. It works fine but I want to make it a bit longer, so I increase the padding in the #menu a and what it does is it increases the size of the rectangle proportionaly to the right, so it looks out of place. What I want to do is just increase it's lenght, so that it would have about 9px on the right and the left of the link.
If I understand your question correctly, you are concerned that the padding is "off center" and to the right. This is because your padding definition is:
padding: 4px 9px 9px 0px;
Above is what you currently have. Padding is defined as:
padding: top right bottom left
You can see above, you are setting the right side to 9px, but the left side to 0px. If you want this to be proportional, make sure the right and left values are equal.
As per your requirement, I thought you need to make a bock with desired height and width with the text alignment with center always. So you can use like below,
a {
display: table-cell;
height: 50px;
width: 200px;
text-align: center;
vertical-align: middle;
}
Which aligns the text in the middle. Please check this Fiddle.
Related
I'm trying to add some styling in <p-calendar> tag of primeng 6.1.1. I want a blue circle on the month item on hover.
I'm expecting this:
But instead, I'm getting this:
Why it is oval and not perfectly round. I'm using border-radius: 50% !important.
Here is my datepicker.scss
.ui-monthpicker-month {
border-radius: 50% !important;
text-decoration: none;
margin-top: 10px;
color: #73767b;
font-family: 'Muli', sans-serif;
padding: 0px 20px 0 20px;
}
.ui-monthpicker-month:hover {
background-color: #1474A4;
color: white;
}
Please correct me.
That is because the element is not square. Check with chrome debugger what is the width and height and make sure that both match.
My guess is that if you change padding: 0px 20px 0 20px; to padding: 20px 20px 20px 20px; it will be square.
Try to specify in ui.monthpicker-month equal height and width then change border-radius: 100%
padding: 0px 20px 0 20px;
Try by removing padding, or if you want that padding then keep same padding for all 4 sides
Please try this one
width: 50px;
height: 50px;
I'm terrible at styling but after making these changes in css:
.ui-monthpicker-month {
border-radius: 100% !important;
text-decoration: none;
margin-top: 10px;
color: #73767b;
font-family: 'Muli', sans-serif;
height: 50px !important;
width: 50px !important;
padding: 20px 20px 20px 20px;
}
I'm getting this:
but the month name is still somewhat pushed towards top, how to make this in exact mid position?
Try to remove margin-top: 10px; to margin-top: 0;
I have this CSS class:
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
I want to keep the same border width even when the number changes, from 10 to 9.
Right now, the border expands when the number changes.
Here's a JFiddle of what I mean.
I've already tried changing the padding attribute but I can't make it work.
Try this. Add display:inline-block and then line-height to vertically align the numbers. By setting this the box will expand. adjust the height & width as per your need. If so, do not forget to adjust the line-height relative to height of the box.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
line-height:36px; /*vertcally center the numbers*/
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
display:inline-block; /* Added */
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>
You can just explicitly set the width. I suggest a unit of mesure that's relative to the font size (namely ems)
Edit: it seems all you were missing was display:inline-block. You can't set the width of an inline element. Adding it will probably get you most of the way there.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
/*width: 36px;
height: 36px;*/
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
display: inline-block;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>
Check out these properties:
line-height:20px; /*this will center your numbers inside the border*/
width: 20px; /*set the same as line-height and height in order to give a square shaped border*/
height: 20px; /*set the same as line-height and width in order to give a square shaped border*/
display: inline-block;
line-height, width and height will shape your box. While the new display property will help to align the elements in a "one after the other" fashion. :)
This is what my form/submit button currently looks like:
I would like, of course, for the "Go" button to be better integrated into the rest of the form so that it appears as a seamless extension. This would mean that the right side would have a border-radius, while the left side would remain straight. In addition, the top and bottom of the button would have to line up perfectly with the top and bottom of the form.
Any help with this? I've been fiddling around, and this is what I've come up with so far in terms of code:
input {
display: inline;
}
input.button {
margin-left: -9px;
border: none;
background-color:#FA8801;
border-radius-right: 2px !important;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family: Open Sans !important;
font-weight: 100 !important;
font-size:17px;
padding:7px 5px;
text-decoration:none !important;
font-family: inherit;
}
/*This is the styling for the form, not the button from here and on... */
input[type=email] {
padding: 5px !important;
border: 2px solid #FFFFFF;
-webkit-border-radius: 2px !important;
border-radius: 5px !important;
font-family: inherit;
font-weight: 100 !important;
}
input[type=email]:focus {
border: 2px solid #FA8801;
outline: none;
}
input[type=email]:focus::-webkit-input-placeholder {
color:transparent;
}
And the JSFiddle: http://jsfiddle.net/wfhLnsez/
Use border-top-right-radius and border-bottom-right-radius to target individual corners.
I would suggest putting a line-height on your input box which gives you the height you'll need for your "Go" submit button. Then you'll need to pad the left and right of these elements only seeing as you already have the height.
input.button {
border-top-right-radius: 5px; /* to match border-radius on input box */
border-bottom-right-radius: 5px;
height: 30px; /* to match height of input box */
padding: 0 5px;
}
input[type=email] {
line-height: 30px; /* height of input box */
padding: 0 5px; /* nothing on top and bottom, 5px on left and right */
}
I've noticed you have !important on conflicting properties on your input[type=email].
-webkit-border-radius: 2px !important;
border-radius: 5px !important;
For starters, do your utmost to avoid using !important as well-written CSS shouldn't need them. You have 2 different values for the same property 2px and 5px. They should both be the same. Also, while you're at it, you should add the third prefix for these types of styles, so it should be:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
I think this is closer to what you want:
jsfiddle
Some highlights:
the border radius, you need to use all the browser's CSS for this:
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
I also change the padding to get the height of the button closer to made that of the input:
padding-left:4px;
padding-right:4px;
padding-top: 1px;
padding-bottom: 6px;
Finally, I moved the button over one pixel to cover the rest of the input's border radius:
margin-left: -10px;
Hopefully this helps!
I am trying to create a <kbd> tag for myself. I was trying with this image like below,
CSS:
kbd {
font-family: Courier;
padding-top:8px;
padding-bottom:8px;
padding-right:15px;
padding-left:10px;
background: url('kbd.png');
background-repeat:no-repeat;
}
HTML:
<p>Open Terminal <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>T</kbd> </p>
But images are not showing completely unless the text is large enough to cover the image. see the screen shot below.
Also I could not able to bring the text at center, I tried align but could not succeeded.
Any help including any better way to have <kbd> tag will be appreciated.
It's very worth noting that this could be done pretty much entirely without the need of an image. It would be more flexible without it; a long <kbd> text would break if it were an image, but wouldn't if it was done entirely in CSS.
So I propose:
http://jsfiddle.net/TLV4a/1/
kbd {
display: inline-block;
min-width: 45px;
text-align: center;
font-family: Courier;
margin: 0 5px;
padding: 0 5px;
background-color: #f7f7f7;
border-width: 1px 1px 3px;
border-style: solid;
border-color: #ccc;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 4px 1px #fff;
box-shadow: inset 0 0 4px 1px #fff;
line-height: 1.75;
}
If you have even padding, instead of different left vs. right padding, as well as utilise a min-width along with text-align: center;, you can get it to display nicely.
http://jsfiddle.net/TLV4a/
kbd {
display: inline-block;
min-width: 50px;
text-align: center;
font-family: Courier;
padding: 6px 5px 8px;
background: url('https://dl.dropboxusercontent.com/u/61772690/kbd.png') no-repeat 50% 0;
}
Have a look at this jsFiddle
kbd {
font-family: Courier;
padding-top:6px;
padding-bottom:6px;
background: url('https://dl.dropboxusercontent.com/u/61772690/kbd.png');
display: inline-block;
width: 54px;
text-align: center;
background-repeat:no-repeat;
}
You can use this code to get your desire resutl:
kbd {
background: url("kbd.png") no-repeat;
display: inline-block;
font-family: Courier;
min-height: 31px;
min-width: 54px;
font-size: 0.75em;
padding: 6px 0 0;
text-align: center;
}
/*use font size to adjust with the key image and use padding 0px for the left and right after that use text-align to obtain your best result .I have attached an image look it*/
Adding background-size may be your best solution.
background-size:100% 100%;
You can use text-align:center for align your text and on the background image you can use a z-index Property.
have a look here for z-index examples:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I have the following fiddle
There's an image of 32 by 32 on the left and two lines of text on the right. Can someone have a look at this and tell me where I am going wrong. All I need is for the center of the gif and the text to line up with the middle of the enclosing frame.
As you will see from the fiddle I tried quite a few different combinations of margin but none seem to work for me.
Is the problem because I am using "display: inline-block;" or are there other problems?
<div class="server-info">
<div style="z-index: 99; width: 32px; height: 32px;
margin-top: 9px;
margin-bottom: 9px;
margin-right: 3px; display: inline-block;" id="load-icon"></div>
<div style="display: inline-block; margin-top: 5px;
margin-bottom: 5px; height: 40px;">XXX<br>YYY </div>
</div>
CSS
.server-info {
border-radius: 0.4em 0.4em 0.4em 0.4em;
border-top: 0 none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.65);
color: white;
display: inline-block;
margin-left: 0.5em;
padding: 0 1em;
vertical-align: top;
font-size: 1em;
margin-top: 1.6em;
padding-left: 1em;
padding-right: 1em;
text-align: left;
text-transform: none;
background: none repeat scroll 0 0 #000000;
}
#load-icon
{
background: url("http://www.smilecarwash.com/images/ajax-loader.gif");
background-repeat: no-repeat;
}
Update: Corrected fiddle link - sorry about that
Is this what you are looking for http://jsfiddle.net/BcPjz/4/
To align vertically middle you need to add display:table-cell and vertical middle to the text div.
Or this http://jsfiddle.net/GYkBC/1/
To place the text below the image add display:block to either image div or text div