I need a red cross (font awesome icon) on the button.
The code I tried is at JSFiddle.
But I need:
UPDATE
I thought having a solution with a small code will help to execute on all codes related to it and therefore accepted Kiranvj's answer earlier.
But while changing codes as per Kiranvj's answer to the main code I couldn't achieve the expected results.
Full Code:
.button_cstm_quit {
background-color: red;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_quit:hover {
color: red;
font-weight: bold;
background: none;
border: 2px solid red;
}
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
.button_cstm_time {
background-color: #FF8C00;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_time:hover {
color: #FF8C00;
font-weight: bold;
background: none;
border: 2px solid #FF8C00;
}
#container_cstm {
width: 100%;
}
#left_cstm {
float: left;
width: 100px;
}
#right_cstm {
float: right;
width: 100px;
}
#center_cstm {
margin: 0 auto;
width: 100px;
}
#play_head {
display: flex;
/* establish flex container */
flex-direction: row;
/* default value; can be omitted */
flex-wrap: nowrap;
/* default value; can be omitted */
justify-content: space-between;
/* switched from default (flex-start, see below) */
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<body bgcolor="Aqua">
<div id="play_head">
<div>
<button class="button_cstm_quit"><i class="fas fa-sign-out-alt"></i></button>
</div>
<div>
<button class="button_cstm_ll" style='margin-right:45px'>50</button>
<button class="button_cstm_ll" style='margin-right:45px'>x2</button>
<button class="button_cstm_ll" style='margin-right:45px'><i class="fas fa-sync"></i></button>
</div>
<div>
<button class="button_cstm_time"><i class="fas fa-sync"></i></button>
</div>
</div>
</body>
I need that cross on all blue color buttons. (Sometimes all, sometimes 1 or 2. So div or i should be separate for each button)
Note: Placements of buttons can be anywhere, try to avoid left, right from the screen.
JSFiddle with different answers:
Kiranvj's answer (Recomended)
Anmol Sandal's answer (Option 2)
SWC's answer
Aryan Twanju's answer
A.Sakkeer's answer
.button_cstm_quit {
background-color: red;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_quit:hover {
color: red;
font-weight: bold;
background: none;
border: 2px solid red;
}
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
position: relative;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
.button_cstm_time {
background-color: #FF8C00;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_time:hover {
color: #FF8C00;
font-weight: bold;
background: none;
border: 2px solid #FF8C00;
}
#container_cstm {
width: 100%;
}
#left_cstm {
float: left;
width: 100px;
}
#right_cstm {
float: right;
width: 100px;
}
#center_cstm {
margin: 0 auto;
width: 100px;
}
#play_head {
display: flex;
/* establish flex container */
flex-direction: row;
/* default value; can be omitted */
flex-wrap: nowrap;
/* default value; can be omitted */
justify-content: space-between;
/* switched from default (flex-start, see below) */
}
.button_cstm_ll:before, .button_cstm_ll:after {
position:absolute;
content: '';
top: -5px;
bottom: -5px;
width: 5px;
background: #ff0000;
left: 0;
right: 0;
margin: 0 auto;
}
.button_cstm_ll:before {
transform: skew(30deg);
}
.button_cstm_ll:after {
transform: skew(-30deg);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<body bgcolor="Aqua">
<div id="play_head">
<div>
<button class="button_cstm_quit"><i class="fas fa-sign-out-alt"></i></button>
</div>
<div>
<button class="button_cstm_ll" style='margin-right:45px'>50</button>
<button class="button_cstm_ll" style='margin-right:45px'>x2</button>
<button class="button_cstm_ll" style='margin-right:45px'><i class="fas fa-sync"></i></button>
</div>
<div>
<button class="button_cstm_time"><i class="fas fa-sync"></i></button>
</div>
</div>
</body>
Try this
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
i#cmplt:before {
position: absolute;
font-size: 1.5em;
left: 10px;
}
<body bgcolor="Aqua">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<i id="cmplt" class="fas fa-times fa-3x" style="color: red;"><button class="button_cstm_ll" style='margin-right:45px'>50</button></i>
</body>
If you add the icon within the button and assign position: relative to the button and position: absolute to the icon then it should work. You can then position it with left, right and transform:
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
position: relative;
}
.button_cstm_ll i {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 2.5em;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
<body bgcolor="Aqua">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<button class="button_cstm_ll" style='margin-right:45px'><i id="cmplt" class="fas fa-times" style="color: red;"></i>50</button>
</body>
You can use position: relative and position: absolute to get the desired result. Try this code.
<body bgcolor="Aqua">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<button class="button_cstm_ll" style='margin-right:45px'><i id="cmplt" class="fas fa-times" style="color: red;"></i>50</button>
</body>
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
height: 100px;
width: 100px;
position: relative;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
.button_cstm_ll .fas {
position: absolute;
left: 0;
top: 0;
font-size: 150px;
line-height: 0.7;
}
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
#cmplt:before {
position: absolute;
left: 14px;
top: 22px;
}
<body bgcolor="Aqua">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<i id="cmplt" class="fas fa-times" style="color: red;font-size:70px;"><button class="button_cstm_ll" style='margin-right:45px'>50</button></i>
</body>
Related
I have been trying for a while now and cant seem to achive the bellow design:
.exploreItem {
background-color: #353258;
/* rgba(31, 31, 31, 1) */
border: 1px solid #4152F1;
color: white;
/* padding: 20px 24px; */
cursor: pointer;
width: 90%;
height: 45px;
/* font-size: 15px;
font: Arial;
font-family: sans-serif;
display: block; */
}
.exploreImg {
/* background-color: lightblue; */
display: inline-block;
vertical-align: top;
height: 30px;
/* width: 10px; */
padding-left: 10px;
}
.exploreLabel {
/* vertical-align: middle; */
/* background-color: grey; */
display: inline-block;
font-size: 15px;
font: Arial;
font-family: sans-serif;
/* width: 10px; */
margin-top: 0px;
}
<div class="exploreItem" id="exploreItem">
<img class="exploreImg" src="images/defaultProfImg.png">
<label class="exploreLabel">Explore</label>
</div>
How can I create the intended design layout? (An image next to the explore label like in the image)
You even don't need the image just use css to do it. And even if you use image you can use display: flex for .exploreItem and align-items: center can do the magic.
I had put down the simpler css only solution here with :before pseudo element.
.exploreItem {
background-color: #353258;
border: 1px solid #4152F1;
color: white;
cursor: pointer;
padding: 16px;
width: 90%;
border-radius: 32px;
}
.exploreLabel {
display: flex;
align-items: center;
font-size: 15px;
font: Arial;
font-family: sans-serif;
margin-top: 0px;
}
.exploreLabel:before {
content: '';
height: 28px;
width:28px;
background-color: #4152F1;
border: 1px solid #a89dff;
display: block;
margin-right: 16px;
border-radius: 50%;
}
<div class="exploreItem" id="exploreItem">
<label class="exploreLabel">Explore</label>
</div>
.wrapper {
width: 200px;
}
.exploreItem {
width: 100%;
display: flex;
background: transparent;
padding: 20px 30px;
border: 1px solid transparent;
border-radius: 50px;
align-items: center;
cursor: pointer;
}
.exploreItem label {
color: #919191;
}
.exploreItem.active {
display: flex;
background: #2F2D50;
border: 1px solid #483EF1;
}
.exploreItem.active label {
color: #ffffff;
}
.exploreItem i {
display: block;
background: #A3A3A3;
border: 1px solid transparent;
width: 25px;
height: 25px;
border-radius: 50px;
margin-right: 10px;
}
.exploreItem.active i {
background: #483EF1;
border: 1px solid #A5A0FF;
}
<div class="wrapper">
<div class="exploreItem active">
<i></i>
<label class="exploreLabel">Explore</label>
</div>
<div class="exploreItem">
<i></i>
<label class="exploreLabel">Explore</label>
</div>
</div>
Use below code:
HTML:
<div class="outer">
<div class="round"></div>
<label>
<span>Explore</span>
</label>
</div>
CSS:
.outer
{
background: #353258;
border: 1.5px solid #4152F1;
color: white;
padding: 7px 8px;
cursor: pointer;
width: 150px;
height:33px;
border-radius: 30px;
cursor: pointer;
}
.round
{
background: #502ffb;
height: 28px;
width: 28px;
display: inline-block;
border: 1px solid white;
border-radius: 50%;
}
label
{
color: white;
display: inline-block;
cursor: pointer;
}
label span
{
position: absolute;
margin-top: -24px;
margin-left: 3px;
font-size: 17px;
}
I've been trying to get an alert box working when someone opens this page but I'm having some trouble. I'll show you what I mean by that.
What I'm trying to achieve:
What I got so far:
So as you can see I cannot get the text and the close button on the blue layer of the box. Any solution to this?
Also I tried making it a bit smaller. It's all over the page and I did try changing the padding but nothing worked. Here's my code, I only included HTML and CSS since I didn't use any JS yet.
.alert {
padding: 40px 30px;
background-color: #c0bcbc;
color: #000000;
border-radius: 20px;
border-top: 45px solid dodgerblue;
}
.closebtn {
margin-left: 15px;
color: rgb(255, 255, 255);
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>NOTICE!</strong> An update is available.
</div>
welcome to SO! Here's a freebie to get you started, have a great weekend!
.container {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0,0,0,.7);
}
.modal {
width: 35%;
min-width: 20rem;
background-color: #fff;
border: #333 1px solid;
border-radius: 5px;
}
.modal-header {
display: flex;
align-items: center;
background-color: blue;
border-bottom: black 2px solid;
padding: .5rem 1rem;
color: #fff;
font-size: 110%;
font-weight: 600;
}
.modal-header .close {
margin-left: auto;
background-color: transparent;
border: 0;
color: white;
cursor: pointer;
transition: color .25s ease;
}
.modal-header .close:hover {
color: gray;
}
.modal-content {
padding: 1rem;
}
.modal-footer {
text-align: center;
}
.modal-footer button {
margin: 1rem;
border: black 1px solid;
border-radius: 10px;
background-color: blue;
padding: .5rem 1rem;
color: #fff;
font-size: 110%;
font-weight: 600;
cursor: pointer;
}
<div class="container" role="alert">
<div class="modal">
<div class="modal-header">
Header
<button type="button" class="close">X</button>
</div>
<div class="modal-content">
Words Words Words
</div>
<div class="modal-footer">
<button type="button">Do Stuff</button>
</div>
</div>
</div>
First of all your blue area is a border, where you can't put content.
Hope you find useful thoughts from my snippet.
.alert {
display: flex;
flex-direction: column;
min-width: 250px;
max-width: 350px;
border: solid 1px grey;
}
.closebtn {
margin-left: 15px;
color: rgb(255, 255, 255);
font-weight: bold;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
margin-left: auto;
}
.closebtn:hover {
color: black;
}
.modal-header {
background-color: #3073bb;
color: #fff;
padding: 5px 5px;
display: flex;
border-bottom: solid 1px black;
}
.modal-body {
color: #000000;
padding: 10px 40px 5px;
display: flex;
flex-direction: column;
}
.message {
min-height: 90px;
}
.btn-ok {
margin-left: auto;
margin-right: auto;
padding: 10px 40px;
color: #fff;
background-color: #3073bb;
border-radius: 5px;
border: 0;
}
<div class="alert">
<div class="modal-header">
<span><strong>NOTICE!</strong> An update is available.</span>
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
</div>
<div class="modal-body">
<div class="message">Alert this pages</div>
<button class="btn-ok">OK</button>
</div>
</div>
I am trying to make a note website. But I noticed that there is a differents between Firefox design tool and my own iphone
But when I test it on my mobile device (iphone 7+) I am getting a other result
I hope someone knows the answer to my problem.
Thanks in advance.
PS..
I used https://howchoo.com/g/mte2zgrhmjf/how-to-access-a-website-running-on-localhost-from-a-mobile-phone to acces the website on my phone
<style>
html{
width: 100vw;
}
/*thead a:link{
padding-left: 5px;
padding-top: 5px;
padding-bottom: 0px;
}*/
nav{
display: none;
}
thead a:link {
color: #262626;
padding: 13px 1px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.note{
/*display: none;*/
}
.page-header{
left: 50%;
}
h1{
color:#262626;
}
body{
text-align: center;
font-family: Arial;
}
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e6e6e6;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
nav a:link {
background-color: #e6e6e6;
color: #262626;
padding: 5px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
li {
float: left;
}
/*dropdown nav*/
.dropbtn {
background-color: #4CAF50;
color: white;
/*padding: 16px;*/
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
text-align: left;
position: relative;
display: block;
width: 100%;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
/*min-width: 160px;*/
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 100%;
}
#bars{
width: 22px;
font-size: 25px;
}
.dropdown-content a {
text-align: left;
color: black;
padding: 10px 10px 10px 10px;
text-decoration: none;
display: block;
width: 548px;
}
.dropdown-content a:hover {
background-color: #009fe3;
color: white;
}
.dropdown-content .active {
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #009fe3;
}
/*dropdown nav end*/
#text{
display: none;
}
.topnav-right a{
height: 25px;
}
.topnav-right {
float: right;
list-style-type: none;
}
li a {
display: block;
color: #262626;
text-align: center;
padding: 12px 16px;
text-decoration: none;
}
li a:hover {
background-color: #009fe3;
color: white;
}
.active:hover{
background-color:#009fe3;
}
.active {
background-color: #262626;
color: white;
}
/*form styling*/
.input_form {
width: 90%;
margin: 30px auto;
border-radius: 5px;
padding: 10px;
background: white;
border: 1px solid #262626;
}
.input_form {
color: red;
margin: 0px;
}
.task_input {
border-radius: 5px;
width: 50%;
height: 15px;
padding: 10px;
border: 1px solid #262626;
}
.date_input {
border-radius: 5px;
width: 100px;
height: 15px;
padding: 10px;
border: 1px solid #262626;
}
.add_btn {
cursor: pointer;
height: 39px;
background: white;
color: #262626;
border: 1px solid #262626;
border-radius: 5px;
margin: 5px;
padding: 5px 20px;
}
.add_btn:hover{
background: #009fe3;
color: white;
}
table {
width: 100%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid #262626;
height: auto;
}
tr a{
height: auto;
}
th{
height: auto;
}
th, td {
text-align: left;
font-size: 19px;
color: #262626;
}
th, td{
border: none;
height: auto;
padding: 2px;
}
td{
border-left: 1px solid #262626;
border-left: none;
}
tbody a:link {
background-color: white;
color: #262626;
padding: 13px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.select{
display: none;
}
/*complete button*/
.complete{
text-align: center;
width: 10px;
}
.complete a:visited{
color: #262626;
}
.complete a{
color: #262626;
text-decoration: none;
}
.complete a:hover {
background-color: #009fe3;
color: white;
}
/*Delete button*/
.delete{
text-align: center;
width: 10px;
}
.delete a:visited{
color: #262626;
}
.delete a{
color: #262626;
text-decoration: none;
}
.delete a:hover {
background-color: #009fe3;
color: white;
}
.restore{
text-align: center;
width: 10px;
}
.restore a:visited{
color: #262626;
}
.restore a{
color: #262626;
text-decoration: none;
}
.restore a:hover {
background-color: #009fe3;
color: white;
}
/*completeAll button*/
.completeAll a:visited{
color: #262626;
}
.completeAll a:hover {
background-color: #009fe3;
color: white;
}
/*restoreAll button*/
.restoreALL, .restoreALL a:visited{
color: #262626;
}
.restoreALL a:hover {
background-color: #009fe3;
color: white;
}
/*Edit button*/
.edit a:visited{
color: #262626;
}
.edit{
/*text-align: left;*/
display: none;
width: auto;
text-align: center;
}
.edit a:hover{
color:white;
background-color: #009fe3;
}
.timer-off{
color:red;
}
#form3{
display: none;
}
#completed{
display: none;
float: center;
}
#link, #link:visited{
color: red;
float: right;
}
#link1, #link1:visited{
color: #009fe3;
}
#title{
cursor: pointer;
}
/*sort function styling for arrows*/
#up {
display: inline-block;
border: solid #262626;
border-width: 0 3px 3px 0;
padding: 3px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
#down {
display: inline-block;
border: solid #262626;
border-width: 0 3px 3px 0;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
/*search button*/
#myInput {
width: 50%;
font-size: 16px;
margin: 12px;
color: #262626;
padding: 12px 20px 12px 20px;
border: 1px solid #262626;
margin-bottom: 12px;
}
#myInput:focus{
border: 1px solid #009fe3;
}
/*style login page/register page*/
label{
float: left;
color: black;
}
.form-control[type=text], .form-control[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form-control1[type=text], .form-control1[type=date]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.button {
background-color: #009fe3;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
.button:hover {
opacity: 0.8;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img#randomImage {
width: 40%;
border-radius: 50%;
}
/*form edit.php and login.php */
#form{
margin: auto;
border: 1px solid #ccc;
box-sizing: border-box;
display: table;
width: 50%;
margin: 5% auto 15% auto;
}
/*form index.php*/
#form4{
margin: auto;
border: 1px solid #ccc;
box-sizing: border-box;
display: table;
width: 50%;
}
/*form register.php*/
#form1{
margin: auto;
border: 1px solid #ccc;
box-sizing: border-box;
display: table;
width: 100%;
margin: 1% auto 15% auto;
}
.form-group {
padding: 16px;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img#randomImage {
width: 40%;
border-radius: 50%;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
#form{
/*height: 50%;*/
}
}
.note1{
width: auto;
}
.input_form {
width: 80%;
margin: auto;
border-radius: 5px;
padding: 10px;
background: white;
border: 1px solid #262626;
}
#link2{
font-size: 20px;
font-style: normal;
float: right;
margin: 5px;
}
#link2:visited{
color: #009fe3;
}
#link2:hover{
color: red;
}
.note4{
}
.task p{
font-size: 16px;
}
.date{
float: right;
margin-top: 10px;
width: auto;
}
#media screen and (min-width: 768px) {
.edit{
display: block;
}
nav{
display: block;
}
.date{
float: right;
}
#text{
display: block;
}
.dropdown{
display: none;
}
.note{
height: auto;
display: table-cell;
}
.task_input{
width: 70%;
height: auto;
}
#myInput{
width: 50%;
}
.select{
display: block;
font-size: 19px;
width: auto;
font-family: Arial;
font-weight: bold;
color: #262626;
}
#media screen and (min-width: 992px) {
.input_form p {
color: red;
margin: 0px;
}
.note{
width: auto;
}
.note1{
width: 70%;
max-height: 300px;
}
.task_input {
width: 80%;
height: 15px;
padding: 10px;
border: 1px solid #262626;
}
#myInput{
width: 20%;
}
table {
width: 80%;
}
</style>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<title>To-Do</title>
<link rel="icon" href="img/to-do.png">
<img style="display: none;" src="img_avatar2.png" id="randomImage" alt="some image" />
</head>
<body>
<nav>
<ul>
<li title="Home">
<a href="index.php?Notes=Show" class="active">
<i class="material-icons">home</i>
</a>
</li>
<li title="Completed tasks">
<i class="material-icons">done</i>
</li>
<li title="Users">
<a href="index-admin.php">
<i class="material-icons">person</i>
</a>
</li>
<li title="Add Users">
<a href="register.php">
<i class="material-icons">person_add</i>
</a>
</li>
<div class="topnav-right">
<li title="Logout">
<a href="logout.php">
<i class="fa fa-sign-out" style="font-size:25px"></i>
</a>
</li>
</div>
</ul>
</nav>
<div class="dropdown">
<i id="bars" class="fa fa-bars"></i>
<div class="dropdown-content">
<a href="index.php?Notes=Show" class="active">
<i class="material-icons">home</i>
</a>
<i class="material-icons">done</i>
<a href="index-admin.php">
<i class="material-icons">person</i>
</a>
<a href="register.php">
<i class="material-icons">person_add</i>
</a>
<a href="logout.php">
<i class="fa fa-sign-out" style="font-size:25px"></i>
</a>
</div>
</div>
<div class="page-header">
<h1>Hi, <b style="color:#009fe3"> </b>. Welcome.</h1>
</div>
<i style="font-size: 20px; font-style: normal;">Add a task<br>
<!-- form input tasks -->
<div id="form3">
<form method="post" action="index.php?Notes=Show" id="form4">
<i class="material-icons">close</i><br>
<div class="form-group">
<label>Title</label>
<input type="text" maxlength="20" name="task" class="form-control1" placeholder="Title To-Do...">
</div>
<div class="form-group">
<label>Date</label>
<input class="form-control1" type="date" id="dates" name="dates" min="<?php echo $today;?>" value="<?php echo $today;?>">
</div>
<div class="form-group">
<label>Note</label>
<textarea name="note" class="form-control1" rows="10" cols="120" placeholder="Description To-Do..."></textarea><br>
</div>
<div class="form-group">
<button type="submit" name="submit" id="add_btn" class="button">
<i class="fa fa-plus"></i>`
</button>
</div>
</form>
</div>
</form>
<input type="text" id="myInput" autofocus="autofocus" onkeyup="myFunction()" placeholder="Search for anything..." title="Type something to search">
<table id="myTable">
<thead>
<!-- title for table -->
<tr>
<!-- message for no results found -->
<!--<p id="message"></p> -->
<th title="Completed all tasks" class="completeAll">
<a onclick="return checkCompleteAll()" href="#"><i class=material-icons>done</i>ALL</a>
</th>
<th title="Sort By title" id="title" onclick="sortTable(0)">Title
<i id="up"></i>
<i id="down"></i></th>
<th><select class="select" name="note" onchange="location = this.value;">
<option value="index.php?Notes=Show">Show Notes</option>
<option value="index.php?Notes=Hide">Hide Notes</option>
<option value="index.php?Notes=Hide">Hide Notes</option>
<option value="index.php?Notes=Show">Show Notes</option>
</select></th>
</tr>
</thead>
<tbody>
<!-- table content -->
<tr>
<th title="Complete task" class="complete">
<a onclick="return checkComplete('<?=$row['id'] ?>')" href="#"><i class=material-icons>done</i></a>
</th>
<td class="task" style="width: auto;"><b></p>
</td>
<th title="Edit task" class="edit" style="float: right; $color;">
</th>
<td class="date" >
</td>
</tr>
</tbody>
</table>
</body>
<script src="java.js"></script>
</html>
Does your HTML file have a viewport meta tag in its head? It looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Firefox's mobile editor is likely going to ignore this and automatically adjust the scale of the page.
The iPhone screenshot to me looks like Safari is parsing the page in a manner where it doesn't expect the page to be mobile optimised, so basicslly the pixels aren't being adjusted to the viewing distance of the device.
Another thing to consider is that Firefox and Safari do not use the same underlying technology so there could always be variances in end results. That's why it is best to test your websites on as many browsers as possible, which it seems that you have done by testing on a real mobile device.
To read more about the meta viewport tag see Firefox's documentation (it applies to other browsers, too*)
(*Mozilla typically includes a compatibility table if there is an exception or non-standard behavior)
The problem is that the elements are not appearing next to each other as I want them to.
all three elements are already on float left and in the right order but they are still not lining up in the right way.
(so probably, the problem is that some elements are position:absolute or relative while they don't need to. The problem is: you can't change that without disrupting the drop-up menu of #Timer. That)
green_button {
background-color: #027fed;
color: white;
border-radius: 2px;
cursor: pointer;
float: right;
position: relative;
}
.green_button:active {
background-color: #eee;
color: black;
}
.keuze {
position: absolute;
width: 100px;
height: 100px;
float: left
}
#timer {
color: black;
background: #eee;
border: none;
padding-left: 10px;
font-size: 12px;
border-radius: 2px;
float: left;
padding: 12px 12px;
cursor: pointer;
list-style-type: none;
position: Relative;
margin-top: -14px;
width: 80px;
}
#timer:hover {
color: white;
background: #027fed;
}
li {
background-color: #eee;
font-size: inherit;
width: 150px;
position: relative;
float: left;
bottom: 31px;
left: 0;
display: block;
font-size: 12px;
text-decoration: none;
font-family: tahoma;
color: black;
width: 50px;
height: auto;
border: 1px solid #;
border-width: 1px 1px 0 0;
background: #eee;
background-color: rgb(238, 238, 238);
padding-left: 10px;
line-height: 38px;
border-radius: 2px;
height: auto;
line-height: 1em;
padding: 5px 10px;
width: 129px;
margin-bottom: 1px;
margin-left: 431px;
}
li:hover {
cursor: pointer;
background-color: #027fed;
color: white
}
.list {
display: none;
list-style-type: none;
position: absolute !important;
}
.keuze:hover .list {
display: block
}
.messages_compose {
padding: 10px;
margin-bottom: auto;
}
.messages_textarea_container {
display: inline-block;
width: 400px;
margin-left: 10px;
}
.messages_textarea {
border: 3px solid lightgray;
margin-top: 0;
margin-bottom: 10px;
padding: 5px;
width: 400px;
height: 40px;
resize: none;
float: left;
border-radius: 2px;
position: absolute;
}
.button {
border: none;
font-size: 12px;
padding: 12px 12px;
height: 40px text-align: center;
}
<div class="messages_compose">
<div class="vraag">CV</div>
<div class="messages_textarea_container">
<textarea class="messages_textarea"></textarea>
<button class="button green_button">Stuur</button>
<ul class="keuze">
<button id="timer">1 Jaar</button>
<div class="list">
<li id="jaar">jaar</li>
<li id="maand">maand</li>
<li id="week">week</li>
<li id="dag">dag</li>
</div>
</ul>
</div>
<script>
document.getElementById("jaar").onclick = function() {
jaar()
};
document.getElementById("maand").onclick = function() {
maand()
};
document.getElementById("week").onclick = function() {
week()
};
document.getElementById("dag").onclick = function() {
dag()
};
</script>
<script src="../scripten.js"></script>
</div>
If you want them side by side (if width allows), to make things simpler, make sure they are inline elements.
textarea and button are inline elements by default and unsorted-list are block element by default
Inline Elements
Block Elements
So basically, all you need is to change your ul to display: inline-block;
* {
padding: 0;
margin: 0;
vertical-align: text-top;
}
green_button {
background-color: #027fed;
color: white;
border-radius: 2px;
cursor: pointer;
}
.green_button:active {
background-color: #eee;
color: black;
}
.keuze {
display: inline-block; /* added */
width: 100px;
list-style: none;
}
.keuze li {
width: 100%;
}
#timer {
color: black;
background: #eee;
border: none;
padding-left: 10px;
font-size: 12px;
border-radius: 2px;
padding: 12px 12px;
cursor: pointer;
list-style-type: none;
width: 80px;
}
<div class="messages_compose">
<div class="vraag">CV</div>
<div class="messages_textarea_container">
<textarea class="messages_textarea"></textarea>
<button class="button green_button">Stuur</button>
<ul class="keuze">
<button id="timer">1 Jaar</button>
<div class="list">
<li id="jaar">jaar</li>
<li id="maand">maand</li>
<li id="week">week</li>
<li id="dag">dag</li>
</div>
</ul>
</div>
</div>
In addition, I have removed all your float and position from your css which I think as #Temani Afif says, you were just trying fix the issue by adding more to it.
I also have added followings just to make it tidier which is irrelevant to your issue. (That is to remove the default margin, padding and vertical align from all html elements to make it tidier and avoid unexpected behavior of different browsers)
* {
padding: 0;
margin: 0;
vertical-align: text-top;
}
how to make html button like this picture?
two line text.vertical centered.
here is my code
.btn {
display: block;
background: #ffffff;
box-shadow: none;
border: 1px solid #CECECE;
border-radius: 4px;
margin-bottom: 5px;
color: #19d197;
}
.bz-fa-icon {
margin-right: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<button class="btn"><i class="fa fa-check bz-fa-icon"></i>
Confirm<br>
Return
</button>
Change some CSS
.btn {
background: #ffffff none repeat scroll 0 0;
border: 1px solid #cecece;
border-radius: 4px;
box-shadow: none;
color: #19d197;
display: block;
margin-bottom: 5px;
padding: 0 10px 0 30px;
position: relative;
}
.bz-fa-icon {
left: 5px;
margin-right: 5px;
position: absolute;
top: 50%;
transform: translateY(-50%);
vertical-align: middle;
}
https://jsfiddle.net/8kwyjsho/
Try this:
You can also wrap the text and span inside a div then wrap that div and img inside another div then add these classes:
also add display: inline-block; on your img
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.btnText {
vertical-align: middle;
display: inline-block;
}
body {
padding: 20px;
}
.button {
background: #000;
color: #fff;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 120px;
padding: 30px 50px;
display: inline-block;
}
span {
font-size: 11px;
color: #ccc;;
display: block;
}
img {
vertical-align: middle;
display: inline-block;
}
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.btnText {
vertical-align: middle;
display: inline-block;
}
<a class="button" href="">
<div class="center">
<img src="http://dummyimage.com/30x30/cf97cf/fff">
<div class="btnText">
Button
<span>Button alt</span>
</div>
</div>
</a>
Change to this code.
.btn {
width:80px;
height:40px;
display: block;
background: #ffffff;
box-shadow: none;
border: 1px solid #CECECE;
border-radius: 4px;
margin-bottom: 5px;
color: #19d197;
}
.bz-fa-icon {
display: block;
float:left;
margin-top:9px;
margin-right: 5px;
}
A flexbox option:
.btn {
display: inline-flex;
align-items: center; /* vertical alignment of items */
line-height: 16px;
padding: 5px 13px;
background: none;
border: 1px solid #CECECE;
border-radius: 3px;
color: #19d197;
}
.inner {
text-align: left;
padding-left: 7px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<button class="btn"><i class="fa fa-check bz-fa-icon"></i>
<div class="inner">Confirm <br /> Return</div>
</button>