I thought align-items center was used to center items along the vertical axis. But why does it just squish my form element?
css code
*{
box-sizing:border-box;
}
body{
font-family:sans-serif;
background:#f6f5f7;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:100vh;
margin:-20px 0 50px;
}
h1{
margin:0;
font-weight:bold;
}
p{
font-size:14px;
font-weight:100;
line-height:20px;
letter-spacing:0.5px;
margin:20px 0 30px;
}
span{
font-size:12px;
}
a{
color:#333;
font-size:14px;
text-decoration:none;
margin:15px 0;
}
.container{
background:#fff;
border-radius:10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
position:relative;
overflow:hidden;
width:768px;
max-width:100%;
min-height:480px;
}
.form-container form{
background:#fff;
flex-direction:column;
display:flex;
flex-direction:column;
padding:0 50px;
height:100%;
}
form{
justify-content:center;
align-items:center;
}
If you remove the align items center you will get a long form which is not what i am looking for by long i mean the widht is longer than i need it to be. Does this have to deal with how the align properties was created or something else?
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style2.css">
</head>
<body>
<h2>Weekly Coding Challenge #1: Sign in/up Form</h2>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>Create Account</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>or use your email for registration</span>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button>Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Sign in</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>or use your account</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
Forgot your password?
<button>Sign In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
<footer>
<p>
Created with <i class="fa fa-heart"></i> by
<a target="_blank" href="https://florin-pop.com">Florin Pop</a>
- Read how I created this and how you can join the challenge
<a target="_blank" href="https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/">here</a>.
</p>
</footer>
</body>
</html>
I tried to remove align-items center because i did not see its use but without it my form will be long and i was expecting it will have no effect if i removed it.
This html document is a form login website for a company and could it be that it is a regular thing for a form to be reduced by align-items center.
Can someone please exlain that will help.
The align items: center property aligns the items such that they align perfectly to the center of the cross axis in turn squishing all the elements inside it to their default/set width.
Instead of that you could set a width or a max-width property for the width of your form and a margin: auto to align it at the center of the cross-axis.
The margin: auto aligns it to the center because it tries to auto adjust all the 4 margins to an equal length which in turn centers it.
form {
width: 70%;
margin: auto;
}
Related
Within a form I have an text input and a <a> representing a button to add one more input element.
<div class="col-4">
<input class="form-control" type="text" placeholder="Menge" name="txt_menge[]" value="3">
<img src="../img/add-icon.png"/>
</div>
Currently each element has its own line, but they should be together in one line:
How can I achieve this?
Bootstrap classes are used.
Please try using d-flex instead of col-4
As in: <div class="d-flex">
Another approach would be using row and column of bootstrap, as in
<div class="row">
<div class="col">
Input here..
</div>
<div class="col">
Button here..
</div>
</div>
refs: Bootstrap Grid, Bootstrap flexbox,
Bootstrap Forms
add following code in css:
.col-4{
display:flex;
align-items:center;
justify-content:space-between;
width:300px;
height:auto;
border:1px solid #000;
border-radius:5px;
}
.col-4 input{
width:250px;
height:100%;
font-size:1rem;
border:none;
padding:1rem 0.4rem;
outline:none;
}
.col-4 a{
height:fit-content;
}
.col-4 a img{
width:40px;
height:40px
}
<div class="col-4">
<input class="form-control" type="text" placeholder="Menge" name="txt_menge[]" value="3">
<img src="../img/add-icon.png"/>
</div>
Here is what my webpage looks like:
As I highlighted in the picture, I'm trying to move the balance element to the right side.
I am trying to use the display:inline-block tag to do this.
Here is my CSS and HTML... what am I doing wrong?
CSS:
/* Game box */
.gamebox{
height: auto;
margin: 20px;
padding: 20px;
width: 50%;
font-family: "smooth";
background-color: white;
color: black;
box-shadow: 4px 4px lightgray;
display:inline-block;
}
/* Balance box */
.balance{
height: auto;
margin: 20px;
padding: 20px;
width: 50%;
font-family: "smooth";
background-color: white;
color: black;
box-shadow: 4px 4px lightgray;
display:inline-block;
}
HTML:
<body>
<div class="noselection">
<ul class="topnav">
<li><a class="active" href="#home"><i class="fa fa-rocket" aria-hidden="true"></i> Play</a></li>
<li><i class="fa fa-btc" aria-hidden="true"></i> Deposit</li>
<li><i class="fa fa-btc" aria-hidden="true"></i> Withdraw</li>
<li><i class="fa fa-university" aria-hidden="true"></i>Faucet</li>
<li><i class="fa fa-life-ring" aria-hidden="true"></i>Help & Support</li>
<?php echo $accountButton; ?>
<li class='right' id="top-balance"><a href=''></a></li>
</ul>
<div class="gamebox">
<h1><i class="fa fa-btc" aria-hidden="true"></i>itcoin dice game</h1>
<div class="error" id="error">You don't have anymore bitcoins left. Why not deposit some more?</div>
<form id="index">
Bet
<br>
<span>
<input id="userbet" onkeyup="checkBet()" value="100" type="text" name="bet" autocomplete="off">
<span id="beterror" class="errortext">That bet is not a valid bet.</span>
<span id="x2" class="timestwo" onclick="doubleBet()">x2</span>
<span id="/2" class="dividetwo" onclick="divideBet()">/2</span>
</span>
<br>
<span>
Chance<br>
<input id ="userchance" onkeydown="checkChance()" value="50" type="text" name="chance" autocomplete="off">
<span id="chanceerror" class="errortext">That is not a valid chance.</span>
</span>
<br>
<h3 id="payout">Payout: Loading...</h3>
<script>var username = <?php echo json_encode($_SESSION['username']); ?>;</script>
<script>var hash = <?php echo json_encode($_SESSION['hash']); ?>;</script>
<button type="button" id="dicebutton" onclick="prepareRoll(username, hash);" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button>
</form>
<button type="button" id="autobet" onclick="setAutoBet(true)"><i class="fa fa-rocket" aria-hidden="true"></i> Autobet</button>
<div class="autobet-mode" id="autobet-mode">
<h3 id="auto-bet-start-text">Please set your auto bet settings, then click 'Start rolling'!".</h3>
<button type="button" id="start-autobet" onclick="startAutoBet()">Start rolling!</button>
</div>
</div>
<div class="balance">
<h3 id="balance">Balance: Loading...</h3>
</div>
</div>
<?php echo $script; ?>
</body>
UPDATE:
Reducing the .balance width to 40% fixed the issue, but how can I now force it up?
Try this code
add box-sizing: border-box; property to both the classes.
CSS
.gamebox, .balance{
box-sizing: border-box;
}
hope this helps..
you are looking for below structure,
what happens here is when you apply fixed width to div and them apply padding and margin so your element width gets increased
so better you create another child container and assign padding margin over there
.gamebox, .balance{
width: 50%;
float: left;
height: 100px;
}
.gamebox-inner, .balance-inner{
border: 1px solid red;
padding: 10px;
margin: 10px;
background-color: #ddd;
}
<div class="gamebox">
<div class="gamebox-inner">
a
</div>
</div>
<div class="balance">
<div class="balance-inner">
b
</div>
</div>
You can try flexbox as follows.
<div id="container">
<div class ="first">first</div>
<div class="second">second</div>
</div>
#container {
width: 200px;
height: 300px;enter code here
border: 1px solid black;
backgroud-color:red;
display:flex;
}
.first {
background-color:blue;
width:50px;
height:50px;
flex:1;
}
.second {
background-color:green;
width:50px;
height:50px;
flex:2;
}
I have some centered input boxes.
I am trying to add text to the right side of the bet box. Here is what happens when I do:
How can I fix this? I am using the span element to put them on the same line. What CSS property can fix this?
CODE:
HTML:
<div class="paper">
<h2>Play</h2>
<div class="gamebox">
<h1><i class="fa fa-btc" aria-hidden="true"></i>itcoin dice game</h1>
<div class="error" id="error">You don't have anymore bitcoins left. Why not deposit some?</div>
<h3 id="balance">Balance: 1000BTC</h3>
<form>
Bet
<br>
<span>
<input id="userbet" onchange="checkBet()" value="1" type="text" name="bet">Error, that bet is not valid.
</span>
<br>
Chance<br>
<input id ="userchance" value="50" type="text" name="chance">
<br>
<h3>Payout: 0BTC</h3>
<button type="button" id="dicebutton" onclick="prepareRoll()" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button>
</form>
<button type="button" id="autobet">Autobet</button>
</div>
</div>
CSS:
input[type=text] {
width: 20%;
padding: 12px 20px;
margin : 0 auto;
box-sizing: border-box;
border: 1px solid #555;
text-align: center;
display: inline-block;
}
Make a span around the other text and set it's position to absolute.
https://jsfiddle.net/xuhdy7Lc/
I'm was just passing my time by working on random code of HTML and CSS where I have a div which has class .box and has an Image, Text and a Form in it with input boxes.
I found that when I provide text-align: center; to my parent, all elements comes in the center.
I can't understand what's happening here and why Image and Input boxes react text on text-align: center;
here is the codepen link to my code http://codepen.io/rhulkashyap/pen/MKvzzZ
#import url(https://fonts.googleapis.com/css?family=Roboto);
body{
margin:0;
font-family: 'Roboto', sans-serif;
}
.box{
width:500px;
border:1px solid #ccc;
margin:40px auto;
text-align:center;
padding:20px;
border-radius:5px;
}
<div class="box">
<img src="http://minions-2015.gloryone.pl/it/gfx/images/delivery/minion_1.png" alt="" width="200"/>
<h1>Hello Universe</h1>
<form>
<input type="text" placeholder="Username"/> <br />
<input type="text" placeholder="Password"/> <br />
<input type="submit" value="Login"/>
</form>
</div>
From the CSS specification:
This property describes how inline-level content of a block container is aligned. https://www.w3.org/TR/CSS2/text.html#alignment-prop
All inline and inline-block elements (input, img) are affected of text-align!
You can avoid this by using display:block; for the inner elements (like form, h1, div).
#import url(https://fonts.googleapis.com/css?family=Roboto);
body{
margin:0;
font-family: 'Roboto', sans-serif;
}
.box{
width:500px;
border:1px solid #ccc;
margin:40px auto;
text-align:center;
padding:20px;
border-radius:5px;
}
input {
display:block;
}
<div class="box">
<img src="http://minions-2015.gloryone.pl/it/gfx/images/delivery/minion_1.png" alt="" width="200"/>
<h1>Hello Universe</h1>
<form>
<input type="text" placeholder="Username"/>
<input type="text" placeholder="Password"/>
<input type="submit" value="Login"/>
</form>
</div>
A Test Case
div {
border:1px dashed #000;
text-align:center;
width:500px;
}
.block {
display:block;
}
.inline {
display:inline;
}
<div>
<input type="text" value="standard: inline-block">
<input type="text" class="block" value="with display:block">
<input type="text" class="inline" value="with display:inline">
</div>
When you pass text-align: center, it means that the data inside particular div will be placed center according to a rule. Data can be anything, it can be image, text or input box. Your elements are coming in center because all the inline elements are effected by "text-align: center". Please have a look on the following url https://www.w3.org/Style/Examples/007/center.en.html
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph. This text has no alignment specified.</p>
<div style="text-align:center;border:1px solid red">
This is some text in a div element!
</div>
<p>This is a paragraph. This text has no alignment specified.</p>
</body>
</html>
I am trying to apply a background image for a button inside the form. The code work and seems perfect in all browsers (Chrome, FF, Opera and Safari). But, in IE8(the only version i have checked), the image is getting repeated. I am trying to follow standard and simple HTML and CSS but this is really annoying. Please see the picture below
Following is the HTML
<div id="header">
<div id="TopHead">
<div id="logo">
<a href="/" alt="eyaas">
<img src="logo.gif" alt="eyaas" />
</a>
</div>
<div id="country">India | Rest of the World
</div>
<div id="linksAndSearch">
<div id="linksTop">My Account | Login | Register | Cart
</div>
<div id="searchBar">
<form id="search_mini_form" action="" method="get" class="search">
<div class="searchBox">
<input id="Text1" type="text" name="" class="searchBoxDefaultText jsSearchTerm jsToggle" value="" />
</div>
<div class="searchButton">
<button type="submit" title="" class="searchBoxSubmitButton" />
</div>
<div class="clear"></div>
</form>
</div>
</div>
<div class="clear"></div>
</div>
<div id="TopNav">
</div>
</div>
Following is the CSS
#linksAndSearch { float:left; }
.search { width:393px; height:35px; background-image:url('SearchBoxGrayFrameText.gif'); }
.searchBox { float:left; margin:6px 0 0 65px; background-image:url('SearchBoxFramed.gif'); width:275px; height:23px; overflow:hidden; }
.searchBox .searchBoxDefaultText { width:257px; height:19px; margin:2px 0 0 5px; font-size:15px; color:#CCC; }
.searchButton { float:left; margin:6px 0 0 10px; }
.searchBoxSubmitButton { width:29px; height:23px; background-image:url( SearchSubmitBtnYellowArrow.gif); background-repeat:no-repeat; }
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
u refer this site, i think its may be useful for you,
The problem was solved by
<button type="submit" title="" class="searchBoxSubmitButton"/>
to
<button type="submit" title="" class="searchBoxSubmitButton"></button>
Can someone elaborate on the issue as to why this was happening ?