Unicode character won't align to center of button - html

After using a unicode for a button, I've noticed that the unicode character is not properly aligned to the center (both horizontally & vertically) of the button. I'm not sure why this is happening when I used padding: 0;
.btn{
background-color: #868f98;
width: 60px;
height: 60px;
border-radius: 20%;
border: none;
outline: none;
color: #FFF;
padding: 0;
font-size: 2em;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
<button class="btn">☰</button>


Setting line-height to 60px on your .btn rule will center the character.
.btn{
background-color: #868f98;
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 20%;
border: none;
outline: none;
color: #FFF;
padding: 0;
font-size: 2em;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
<button class="btn">☰</button>


apparently that symbol character is not in the vertical center of its line. (It is horizontally centered, though) So you just have to try around with a padding-bottom until you find the right value:
.btn{
box-sizing: border-box;
vertical-align: middle;
background-color: #868f98;
width: 60px;
height: 60px;
border-radius: 20%;
border: none;
outline: none;
color: #FFF;
padding: 0 0 0.24em 0;
font-size: 2em;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
<button class="btn">☰</button>

Related

notification dropdown is not over lapping

I am trying to solve this but can't , I used all types wat I know in this, & tried z-index too not worked
let me know the solution for this. I connected my header to all pages. this issues is in all page
enter image description here
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
background-clip: padding-box;
height: 160px;
overflow: scroll;
overflow-x: hidden;
position: absolute;
}

Double box/border? Is this possible in CSS?

I'm trying to recreate this image in CSS.
This is what I got from experimenting, so far. I used box-shadow to act as the second box. I'm not sure if there's a better way to do this?
h4 {
font-family: sans-serif;
text-transform: uppercase;
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
background: white;
box-shadow: 10px 5px 0px 0px #ffffff, 11px 7px 0px 2px #000000;
}
<h4>3. Scouting for a location</h4>

You can achieve this via absolutely position pseudo element. Also avoid property duplication via CSS inheritance.
.border {
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
margin: 15px 15px;
background: white;
position: relative; /* new */
}
/* new */
.border:after {
content: "";
position: absolute;
display: block;
background: inherit;
border-radius: inherit;
border: inherit;
left: 2px;
top: 2px;
width: 100%;
height: 100%;
z-index: -1;
}
<div class="border">3. Scouting for a location</div>

The concept behind using box-shadow is that two shadows, one white and one black, overlap to simulate a second black border. But the black shadow is only visible in the direction from which it is offset from the white shadow, so a gap is apparent between the original border and the black shadow (as shown in the OP's original post).
The "spread radius" of the black shadow could be utilized to eliminate this gap (cleverly demonstrated by Nirav Joshi), but then the curvature of the corners is amplified and the two borders look different.
To duplicate the original border, I'd use ::after to generate an absolutely-positioned pseudo-element and use z-index to place it behind the original element. To further ensure that the border is duplicated exactly, I like Vadim Ovchinnikov's idea of inheriting the border color and radius from the original element.
.border {
position: relative;
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
margin: 15px 15px;
background: white;
}
.border::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 3px;
left: 3px;
border: solid 3px black;
border-radius: 5px;
z-index: -1;
}
<h4 class="border">3. SCOUTING FOR A LOCATION</h4>

Try this example
Hope it will help you.
.border {
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
margin: 15px 15px;
background: white;
-webkit-box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000;
-moz-box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000;
box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000;
}
<div class="border">Title</div>
EDIT
Here now you can see that i made box-shadow to 3px and no longer right side corner.

Use an absolute positioned ::after or ::before pseudo element and have its z-index lower than the element itself.

Center the button vertically and horizontally

I need to make sure that the 'Next' button below the video is centered vertically and horizontally within the block with the yellow background.
In addition, the 'click' effect on the button does not seem to work as intended. There is something causing a conflict here and I cannot figure out what.
When I only run the "next-video-button" and "next-video-button:active" CSS rules, everything works perfectly.
You may find my CSS and HTML below.
.course-video {
background: #f9c70f;
border: none;
margin: 0;
box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
border-radius: 0;
-moz-border-radius: 0;
}
.next-video-button {
transition: all 0.1s;
-webkit-transition: all 0.1s;
padding: 7px 200px;
border-radius: 10px;
font-family: 'Montserrat';
font-size: 1em;
color: #ffffff;
text-decoration: none;
background-color: #888888;
border-bottom: 5px solid #5a5a5a;
text-shadow: 1px -2px #888888;
text-align: center;
}
.next-video-button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
.video-title {
font-family: montserrat;
font-size: 1.5em;
color: #000000;
padding: 0.5em;
box-sizing: border-box;
width: 854px;
text-shadow: 0px 2px 4px rgba(0,0,0,0.3);
}
.video-descr {
width: 854px;
box-sizing: border-box;
height: 50px;
margin-top: -5px;
}
<div class="course-video video-title">Hello</div>
<iframe src="https://player.vimeo.com/video/154094373" width="854" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="course-video video-descr">NEXT</div>

To center the button give it a width and add margin: 0 auto and display: block; to .next-video-button.
The button won't work though because of a href="#". Replace the # with the video URL.

Why is this div not the same height as the input? (In Firefox)

I've created a div and input and given both exactly the same borders, padding, margins, fonts and font-sizes. But they're still not the same height. Why?
Edit: Using Firefox
Example: http://jsfiddle.net/a8n6qxaz/
HTML:
<div class="close">X</div>
<input type="submit" value="TEST" />
CSS:
input[type="submit"]
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
padding: 0.125em;
padding-left: .25em;
padding-right: .25em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}
.close
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
padding: 0.125em;
padding-left: .25em;
padding-right: .25em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1em;
color: red;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: #3e3f39;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}

The problem is that you didn't specify any height, so use e.g.
height: 1em;
However, by default the height of the input is considered using the border-box model, and the height of the div using the content-box model. Use the box-sizing property to specify the same model for both elements:
box-sizing: content-box;
input[type="submit"], .close {
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
padding: 0.125em;
padding-left: .25em;
padding-right: .25em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
height: 1em;
box-sizing: content-box;
}
<div class="close">TEST</div>
<input type="submit" value="TEST" />

For some reason, in Firefox, padding is applied differently in an input than a div even if they're both display: block and you remove the appearance of the input. line-height also messes up in an input.
Removing the top/bottom padding from both and line-height from the input, allows making them the same height:
http://jsfiddle.net/a8n6qxaz/4/
input[type="submit"]
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
height: 1.5em;
padding: 0em;
font-family: Arial, Helvetica;
font-size: 1.25em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
vertical-align: middle;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}
.close
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
height: 1.5em;
padding: 0em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1.5em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}

