Whenever i change the background color of a button in CSS, it becomes unclickable. Same happens if i remove button border in css
HTML
<div class="row">
<button onclick="click('7')" class="btn">7</button>
<button onclick="click('8')" class="btn">8</button>
<button onclick="click('9')" class="btn">9</button>
<button onclick="click('/')" class="btn">/</button>
</div>
CSS
.btn{
width: 60px;
height: 60px;
margin-left: 30px;
margin-top: 25px;
background: beige;
}
Certainly in Google Chrome using click as the function name was causing an issue - changing that to clicker, for instance, seems to alleviate that issue and it works as expected.
function clicker(val) {
document.getElementById("screen").value += val
}
.btn {
width: 60px;
height: 60px;
margin-left: 30px;
margin-top: 25px;
background: beige;
cursor:pointer;
}
.btn:hover{
background:rgba(0,100,0,0.25)
}
#screen{
width:25rem;
height:2rem;
border:2px solid black;
margin:2rem 0;
background: beige;
}
<div class="row">
<button onclick="clicker('7')" class="btn">7</button>
<button onclick="clicker('8')" class="btn">8</button>
<button onclick="clicker('9')" class="btn">9</button>
<button onclick="clicker('/')" class="btn">/</button>
</div>
<input type='text' id='screen' />
An alternative using a delegated event listener
document.querySelector('.row').addEventListener('click',e=>{
document.querySelector('#screen').value+=e.target.textContent
})
.btn {
width: 60px;
height: 60px;
margin-left: 30px;
margin-top: 25px;
background: beige;
cursor: pointer;
}
.btn:hover {
background: rgba(0, 100, 0, 0.25)
}
#screen {
width: 25rem;
height: 2rem;
border: 2px solid black;
margin: 2rem 0;
background: beige;
}
<div class="row">
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<button class="btn">/</button>
</div>
<input type='text' id='screen' />
try background-color
and it is still clickable, I think you are missing the :hover s
.btn{
width: 60px;
height: 60px;
margin-left: 30px;
margin-top: 25px;
background-color: beige;
}
.btn:hover {
background-color:gray;
}
<div class="row">
<button onclick="click('7')" class="btn">7</button>
<button onclick="click('8')" class="btn">8</button>
<button onclick="click('9')" class="btn">9</button>
<button onclick="click('/')" class="btn">/</button>
</div>
Related
I have this code:
.link {
cursor: pointer;
}
.dropdown-content {
margin-top: 10px;
margin-left: -10px;
position: absolute;
min-width: 100px;
min-height: 50px;
color: #5A3895;
float: left;
display: none;
background-color: #FDEBCF;
border: 3px solid #999999;
}
.inside-dropdown-content {
margin-top: 10px;
margin-left: -10px;
position: absolute;
min-width: 100px;
min-height: 50px;
color: #5A3895;
float: left;
display: none;
background-color: #FDEBCF;
border: 3px solid #999999;
}
.dropdown-button:hover>.dropdown-content {
display: block;
background-color: #FDEBCF;
}
.dropdown-button:hover {
background-color: #FDEBCF;
}
.inside-dropdown-button:hover>.inside-dropdown-content {
display: block;
background-color: #FDEBCF;
}
.inside-dropdown-button:hover {
background-color: #FDEBCF;
}
.name-label p {
font-size: 30px;
margin: auto;
text-align: center;
}
.name-label {
float: left;
padding-left: 10px;
}
.header {
border: 1.5px solid #999999;
background-color: #FDEBCF;
font-size: 20px;
font-family: Arial;
overflow: hidden;
}
button:not(.impressum-link):not(.inside-dropdown-button) {
font-size: 20px;
min-width: 100px;
min-height: 50px;
color: #5A3895;
float: left;
background-color: #FDEBCF;
border-style: solid;
border-color: #999999;
border-width: 1px 3px 1px 3px;
}
.impressum-link {
font-size: 20px;
min-width: 100px;
min-height: 50px;
color: #5A3895;
float: right;
background-color: #FDEBCF;
border-style: solid;
border-color: #999999;
border-width: 1px 3px 1px 3px;
}
<div class="header">
<div class="dropdown">
<button type="button" class="link">
<span>Home</span>
</button>
</div>
<div class="dropdown">
<button type="button" class="dropdown-button">
<span>Publications</span>
<div class="dropdown-content">
<button type="button" class="inside-dropdown-button">
<span>Recent Publications</span>
<div class="inside-dropdown-content">
<p>year</p>
A link to whatever
</div>
</button>Other Publications</div>
</button>
</div>
<div class="name-label">
<p>Website</p>
</div>
<button type="button" class="link impressum-link">
<span>Impressum</span>
</button>
</div>
I put in everything as I don't know what causes the problem.
I want to have the inside-dropdown-button inside of dropdown-content, but the browser (tested on Firefox and Chrome) seems to change
<div class="dropdown">
<button type="button" class="dropdown-button">
<span>Publications</span>
<div class="dropdown-content">
<button type="button" class="inside-dropdown-button">
<span>Recent Publications</span>
<div class="inside-dropdown-content">
<p>year</p>
A link to whatever
</div>
</button>Other Publications</div></button>
</div>
to:
<div class="dropdown">
<button type="button" class="dropdown-button">
<span>Publications</span>
<div class="dropdown-content">
</div></button><button type="button" class="inside-dropdown-button">
<span>Recent Publications</span>
<div class="inside-dropdown-content">
<p>year</p>
A link to whatever
</div>
</button>Other Publications</div>
Notice the extra </div></button> before <button type="button" in the 5th line. This extra </div> causes there to be to many </div>'s, messing up the header class, and putting impressum-link outside of the header. Why is this and how do I get around it?
If I change it in the Browser, it works, but when I copy the code out of the browser to the script and remove the extra tags, it puts them in again.
A button cannot contain another button so the browser assumes you have made an error and closes it for you.
Also note that button elements cannot contain links (and vice versa).
Permitted content
Phrasing content but there must be no Interactive content
I have two elements which I want to align this way on Top Bar :
Below you can see the HTML and CSS for the two of the elements:
I tried using margins or padding but it didn't look I was going anywhere like that.
* {
box-sizing: border-box;
}
.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example button {
float: left;
width: 20%;
padding: 5px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example {
margin: 3px auto;
max-width: 300px;
}
<div>
<div class="topnav">
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button"><i class="fa fa-search"></i></button>
</div>
<div style="float:right;">
<button type="button">+ New location</button>
</div>
</div>
Did you try using right?
First change float: left; in your two CSS classes (input field and button) to float: right;.
This way, the input field and the button are next to each other on the right side.
Then you can move your "right-floated" elements using:
right: 50px;, for isntance.
You could have use flex system layout to make it easier, but to do this in the way it is we should change couple of things:
Change order of div.example and the div that contains new location button in html
Set float: right to both div.example and the other div
Set margin-right: 50px to second div
* {
box-sizing: border-box;
}
.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example button {
float: left;
width: 20%;
padding: 5px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example {
/* NEW */
float: right;
/* Endof NEW */
margin: 3px auto;
max-width: 300px;
}
<div>
<div class="topnav">
<!-- Changed order -->
<div style="float:right;margin-right:50px;">
<button type="button">+ New location</button>
</div>
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button"><i class="fa fa-search"></i></button>
</div>
<!-- Endof change -->
</div>
I changed order of elements, add a little margin and float right to the first element.
<div>
<div class="topnav" style="margin-right: 100px;">
<div style="float:right;">
<button type="button">+ New location</button>
</div>
</div>
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button"><i class="fa fa-search"></i></button>
</div>
</div>
It's better to use flex and/or multi-column presentation, but with your current html-structure, one of the simplest options would be to add the second button to the "example" div and to use separated classes for buttons.
* {
box-sizing: border-box;
}
.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example button {
float: left;
padding: 5px;
background: #2196F3;
color: white;
font-size: 17px;
cursor: pointer;
border: 1px solid grey;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example .button--search {
border-left: none;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
width: 50px;
}
.example .button--new-location {
margin-left: 15px;
border-radius: 6px;
}
<div>
<div class="topnav">
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button" class="button--search"><i class="fa fa-search"></i></button>
<button type="button" class="button--new-location">+ New location</button>
</div>
</div>
</div>
div inside a div
How can I change the background of the div with the title of Lawyer's Kit with the 3 <ul> I want that full div to have a color white background but it seems only with the text will have a color white background.
here's my code
body {
background-image: url('http://my-smashing.smashingapps.netdna-cdn.com/wp-content/uploads/2013/04/blurbackgrounds9.jpg');
position: relative;
background-repeat: no-repeat;
background-size: cover;
}
.container {
width: 700px;
height: 425px;
border-radius: 5px;
margin: auto;
margin-top: 10%;
border: solid;
border-color: rgba(255, 255, 255, 0.5);
}
.container input {
margin-bottom: 10%;
padding-bottom: 2%;
background: transparent;
color: #fff;
border: none;
border-bottom: 1px solid;
}
.container a {
text-decoration: none;
}
.container button {
border: none;
cursor: pointer;
font-size: 100%;
}
.inform {
background-color: #fff;
float: left;
width: 60%;
height: 100%;
}
.inform h1 {
text-align: center;
}
.inform ul {
font-family: Impact;
}
.iform {
margin-top: 10%;
float: right;
text-align: center;
width: 40%;
}
<div class='container'>
<form action='' method='POST'>
<div class='inform'>
<h1>Lawyer's Kit</h1>
<ul>
<li> Backup your files </li>
<li> Reminder for your appointments </li>
<li> Secure your data </li>
</ul>
</div>
<div class='iform'>
<input type='text' name='username' placeholder='UserName'>
<input type='password' name='password' placeholder='Password'></br>
<button class='login' value='submit' name='submit'> Log In </button>
<h5>I forgot my password</h5>
<button class='bregister' href='register.php'>REGISTER</button>
</div>
</form>
</div>
You have the question how to strech div height to its parent
The solution is adding position:relative to parent div ,
adding position:absolute;height:100% will solve your issue . The below code is working example
body {
background-image: url('http://my-smashing.smashingapps.netdna-cdn.com/wp-content/uploads/2013/04/blurbackgrounds9.jpg');
position: relative;
background-repeat: no-repeat;
background-size: cover;
}
.container {
width: 700px;
height: 425px;
border-radius: 5px;
margin: auto;
margin-top: 10%;
border: solid;
position:relative;
border-color: rgba(255, 255, 255, 0.5);
}
.container input {
margin-bottom: 10%;
padding-bottom: 2%;
background: transparent;
color: #fff;
border: none;
border-bottom: 1px solid;
}
.container a {
text-decoration: none;
}
.container button {
border: none;
cursor: pointer;
font-size: 100%;
}
.inform {
background-color: #fff;
float: left;
width: 60%;
height:100%;
position:absolute;
}
.inform h1 {
text-align: center;
}
.inform ul {
font-family: Impact;
}
.iform {
margin-top: 10%;
float: right;
text-align: center;
width: 40%;
height:100%
}
<div class='container'>
<form action='' method='POST'>
<div class='inform'>
<h1>Lawyer's Kit</h1>
<ul>
<li> Backup your files </li>
<li> Reminder for your appointments </li>
<li> Secure your data </li>
</ul>
</div>
<div class='iform'>
<input type='text' name='username' placeholder='UserName'>
<input type='password' name='password' placeholder='Password'></br>
<button class='login' value='submit' name='submit'> Log In </button>
<h5>I forgot my password</h5>
<button class='bregister' href='register.php'>REGISTER</button>
</div>
</form>
</div>
I have a case I am not sure how to figure it out.
I am trying to do a design to put a button over a textbox, to make my layout looks nice, but when users start typing information in textbox, it hides behind the button. I know I have 1 of 2 solutions, but I don't know how to do it:
1- either to find another way to do the layout.
2- limit the number of lines for the user to enter, but this way I am going to have a restriction for long data.
Below is my HTML and CSS:
body{
background: #000;
}
.nl-main{
width: 300px;
border: 1px solid white;
border-radius: 6px;
padding: 10px;
}
.header{
padding: 3px;
}
.header span{
color: white;
}
.nl-txt-main, .nl-btn-main{
display: inline-block;
}
.nl-btn-main .nl-btn{
border-radius: 5px;
background: blue;
color: white;
left: -50px;
position: relative;
}
.nl-txt-main .nl-txt {
width: 200px;
border-radius: 5px;
}
<div class="header">
<span>Search our database</span>
</div>
<div class="nl-controls">
<div class="nl-txt-main">
<input type="text" class="nl-txt"/>
</div>
<div class="nl-btn-main">
<input type="button" value="Send" class="nl-btn"/>
</div>
</div>
I want the button to be like part of the textbox itself, When you try to run the code, and write a long sentence in the textbox, it will hide under the button. How do I solve it?
Thank you.
Remove left:-50px; from you button
body{
background: #000;
}
.nl-main{
width: 300px;
border: 1px solid white;
border-radius: 6px;
padding: 10px;
}
.header{
padding: 3px;
}
.header span{
color: white;
}
.nl-txt-main, .nl-btn-main{
display: inline-block;
margin:0;
}
.nl-btn-main .nl-btn{
background: blue;
color: white;
left: -4px;
position: relative;
border-bottom-right-radius: 5px;
margin:0;
border-top-right-radius: 5px;
}
.nl-txt-main .nl-txt {
width: 200px;
border-bottom-left-radius: 5px;
margin:0;
border-top-left-radius: 5px;
}
<div class="header">
<span>Search our database</span>
</div>
<div class="nl-controls">
<div class="nl-txt-main">
<input type="text" class="nl-txt"/>
</div>
<div class="nl-btn-main">
<input type="button" value="Send" class="nl-btn"/>
</div>
</div>
I am working with this snippet: http://bootsnipp.com/snippets/featured/modal-login-with-jquery-effects
Using bootstrap 3.3.6
Two questions:
Why is there a white background behind my modal? Or how should I debug this?
Why is my modal only centering within that white background? I need it to center in the middle of the screen.
My css:
/* #####################################################################
#
# Project : Modal Login with jQuery Effects
# Author : Rodrigo Amarante (rodrigockamarante)
# Version : 1.0
# Created : 07/28/2015
# Last Change : 08/02/2015
#
##################################################################### */
/*#import url(http://fonts.googleapis.com/css?family=Roboto);
* {
font-family: 'Roboto', sans-serif;
}*/
#login-modal .modal-dialog {
width: 350px;
position: relative;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: 0px;
padding: 20px;
}
#login-modal input[type=text], input[type=password] {
margin-top: 10px;
}
#div-login-msg,
#div-lost-msg,
#div-register-msg {
border: 1px solid #dadfe1;
height: 30px;
line-height: 28px;
transition: all ease-in-out 500ms;
}
#div-login-msg.success,
#div-lost-msg.success,
#div-register-msg.success {
border: 1px solid #68c3a3;
background-color: #c8f7c5;
}
#div-login-msg.error,
#div-lost-msg.error,
#div-register-msg.error {
border: 1px solid #eb575b;
background-color: #ffcad1;
}
#icon-login-msg,
#icon-lost-msg,
#icon-register-msg {
width: 30px;
float: left;
line-height: 28px;
text-align: center;
background-color: #dadfe1;
margin-right: 5px;
transition: all ease-in-out 500ms;
}
#icon-login-msg.success,
#icon-lost-msg.success,
#icon-register-msg.success {
background-color: #68c3a3 !important;
}
#icon-login-msg.error,
#icon-lost-msg.error,
#icon-register-msg.error {
background-color: #eb575b !important;
}
#img_logo {
max-height: 100px;
max-width: 100px;
}
/* #########################################
# override the bootstrap configs #
######################################### */
.modal-backdrop.in {
filter: alpha(opacity=50);
opacity: .8;
}
.modal-content {
background-color: #ececec;
border: 1px solid #bdc3c7;
border-radius: 0px;
outline: 0;
margin: 15% auto;
position: relative;
}
.modal-header {
min-height: 16.43px;
padding: 15px 15px 15px 15px;
border-bottom: 0px;
}
.modal-body {
position: relative;
padding: 5px 15px 5px 15px;
}
.modal-footer {
padding: 15px 15px 15px 15px;
text-align: left;
border-top: 0px;
}
.checkbox {
margin-bottom: 0px;
}
.btn {
border-radius: 0px;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none;
}
.btn-lg, .btn-group-lg>.btn {
border-radius: 0px;
}
.btn-link {
padding: 5px 10px 0px 0px;
color: #95a5a6;
}
.btn-link:hover, .btn-link:focus {
color: #2c3e50;
text-decoration: none;
}
.glyphicon {
top: 0px;
}
.form-control {
border-radius: 0px;
}
My html:
!-- BEGIN # MODAL LOGIN -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" align="center">
<img class="img-circle" id="img_logo" src="images/hhb.png">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<!-- Begin # DIV Form -->
<div id="div-forms">
<!-- Begin # Login Form -->
<form id="login-form">
<div class="modal-body">
<div id="div-login-msg">
<div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-login-msg">Type in User Name and Password</span>
</div>
<input id="login_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
<input id="login_password" class="form-control" type="password" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
</div>
<div>
<button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
<button id="login_register_btn" type="button" class="btn btn-link">Register</button>
</div>
</div>
</form>
<!-- End # Login Form -->
Solved this. Here is what I did for any one just starting:
You can use the developer tools to identify where there might be a conflict in your code.
For me I was referencing two conflicting versions of bootstrap.