Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
i am tying to have the h3 aligned with the form so the form goes to the right and the h3 to the left and both of them to be centered ?
<section style="background-color: #00CDCF; background-image: url(./images/services/contact.jpg);">
<div id="newsletterform">
<div class="wrap">
<h3 style="color:#EF7F1A;">Subscribe to our Newsletter</h3>
<form action="send.php" method="post" id="newsletter" name="newsletter"><input type="email" name="signup-email" id="signup-email" value="" placeholder="Insert email here" /><input type="submit" value="Subscribe" name="signup-button" id="signup-button">
<div id="response"></div>
</form>
</div>
</div>
</section>
use flex and learn more about flexbox
.wrap {
display: flex;
align-items: center;
justify-content: space-between;
}
<section style="background-color: #00CDCF; background-image: url(./images/services/contact.jpg);">
<div id="newsletterform">
<div class="wrap">
<h3 style="color:#EF7F1A;">Subscribe to our Newsletter</h3>
<form action="send.php" method="post" id="newsletter" name="newsletter"><input type="email" name="signup-email" id="signup-email" value="" placeholder="Insert email here" /><input type="submit" value="Subscribe" name="signup-button" id="signup-button">
<div id="response"></div>
</form>
</div>
</div>
</section>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Goal
Inside a form, I want to align my row-based fields so that the title of the field is left-aligned, but the inputs are right-aligned.
My form looks like this
<form class="settings", id="settings", onsubmit="OnSubmit();">
<label class="section-title">Basic</label>
<div class="separator"></div>
<section class="setting">
<div class="field">
<span class="field-title">Name: </span>
<span class="entry-group">
<label class="entry-underlined">
<input name="myfield" class="entry" type="number" min="1024", max="65535", placeholder="12345" required>
</label>
</span>
</div>
</section>
.....
<form/>
So for example, I'd love the span.field-title to left align, but the input "myfield" to right align.
Attempts
I've tried many solutions such as flex and align-content, but none worked for me, including
input.entry {
display: flex;
justify-content: flex-end;
float: right;
vertical-align: middle;
}
Question
I need a general direction and working solution of such tasks because it seems an area to revisit often.
Something like this??
.field {
display: flex;
justify-content: space-between;
}
<form class="settings" , id="settings" , onsubmit="OnSubmit();">
<label class="section-title">Basic</label>
<div class="separator"></div>
<section class="setting">
<div class="field">
<span class="field-title">Name: </span>
<span class="entry-group">
<label class="entry-underlined">
<input name="myfield" class="entry" type="number" min="1024", max="65535", placeholder="12345" required>
</label>
</span>
</div>
</section>
<form/>
Are you looking for the input-field to be aligned right or the input value text?
Check this very basic example
input[type=number] {
text-align:right;
}
.field2 {
width:500px;
background:grey;
}
.entry2 {
float:right;
}
<form class="settings", id="settings", onsubmit="OnSubmit();">
<label class="section-title">Basic</label>
<div class="separator"></div>
<section class="setting">
<div class="field">
<span class="field-title">Name: </span>
<span class="entry-group">
<label class="entry-underlined">
<input name="myfield" class="entry" type="number" min="1024", max="65535", placeholder="12345" required>
</label>
</span>
</div>
</section>
.....
</form>
<form class="settings", id="settings", onsubmit="OnSubmit();">
<label class="section-title">Basic</label>
<div class="separator"></div>
<section class="setting">
<div class="field2">
<span class="field-title">Name: </span>
<span class="entry-group">
<label class="entry-underlined">
<input name="myfield" class="entry2" type="number" min="1024", max="65535", placeholder="12345" required>
</label>
</span>
</div>
</section>
.....
</form>
How can I have a form on one side of the container and a text-paragraph on the other side? I figured if I put it all in a container with one row of two columns it would work but for some reason, the paragraph text shows up under the form on the left side.
This is a screenshot of what's happening based on the code I have right now.
<div class="container-section getintouch">
<h1 class="text-center">Say hello?</h1>
<div class="row">
<div class="col-xs-6">
<form>
<div class="form-group">
<input type="text" class="form-control no-border
placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control no-border"
placeholder="Email">
</div>
<textarea class="form-control no-border" rows="5" id="comment"></textarea>
</div>
</form>
</div>
<div class="col-xs-6">
<h3>Want to say hello? It's always nice meeting new people. Fill out
this form to the left and I'll reply to you as soon as I can :)
</h3>
</div>
</div>enter code here
.container-section{
width: full;
height: full;
margin: 0 auto;
padding: 100px;
color: white;
}
.getintouch{
background: #9dd1f1;
}
I just started learning to code so I apologize if this seems like a silly question. I searched around and couldn't find the answer anywhere.
Thank you in advance!
Learn HTML and CSS properly before asking any questions.
There's no CSS rule that has a value full.
Don't give padding on full width.
You forgot to add a container class.
Lots of invalid HTML, unclosed and stuff.
Snippet
.container-section {
-margin: 0 auto;
-color: white;
}
.getintouch {
background: #9dd1f1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container-section getintouch">
<h1 class="text-center">Say hello?</h1>
<div class="container">
<div class="row">
<div class="col-xs-6">
<form>
<div class="form-group">
<input type="text" class="form-control no-border" id=formGroupExampleInput " placeholder="Name "">
</div>
<div class="form-group">
<input type="text" class="form-control no-border" id=formGroupExampleInput2 " placeholder="Email "">
</div>
<div class="form-group">
<textarea class="form-control no-border" rows="5" id="comment"></textarea>
</div>
</form>
</div>
<div class="col-xs-6">
<h3>Want to say hello? It's always nice meeting new people. Fill out this form to the left and I'll reply to you as soon as I can :)</h3>
</div>
</div>
</div>
Preview
Output: http://jsbin.com/mepiripeju/edit?html,css,output
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 6 years ago.
Improve this question
This is my website http://nicholasmills.bhweb.ws/Math%20Quiz/Math%20generator.php and what I want is for the questions to be in a 3 x 3 grid but I don't know how can anyone help me?
Wrap 3 divs which you want side by side in a div having class .row Then simply float: left the .Question divs . Do not forget to clear the float.
Updated Answer
body {
font-family: Iceberg;
}
#Header {
text-align: center;
}
#Quiz {
/* width: 200px; Remove this */
margin-left: 10%;
}
.Question {
border-style: solid;
margin: 10px 5px;
padding: 5px;
width: 200px;
height:100px;
float: left
}
#UserDataBox {
display: none;
}
.row {
max-width: 680px;
}
.clearfix {
clear: both
}
<h1 id="Header">Math Quiz</h1>
<br>
<br>
<div id="Quiz">
<form id="QuizQuestions" action="SaveMathData.php" method="post">
<div class='row'>
<div class="Question">
Date:
<input type="text" name="FormDate" value="00 00 0000" />
<br>Your username:
<input type="text" name="CurrentUser" value="No-one" />
</div>
<div class="Question" id="ClassSelect">
<p>What class are you in?</p>
<select name="class" required="required">
<option disabled selected>Select a class</option>
<option value="Class1">Class 1</option>
<option value="Class2">Class 2</option>
<option value="Class3">Class 3</option>
</select>
</div>
<div class="Question">
<p id="Question1"></p>
Question 1 Answer?
<input class="QuestionBox" id="Question1Box" type="text" name="Question1UserAnswer" />
<p class="AnswerBox" id="Question1AnswerBox"></p>
<img src="" />
</div>
<div class='clearfix'></div>
</div>
<div class='row'>
<div class="Question">
<p id="Question2"></p>
Question 2 Answer?
<input class="QuestionBox" id="Question2Box" type="text" name="Question2UserAnswer" />
<br>
<p class="AnswerBox" id="Question2AnswerBox"></p>
<br>
<br>
</div>
<div class="Question">
<p id="Question3"></p>
Question 3 Answer?
<input class="QuestionBox" id="Question3Box" type="text" name="Question3UserAnswer" />
<br>
<p class="AnswerBox" id="Question3AnswerBox"></p>
<br>
<br>
</div>
<div class="Question">
<p id="Question4"></p>
Question 4 Answer?
<input class="QuestionBox" id="Question4Box" type="text" name="Question4UserAnswer" />
<br>
<p class="AnswerBox" id="Question4AnswerBox"></p>
<br>
<br>
</div>
<div class='clearfix'></div>
</div>
<div class='row'>
<div class="Question">
<p id="Question5"></p>
Question 5 Answer?
<input class="QuestionBox" id="Question5Box" type="text" name="Question5UserAnswer" />
<br>
<p class="AnswerBox" id="Question5AnswerBox"></p>
<br>
<br>
</div>
<div class="Question">
<p id="Question6"></p>
Question 6 Answer?
<input class="QuestionBox" id="Question6Box" type="text" name="Question6UserAnswer" />
<br>
<p class="AnswerBox" id="Question6AnswerBox"></p>
<br>
<br>
</div>
<div class="Question">
<p id="Question7"></p>
Question 7 Answer?
<input class="QuestionBox" id="Question7Box" type="text" name="Question7UserAnswer" />
<br>
<p class="AnswerBox" id="Question7AnswerBox"></p>
<br>
<br>
</div>
<div class='clearfix'></div>
</div>
<div class='row'>
<div class="Question">
<p id="Question8"></p>
Question 8 Answer?
<input class="QuestionBox" id="Question8Box" type="text" name="Question8UserAnswer" />
<br>
<p class="AnswerBox" id="Question8AnswerBox"></p>
<br>
<br>
</div>
<div class="Question">
<p id="Question9"></p>
Question 9 Answer?
<input class="QuestionBox" id="Question9Box" type="text" name="Question9UserAnswer" />
<br>
<p class="AnswerBox" id="Question9AnswerBox"></p>
<br>
<br>
</div>
<div class="Question">
<p id="Question10"></p>
Question 10 Answer?
<input class="QuestionBox" id="Question10Box" type="text" name="Question10UserAnswer" />
<br>
<br>
<p class="AnswerBox" id="Question10AnswerBox"></p>
<br>
<br>
</div>
<div class='clearfix'></div>
</div>
<input style="display:none;" id="SubmitButton" type="submit" value="Submit Answers" />
</form>
<button id="CheckButton" onclick="CheckAnswers()">Check Answers</button>
<br>
</div>
.Question {
width: 30%;
float: left;
height: 6em;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
It is a simple html code,when i open it in firefox,no alignment between the input lines.
<!DOCTYPE html>
<html>
<body>
<form action="">
First name(xing): <input type="text" name="firstname"><br>
Last name(min): <input type="text" name="lastname">
</form>
<p><b>Note:</b> The form itself is not visible. Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
How can i make alignment in the form?
Try putting the text before the form input in a span tag and styling it:
<span style="display:inline-block; width:125px">First name(xing): </span>
<input type="text" name="firstname">
<br>
<span style="display:inline-block; width:125px"> Last name(min): </span>
<input type="text" name="lastname">
Note: you can only use the width attribute if you use the style "display:inline-block".
Another method of doing this is:
<input type="text" name="fname" placeholder="First name(xing)"><br>
<input type="text" name="lname" placeholder="Last name(min)"><br>
This is HTML5 placeholder property.
We have the following form:
<div class="form-horizontal">
<fieldset>
<legend>Reports</legend>
<div class="control-group">
<label class="control-label">Year</label>
<div class="controls">
<select id="ddlYear" class="input-small">
<option value="2011">2011</option>
<option selected="selected" value="2012">2012</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Project</label>
<div class="controls">
<label class="" id="lbProjectDesc">House X repairs</label>
</div>
</div>
<div class="control-group">
<label class="control-label">Costs</label>
<div class="controls">
<div class="input-append">
<input type="text" value="0,0" class="span2" id="tbCosts" disabled="disabled" >
<span class="add-on">€</span>
</div>
</div>
</div>
<hr>
<div class="control-group">
<div class="controls">
<input type="submit" value="Save" onclick="$(this).button('loading');" id="btnSave" class="btn btn-primary" data-loading-text="Saving...">
</div>
</div>
</fieldset>
</div>
http://jsfiddle.net/9JNcJ/2/
The problem is that the label lbProjectDesc (text= "House X repairs") is not displayed correctly.
What class can we set or what change needs to be made to fix it?
(Preferrably the correct way, not a css hack)
#lbProjectDesc {
margin-top: 5px;
}
(doesn't consider this as a "hack" :) forked : http://jsfiddle.net/davidkonrad/LK95Q/
Taking into account Selva and davidkonrad responses we solved it like this:
.form-horizontal .control-group .controls label {
margin-top: 5px;
}
This way it affects all the cases where labels are inside horizontal forms but doesnt displace verticaly the description labels of other input types...
Works too with padding-top: 5px;
Avoid the unwanted padding from that and set what ever you want. Here problem is padding.
#lbProjectDesc {
margin-top: 5px;
}
add and see.
Demo : http://jsfiddle.net/9JNcJ/5/