Because you don't specify the height, and firefox applies different default height for div and for input than chrome

If you want to force the input to behave like the div, you must change the box-model of the input:
box-sizing: content-box;
Add that CSS property to the input, and then in firefox both div and input will consider the padding in the same manner.

CSS displaces two line strings

Have a look at this fiddle
http://jsfiddle.net/ArvindSadasivam/v8dtj2ke/1/
divs:
<button class="typeBtn" id="">
<img class="iconTick" src="images/buttons/iconTick.png" alt="tickIcon" />Flatfront</button>
<button class="typeBtn" id="">Flatfront TWICE
<img class="iconTick" src="images/buttons/iconTick.png" alt="tickIcon" />
</button>
CSS:
.typeDiv {
position : relative;
margin : 20px 0 0 20px;
font-family : OpenSans-Regular;
}
.typeBtn {
position: relative;
width: 110px;
height: 40px;
box-shadow: 0 1px 3px #424242;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #D7D7D7;
color: #000000;
text-align: right;
font-family: OpenSans-Regular;
font-size: 0.7em;
padding: 0px 40px;
margin: 15px 10px 0px 0px;
}
.iconTick {
position : absolute;
width : 25px;
left : 5%;
top : 20%;
}
I want the Flatfront twice to be on the same position vertically.
Basically align them properly.
How do I do it?

Add
vertical-align: top;
Into your .typeBtn Class
Your Class should looks like this
.typeBtn {
position: relative;
width: 110px;
height: 40px;
box-shadow: 0 1px 3px #424242;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #D7D7D7;
color: #000000;
text-align: right;
font-family: OpenSans-Regular;
font-size: 0.7em;
padding: 0px 40px;
margin: 15px 10px 0px 0px;
vertical-align: top; /*Changed this */
}

Change the following styles in .typeBtn like
padding:0px;
text-align:center;