When I click the button, a border is shown. How can I remove this border and why is it there?
This is the CSS code:
.operator button {
margin: 3px;
/*height: 25px;
width: 25px;*/
border-radius: 50%;
background-color: green;
border: none;
font-size: 10px;
padding: 12px 12px;
border: 2px solid #4CAF50;
transition-duration: 1s;
text-align: center;
display: inline;
}
[here is an image 1
Add outline: 0; on your button:focus :
.operator button {
margin: 3px;
/*height: 25px;
width: 25px;*/
border-radius: 50%;
background-color: green;
border: none;
font-size: 10px;
padding: 12px 12px;
border: 2px solid #4CAF50;
transition-duration: 1s;
text-align: center;
display: inline;
}
.operator button:focus { outline: 0; }
<div class="operator">
<button>Test</button>
</div>
You might want to read this too : https://stackoverflow.com/a/25298082/9718056
Related
I have a div block with an image, a heading and a paragraph. I want to change the background-color and the text color of that div when i hover on it but only the background-color changes, the color tag is simply ignored. How can I fix this?
.Div_Systemingenieur {
width: 18%;
padding: 20px;
border: 1px;
border-color: white;
border-radius: 25px;
float: left;
margin-left: 70px;
margin-top: 70px;
background-color: white;
transition: 0.5s;
background-color: white;
color: #24252a;
}
.Systemingenieur_Text {
text-align: center;
border: 1px;
border-color: white;
border-style: solid;
border-radius: 25px;
padding-bottom: 10%;
color: #24252a;
}
.Heading_Systemingenieur {
margin-bottom: 20px;
margin-left: 15px;
margin-top: 10px;
}
.Div_Systemingenieur:hover {
background-color: #24252a;
color: white;
}
NOTE: I am still very new to programming with css, and I am doing this for a school project.
PS: some of the names are written in german, as it is my native language.
Have a great rest of your day!
Lucien
.Div_Systemingenieur {
width: 18%;
padding: 20px;
border: 1px;
border-color: white;
border-radius: 25px;
float: left;
margin-left: 70px;
margin-top: 70px;
background-color: white;
transition: 0.5s;
background-color: white;
color: #24252a;
}
.Systemingenieur_Text {
text-align: center;
border: 1px;
border-color: white;
border-style: solid;
border-radius: 25px;
padding-bottom: 10%;
}
.Heading_Systemingenieur {
margin-bottom: 20px;
margin-left: 15px;
margin-top: 10px;
}
.Div_Systemingenieur:hover {
background-color: #24252a;
color: white;
}
I have this image that I'm trying to position to a certain spot, but no matter what I try the image stays a the bottom. I've been able to center the image horizontally but now I want to manipulate it vertically and get it to the top or near the top area. It baffles me how margin isn't working; how would I go by doing it?
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
background: linear-gradient(to bottom right,#e66465, #9198e5);
font-family: sans-serif;
}
.signup-forms{
background-color: #ffffff;
max-width: 350px;
margin: 5% auto;
text-align: center;
border-radius: 5px;
box-shadow: 0px 0px 25px 0 #3d3d3d6e;
padding: 20px 5px;
}
.signup-forms h3{
color: #EB4D8A;
margin-top: 20px;
}
.signup-forms p{
color: #C3BFDA;
font-weight: 600;
font-size: small;
margin-bottom: 20px;
}
.signup-input{
outline: none;
width: 75%;
background-color: transparent;
padding: 10px 5px;
border: none;
border-bottom: 1px solid #C3BFDA;
font-weight: bold;
margin: 15px;
}
.signup-input::placeholder{
color: #C3BFDA;
}
.signup-btn{
background-color: #fc4186;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 20px;
transition: 0.3s;
}
.signup-btnTwitter{
background-color: #54ACF0;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 10px;
transition: 0.3s;
}
.logo-img{
height: 60px;
width: 60px;
background-color: #fff;
border-radius: 50%;
padding: 10px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 100%;
}
The image I'm trying to manipulate is .logo-img
We can't know much since there's not html code, but you can do :
`margin-top : -100px` //or how many pixels you like
or you can use the :top or bottom
Example:
top: 20%
or
bottom : 20%
or you can :
position: absolute;
z-index : 1;
I want a text-area with black background to be within DIV with white background. Text-area should not fill the complete DIV so the DIV's white color is still seen around text-area. DIV itself should occupy only 80% of the screen's width (or browser's tab). The problem is that the DIV's white background ain't seen around text-area.
.mydiv {
vertical-align: middle;
width: 80%;
text-align: left;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: white;
}
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
float: left;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
You can use display:inline-block; instead of float:left;
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
display: inline-block;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
Jsfiddle
.mydiv {
vertical-align: middle;
width: 80%;
text-align: left;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: red;
}
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
display: inline-block;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
<div class="mydiv">
<textarea class="mytextarea"></textarea>
</div>
I am trying to create a button that shows a loading spinner when waiting for a response. But there is some weird things going on which I do not understand at all.
I have the following HTML with a bunch of CSS:
<button type="submit" disabled="true" class="btn btn-blue btn-loading">
<div class="btn-loading-text">Update profile</div>
<div class="btn-loading-spinner"></div>
</button>
If you comment out the spinner element, then the "Update profile" aligns itself in the center even tho I did not ask it to.
* {
box-sizing: border-box;
}
.btn-loading {
border-radius: 2px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
outline: 0;
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default !important;
overflow: hidden;
height: 40px;
}
.btn-loading-text {
float: left;
margin: 0px 15px 0px 15px;
}
.btn-loading-spinner {
float: left;
height: 25px;
width: 25px;
margin: 7px 15px 6px -5px;
position: relative;
animation: rotation .9s infinite linear;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 3px solid #ddd;
border-top: 3px solid #aaa;
border-radius: 100%;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<button type="submit" disabled="true" class="btn-loading">
<div class="btn-loading-text">Update profile</div>
<!--<div class="btn-loading-spinner"></div>-->
</button>
But when the spinner element is there it suddently goes to the top. I have no idea what's going on.
* {
box-sizing: border-box;
}
.btn-loading {
border-radius: 2px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
outline: 0;
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default !important;
overflow: hidden;
height: 40px;
}
.btn-loading-text {
float: left;
margin: 0px 15px 0px 15px;
}
.btn-loading-spinner {
float: left;
height: 25px;
width: 25px;
margin: 7px 15px 6px -5px;
position: relative;
animation: rotation .9s infinite linear;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 3px solid #ddd;
border-top: 3px solid #aaa;
border-radius: 100%;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<button type="submit" disabled="true" class="btn-loading">
<div class="btn-loading-text">Update profile</div>
<div class="btn-loading-spinner"></div>
</button>
The content of a button element are vertically aligned to the middle.
When you only have .btn-loading-text, that element is 16px tall, and the button is 38px tall, so .btn-loading-text is aligned to the middle.
However, when you also include .btn-loading-spinner, which is 38px tall (including borders and margins), the content of the button is as tall as the tallest of the elements, so 38px. So the alignment to the middle is not noticeable.
If you want to align each element to the middle, instead of aligning the content as a whole, you can use display: inline-block instead of float: left, and vertical-align: middle.
.btn-loading-text, .btn-loading-spinner {
float: none; /* Initial value */
display: inline-block;
vertical-align: middle;
}
* {
box-sizing: border-box;
}
.btn-loading {
border-radius: 2px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
outline: 0;
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default !important;
overflow: hidden;
height: 40px;
}
.btn-loading-text, .btn-loading-spinner {
display: inline-block;
vertical-align: middle;
}
.btn-loading-text {
margin: 0px 15px 0px 15px;
}
.btn-loading-spinner {
height: 25px;
width: 25px;
margin: 7px 15px 6px -5px;
position: relative;
animation: rotation .9s infinite linear;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 3px solid #ddd;
border-top: 3px solid #aaa;
border-radius: 100%;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<button type="submit" disabled="true" class="btn-loading">
<div class="btn-loading-text">Update profile</div>
<div class="btn-loading-spinner"></div>
</button>
I can't seem to get the bottom of the buttons to show, I tried increasing padding on the span, setting it to display: block, and increasing the height of the A and SPAN elements to no avail.
JS Fiddle Link: http://jsfiddle.net/7tcrz38r/
CSS:
/* Menu */
div#menu{
float: right;
margin-top: [[setting:menuMarginTop]];
}
div#menu ul{
list-style: none;
margin: 0;
padding: 0;
}
div#menu>ul>li{
float: left;
padding: 0;
}
div#menu li.has-sub>ul{
background: #FFFFFF;
border-top: 4px solid [[setting:color1]] !important;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
height: 110px;
display: none;
height: auto;
margin: -12px 0 0 16px;
padding: 0px;
position: absolute;
width: 170px;
z-index: 2000;
}
div#menu li.has-sub>ul>li{
border-bottom: 1px solid #EEEEEE;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
padding: 10px;
}
div#menu li.has-sub>ul>li>a{
color: #949494;
font-size: 12px !important;
text-decoration: none;
}
div#menu li.has-sub>ul>li>a:hover{
color: [[setting:color1]];
}
div#menu li:hover ul {
display: block;
}
div#menu>ul>li>a {
color: #868787;
display: inline-block;
font-size: 18px !important;
font-weight: lighter;
letter-spacing: 1px !important;
margin: 17px 15px !important;
outline: none;
position: relative;
text-decoration: none;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
}
/*div#menu>ul>li>a.active{
color: [[setting:color1]] !important;
background-color: #c3d9e3;
border: 2px solid #abd1eb;
border-radius: 5px;
}*/
div#menu>ul>li:last-child>a{
margin: 17px 0 17px 15px !important
}
div#menu>ul>li:last-child>a{
margin-right: 0 !important;
}
div#menu>ul>li>a:hover,
div#menu>ul>li>a:focus {
outline: none;
}
div#menu>ul>li>a{
overflow: hidden;
padding: 0 !important;
height: 1.3em !important;
}
div#menu>ul>li>a>span {
display: block;
position: relative;
border: 2px solid #eef3f5;
/*-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;*/
}
div#menu>ul>li>a>span::before {
position: absolute;
top: 100%;
content: attr(data-hover);
/*-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);*/
}
div#menu>ul>li>a:hover span,
div#menu>ul>li>a:focus span {
/* background-color: #c3d9e3;
border: 1px solid #abd1eb;
border-radius: 25%;*/
background-color: #c3d9e3;
border: 2px solid #abd1eb;
border-radius: 5px;
/*-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
color: [[setting:color1]];*/
}
/*
div#menu>ul>li>a.menuactive{
color: [[setting:color1]];
}*/
HTML:
<div id="menu">
<ul><li >
<span data-hover="Home">Home</span></li><li >
<span data-hover="Classes">Classes</span></li><li >
<span data-hover="Pricing">Pricing</span></li><li >
<span data-hover="About Us">About Us</span></li><li >
<span data-hover="Log In">Log In</span></li> </ul>
</div>
You are setting a fixed height(1.3em !important;) for A which is causing this issue.
Please check this updated working fiddle:http://jsfiddle.net/7tcrz38r/2/
you have this declaration:
div#menu>ul>li>a {
overflow: hidden;
padding: 0 !important;
height: 1.3em !important;
}
which, by the way, is repeated since it's declared some lines above
div#menu>ul>li>a {
color: #868787;
display: inline-block;
font-size: 18px !important;
font-weight: lighter;
letter-spacing: 1px !important;
margin: 17px 15px !important;
outline: none;
position: relative;
text-decoration: none;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}
Anyways, just remove that overflow:hidden property. However, you'll have the menu items showing twice because of that data-hover span you have. I don't know why are you using that, so consider if you need it or not. Of course, you can simply remove that "height: 1.3em !important;" as well, but I assume it's better to have a height than an overflow. anyways, it's a a decision you'll have to ponder