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.
Related
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>
I'm having an issue trying to get the green buttons underneath the header to lay properly across devices. Full desktop is fine, but as the screen gets smaller, the buttons will break between words and go the next line. And on mobile, I'd like them to stack, but they overlap, and I'm trying to add a bottom/top margin, but nothing helps.
http://www.cooldownjuice.com/collections/menu
How can I get this to lay properly?
Here's my code. (added max/min width as suggested on another topic here)
.catbtn {
padding: 10px;
margin-right: 4px;
margin-left: 7px;
background-color: #319E15;
color: #fff!important;
text-decoration: none!important;
font-family: Lato;
font-size: 100%;
text-transform: uppercase;
border-radius: 5px;
border: 2px solid #319E15;
width: 100%;
min-width: 50px;
max-width: 300px;
}
You'll need to use float, like so
.catbn {
display: block;
float: left;
margin-top: 10px;
}
Also I personally believe the behavior is better when you remove width: 100% but that's a matter of personal preference.
Use
display: -webkit-inline-box;
display: inline-block;
margin: 10px,
And voilà! And you can maintain your center buttons. If you wish, you can float:left/right to align
To avoid breaking of words and overlapping buttons, add following rules in your css
.catbn{
white-space:nowrap;
display:inline-block;
/*Rest of the css*/
}
The best way to do that is to set the a to block. You may use float or display:inline-block
Here is your modified code for button.
.catbtn {
padding: 10px;
margin-right: 4px;
margin-left: 7px;
background-color: #319E15;
color: #fff!important;
text-decoration: none!important;
font-family: Lato;
font-size: 100%;
text-transform: uppercase;
border-radius: 5px;
border: 2px solid #319E15;
width: 100%;
min-width: 50px;
display: inline-block;/* a as block and inline*/
max-width: 174px; /* Set the width*/
}
Hope this help you.!
I have a header with a div inside of it, for some reason there is more space under the div then above. I tried setting all the padding to 0 in hope to see which one was causing it but it seems to not be a padding at all.
HTML
<header>
<div class="logo">
<div class="centrDivInDiv">
<h1>Welcome to Planet Earth</h1>
<p>The best planet after Pluto.</p>
</div>
</div>
</header>
CSS
body {
margin: 0px;
}
h1 {
margin-bottom: 0px;
}
header {
background-color: #E74C3C;
padding: 10px;
}
header p {
line-height: 0%;
}
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
}
.logo p {
margin-top: 24px;
}
.centrDivInDiv {
display: table-cell;
vertical-align: middle;
margin: 0;
}
JsFiddle
Add vertical-align:middle to your .logo div (and you can remove it from .centrDivInDiv):
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
vertical-align: middle;
}
jsFiddle example
Your problem is caused by the display: inline-block of your CSS. If you remove that or change it for display: blockit will be fine. You should also set your width: 50%
All of that in your .logo
check the fiddle
jsFiddle
The problem exists because you're using display: inline-block; in .logo
The best way to solve this problem is to set font-size to 0 in header so it will be like this:
header {
background-color: #E74C3C;
padding: 10px;
font-size: 0;
}
Also you should set font-size in .logo so it will be like this
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
font-size: 16px;
}
Maybe this link will help you, it has more details
Fighting the Space Between Inline Block Elements | CSS-Tricks
I have below lines in my JSPX
<div class="page_nav">
<a id="saveButton" class="button"><span>${save}</span></a>
<a id="cancelButton" class="button"><span>${cancel}</span></a>
</div>
for loading "save" and "cancel" button. When I load the page, the order of the buttons is not ordered, only in chrome. Please refer screen shot for reference
Below are the copy-pastes from css
a.button {
background: transparent
url('../../images/admin/bg_button_span.png') repeat
scroll top right;
color: #fff;
display: block;
float: left;
font: normal 1.1em Tahoma, Arial;
height: 24px;
margin-right: 6px;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
cursor: pointer;
}
.page_nav {
float: left;
margin: 1em 0;
width: 100%;
clear: both;
}
This happens only in chrome
I use the same div in another page (same classnames too)., it works there perfectly. Not sure what am missing here
Please help me on this
Try to set overflow:hidden for .page_nav:
.page_nav {
float: left;
display:block;
margin: 1em 0;
width: 100%;
overflow: hidden;
}
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.