I have a button that has only one letter in it. this is the HTML for it:
<button type="button" class="clicker">X</button>
I need to resize that button to make it smaller as much as I need, and also to keep that letter following the size of the button.
I have tried the following css andit resizes the button, but the text is not following. It is either at the bottom of the button or not visible at all.
.clicker {
float: right;
font-family:"Calibri",Arial,Sans Serif;
font-size:1.0em;
line-height: 30px;
color:red;
text-align: center;
wordwrap: center;
text-shadow:1px 1px 1px #FFFFFF;
width: 30.0px;
height: 25.0px;
}
Reduce the line-height to 23px
http://jsfiddle.net/GfETQ/1/
I don't think you need font-size and line-height properties. Use vertical-align instead.
.clicker {
font-family: "Calibri", Arial, Sans Serif;
font-size: 1.0em;
color:red;
text-shadow: 1px 1px 1px #FFFFFF;
width: 30px;
height: 25px;
vertical-align: middle;
}
Fiddle:- http://jsfiddle.net/7wCLu/
It's just becuase of your line-height. Remove it and it works :)
Fiddle.
CSS:
.clicker {
float: right;
font-family:"Calibri", Arial, Sans Serif;
font-size:1.0em;
color:red;
text-align: center;
wordwrap: center;
text-shadow:1px 1px 1px #FFFFFF;
width: 30.0px;
height: 25.0px;
}
If you change to line-height: 20px; then it will center.
Related
I need to have a button that activates a slide down menu and a div that has a link in it, in a nav bar, the button and the link have a name and a small line of text underneath. I want the small line of text to be a smaller font. If I put the line of text in a p tag and specify a smaller font, I cannot get the text to align within them neatly.
I can use padding on the link to push it down, but when I start using media queries to make things smaller, they fall out of alignment. I have also tried using line height but have similar problems. I can go through all the media queries adjusting padding/line height slightly to get alignment, but obviously this is not fixing the problem, just creating a messy solution.
If I remove the font size on the small line of text, they align properly. Can someone help me understand the cause of why using different font sizes cause the alignment of the text in a button and div to change differently and suggest a solution so they align easily and consistently when I resize other properties such as the height of both. Thanks
.main-menu-button{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
float:left;
position:relative;
font-weight: 600;
font-size: 16pt;
height:50px;
top:25px;
line-height: 3pt;
z-index:10;
background-color: white;
border: 1px solid green;
}
.main-menu-link{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
float: left;
position:relative;
font-weight: 600;
font-size: 16pt;
height:50px;
width:120px;
top:25px;
line-height: 3pt;
z-index:10;
text-align: center;
border:solid 1px black;
}
/* if you remove font size in the p tag, the text aligns, but I want this below*/
p {
font-size:8pt;
}
<html>
<button class="main-menu-button">My button<p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
</html>
Removed lineheight from both
Removed margin from p
Added margin to div for the button*
Step 3 would be better if you use only divs or only buttons though.
.main-menu-button{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
float:left;
position:relative;
font-weight: 600;
font-size: 16pt;
height:50px;
top:25px;
z-index:10;
background-color: white;
border: 1px solid green;
}
.main-menu-link{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
float: left;
position:relative;
font-weight: 600;
font-size: 16pt;
padding-top: 5px;
height:50px;
width:120px;
top:25px;
z-index:10;
text-align: center;
border:solid 1px black;
}
/* if you remove font size in the p tag, the text aligns, but I want this below*/
p {
font-size:8pt;
margin: 0;
}
<html>
<button class="main-menu-button"><span>My button</span><p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
</html>
button are a bit special and there is a default center alignment applied to them. You need to do the same with the div
.main-menu-button,
.main-menu-link {
box-sizing: border-box;
display: inline-flex;
flex-direction:column;
vertical-align: top;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 16pt;
height: 50px;
line-height: 3pt;
width: 120px;
background-color: white;
border: 1px solid green;
justify-content:center;
align-items:center;
}
p {
font-size: 8pt;
margin-bottom:0;
}
<button class="main-menu-button">My button<p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a>
<p>bit of text</p>
</div>
.wrapper {
display: flex;
}
.wrapper > * {
margin-right: 5px;
padding: 5px 10px;
}
.main-menu-button{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 16pt;
background-color: white;
border: 1px solid green;
}
.main-menu-link{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 16pt;
width:120px;
text-align: center;
border:solid 1px black;
}
/* if you remove font size in the p tag, the text aligns, but I want this below*/
p {
font-size:8pt;
margin: 0;
}
<html>
<div class="wrapper">
<button class="main-menu-button"><span>My button</span><p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
</div>
</html>
What is happening here?
Added a wrapper for both elements and given display: flex;
You don't need the height property for inner elements anymore since flex parent's children by default will be of same height.
`Hi, I'd like to make a button with two lines of text and have them in different font sizes... Is there any way? My current way was trying it with an kind of designed button. Could that work in some way? Any help is appreciated! Beneath you see what I'm working with right now... I want to have a second line under "START" which is displayed in a much smaller font size
<a class="smallbtn">START</a>
.smallbtn {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;
}
you could do this if you just want to add a new line of text under your "START"
<a class="smallbtn">START<br><sub>hello</sub></a>
or
p{
font-size:12px;
padding:0px;margin:0px;}
<a class="smallbtn">START<br><p>hello</p></a>
You can try insert a div inside the button, give an id to the element and add css, like this:
<a class="smallbtn">START<div id="smallbtnFont">hello</div></a>
#smalbtnFont{
font-family: "arial";
font-size: 1em;
}
good question, heres how:
button {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;
}
<button>Start<br><small style="font-size:50%;">Now</small></button>
Ok, I have two buttons that need to sit side by side. I got that. But the right 'button' is sitting higher than the left one. Why? I believe that it is because of my right 'button' has two lines of text with it. My proponent will not budge on this button having two lines of text. Does anyone know how to do this better?
I put my code in jsfiddle: http://jsfiddle.net/energeticpixels/k7awcfts/
Here is my code:
<div id='tonyzBTNs'>
<a id='regCourse' class='btn' href='https://cloudlms.slhc.serco-na.com' target='_blank'>Register for Course</a>
<a id='regTest' class='btn' href='https://www.atrrs.army.mil/atrrscc/courseInfo.aspx?fy=2016&sch=910&crs=4E-F33%2f645-F17+(DL)&crstitle=ARMY+ELECTRICAL+EXPLOSIVE+SAFETY+(CERT)&phase=' target='_blank'>Register for Exam<span style="font-size: 10px;"><br />(after completing the course)</span></a>
</div>
And the css:
#tonyzBTNs {
margin-top: 20px;
margin-bottom: 20px;
}
#tonyzBTNs .btn {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-decoration: none;
}
#tonyzBTNs #regCourse {
background-color: #9EB95C;
border: 2px solid #708542;
border-radius: 10px;
padding: 10px;
color: black;
}
#tonyzBTNs #regTest {
background-color: #C54F4D;
border: 2px solid #6A4346;
border-radius: 10px;
padding: 1px 10px 1px 10px;
color: white;
display: inline-block;
}
Depending on how the rest of the site is layed out, Using float: left; in your #tonyzBTNs #regCourse will probably solve your issue.
Updated Fiddle
#tonyzBTNs .btn {
...
vertical-align: top;
display: inline-block;
}
Demo
How can I fix this because if the text is long the button will be longer.
button {
border: none;
padding: 1.1em 6.5em;
background: #00abc6;
color: #fff;
font-family: 'TitilliumText22LRegular', Arial, sans-serif;
font-weight:bold;
font-size: 1.1em;
border-radius: 0px;
}
button:hover {
background: #3E3E3E;
}
<button class="md-trigger" data-modal="modal-1">Login</button>
<center><p>Or</p></center>
<button class="md-trigger" data-modal="modal-2">Register</button>
you need to set a width and height for your button and to centre text horizontally and vertically use the following:
width:120px;
height:50px;
text-align:center;
line-height:1.1em;
font-size:1.1em;
width and height can be set to match your desired measurements.
This can be used for future demonstration:
https://jsfiddle.net/j9njkwkq/
EDIT:
of course you can add cursor:pointer in order to get the "right" button effect on a browser.
In this case you should use. min-width attribute.
Use min-width:100px
Add width to the style definition, for example:
max-width: 100px;
or just:
width: 100px;
https://jsfiddle.net/ghc9aw3w/
Of course you have to adjust the value to the text's required length.
button {
border: none;
padding: 1.1em 6.5em;
background: #00abc6;
color: #fff;
font-family: 'TitilliumText22LRegular', Arial, sans-serif;
font-weight:bold;
font-size: 1.1em;
border-radius: 0px;
width:200px
}
button:hover {
background: #3E3E3E;
}
<button class="md-trigger" data-modal="modal-1">Login</button>
<center><p>Or</p></center>
<button class="md-trigger" data-modal="modal-2">Register</button>
You could make a wrapper and than set the width to 100%
#login {
width: 300px;
}
button {
border: none;
padding: 1.1em 6.5em;
background: #00abc6;
color: #fff;
font-family: 'TitilliumText22LRegular', Arial, sans-serif;
font-weight:bold;
font-size: 1.1em;
border-radius: 0px;
width: 100%;
}
button:hover {
background: #3E3E3E;
}
<div id='login'>
<button class="md-trigger" data-modal="modal-1">Login</button>
<center><p>Or</p></center>
<button class="md-trigger" data-modal="modal-2">Register</button>
</div>
Give "width" for the class .md-trigger or button to make that same even if long text is entered.
For perfect styling wrap the contents inside a div
https://jsfiddle.net/ghc9aw3w/2/
<div class="btnwrap">
<button class="md-trigger" data-modal="modal-1">Login</button>
<center><p>Or</p></center>
<button class="md-trigger" data-modal="modal-2">Register</button>
</div>
then the style would be
.btnwrap{
width:200px;
overflow:hidden;
}
button {
width:100%;
display:block;
border: none;
padding: 1.1em 5em;
background: #00abc6;
color: #fff;
font-family: 'TitilliumText22LRegular', Arial, sans-serif;
font-weight:bold;
font-size: 1.1em;
border-radius: 0px;
text-align:center;
}
button:hover {
background: #3E3E3E;
}
I have the simple form and attached the css file for that. As you can see there are 2 fields and one checkbox - I would like to make the checkbox directly under the textarea, with around 1-2px space, not as it is now - how can I modify that? I thought the problem is somewhere here:
.textox, .textoxarea {
width: 340px;
border: solid 1px #999999;
padding: 2px;
border-radius: 4px;
font-size: 14px;
box-shadow: 0px 1px 2px 0px #9C9C9C;
background-color: #FFFFFF;
outline: none;
color: #474747;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 100;
}
but I can't find the proper way of doing that.
Here's my fiddle.
Thanks!
Remove the empty paragraphs between textarea and checkbox.
In your fiddle it's on lines 11 and 13.
http://jsfiddle.net/7hq0x6u4/3/
.center p:nth-of-type(2),.center p:nth-of-type(3){
margin:0;
}
This will reduce the space of margin in both the P tags which are covering the input elements
DEMO
Normally use of p tags to align input tags are not recommended.
Hi to your <input type="checkbox"> add these styles.
.foo {
bottom: 1px;
margin-left: 0;
margin-right: 5px;
position: relative;
}
.foo as an example class on checkbox.