Currently studying a little bit of simple coding for school. I tried copying the Twitter UI but how do I remove the border on the input element while typing?
Here's what it's look like
And here's what it's look like while typing in it
Here is my code
<!DOCTYPE html>
<html>
<head>
<style>
.twitter-dp {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 25px;
vertical-align: middle;
margin-right: 5px;
}
.text {
font-size: 17px;
border: none;
width: 300px;
vertical-align: middle;
}
.tweet {
vertical-align: middle;
background-color: rgb(74, 171, 240);
border-style: none;
font-style: arial;
font-size: 17px;
color: white;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
border-radius: 25px;
cursor: pointer;
}
.tweet:hover {
opacity: 0.8;
}
input {
border: none;
background-color: transparent;
resize: none;
outline: none;
}
</style>
</head>
<body>
<img class="twitter-dp" src="practiceimage.jpg" />
<input class="text" type="text" placeholder="What's happening?" />
<button class="tweet">Tweet</button>
</body>
</html>
It's hard to say for sure without seeing the html codes, but you can try to add these codes between style tags.
input {
border: none;
background-color: transparent;
resize: none;
outline: none;
}
Related
I have a css class assigned to a button like this:
.button {
margin: 4px;
padding: 4px;
width: 96%;
height: 48px;
max-width: 250px;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
overflow: hidden;
white-space: normal;
color: #232856;
border: 1px solid #3d8b40;
border-radius: 8px;
background: #f1f1f1
}
.button a {
color: #232856;
text-decoration: none
}
.button a:hover {
color: #f1f1f1;
background: #232856
}
The .button works perfectly, does everything I need it to do.
But the a and a:hover parts do nothing.
Any ideas?
You can get rid of the a: hover and instead just use the button: hover {
Here is the code:
.button {
margin: 4px;
padding: 4px;
width: 96%;
height: 48px;
max-width: 250px;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
overflow: hidden;
white-space: normal;
color: #232856;
border: 1px solid #3d8b40;
border-radius: 8px;
background: #f1f1f1
}
.button a {
color: #232856;
text-decoration: none
}
.button:hover {
color: #f1f1f1;
background: #232856
}
That should work. When you need something with a hover effect such as a button, you dont need to include the a:, just write button: hover
I think that you might forgot about class for button, if you want to do it general then use button in styles instead of .button.
Also you forgot about semicolon after text-decoration: none, so this lane and every css style below in same block scope is not applied.
.button {
margin: 4px;
padding: 4px;
width: 96%;
height: 48px;
max-width: 250px;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
overflow: hidden;
white-space: normal;
color: #232856;
border: 1px solid #3d8b40;
border-radius: 8px;
background: #f1f1f1;
}
.button a {
color: #232856;
text-decoration: none;
}
.button a:hover {
color: #f1f1f1;
background: #232856;
}
<button class="button">
<a href="#">My a inside button<a>
</button>
Change to
.button:hover a{
// styling when on hover
}
I think I broke my BUTTON!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.btn {
background-size: 10px 10px;
background: repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px);
height: 600%;
transform: rotate(-35deg);
transition: 0.3s;
}
.btn:hover {
color: gold;
}
</style>
</head>
<body>
<br><br>
<button class="btn btn-default btn-lg">Hover Over Me</button>
</body>
</html>
I am new at web developing.
Trying to make site logo look good.
Have two elements, one of them is covered by another so user can't click on first of them.
Help me please making them one above another.
How can I do this stuff using only CSS?
Codepen: https://codepen.io/h071/pen/YOeXaw
This is HTML part:
<header>
<link rel="stylesheet" type="text/css" href="/a/www/css/style_header.css">
<nav class="container-fluid">
<a class="logo" href="/a/www/index.php">
<span>Sitename</span>
</a>
<p id="reg-auth-title">Login|Registration</p>
And this is CSS:
header {
width: 100%;
height: 5em;
position: relative;
}
nav {
width: 100%;
}
.logo {
display: block;
float: left;
position: absolute;
margin-top: 0.4em;
margin-left: 1em;
}
.logo span {
font-size: 5em;
color: black;
display: inline-block;
/*line-height: 1em;*/
}
#reg-auth-title {
/* width: 20%; */
padding: 0;
margin: 0;
float: left;
}
#reg-auth-title a.top-auth {
font: bold 15px sans-serif;
text-decoration: none;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
border: 1px solid red;
border-radius: 5px; /*other browsers*/
-webkit-border-radius: 5px; /*safari*/
-moz-border-radius: 5px;
cursor: pointer;
color: black;
}
#reg-auth-title a.top-auth:hover {
text-decoration: none;
}
#reg-auth-title a {
font: 15px sans-serif;
font-weight: bold;
text-decoration: none;
color: #58ACFA;
margin-left: 1em;
border-bottom-style: dashed;
border-bottom-color: #58ACFA;
border-bottom-width: 1px;
}
You need to put your link above logo using z-index.
#reg-auth-title {
z-index: 10;
position: relative; // z-index works only with non-static positioned elements
}
I'm brand-new to html and decided to make a start page for Firefox. The problem I have is that when I mouseover above and below my links' text my mouse's cursor changes to the hotlink pointy hand, as it would normally when you mouseover a link. But it does this within a 20+ pixel radius above and below that link in an invisible field it would seem. It doesn't do this to the left and right of the link text. I want to fix it so that it only changes when my mouse is directly over the text, as all website links do. I'm probably missing some code. Here's my full html code. Any help is greatly appreciated.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="author" content="name">
<title>~name#inferno</title>
<link href="favicon.ico" rel="icon">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style type="text/css">
body {
background: url(x.jpg) no-repeat;
background-size: cover;
background-color: #0A0F14;
-moz-appearance: none;
}
td {
transition: all 2s ease 0.9s;
color: inherit;
-moz-appearance: none;
}
a:link {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
a:hover {
color: inherit;
text-decoration: none;
}
a:active {
color: inherit;
text-decoration: none;
}
a {
font-family: "Segoe UI";
font-size: 12px;
font-weight: bold;
outline: none;
float: right;
margin-right: 15px;
margin-top: -3px;
}
td:hover{
background: rgba(16, 21, 27, 0);
}
.box {
background: #10151B;
border-radius: 0px 0px 15px 10px;
line-height: 50px;
width: 140px;
height: 592px;
position: fixed;
top: 1px;
bottom: 0px;
left: 0px;
}
.icon {
color: #D12248;
float: left;
margin-top: 10px;
text-indent: 5px;
}
.icon2 {
color: #D19011;
float: left;
margin-top: 10px;
text-indent: 5px;
}
.icon3 {
color: #57A3D1;
float: left;
margin-top: 10px;
text-indent: 5px;
}
.icon4 {
color: #AAD130;
float: left;
margin-top: 10px;
text-indent: 5px;
}
.icon5 {
color: #4ED1B3;
float: left;
margin-top: 10px;
text-indent: 5px;
}
.icon6 {
color: #98D1CE;
float: left;
margin-top: 10px;
text-indent: 5px;
}
Seems like your issue was the 'float:right' in the CSS.
That made the a element take up all the space of the box.
Try setting a line height so that the 'a' element will be limited in height:
a {
font-family: "Segoe UI";
font-size: 12px;
font-weight: bold;
outline: none;
float: right;
margin-right: 15px;
margin-top: 10px; //updated the margin top
line-height: 15px; //added line height
}
The line-height change makes it so the a appears in the top of the row.
Updating margin-top fixes that.
https://jsfiddle.net/aw09geqh/1/
Try to remove this rule:
td:hover{
background: rgba(16, 21, 27, 0);
}
It's hard to say without seeing the HTML, but from what you write, that might be it.
I'm trying to create a login page in HTML.
no matter what i do, the checkbox and its text are not aliening together in a same line.
I want it to look like that: "[] text" instead of:
"[](going down a line) text".
I tried a lot of suggestions i saw in similar posts but nothing seems to works.
This is my code:
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
font-family: Arial;
background-color: #3498DB;
padding: 50px;
}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
background-color: #FFF;
padding: 20px;
border-radius: 5px
}
.app-title {
text-align: center;
color: #777;
}
.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}
.btn {
border: 2px solid transparent;
background: #3498DB;
color: #ffffff;
font-size: 16px;
line-height: 25px;
padding: 10px 0;
text-decoration: none;
text-shadow: none;
border-radius: 3px;
box-shadow: none;
transition: 0.25s;
display: block;
width: 250px;
margin: 0 auto;
}
.btn:hover {
background-color: #2980B9;
}
.errorMsg{
font-size: 12px;
color: red;
}
.LabeledCheckboxGroup label, .LabeledCheckboxGroup input {
float: none; /* if you had floats before? otherwise inline-block will behave differently */
display: inline-block;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<!--<script src="script/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body>
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Gridler</h1>
</div>
<div class="login-form">
<div class="control-group">
<input type="text" class="login-field" value="" placeholder="username" id="login-name">
<label class="login-field-icon fui-user" for="login-name"></label>
<input type="checkbox" checked name ="IsHuman"> Human Player
</div>
<a class="btn btn-primary btn-large btn-block" href="#" onclick="process()">login</a>
<!--errorMsg below will later be filed with script and ajax to show a msg when a name is already exist-->
<p class="errorMsg" href="#"></p>
</div>
</div>
</div>
</body>
</html>
Thanks,
Maor
Put the checkbox and its text inside a div.
Remove the width property from the checkbox.
Move the text into its own label.
set display: inline-block for both the checkbox and the label.
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
font-family: Arial;
background-color: #3498DB;
padding: 50px;
}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
background-color: #FFF;
padding: 20px;
border-radius: 5px
}
.app-title {
text-align: center;
color: #777;
}
.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
width: auto;
padding: 10px 0;
transition: border .5s;
}
input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}
.btn {
border: 2px solid transparent;
background: #3498DB;
color: #ffffff;
font-size: 16px;
line-height: 25px;
padding: 10px 0;
text-decoration: none;
text-shadow: none;
border-radius: 3px;
box-shadow: none;
transition: 0.25s;
display: block;
width: 250px;
margin: 0 auto;
}
.btn:hover {
background-color: #2980B9;
}
.errorMsg{
font-size: 12px;
color: red;
}
.LabeledCheckboxGroup label, .LabeledCheckboxGroup input {
float: none; /* if you had floats before? otherwise inline-block will behave differently */
display: inline-block;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<!--<script src="script/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body>
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Gridler</h1>
</div>
<div class="login-form">
<div class="control-group">
<input type="text" class="login-field" value="" placeholder="username" id="login-name">
<label class="login-field-icon fui-user" for="login-name"></label><br/>
<input type="checkbox" checked name ="IsHuman"> Human Player
</div>
<a class="btn btn-primary btn-large btn-block" href="#" onclick="process()">login</a>
<!--errorMsg below will later be filed with script and ajax to show a msg when a name is already exist-->
<p class="errorMsg" href="#"></p>
</div>
</div>
</div>
</body>
</html>
Add
input.login-field {
display: block;
margin: 0 auto;
}
You've set the width for ALL inputs to 250px simply change
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
To
#login-name {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
I have edited your code snippet, please have a look.
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
font-family: Arial;
background-color: #3498DB;
padding: 50px;
}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
background-color: #FFF;
padding: 20px;
border-radius: 5px
}
.app-title {
text-align: center;
color: #777;
}
.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}
input[type="checkbox"]
{
width: 30px;
}
.checkbox {
text-align: left;
font-size: 14px;
margin-top: 5px;
}
.checkbox label {
vertical-align: top;
}
.btn {
border: 2px solid transparent;
background: #3498DB;
color: #ffffff;
font-size: 16px;
line-height: 25px;
padding: 10px 0;
text-decoration: none;
text-shadow: none;
border-radius: 3px;
box-shadow: none;
transition: 0.25s;
display: block;
width: 250px;
margin: 0 auto;
}
.btn:hover {
background-color: #2980B9;
}
.errorMsg{
font-size: 12px;
color: red;
}
.LabeledCheckboxGroup label, .LabeledCheckboxGroup input {
float: none; /* if you had floats before? otherwise inline-block will behave differently */
display: inline-block;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<!--<script src="script/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body>
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Gridler</h1>
</div>
<div class="login-form">
<div class="control-group">
<input type="text" class="login-field" value="" placeholder="username" id="login-name">
<label class="login-field-icon fui-user" for="login-name"></label>
<div class="checkbox">
<input type="checkbox" checked name ="IsHuman"> <label>Human Player</label>
</div>
</div>
<a class="btn btn-primary btn-large btn-block" href="#" onclick="process()">login</a>
<!--errorMsg below will later be filed with script and ajax to show a msg when a name is already exist-->
<p class="errorMsg" href="#"></p>
</div>
</div>
</div>
</body>
</html>
I've got a layout bug with the snippet below in IE11, Chrome, Firefox - the second button is not correctly inline with the first button.
The problem goes away as soon as I add any non-whitespace content to the inner span on the second button.
Is there a CSS fix that will bring the buttons inline without requiring actual content, ideally without changing the rest of the CSS?
<!DOCTYPE html>
<html>
<head>
<title>CSS Problem</title>
<meta charset="utf-8"/>
<style>
.mainBorder { padding: 20px; background-color: #254669 }
button {
font-family: Verdana;
font-size: 13px;
color: white;
position: relative;
padding: 0 8px 1px 8px;
height: 24px;
background-color: #254669;
border: 1px solid #53779D;
transition: all 150ms ease-out;
outline: none;
}
button:disabled {
opacity: 0.65;
}
button:enabled {
cursor: pointer;
}
button:hover:enabled {
background-color: #53779D;
}
button:active:enabled > span.content {
display: inline-block;
transform: translateY(-1px);
}
button:focus {
border-color: white;
}
button.iconButton {
width: 24px;
padding: 0;
}
span.icon {
display: block;
height: 16px;
}
</style>
</head>
<body>
<h1>Button</h1>
<div class="mainBorder">
<button><span class="content">Default</span></button>
<button class="iconButton"><span class="icon"></span></button>
</div>
</body>
</html>
Just add vertical-align:middle to button clas like this: Demo
button {
font-family: Verdana;
font-size: 13px;
color: white;
position: relative;
padding: 0 8px 1px 8px;
height: 24px;
background-color: #254669;
border: 1px solid #53779D;
transition: all 150ms ease-out;
outline: none;
vertical-align:middle; /* added this */
}
You need to add
display: table-row;
vertical-align: middle;
in your button and
box-sizing: border-box;
display: table;
in .mainBorder class
<!DOCTYPE html>
<html>
<head>
<title>CSS Problem</title>
<meta charset="utf-8"/>
<style>
.mainBorder {
background-color: #254669;
box-sizing: border-box;
display: table;
padding: 20px;
width: 100%;
}
button {
background-color: #254669;
border: 1px solid #53779d;
color: white;
display: table-row;
font-family: Verdana;
font-size: 13px;
height: 24px;
outline: medium none;
padding: 0 8px 1px;
position: relative;
transition: all 150ms ease-out 0s;
vertical-align: middle;
}
button:disabled {
opacity: 0.65;
}
button:enabled {
cursor: pointer;
}
button:hover:enabled {
background-color: #53779D;
}
button:active:enabled > span.content {
display: inline-block;
transform: translateY(-1px);
}
button:focus {
border-color: white;
}
button.iconButton {
width: 24px;
padding: 0;
}
span.icon {
display: block;
height: 16px;
}
</style>
</head>
<body>
<h1>Button</h1>
<div class="mainBorder">
<button><span class="content">Default</span></button>
<button class="iconButton"><span class="icon"></span></button>
</div>
</body>
</html>
I would suggest to not have all the spaces if you intend to have space between elements because that is hard to manage at times but if you want to keep it the same markup this css for the .iconButton:
button.iconButton{
width: 24px;
top: 7px;
padding: 0;
}
but if you want to rid yourself of the spaces then you can, optionally, the spaces would definitely affect the layout
button.iconButton{
width: 24px;
top: 3px;
padding: 0;
margin: 0 15px;
}