I am just getting back into coding and I would like to know what is the best method for adding heigh to my btn.
Here is the code -
Padding method
.nav-main li a {
display: block;
padding: 70px 10px 70px 10px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
Line-height method
.nav-main li a {
display: block;
padding: 0 10px 0 10px;
line-height: 150px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
I like to use line-height because it positions the baseline correctly to make the text appear in the middle of the element (whereas with padding it may be off-centre one way or the other based on the font)
Of course, this relies on you using a pixel value for line-height (as you are doing in your question) - using a numeric value like 1.5 may produce different results depending on the font.
I personally use padding as it gives me more control across browsers, as line height can vary on which font you are using, along with what fonts are installed/not installed on the clients' browser.
.link {
text-decoration: none;
color: aqua;
border: 2px solid aqua;
margin: 30px auto;
display: block;
width: 160px;
height: 40px;
line-height: 35px;
text-align: center;
position: relative;
overflow: hidden;
}
.link::before {
content: attr(data-text);
position: absolute;
width: 100%;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 0.5s;
}
You will show the difference between the padding and line height
when you use pseudo element (before and aftere) =>
with line height the pseudo element take the same height of his parent
with padding the pseudo element do not take the height of his parent
Related
I have animated my navigation buttons that expand upon hover, but they keep on disrupting the flow of the rest of the page. I've tried using z-index to take them out of the flow, but that isn't working, either. Is there a way to do this with out the buttons shoving everything out of whack? Here's my relevant code so far:
.btn-group .button {
background-color: teal;
border: 2px solid orange;
color: orange;
padding: 2px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
font-size: 1em;
border-radius: 50%;
margin: 5px 0 5px 5px;
padding-left: 30px;
position: relative;
z-index: 1; }
.btn-group .button:hover {
background-color: cadetblue; }
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s; }
.button span:after {
content: '\00bb';
opacity: 0;
top: 0;
right: -20px;
transition: 0s;
padding-left: 10px; }
.button:hover span {
padding: 10px;
color: black;
font-size: 1.5em; }
.button:hover span:after {
opacity: 1;
right: 0;
color: black; }
Thanks for your help!
You have to limit your animations to properties that do not interfere with object's position and dimensions in the document flow.
Those are: transform, left, right, bottom and top. For the last 4, in order to work, you also need position:relative on the button. When using any of these, even though you see the element moving, its place is kept in the flow, just like it would still be there. Only its projected image is moved/transformed.
Example with transform:
.button {
margin: 1rem;
transition : transform .3s cubic-bezier(.4,0,.2,1);
display: inline-block;
border: 1px solid black;
padding: 1rem;
}
.button:hover {
transform: scale(1.1);
}
.red {
background-color: red;
padding: 1rem;
color: white;
}
<a class="button">Example with transform</a>
<div class="red">see? I'm not moving</div>
That's how the vast majority of web animations are done (using transforms).
As an alternative, if you really want to animate properties that would normally affect the rest of the document, you will need to remove your element from document flow. For that, you need to:
wrap your element in a wrapper (placeholder) of desired dimensions (which will never move and keep everything in place), and give the wrapper position:relative,
set position:absolute on the button.
Now you can animate anything on the button without affecting the rest of the document.
But remember, the wrapper needs to have proper dimensions, as the button, now being absolutely positioned, will no longer occupy any space in the document flow. Also, note that your button is now relative to its placeholder. If the placeholder moves, the button moves too.
Example with absolute positioning and wrapping:
.wrapper {
height: 5rem;
position: relative;
}
.button {
position: absolute;
top: 1rem;
padding: 1rem;
transition: all .3s cubic-bezier(.4,0,.2,1);
border: 1px solid black;
}
.button:hover {
top: .5rem;
padding: 1.5rem;
}
.red {
background-color: red;
padding: 1rem;
color: white;
}
<div class="wrapper">
<a class="button">Example with absolute positioning and wrapping</a>
</div>
<div class="red">see? I'm not moving</div>
That's the basics.
As a side note, best practices require you to limit animations to a very select and limited bunch or properties which do not hit browser performance: the bunch is made of exactly two items:
transforms
and opacity.
You animate anything else... boom!, your scroll begins to stagger on devices with limited resources. There is quite a lot to read on the subject, but here's a good one.
Setting a high z-index does not take the element out of the document flow, you need to use absolute positioning for your button.
i.e.
.btn-group{
position: relative;
}
.button{
position: absolute;
}
I am having a page which contains set of buttons at the footer(bottom). When I open the page for the first time I get the buttons as below:
Now, sometimes the first three buttons gets hidden and I get the page as :
I am not getting what could go wrong? Interestingly, when I inspect the button and change any property, the buttons get aligned immediately. Strange but true.
Code for li elements:
li
{
position: relative;
top: 7px;
left: 10px;
display: block;
float: left;
margin-right: 10px;
}
Now when I remove the position relative then it does not gets hidden but ya, it reaches the top of the page.
Something Like this
Update : I assume it is because of position:relative, can I change my code without position relative? Or with position:absolute?
Fiddle
Try this css:
.details .action-bottom {
height: 29px;
background: #739DDD;
border: 2px solid #01296E;
border-top: 1px solid #666;
margin: 0px 0 0 0;
}
.details .action-bottom ul {
list-style: none;
margin:0;
padding:0;
}
.details .action-bottom li {
display: inline-block !important;
float: left !important;
padding: 6px !important;
position: inherit;
}
Update Live
Basically I'm making some buttons but even through I put the width as auto and set padding, the list still extends 100% of the page. I don't want to set the width in pixels, I just want to set the padding either side.
Can anyone please explain where I have gone wrong:
http://jsfiddle.net/spadez/KYdnJ/5/
#nav li {
color: #333;
line-height: 28px;
background-color: #F8F8F8;
border: 1px solid #D3D3D3;
padding: 0px 9px 0px 9px;
font-family: arial, sans-serif;
font-size: 11px;
width: auto;
}
List items are similar to block-level elements in that their initial width value is equal to auto so by default they will span the width of their containing block if they aren't given a fixed size. You can either float or change the display value to inline-block; so that their width "shrinks to fit" its content, or you can just give the list-items a fixed width.
http://jsfiddle.net/KYdnJ/8/
You are missing display: inline-block on the list elements. By default they are rendered as block elements, which means they take up 100% of the width of their container.
If I got you right, this is what you want - display: table; on your #nav li css block.
http://jsfiddle.net/KYdnJ/13/
my 2 cents from my earlier comment about margin instead of padding:
http://jsfiddle.net/GCyrillus/KYdnJ/9/
* {
list-style: none;
}
#nav li {
color: #333;
line-height: 28px;
background-color: #F8F8F8;
border: 1px solid #D3D3D3;
margin: 0px 9px 0px 9px;
font-family: arial, sans-serif;
font-size: 11px;
width: auto;
}
#label {
}
#strong {
font-weight: bold;
}
i'm trying to customize a text input with css, i want the text inside it to have a margin of 10px to the left so i use:
#text{
text-indent: 10px;
border: 1px solid #333;
outline: none;
padding: 0;
margin: 0;
width: 168px;
height: 20px;
border-radius: 4px;
}
It works in all browsers except for IE10 which seems to ignore the text-indent property, how can i fix it?
<input type="text" id="text" />
you can use padding-left, it works on all browsers:
#text {
padding: 0 0 0 10px;
border: 1px solid #333;
outline: none;
margin: 0;
width: 158px; //decrease width with the same padding vale so that the width would stay the same
height: 20px;
border-radius: 4px;
}
If you want to use a special rule for IE, adding display: inline-block and a line-height, along with the text-indent rule, will fix this as well. This is an old trick for both IE7-9 as well.
input.special {
text-indent: 150px;
display:inline-block;
line-height: 18px;
}
Does the trick.
This is good if you are using liquid or responsive widths and you don't want to have to adjust your input's width on account of the padding.
Example: http://jsfiddle.net/nDWRm/4/
I want to make a plus and minus button using css or text or svg.
I tried this with the css and using textual + and - signs, but found those never line up. The problem is I can get it to look reasonably good on 100% zoom but when the zoom changes the left and top values also need to change to get the divs to center again. I haven't tried svg yet. I was just wondering why this doesn't seem possible.
css
#container{
height: 1.5em;
width: 1.5em;
border-radius: 5px;
border: 0.1em solid black;
cursor: pointer;
}
.vert{
top: 0.25em;
left: 0.65em;
position:absolute;
width: 0.3em;
height: 1.1em;
background-color: #424A49;
display: block;
}
.horz{
top: 0.65em;
left: 0.25em;
position:absolute;
width: 1.1em;
height: 0.3em;
background-color: #424A49;
display: block;
}
html
<div id="container">
<div class="vert"></div>
<div class="horz"></div>
</div>
Using a monotype font I made this fiddle:
http://jsfiddle.net/nDWRm/17/
if you change the font-size of #container2 to for example 5em you'll see it not render correctly. And on a aesthetic note the + sign has rounded corners and the - doesn't, which is not very pleasing :P.
this fiddle shows the problem with a font very clearly: http://jsfiddle.net/nDWRm/25/
You can't just use random EM values. You have to calculate them on order to be translated to a round pixel value by the browser:
http://jsfiddle.net/meo/p7WMW/
(of course you can to it without scss, just by using http://pxtoem.com/ for example)
On js fiddle the base font size is 16px. So you need that in order to calculate your EM values.
scss
$base-font-size: 16px;
#function px2em($px, $contextPXSize : $base-font-size ){
#return ( $px / $contextPXSize ) * 1em;
}
a {
position: relative;
display: block;
margin: 2em;
width: px2em(40px); height: px2em(40px);
background: rgba(0,0,0,.1);
outline: 1px solid #000;
&:after, &:before {
content: "";
position: absolute;
background: black;
left: 50%; top: 50%;
}
&:after {
height: px2em(30px); width: px2em(4px);
margin: px2em(-15px) 0 0 px2em(-2px);
}
&:before {
height: px2em(4px); width: px2em(30px);
margin: px2em(-2px) 0 0 px2em(-15px);
}
&:hover:after {
display: none;
}
}
what would result in:
css
a{
position:relative;
display:block;
margin:2em;
width:2.5em; height:2.5em;
background:rgba(0, 0, 0, .1);
outline:1px solid #000
}
a:after,a:before{
content:"";
position:absolute;
background:#000;
left:50%; top:50%
}
a:after{
height:1.875em;
width:.25em;
margin:-.938em 0 0 -.125em
}
a:before{
height:.25em;
width:1.875em;
margin:-.125em 0 0 -.938em
}
a:hover:after{
display:none
}
You can use a Monotype font like Courier and a display switch in jQuery to get the effect you're after. Also using line height and text-align: center; on the text to get this to work in mulitple zooms. The inner divs use 100% height and width so will always fill the container. No positions are needed, and you can increase the font size to make the symbols bigger :)
CSS:
#container{
height: 1.5em;
width: 1.5em;
border-radius: 5px;
border: 0.1em solid black;
cursor: pointer;
font-family: Courier;
}
.vert,
.horz{
margin: 0 auto;
width: 100%;
height: 100%;
color: #424A49;
text-align: center;
line-height: 1.5em;
}
.vert
{
display: none;
}
http://jsfiddle.net/Kyle_Sevenoaks/nDWRm/13/