I followed this, this, this and this question. But the solution is not working because the problem is slightly different. I'm using a calendar component called <p-calendar> from primeng. It is a month-picker actually. This component has already a well defined styling in primeng.css. The component by default looks like this:
But I want to put my styling. I want it be to encircled by blue color on hover. I have achieved this:
.
But as you can see month name is pushed towards the top and not in the middle.
Here is primeng.css that I'm trying to modify.
CSS that was already there
.ui-datepicker {
width: 10px;
padding: .2em;
position: absolute;
}
.ui-datepicker.ui-datepicker-inline {
display: inline-block;
position: static;
}
.ui-datepicker .ui-datepicker-group {
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0;
}
/* Month Picker */
.ui-monthpicker .ui-monthpicker-month {
width: 33.3%;
display: inline-block;
text-align: center;
padding: .5em;
cursor: pointer;
}
.ui-datepicker-monthpicker select.ui-datepicker-year {
width: auto;
}
CSS that I added later on
.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;
}
.ui-monthpicker-month:hover {
background-color: #1474A4 !important;
color: white !important;
text-align: center !important;
}
I'm not very good at styling. Any advice and suggestions will be of great help.
PS: I also tried adding padding-top: 15px on :hover but then it started flickering.
Try to do a trick using percentage on the padding top and bottom and set the height element to zero.
.ui-monthpicker-month {
color: #333333;
border-radius: 100% !important;
height: 0 !important;
padding-top: 13% !important;
padding-bottom: 20% !important;
}
.ui-monthpicker-month:hover {
background-color: #1474A4 !important;
color: #fff;
}
And here is the screenshots:
------------------------------ PC ------------------------------
------------------------------ Tablet ------------------------------
------------------------------ Phone ------------------------------
Just add line-height as you need.
I added 2em you can change as required.
.ui-monthpicker .ui-monthpicker-month {
background-color:#3399cc;
width: 33.3%;
display: inline-block;
text-align: center;
padding: .5em;
cursor: pointer;
line-height:2em; // <-- Add line height
}
<div class="ui-monthpicker">
<div class="ui-monthpicker-month">Jan</div>
<div class="ui-monthpicker-month">Feb</div>
</div>
Related
Take a look at http://crashjapan.net - in the sidebar, the Subscribe button (submit element) is staying inside its box, nicely centered, but the three buttons under "I want to help!" (link elements styled like buttons) are too wide. I have looked through the CSS but I can't figure out what is different and what to do to fix it. Can someone else spot the problem?
#secondary .widget .button {
color: white;
font-size: 1.2em;
margin: 0 10% 5px 10%;
width: 80%;
text-align: center;
box-sizing: border-box;
}
This is one possible solution.
Remove this:
margin: 0 10% 5px 10%;
from this in your style.css:
#secondary .widget .button {
color: white;
font-size: 1.2em;
margin: 0 10% 5px 10%;
width: 80%;
text-align: center;
}
Edit Your class:
#secondary .widget .button {
clear: both;
color: white;
font-size: 1.2em;
margin: auto;
text-align: center;
width: 78%;
}
Change your button #secondary .widget .button
to this:
secondary .widget .button
{
color: #FFF;
font-size: 1.2em;
margin: 6px 0% 0px -5px !important;
margin-top: 0px;
margin-right: 0%;
margin-bottom: 0px;
margin-left: 0px;
width: 70%;
}
6px will leave some space between those buttons.
width 70% will be also play a role for the margin.
You can try to play the width a bit to see how it looks like.
so i have got a box , with some text in it and i want to highlight the text as shown in the jsfiddle.... unfortuntely I can't seem to change the green box so it has the same padding as the text... can someone help a stupid boy ?
the jsfiddle is here ...
http://jsfiddle.net/2es4bx0o/3/
and here is the css involved (not much really)
.border {
background-color:#8cc63f;
}
.tile-area-main {
position: fixed;
left: 0px;
top: 0px;
display: inline-block;
color: #ffffff;
width: 780px;
height: 450px;
overflow: hidden;
z-index : 3000;
background-color:rgba(37, 34, 104, 0.3);
border-radius: 25px;
}
.tile-area-main p {
margin: 0;
padding: 0 2.4em 0.6em;
font-size: 1.4em;
line-height: 1.5;
color : #000;
cursor: pointer;
}
You need to set margin instead padding for the .border element:
.border {
margin: 0 2.4em 0.6em !important;
padding: 0 !important;
}
FIDDLE: https://jsfiddle.net/lmgonzalves/2es4bx0o/4/
I have a problem that I believe might be pretty stupid, but I can't figure out.
I have a form, where I want to align the elements in both sides, problem is I can't align it to the right (where the red line is), here is a picture to show it:
and here is my SASS (sorry if is not very tidy I been working for a while in it and might be messy):
.contact {
margin: 100px auto 0;
max-width: $half-width;
form {
letter-spacing: 2px;
color: $color4;
input, textarea {
border: 3px solid $color5;
padding: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 16px;
background: $color6;
&:focus {
outline: none !important;
border-color: $color3 !important;
}
textarea {
height: 10em;
width: 100%;
overflow: inherit;
}
}
.info-group {
margin-top: 10px;
label {
display: inline-block;
width: 45%;
float: left;
&:nth-child(2) {
float: right !important;
margin: 0 auto;
}
}
}
.tell-group {
width: 100%;
label {
display: inline-block;
margin-top: 10px;
}
textarea {
height: 10em;
width: 100%;
float: left;
}
}
.submit-wrap {
margin-top: 10px;
float: right;
input {
width: 100px;
font-size: 18px;
text-transform: uppercase;
color: $color6;
background-color: $color5;
border: none;
&:hover {
color: $color1;
}
}
}
}
}
Thanks!
padding: 10px; is going to add 20px to the width, this extra width is likely what is causing the problem. You can change the width attribute to width: calc(100% - 20px); to account for the 10px padding on each side of the element.
Here is a list of where calc is supported: http://caniuse.com/#feat=calc
You can also try adding these css rules to the problem elements to move them over:
position: relative;
left: -20px;
You might also have to add position: relative; to the parent element
Here is a fiddle showing the left -20px method: http://jsfiddle.net/0f153w8e/
Side note: you might have to adjust the left amount a little bit to make it exact if your text areas have borders (which they probably do)
i have the following as part of a .CSS file:-
#footer-profile {
position: absolute;
bottom: 0px;
left: 50px;
text-align: center;
padding: 5px 10px;
color: blue;
background: yellow;
opacity: .3;
-moz-opacity: .3;
filter: alpha(opacity=30);
-moz-border-radius: 20px 20px 0px 0px;
-webkit-border-radius: 20px 20px 0px 0px;
}
#footer {
position: relative;
top: 20px;
clear: both;
text-align: center;
padding: 20px;
color: #999999;
}
but how can i hide the text within the footer
Add inside #footer directive
display: none;
the whole footer will be hidden. If you want to hide only some part of the footer, add them inside some tag with class hidden and then add a rule:
#footer.hidden {
display: none;
}
Depending on what you want to do, you could try to use visibility: hidden; instead of display: none;. The first one will hide the element but will keep free its space in the layout, the second one will 'collapse' the element and may change your layout.
For completeness sake, I would like to add the solution provided by Rohit Azar as a comment to your post:
#footer {
font-size: 0;
}
This solution does exactly what the question asks.
if you want to hide only the text, try this:
#footer{
text-indent:-99999px;
}
I'm still new in CSS, sorry for the long post. I have the following code
<style type="text/css">
.btn {
float: left;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
</style>
</head>
<body>
<div class="btn btn_addtocart">Add to Cart<span></span></div>
<div class="btn btn_checkout">Check Out<span></span></div>
</body>
</html>
I'm trying to center each button in the middle of the page (horizontal alignment), how can I accomplish that? I tried playing with the padding and the margin but it messes my background image.
Here is jsFiddle
try margin auto, text-align center, fixed width for middle part..
oh ..and get rid of the float, and dont forget the ';'
edit code..
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
display: block;
margin: 5px auto;
text-align: center;
width: 120px;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
You can text-align:center the links inside the divs (which are block-level elements) to center them inside their containers but you will have to make a couple of tweaks. Try this:
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
text-align:center;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
display: block;
}
.btn_addtocart a { background-color: green; }
.btn_checkout a { background-color: red; }
Demo
http://jsfiddle.net/andresilich/UtXYY/1/
A couple things you can do
.btn {
display: block
margin-left: auto;
margin-right: auto;
}
By default a button is an inline element, so margins will no work. Setting display to block, will make it act like a
div.btnParent {
text-align:center
}
The other method is to have the button's containing element text-align center. The may not necessarily always work, as there may be more content in this container that you do not want to be centered.
I can't fully see from your code snippet but to centre somthing in the middle of its parent, you need to set its margin to auto.
margin: auto
and its width
width: 100px:
EDIT:
Also remove any float: styles you have on the element.