I have a input field & button. However, there are two problems.
The text in the button is not centered.
The button is never the same height as the input.
To visualize it:
Ok, I also put together a super convenient fiddle to play with this.
How can I fix these problems? Make it look "perfectly aligned". I tried fiddling around with height settings, though was unsuccessful.
Code in that fiddle:
HTML:
<body style="background-color: #5a6b7d">
<div style="text-align: center">
<h1 id='format' style="margin-top: 50px;">Welcome to our site</h1>
<p id='format' style="">this is a site</p>
<br>
<h2 id="format"><i class="fa fa-chevron-down" aria-hidden="true"></i> Type your username <i class="fa fa-chevron-down" aria-hidden="true"></i></h2>
<input type="text" placeholder="Type a username" style="font-size: 140%; text-align: center;" align="center">
<button id="playbutton">Play</button>
</div>
</body>
CSS:
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
height: 40px;
}
button:hover{
background-color: darkgreen;
}
try this css for your green button :
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
padding: 8px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
position: relative;
top: -2px;
}
use position: relative; top:1px; /* adjust this top to repositioning the button
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
height: 40px;
}
button:hover{
background-color: darkgreen;
}
#username{
height: 40px;
padding:0px;
margin-right: 10px;
}
.input-fields{
display:inline-flex;
}
<body style="background-color: #5a6b7d">
<div style="text-align: center">
<h1 id='format' style="margin-top: 50px;">Welcome to our site</h1>
<p id='format' style="">this is a site</p>
<br>
<h2 id="format"><i class="fa fa-chevron-down" aria-hidden="true"></i> Type your username <i class="fa fa-chevron-down" aria-hidden="true"></i></h2>
<div class="input-fields">
<input id="username" type="text" placeholder="Type a username" style="font-size: 140%; text-align: center;" align="center">
<button id="playbutton">Play</button>
<div>
</div>
</body>
Just replace your button CSS with this:
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
border-radius: 3px;
line-height: 35px;
width: 80px;
}
How about this:
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
height: 40px;
/* New */
padding: 0px;
width: 50px;
height: 20px;
}
The padding 0px will center the text inside the button and the width and height you can use to define the button size. This is an good option for centering if you dont know the exact size of a picture or other things.
Here is the JSFiddle:
https://jsfiddle.net/vLbbkcna/3/
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 months ago.
Improve this question
I'm trying to create 2 buttons with different links and have the second button be a clickable image. For some reason the text in between the buttons acts as a hyperlink. How do I fix this?
.button1 {
background-color: #E44040;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {
border: none;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {
border-radius: 2px;
}
.button2 {
border-radius: 12px;
}
<body style="font-family: arial">
<p>Click the button below For youtube</p>
<div>
<a href="https://www.youtube.com/" method="get" target="_blank">
<button class="button button1">Youtube</button>
</div>
<div>
<p>Click the button below fork Reddit</p>
<a href="https://www.reddit.com/" method="get" target="_blank">
<button class="button button2" style="border: 0; background: transparent">
<img src="https://toppng.com/uploads/preview/reddit-icon-reddit-logo-transparent-115628752708pqmsy4kgm.png" width="90" height="90"></button>
</div>
You forgot to close the a tags. Try this:
Edit: changed the buttons to divs, see comment of user cloned.
body {
font-family: arial, sans-serif;
}
.button1 {
background-color: #E44040;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {
border: none;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 12px;}
<p>Click the button below For youtube</p>
<div>
<a href="https://www.youtube.com/" method="get" target="_blank">
<div class="button button1">Youtube</div>
</a>
</div>
<div>
<p>Click the button below fork Reddit</p>
<a href="https://www.reddit.com/" method="get" target="_blank">
<div class="button button2" style="border: 0; background: transparent">
<img src="https://toppng.com/uploads/preview/reddit-icon-reddit-logo-transparent-115628752708pqmsy4kgm.png" width="90" height="90">
</div>
</a>
</div>
You have not closed the <a> tag.
This is the corrected code:
.button1 {
background-color: #E44040;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {
border: none;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 12px;}
<body style="font-family: arial">
<p>Click the button below For youtube</p>
<div>
<a href="https://www.youtube.com/" method="get" target="_blank">
<button class="button button1">Youtube</button>
</a>
</div>
<div>
<p>Click the button below fork Reddit</p>
<a href="https://www.reddit.com/" method="get" target="_blank">
<button class="button button2" style="border: 0; background: transparent">
<img src="https://toppng.com/uploads/preview/reddit-icon-reddit-logo-transparent-115628752708pqmsy4kgm.png" width="90" height="90">
</button>
</a>
</div>
</body>
I have a problem. I want to create a input text field with icons inside of the code.
I want to have my icons inside of the input text field. Unfortunately my CSS style didn't work. With others code the icons disappeared. I hope you can help me. Thank you in advance. Please see below for my code.
HTML
<div class="col-md-6 login-form">
<h3>Los gehts</h3>
<div class="form_login">
<div class="form-group">
<input type="text" id="email_field" placeholder="Email *">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div class="form-group">
<input type="password" id="password_field" placeholder="Passwort *">
<i class="fa fa-lock" aria-hidden="true"></i>
</span>
</div>
<div class="form-group">
<button type="submit" class="btnSubmit" onclick="signIn()">Login</button>
</div>
<!--
<div class="form-group">
Forget Password?
</div> -->
</div>
</div>
CSS
.login-container {
margin-top: 5%;
margin-bottom: 5%;
text-align: center;
margin: auto;
padding-bottom: 5%;
}
.login-form {
padding: 5%;
text-align: center;
margin: auto;
}
.login-form h3 {
text-align: center;
color: #333;
}
.login-container form {
padding: 10%;
text-align: center;
display: inline-block;
position: relative;
width: 100%;
z-index: 1;
margin-bottom: 10px;
}
.btnSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
border: none;
cursor: pointer;
}
.btnLogout {
margin-top: 1rem;
border-radius: 1rem;
cursor: pointer;
color: #fff;
background-color: #0062cc;
text-align: center;
display: inline-block;
border: none;
margin-bottom: 10px;
}
.btnLogout:hover {
background-color: #0575ec;
}
.login-form .btnSubmit {
font-weight: 600;
color: #fff;
background-color: #0062cc;
}
.login-form .ForgetPwd {
color: #0062cc;
font-weight: 600;
text-decoration: none;
}
.loggedin-div {
text-align: center;
padding-bottom: 5%;
}
You need to create a div with border that imitate a input border. Then, you need to create the text input at the left and add this code: <input type="image" src="yourimagefile.jpg">
I hope I help you.
If you want something to float somewhere else, you can use a combination of position:relative; and top/left with CSS. For instance, let's add an id to that login button and make it our icon...
<div class="form-group" id="submit">
<button type="submit" class="btnSubmit" onclick="signIn()">Login</button>
</div>
Then some styling...
#submit {
top:-21px;
left:228px;
position:relative;
width:100px;
}
And what we get, then, is an icon floating over the input field. Working Demo.
Works for me. Before:
After:
Here's an example with the blank <i> elements (converted to <img> so we could see something, as they had no href): Working Demo.
I have a problem with one of sections in my HTML code.
My idea is simply: one section made by 1 row, who is divided on 2 columns.
In left column i tried to put countodwn timer, and "submit" button in right column. They have to be side by side, and on equal distance in regards to each other; but there are some problems - they are on unequal distance and i am wondering how to fix it...
Also, when i test how draft of my site looks on mobile, parts of the clock do not stay together - they just move under each other.
Here is a jsfiddle.
What i am doing wrong?
<div class="container-fluid">
<div class="row align-items-center"><div class="col-6 mx-auto">
<h3 style=" font-family: Open Sans; font-weight: light; font-size: 20px; color: 636363;letter-spacing: 1px; padding-left:110px;">Deadline:</h3>
<div id="clockdiv">
<div> <span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div> <span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div> <span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div> <span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</div>
<div class="col-6 mx-auto">
<button class="button button1" style="width: 300px; height: 100px;">Submit</button>
</div>
</div>
</div>
And CSS:
#clockdiv{
font-family: Open Sans;
color: #ffffff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div{
padding: 0px;
border-radius: 3px;
background: #fffff;
display: inline-block;
}
#clockdiv div > span{
padding: 15px;
border-radius: 3px;
background: #000;
display: inline-block;
position: relative;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
color: #000;
position: relative;
}
.button {
background-color: #fff;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: 'Open Sans';
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: #000;
border: 2px solid #000;
}
.button1:hover {
background-color: #fff;
color: white;
Essentially I have several divs and I'm trying to align them so that they stay in line with each other regardless of the size of the window. I have a dropdown bar (testRegion) and I have a large textarea where users can input SSNS (SSNinput). Much of the rest of the page, on the righthand should be a table that displays the results.
I apologize, I don't have access to it at the moment, so I can't really show you how I'd like it to look, even with a screenshot. But essentially the height of testRegion, SSNinput, and the buttons below, should equal the height of the table on the righthand side. The table is being created successfully at the bottom of the code here. (maintbl).
<div class="pageContent row col-lg-12" style="white-space:nowrap; width:1200px;" >
<div class="col-lg-2" style="width: 245px; display:inline-block; white-space:nowrap;">
<div class="row" style="white-space:nowrap; display:inline-block; width:245px;">
<select class=" btn btn-default dropdown-toggle" id="testRegion" data-toggle="dropdown" style="width:235px">
<option value="a">Acceptance</option>
<option value="i">Integration</option>
</select>
</div>
<div class="row" style="padding-top: 8px; border: dotted; white-space:nowrap; width:245px;">
<textarea id="SSNinput" rows="21" class="form-control" placeholder="Paste/Import SSNS Here" style="width: 235px; display: inline-block;"></textarea>
</div>
<div id="navbuttons" style="float: left; white-space: nowrap; padding-top: 10px; width:245px;">
<button id="Validate" title="Validate" class="glyphicon glyphicon-play" onclick="getParticipantPlans();"></button>
<button id="Import" title="Import" class="glyphicon glyphicon-log-in"></button>
<button id="Export" title="Export" class="glyphicon glyphicon-log-out" onclick="ExportToExcel();"></button>
<button id="Clear" title="Clear" class="glyphicon glyphicon-repeat" onclick="ClearArea();"></button>
</div>
</div>
<div id='jqxWidget' class ="col-lg-8" style="font-size: 13px; font-family: Verdana; display: inline-block; width:800px; ">
<div id="maintbl"></div> <!--table created here successfully.-->
</div>
</div>
I'm sorry I can't provide a better description for you all. Essentially the behavior now, is that the SSNinput and testRegion divs get all out of whack and not level with the table. I've tried a bunch of container divs, and setting whitespace to nowrap. Nothing seems to work. Any guidance here would be appreciated. Thanks.
EDIT
Here's the attached CSS I'm using.
#nav {
padding-right: 10px;
resize: none;
max-width: 230px;
min-width: 230px;
float: left;
}
#thead {
color: white;
background-color: #0c98cf;
font-family: Arial;
width: 100%;
text-align: center;
border-radius: 10px;
}
#maintbl td {
text-align: center;
}
#title-wrapper {
background-color: #086387;
}
#import {
cursor: pointer;
font-size: 1.9em;
background-color: #0c98cf;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 6px;
padding-left: 12px;
color: white;
}
#clear {
cursor: pointer;
font-size: 1.9em;
background-color: #0c98cf;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 6px;
padding-left: 12px;
color: white;
text-align: center;
}
#export {
cursor: pointer;
font-size: 1.9em;
background-color: #0c98cf;
border-radius: 6px;
padding-left: 12px;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}
#validate {
cursor: pointer;
font-size: 1.9em;
background-color: #0c98cf;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 6px;
color: white;
}
#validate:hover {
color: white;
background-color: #808080;
}
#export:hover {
color: white;
background-color: #808080;
}
#import:hover {
color: white;
background-color: #808080;
}
#clear:hover {
color: white;
background-color: #808080;
}
#SSNinput {
resize: none;
border-radius: 0px;
overflow-y: auto;
display: inline-block;
border-radius: 9px;
}
/*drop area for importing in popup window*/
#drop {
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 25px;
text-align: center;
font: 15pt bold, "Vollkorn";
color: #bbb;
}
I have the following HTML:
<div class="dispLoginSearch" style="text-align: left; overflow: hidden;"> <!-- LOGIN AND SEARCH -->
<div class="theLoginBox" style="clear: both;">
<div class="loginTitle">
Log in to <span style="font-family: 'blackjarregular'; font-size: 14pt; color: #FE7816;">My</span> <span style="font-family: 'trajanpro'; font-size: 12pt; color: #00529B;">WD</span> | Sign Up
<br />
<input type="text" value="Username" /> <input type="password" value="Password" /> <input type="button" value="Go" />
<br />
<span style="float: right;">Forgot login/password</span>
</div>
</div>
<div style="z-index: 99999999999;">
<input type="text" value="Search WD" />
</div>
</div> <!-- LOGIN AND SEARCH -->
CSS:
.dispLoginSearch
{
width: 47%;
height: 150px;
line-height: 150px;
vertical-align: middle;
float: right;
padding-right: 2%;
background: #FFFFFF;
border: 1px solid #0026ff;
}
.theLoginBox
{
border: 2px solid #D5D5D5;
border-radius: 4px;
width: 97%;
height: 90px;
padding: 10px;
white-space: nowrap;
background: #ff6a00;
}
.loginTitle
{
height: 88px;
display: block;
vertical-align: top;
white-space: nowrap;
font-weight: bold;
text-align: left;
background: #b6ff00;
}
When I view the website, I see the following:
What I would like it be shown:
How do I fix the issue? It is happening in both IE and other browsers.
UPDATE:
I added overflow: auto in the loginTitle class and this is what is shown:
Each section is taking up a lot of space and showing the scrollbar :/
This is because of line 5 of your CSS : line-height: 150px;.
Just remove it and you should be fine.
If you want it to look like image you attached, see here: http://codepen.io/anon/pen/FothH
html:
<form action="#">
<p>Log in to ###### | Sign up</p>
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<input type="submit" value="Go"/>
Forgot login/password
</form>
css:
form {
border: 1px solid #d4d4d4;
display: block;
width: 375px;
font: 16px sans-serif;
padding: 0 0 0 15px;
border-radius: 5px;
-webkit-font-smoothing: antialiased;
}
form p {
margin: 5px 0 0;
font-size: 20px;
line-height: 35px;
}
input {
display: inline-block;
border-radius: 7px;
}
input[type=text], input[type=password] {
border: none;
background: #ebebeb;
font-size: 16px;
padding: 6px 10px;
width: 180px;
}
input[type=password] {
width: 120px;
}
input[type=submit] {
font-size: 16px;
width: 25px;
padding: 5px 0px;
background: none;
color: red;
border: none;
}
form a {
display: block;
line-height: 25px;
text-align: right;
margin-right: 30px;
color: #d4d4d4;
text-decoration: none;
margin-bottom: 5px;
}