i want to make table content look like as shown in pic:-
but i get content alignment issue as shown in my code.
<form class="abc" id="abc" action="/" accept-charset="UTF-8" method="post">
<div>
<div class="wrapper-class">
<span>
<input type="radio" value="true" name="abc[status]" id="abc_status_true">
<label for="abc_approve">Approve</label>
</span>
<span>
<input type="radio" value="false" name="abc[status]" id="abc_status_false">
<label for="abc_reject">Reject</label>
</span>
</div>
</div>
<div>
<input type="submit">
</div>
</form>
You can change from span tag to div tag, and display Submit button on the right by display flex as
.wrapper-class{
padding: 10px;
}
.form{
display:flex;
align-items: center;
width: 100%;
height: 100%;
}
/*
.wrapper-class, .submit{
display: inline-block;
width: 100px;
}
*/
.wrapper-class{
padding: 10px;
}
.form{
display:flex;
align-items: center;
width: 100%;
height: 100%;
}
<form class="abc" id="abc" action="/" accept-charset="UTF-8" method="post">
<div class="form">
<div class="wrapper-class">
<div>
<input type="radio" value="true" name="abc[status]" id="abc_status_true">
<label for="abc_approve">Approve</label>
</div>
<div>
<input type="radio" value="false" name="abc[status]" id="abc_status_false">
<label for="abc_reject">Reject</label>
</div>
</div>
<div>
<input type="submit">
</div>
</div>
</form>
Related
I want to style Forget Password element so that it appears in the right side. This is possible with width set to 100% but I'm also observing that the empty space before the text is also carrying the link property. I tried using width as 50%, but this pushes the text back to the left side. How can I achieve what I want?
#forgotP {
color: blue;
text-decoration: none;
display: block;
width: 50%;
text-align: right;
font-size: 12px;
font-weight: 300;
}
<div class="box">
<form autocomplete="off">
<input type="text" id="username" name="username" placeholder="Username"><br>
<p>Forgot Password?</p>
<input type="password" id="password" name="password" placeholder="Password"><br>
<input type="button" value="Register" id="register" class="inline">
<input type="button" value="Login" id="login" class="inline">
</form>
</div>
You can use CSS flexbox to get it done.
.box {
width: max-content;
}
p {
display: flex;
justify-content: flex-end;
}
#forgotP {
color: blue;
text-decoration: none;
font-size: 12px;
font-weight: 300;
}
<body>
<div class="box">
<form autocomplete="off">
<input type="text" id="username" name="username" placeholder="Username"><br>
<p>Forgot Password?</p>
<input type="password" id="password" name="password" placeholder="Password"><br>
<input type="button" value="Register" id="register" class="inline">
<input type="button" value="Login" id="login" class="inline">
</form>
</div>
</body>
EDIT
add CSS code
p {
display: flex;
justify-content: flex-end;
}
how can I align the labels & inputs to the right
like that all of then appear in the same line
.radioContainer{
width: fit-content;
margin: 5px;
margin-top: 20px;
background-color: aqua;
padding-bottom: 25px;
}
<div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; ">
<label class="title" for="">fav food</label>
<label for="burger">burger</label>
<input type="checkbox" id="burger">
<br>
<label for="fries">fries</label>
<input type="checkbox" id="fries">
<br>
<label for="onionRings">onion rings</label>
<input type="checkbox" id="onionRings">
<br>
<label for="cackes">cakes</label>
<input type="checkbox" id="cackes" >
<small></small>
</div>
To have them in the same line, I would start by removing <br /> from your code. Then set the css for input and label to be inline-block, something like:
.radioContainer{
width: fit-content;
margin: 5px;
margin-top: 20px;
background-color: aqua;
padding-bottom: 25px;
}
label, input { display: inline-block; }
<div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; ">
<label class="title" for="">fav food</label>
<label for="burger">burger</label>
<input type="checkbox" id="burger">
<label for="fries">fries</label>
<input type="checkbox" id="fries">
<label for="onionRings">onion rings</label>
<input type="checkbox" id="onionRings">
<label for="cackes">cakes</label>
<input type="checkbox" id="cackes" >
<small></small>
</div>
To make all inputs inline, just remove all the <br /> tags.
Example:
<div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; ">
<label class="title" for="">fav food</label>
<label for="burger">burger</label>
<input type="checkbox" id="burger">
<label for="fries">fries</label>
<input type="checkbox" id="fries">
<label for="onionRings">onion rings</label>
<input type="checkbox" id="onionRings">
<label for="cackes">cakes</label>
<input type="checkbox" id="cackes">
<small></small>
</div>
Codepen: https://codepen.io/manaskhandelwal1/pen/jOMeqex
I understood your Question that you want them still below each other but aligned to the right side. So i made a solution using flexbox instead of the hard breaks. I commented the Code where i made changes and why, html and css.
Basically i used a colum and put each item-combination (label and checkbox)in a new row-div.
.radioContainer{
width: fit-content;
margin: 5px;
margin-top: 20px;
background-color: aqua;
padding-bottom: 25px;
/*make item a flexbox-container*/
display: flex;
/*combination of flex-direction and flex-wrap*/
flex-flow: column wrap;
}
.row{
/*make item a flexboc container*/
display: flex;
/*flex-flow: row nowrap; this is the default value of flex, which is why you dont need it,
just wanted to leave it in as a comment so you know whats happening*/
/*Align the contents on the end of each row*/
justify-content: flex-end;
}
<div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; ">
<!--removed the hard breaks and added row-divs around each item combination-->
<div class="row">
<label class="title" for="">fav food</label>
</div>
<div class="row">
<label for="burger">burger</label>
<input type="checkbox" id="burger">
</div>
<div class="row">
<label for="fries">fries</label>
<input type="checkbox" id="fries">
</div>
<div class="row">
<label for="onionRings">onion rings</label>
<input type="checkbox" id="onionRings">
</div>
<div class="row">
<label for="cackes">cakes</label>
<input type="checkbox" id="cackes" >
</div>
<small></small>
</div>
I am trying to place some radio buttons over an image at an exact location. I have placed both in a Div but I am not sure what to do next. Here is where I want the radio buttons to be placed (red circles):
Here is my code so far:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
body {
background-color: #979797
}
<div class="general">
<img src="https://via.placeholder.com/300" class="center">
<form action="">
<input type="radio" name="answer 1" value="apple">
<input type="radio" name="answer 2" value="chicken">
<input type="radio" name="answer 3" value="carrot">
</form>
</div>
Thank you so much in advance!
I would put the radio buttons in one div each and then give the div a background. Like this:
<html>
<head>
<style>
.general{}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.radio-size {
height: 100px;
width: 100px;
}
.bg-apple {
background-image:url('https://images.unsplash.com/photo-1513677785800-9df79ae4b10b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
}
.bg-chicken {
background-image:url('https://images.unsplash.com/photo-1426869981800-95ebf51ce900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
}
.bg-carrot {
background-image:url('https://images.unsplash.com/photo-1445282768818-728615cc910a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
}
</style>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body bgcolor="#979797">
<div class="general">
<img src="https://images.unsplash.com/photo-1518796745738-41048802f99a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="center" style="width:20%;" >
<form action="" style="background-img:url("")">
<div class="radio-size bg-apple">
<input type="radio" name="answer 1" value="apple">
</div>
<div class="radio-size bg-chicken">
<input type="radio" name="answer 1" value="chicken"> <br>
</div>
<div class="radio-size bg-carrot">
<input type="radio" name="answer 1" value="carrot">
</div>
</form>
</div>
</body>
</html>
note: The radio-buttons are all supposed to have the same "name" atribute, so that you can only choose one of them. If you want to be able to select multiple options, you should use checkbox instead.
Even though you say you want them over your image, in the picture you shared the radio buttons appear to be on the right side of the image. So i am a bit confused about what you actually want.
But i made a simple example below. You can position them how you like or comment below if you want my help.
P.S. as i said in my comment : The <body> bgcolor attribute is not supported in HTML5. Use CSS instead.
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
body {
background-color: #979797
}
form {
position:absolute;
right: 25%;
top: 50%;
transform:translateY(-50%) translateX(100%);
display: flex;
flex-direction: column;
}
.general {
position: relative;
}
<div class="general">
<img src="http://via.placeholder.com/640x360" class="center">
<form action="">
<input type="radio" name="answer 1" value="apple">
<input type="radio" name="answer 2" value="chicken">
<input type="radio" name="answer 3" value="carrot">
</form>
</div>
You can use the following solution using flexbox:
body {
background:#979797;
}
.question {
display:flex;
flex-direction:row;
flex-wrap:nowrap;
}
.answers {
display:flex;
flex-direction:column;
}
label.answer {
position:relative;
height:100px;
}
label.answer input[type="radio"] {
top:0;
left:0;
position:absolute;
}
<form action="">
<h2>Question 1:</h2>
<div class="question">
<img src="https://picsum.photos/300">
<div class="answers">
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer1" value="apple">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer1" value="chicken">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer1" value="carrot">
</label>
</div>
</div>
<h2>Question 2:</h2>
<div class="question">
<img src="https://picsum.photos/300">
<div class="answers">
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer2" value="apple">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer2" value="chicken">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer2" value="carrot">
</label>
</div>
</div>
</form>
I think you should try the following type of code for the above query. I have changed you HTML structure and have changed your current CSS completely:
.general{
width: fit-content;
}
.img{
display: flex;
align-items: end;
}
img{
border: 1px solid black;
}
body {
background-color: #979797
}
.options{
display: flex;
flex-direction: column;
}
.radio{
position: relative;
height: 50px;
}
input[type="radio"]{
position: absolute;
top: calc(50% - 4px);
right: 0;
margin: 0;
}
<div class="general">
<form action="">
<div class="img">
<img src="https://via.placeholder.com/150" class="center">
<div class="options" class="center">
<div class="radio">
<img src="https://via.placeholder.com/50">
<input type="radio" name="answer1" value="apple">
</div>
<div class="radio">
<img src="https://via.placeholder.com/50">
<input type="radio" name="answer1" value="chicken">
</div>
<div class="radio">
<img src="https://via.placeholder.com/50">
<input type="radio" name="answer1" value="carrot">
</div>
</div>
</div>
</form>
</div>
Remember that if the questions only have a single answer then, the name of the radio box should be same and the value should be different. Otherwise, all the radio buttons will get selected simultaneously and cannot be unselected.
I hope this code is helpful.
Thanks.
I was wandering if there is a way to center the password and username tab under eachother? Also if you see a way to make this code shorter pleas tell me. I am a noob at html so there is probably some wrongs in this code. Ty before hand, Lukas Mocko!
p.mom {
padding-top: 16em
}
p.dad {
padding-top: 1em
}
p.car {
padding-left: 56.5em
}
p.car {
padding-top: 1em
}
<center>
<head>
<style>
</style>
<form method="post" action="index.php" name="loginform">
<p class="mom">
<label for="login_input_username">имя пользователя</
</p class="mom">
<input id="login_input_username" class="login_input" type="text
name="user_name" required />
<p class="dad">
<label
for="login_input_password"> пароль</label>
<input id="login_input_password" class="login_input" type="password" name="user_password" autocomplete="off" required />
</p class="dad">
</center>
<p class="car">
<input type="submit" name="login" value="авторизоваться" />
</p class="car">
</form>
</head>
you can use display: flex; property of css to do this
HTML
<form method="post" action="index.php" name="loginform">
<div>
<label for="login_input_username">имя пользователя</label>
<input id="login_input_username" class="login_input" type="text" name="user_name" required />
</div>
<div>
<label for="login_input_password">пароль</label>
<input id="login_input_password" class="login_input" type="password" name="user_password" autocomplete="off" required />
</div>
<div>
<input type="submit" name="login" value="авторизоваться" />
</div>
</form>
CSS:
form{
flex: 1;
display: flex;
height: 250px;
align-items: center;
flex-direction: column;
justify-content: center;
}
form div{
margin-bottom: 10px;
}
form div label{
display: flex;
}
form div button{
display: flex;
}
You can use this code.
HTML:
<form method="post" action="index.php" name="loginform">
<div>
<label for="login_input_username">имя пользователя</label>
<input id="login_input_username" class="login_input" type="text" name="user_name" required />
</div>
<div>
<label for="login_input_password">пароль</label>
<input id="login_input_password" class="login_input" type="password" name="user_password" autocomplete="off" required />
</div>
<div>
<input type="submit" name="login" value="авторизоваться" />
</div>
</form>
CSS:
form{
flex: 1;
display: flex;
height: 250px;
align-items: center;
flex-direction: column;
justify-content: center;
}
form div{
margin-bottom: 10px;
}
form div label{
display: flex;
}
form div button{
display: flex;
}
You can try this:
<form method="post" action="index.php" name="loginform">
<div style="align-items:center; display: flex; flex-direction: column;">
<div>
<label for="login_input_username">имя пользователя</label><br/>
<input id="login_input_username" class="login_input" type="text"
name="user_name">
</div>
<div>
<label
for="login_input_password">пароль</label><br/>
<input id="login_input_password" class="login_input" type="password"
name="user_password" autocomplete="off" required />
</div>
<div>
<br />
<input type="submit" name="login" value="авторизоваться" />
</div>
</div>
</form>
p.dad, .car {
padding-top: 1em;
}
/* center div */
.form-center{
margin: auto;
width: 50%;
text-align: center;
}
<div class="form-center">
<form method="post" action="index.php" name="loginform">
<p class="mom">
<label for="login_input_username">имя пользователя</label>
</p>
<input id="login_input_username" class="login_input" type="text" name="user_name" required />
<p class="dad">
<label for="login_input_password">пароль</label>
</p>
<input id="login_input_password" class="login_input" type="password" name="user_password" autocomplete="off" required />
</center>
<p class="car">
<input type="submit" name="login" value="авторизоваться" />
</p>
</form>
</div>
EDITED: I change code.
CSS
form {
text-align:center;
}
table{margin: auto;}
HTML
<form method="post" action="index.php" name="loginform">
<table>
<tbody><tr>
<td><label for="login_input_username">имя пользователя</label></td>
<td><input id="login_input_username" class="login_input" type="text" name="user_name" required=""></td>
</tr>
<tr>
<td> <label for="login_input_password">пароль</label></td>
<td> <input id="login_input_password" class="login_input" type="password" name="user_password" autocomplete="off" required=""></td>
</tr>
</tbody></table>
</form>
I have 2 divs that I want to position close together, however they keep moving eachother. They are both under the main div.
HTML:
<div id="header">
<div id="title">Social</div>
</div>
<div id="main">
<div id='notif'><strong>Incorrect details.</strong>
</div>
<div id="signin">
<form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
<p>
<input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
</p>
<p>
<input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
</p>
<p>
<input type="checkbox" name="remember" id="remember" value="checked">
<label for="remember">Remember me</label>
</p>
<p>
<input class="button" type="submit" value="Sign in">
</p>
</form>
</div>
</div>
The CSS is as follows:
Main body which both divs comes under:
#main {
padding-top: 50px;
}
Form div:
#signin {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
margin: auto;
margin-top: 150px;
}
Error div:
#notif {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
height: 20px;
margin: auto;
margin-top: 140px;
}
I know that perhaps it has something to do with the position attribute..
Here is an image of what it looks like now, as you can see, I want both of the center objects to be close together without pushing each other away from the vertical center.
remove the margin-top from the #signin div - as this is what is putting pixels between the #notif div and the #signin div.
#main {
padding-top: 50px;
}
#signin {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
margin: auto;
}
#notif {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
height: 20px;
margin: auto;
margin-top: 140px;
}
<div id="header">
<div id="title">Social</div>
</div>
<div id="main">
<div id='notif'><strong>Incorrect details.</strong>
</div>
<div id="signin">
<form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
<p>
<input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
</p>
<p>
<input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
</p>
<p>
<input type="checkbox" name="remember" id="remember" value="checked">
<label for="remember">Remember me</label>
</p>
<p>
<input class="button" type="submit" value="Sign in">
</p>
</form>
</div>
</div>
Debugging
In this sort of situation, your page inspector is going to be your best friend.
In chrome, for example, when the page inspector is open, hovering an element will show you the margins of the element, as well as any padding being given to it.