If i edit the margin-left from 1 div, the form(div) moves also. How can i fix this? I want to have like 3 columns with some text.
#loginwrapper {
width: 240px;
height: 305px;
float: left;
margin-left: 25px;
background: #8FB0BF;
padding: 5px;
}
<div id="loginwrapper">
<div id="login" align="left">
<input name="naarlogin" type="button" id="loginn_btn" value="Klanten Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Registreren" />
<br></br>
<input name="naarlogin" type="button" id="loginn_btn" value="Instructeurs Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Instructeurs Registreren" />
<br></br>
</div>
</div>
If understand correctly, you want to edit each DIV individually?
in that case at the moment you can't as the div id="loginwrapper" is a div that controls all of your code. if you want to edit input manually give them a class and edit them in css
for example
#loginwrapper {
width: 240px;
height: 305px;
float: left;
margin-left: 25px;
background: #8FB0BF;
padding: 5px;
}
.input_one{ <----this is the class name of the input (this can be anything you like)
margin-right: 25px !important
}
<div id="loginwrapper">
<div id="login" align="left">
<input name="naarlogin" type="button" id="loginn_btn" value="Klanten Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Registreren" />
<br></br>
<input name="naarlogin" type="button" id="loginn_btn" value="Instructeurs Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Instructeurs Registreren" />
<br></br>
</div>
</div>
Related
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
I am adding buttons in an html form. There is an issue where the margin keeps growing by the width of the margin plus the width of the button on the previous row, as below:
I'm trying to make it so that all the buttons have an equal margin from the left.
My html looks like this:
<form class="my-form" id="atlas-info">
<div id="property-header">Atlas Settings</div>
<hr />
<div class="form-group" id="tag-entry">
<label>Select tagging group: </label>
<br />
<input type="text" name="name" id="tree">
</div>
<div class="input-group">Dynamic key: </div>
<button type="button" class="dynamic-key-button" id="filter-setting"></button>
<label class="dynamic-key-text">Show if / show if not</label>
<br />
#*below should not be hard coded, needs to be a loop of some sort*#
<button type="button" class="dynamic-key-button" id="organisation"></button>
<label class="dynamic-key-text">Organisation</label>
<br />
<button type="button" class="dynamic-key-button" id="job-executor"></button>
<label class="dynamic-key-text">Job executor</label>
<br />
<button type="button" class="dynamic-key-button" id="job-step"></button>
<label class="dynamic-key-text">Job step</label>
<br />
<button type="button" class="dynamic-key-button" id="product"></button>
<label class="dynamic-key-text">Product</label>
<br />
</form>
And my CSS as below:
.dynamic-key-button {
height: 20px;
width: 20px;
border-radius: 10px;
border: solid;
cursor: pointer;
padding-bottom: 12px;
float: left;
transition-duration: 0.4s;
margin-left: 9px;
}
Any help would be appreciated.
just add display:block; and remove float:left;
check the snippet
.dynamic-key-button {
display:block;
height: 20px;
width: 20px;
border-radius: 10px;
border: solid;
cursor: pointer;
padding-bottom: 12px;
transition-duration: 0.4s;
margin-left: 9px;
}
<form class="my-form" id="atlas-info">
<div id="property-header">Atlas Settings</div>
<hr />
<div class="form-group" id="tag-entry">
<label>Select tagging group: </label>
<br />
<input type="text" name="name" id="tree">
</div>
<div class="input-group">Dynamic key: </div>
<button type="button" class="dynamic-key-button" id="filter-setting"></button>
<label class="dynamic-key-text">Show if / show if not</label>
<br /> #*below should not be hard coded, needs to be a loop of some sort*#
<button type="button" class="dynamic-key-button" id="organisation"></button>
<label class="dynamic-key-text">Organisation</label>
<br />
<button type="button" class="dynamic-key-button" id="job-executor"></button>
<label class="dynamic-key-text">Job executor</label>
<br />
<button type="button" class="dynamic-key-button" id="job-step"></button>
<label class="dynamic-key-text">Job step</label>
<br />
<button type="button" class="dynamic-key-button" id="product"></button>
<label class="dynamic-key-text">Product</label>
<br />
</form>
<form action="https://www.kroger.com/account/communityrewards/" >
<input type="submit" value="Go to Krogers" style="height: 50px; width: 150px;" />
</form>
I'm just curious of how to make the forum action text bigger.
By setting font-size on input (or cascading it down from form):
input {
font-size: 20px;
}
<form action="https://www.kroger.com/account/communityrewards/">
<input type="submit" value="Go to Krogers" style="height: 50px; width: 150px;" />
</form>
You can also use rem units which is relative to only the root element
input {
font-size: 1.25rem;
}
<form action="https://www.kroger.com/account/communityrewards/">
<input type="submit" value="Go to Krogers" style="height: 50px; width: 150px;" />
</form>
So, I've got a requirement to have two forms in a dialog, where there are four sections.
I'll attach an image.
I want the first form to contain the orange blocks, and the second form to contain only the green block.
Is there any way to achieve this?
Forms are natively blocks, so that means that if I try, the green block will be put below the bottom-left block, which is now what I want.
In short
.outer {
width: 224px;
}
.inset {
float: left;
margin: 6px;
padding: 6px;
background-color: green;
width: 200px;
}
.outset {
float: left;
margin: 6px;
padding: 6px;
background-color: orange;
width: 200px;
}
<div class="outer" style="width:448px;">
<form action="login.php" method="post">
<div class="outer" style="float: left;">
<div class="outset" style="height: 100px;">Top Left
<input type="text" name="user">
</div>
<div class="outset" style="height: 50px;">Bottom Left
<input type="password" name="password">
</div>
</div>
<div class="outer" style="float: left;">
<div class="outset" style="height: 50px;">Top Right
<input type="submit" value="Login">
</div>
</div>
</form>
<form action="register.php" method="post">
<div class="inset" style="height: 100px;">Bottom right
<input type="text" name="user">
<input type="password" name="password">
<input type="submit" value="Register">
</div>
</form>
</div>
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.
I have two queries as stated below:-
1) I want to move the blue colored rectangular box (containing username and password text fields) to the center of the page. I tried using   to change the location of the rectangular box but strange, it is not moving at all.Is there any parameter in HTML which can help me shift this box to the center of the page? Can anyone suggest me how can I achieve this?
2) The BORDER = 8 parameter is not working as here I want to set a dark black colored border around my rectangular box. Can anyone suggest what can be the cause of this issue?
To replicate the issue which I am facing, copy the below codes in a .TXT file and save it as .HTML file. Open in IE or Firefox browser to see the issue which I am getting.
Code:
<html>
<form id="login" action="index.html">
<div style="width: 450px; height: 250px; background: blue;BORDER=8"><br/><br/><br/>
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/><br/> <br/>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18"/> <br/><br/><br/>
<input type="submit" value="Submit">
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form"/>  
</div><br/><br/>
</form>
</html>
if you only want to center horizontally try with: margin:0 auto;
http://jsfiddle.net/P2rQK/
<div style="width: 450px; height: 250px; background: blue;margin:0 auto;">
<form id="login" action="index.html">
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18" />
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</form>
</div>
It is bad to use to position elements. also <br /> is not a "clean" way.
If you want truly dynamic positioning, use the below which is not reliant on specifying dimensions. Critically it uses a CSS tabulated layout to do the position calculations. The border can be achieved by giving your form a border:8px solid black;
You should also move your styles out from being specified inline- and use CSS to control your layout instead of reliance on so much HTML (such as ).
Demo Fiddle
HTML
<div class='table'>
<div class='cell'>
<form id="login" action="index.html">
<label>Username:</label>
<input type="text" name="userid" size="18" maxlength="18" />
<br />
<label>Password :</label>
<input type="password" name="pswrd" size="18" maxlength="18" />
<br />
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</form>
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
label {
font-weight:bold;
margin-right:10px;
}
.table {
display:table;
text-align:center;
width:100%;
height:100%;
table-layout:fixed;
}
.cell {
display:table-cell;
vertical-align:middle;
}
form {
display:inline-block;
border:8px solid black;
width: 450px;
padding:50px 0;
background: blue;
}
input {
margin-bottom:15px;
}
although this is not a js-question:
<div style="position: absolute; left: 50%; margin-left: 225px; width: 450px; height: 250px; background: blue; border: 8px solid black"> content </div>
position absolute, left 50% and margin-left: -225px (half width) will position the box in the middle of the screen.
border: 8px solid black is the right way to define a border of 8px width
You will need to add margin: 0 auto; to your blue box.
Look at this Demo
<div style="border-width:8px;border-color:red;border-style:solid;width:450px;height:1050px;background-color:gold;"> content </div>
I would advise using a lot more CSS and less use of the and <br>.
` <html>
<style>
#login {
left: 50%;
width: 200px;
margin-left: -225px;
position: relative;
}
div {
width: 450px;
height: 250px;
background: blue;
border:8px solid #000;
padding:20px;
}
</style>
<form id="login" action="index.html">
<div>
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/><br>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18"/><br>
<input type="submit" value="Submit"><br>
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</div>
</form>
</html>`
Try playing around with margins to get the positioning correct.