How can i place "Comment:" on red line? - html

How can I place "Comment:" on red line as shown in the above picture? I know it's a little bit of a silly question, but as a beginner it would be helpful for me.
Here is a code snippet:
body {
border: 1px solid black;
height: 550px;
width: 550px;
padding: 5px;
}
h2 {
text-align: center;
}
<h2>FeedBack Form</h2>
<strong>Name:</strong>
<input type="text" />
<br>
<br>
<strong>Comment:</strong>
<input type="text" style="height:100px; width:250px;" />
<br>
<br>
<strong>Email Address:</strong>
<input type="text" />

See this fiddle
Please add vertical-align: text-top; or vertical-align: top; as style for the input.
Add the below given to your CSS
input[type="text"]{
vertical-align: text-top;
}

try with this:
<strong>Comment:</strong> <input type="text" style="height:100px; width:250px; vertical-align:top;"/><br><br>
I just added vertical-align: top to you input text.
But as a suggestion, I think you may want to use textarea instead input text. And inline css styles is not a thing I would recommend.

Add vertical-align css property
<strong style="vertical-align: top;">Comment:</strong>

<html>
<head>
<title>FeedBack Form</title>
<style>
body {
border: 1px solid black;
height:550px;
width:550px;
padding:5px;
}
h2 {
text-align: center;
}
</style
</head>
<body>
<h2>FeedBack Form</h2>
<strong>Name:</strong> <input type="text" /><br><br>
<strong style="vertical-align: top;">Comment:</strong> <input type="text" style="height:100px; width:250px;"/><br><br>
<strong>Email Address:</strong> <input type="text" />
</body>
</html>

Related

text around range input vertically shifted in html

I have the following code for range input along with some style applied:
<style media="screen">
.contactinfo label{display: inline-block;
width: 170px;
text-align: right;
vertical-align:top;
}
.contactinfo div ~ div {
margin-top: 2px;
}
.contactinfo {background:lightyellow; border:10px solid yellow; margin-bottom:10px; width: 720px;}
.contactinfo textarea {width: 180px; box-sizing: border-box;}
</style>
<fieldset class="contactinfo">
<legend>Your indicators</legend> <br>
<div class="">
<label for="ht">Height:</label>
Short <input type="range" name="ht" id="ht" value="" min="0" max="100"> Tall
</div>
<div class="">
<label for="sal">Salary:</label>
Poor <input type="range" name="ht" id="ht" value="" min="0" max="100"> Rich
</div>
</fieldset>
But the text on either side of range input are not aligned properly. Here is what it looks like now:
Even after I remove vertical-align:top it does not align properly.
This is how it looks like now:
What I want is(ignoring the highlight):
Remove vertical-align:top;
see https://jsfiddle.net/aqfcde2d/

how to align HTML positioning and inputs on P and centered text

Hello guys I actually been looking everywhere on google for this, and even youtube but no luck anywhere.
I actually came across this problem for the first time and I want to align everything in the center, which it is, but if you notice the paragraph and input text are not vertically aligned. they are crooked , but yet aligned in the center I am trying to make a perfect line for the text input and
in other words something like this
Age: ______________
Year: ______________
group: ______________
not the default center position like this
Age: ______________
Year: ______________
group: ______________
anyhow this is my css and html code
<html>
<head>
</head>
<body>
<div id="container">
<h3 class="header"> Welcome to the registration form </h3>
<div id="border"> </div>
<div id="box">
<p> Enter Name: <input class="in" type="text" name="name" value="${param.name}"> </p>
<p> Enter Age: <input class="in" type="text" name="name" value="${param.name}"> </p>
<p> Enter Address: <input class="in" type="text" name="name" value="${param.name}"> </p>
<p> Enter phone: <input class="in" type="text" name="name" value="${param.name}"> </p>
</div><!--box -->
</div><!--container -->
</body>
</html>
and my css
/*
Document : style
Created on : Jan 18, 2014, 9:53:43 AM
Author : will
Description:
Purpose of the stylesheet follows.
*/
*{
margin: 0px;
}
body{
background-color: black;
}
#container{
color: black;
margin: 50px auto;
border: solid black 2px;
text-align:center;
width: 700px;
height: 540px;
background-image: url('http://www.kodemi.com/images/full/2013/12/20/white-background-wallpaper-image-pics-hdwallpc-White-Background-Wallpaper-Image-Pics.jpg');
}
#block{
width: 300px;
color: black;
margin: 36px auto;
}
h3.header{
color: black;
font-size:25px;
margin: 30px 30px 5px;
}
#border{
width: 400px;
border-top: solid black 1px;
margin: auto;
}
#box p{
margin: 20px;
}
#box input{
margin-left: 10px;
}
You can add a label tag to the name of the field, set the width, and align the text right to assure all input boxes begin at the same point:
label {
width: 115px;
display: inline-block;
text-align: right;
}
http://jsfiddle.net/Kiaaanabal/dQLzy/
Hope this helps!
U can use a table tags in place of the paragraph tags and easily align the input fields and texts can use cellspacing and cellpadding for more modification.
<div id="box">
<table>
<tr>
<td>Enter Name:</td>
<td><input class="in" type="text" name="name"
value="${param.name}"></td>
</tr>
<tr>
<td>Enter Age:</td>
<td><input class="in" type="text" name="name"
value="${param.name}"></td>
</tr>
<tr>
<td>Enter Address:</td>
<td><input class="in" type="text" name="name"
value="${param.name}"></td>
</tr>
<tr>
<td>Enter phone:</td>
<td><input class="in" type="text" name="name"
value="${param.name}"></td>
</tr>
</table>
</div>
This may help.
simple just: input name should be inside label and make some width to id box. Just copy paste code below:
HTML CODE:
<html>
<head>
</head>
<body>
<div id="container">
<h3 class="header"> Welcome to the registration form </h3>
<div id="border"> </div>
<div id="box">
<p> <label>Enter Name:</label> <input class="in" type="text" name="name" value="${param.name}"> </p>
<p><label> Enter Age:</label> <input class="in" type="text" name="name" value="${param.name}"> </p>
<p><label> Enter Address: </label><input class="in" type="text" name="name" value="${param.name}"> </p>
<p> <label>Enter phone: </label><input class="in" type="text" name="name" value="${param.name}"> </p>
</div><!--box -->
</div><!--container -->
</body>
</html>
CSS CODE:
/*
Document : style
Created on : Jan 18, 2014, 9:53:43 AM
Author : will
Description:
Purpose of the stylesheet follows.
*/
*{
margin: 0px;
}
body{
background-color: black;
}
#container{
color: black;
margin: 50px auto;
border: solid black 2px;
text-align:center;
width: 700px;
height: 540px;
background-image: url('http://www.kodemi.com/images/full/2013/12/20/white-background-wallpaper-image-pics-hdwallpc-White-Background-Wallpaper-Image-Pics.jpg');
}
#block{
width: 300px;
color: black;
margin: 36px auto;
}
h3.header{
color: black;
font-size:25px;
margin: 30px 30px 5px;
}
#border{
width: 400px;
border-top: solid black 1px;
margin: auto;
}
#box p{
margin: 20px; text-align:left;
}
#box label { width:95px; float:left }
#box { width:300px; /* or 42% width*/ margin:0px auto; }
#box input{
margin-left: 10px;
}

how to vertically align this select element

I have a basic css question. I'm trying to add css to my form, the code is below:
<div id="content">
<form id="form1" method="post" action="">
<p>
<label for="name" class="title">Your name:</label>
<input name="name" type="text" class="widebox" id="name">
</p>
<p>
Colour: <select name="colour_pref" size "1">
<option value="1">Pink</option>
<option value="2">Blue</option>
<option value="3">White</option></select>
</p>
<p class="submit">
<input type="submit" name="add" value="add_colour" id="add">
</p>
</form>
</div>
and this is the css:
#content p {
border-bottom: 1px solid #efefef;
margin: 10px;
padding-bottom: 10px;
width: 260px;}
.title {
float: left;
width: 100px;
text-align: right;
padding-right: 10px;}
.submit {
text-align: right;}
The problem is the select element is not aligned with the name field, I tried to add class="title" to it but it made it even messier.
Would really appreciate if you could help me align this select element VERTICALLY with the text field. thanks
Something like this DEMO http://jsfiddle.net/kevinPHPkevin/XzHG2/1/
.submit input {
margin-left:110px;
}
Just add display inline to your pararaph:
p {
display: inline;
}
Demo

Align select and input

Is possible align SELECT and INPUT inline without specify WIDTH size, without using tables and with the same HTML? See picture.
Live example: http://jsfiddle.net/N4hpQ/
Thank you.
<html>
<head>
<style>
fieldset {
display: inline-block;
}
fieldset input,
fieldset select{
float: right;
margin-left: 5px;
}
fieldset p {
text-align: right;
}
</style>
</head>
<body>
<fieldset>
<p><label>First Name: </label><input type="text" /></p>
<p><label>Second Name: </label><input type="text" /></p>
<p><label>Country: </label><select><option>Choose</option></select></p>
<p><label>Age: </label><select><option>Choose</option></select></p>
</fieldset>
</body>
</html>
You could use css display: table; to achieve this.
HTML
<fieldset>
<p>
<label>First Name: </label>
<input type="text" />
</p>
<p>
<label>Second Name: </label>
<input type="text" />
</p>
<p>
<label>Country: </label>
<select>
<option>Choose</option>
</select>
</p>
<p>
<label>Age: </label>
<select>
<option>Choose</option>
</select>
</p>
</fieldset>
​
CSS
fieldset {
display: table;
}
fieldset p {
display: table-row;
}
fieldset input,
fieldset select,
fieldset label {
display: table-cell;
margin: 3px;
}
fieldset label {
text-align: right;
}
Demo
Without TABLE or width.
CSS:
FIELDSET {
display: inline-block;
line-height: 200%;
}
.labels {
text-align: right;
float: left;
margin-right: 5px;
}
.inputs {
float: left;
}
And HTML:
<fieldset>
<div class="labels">
<label>First Name: </label><br />
<label>Second Name: </label><br />
<label>Country: </label><br />
<label>Age: </label>
</div>
<div class="inputs">
<input type="text" /><br />
<input type="text" /><br />
<select><option>Choose</option></select><br />
<select><option>Choose</option></select>
</div>
</fieldset>
And the fiddle
EDIT
It seems that you've edited your question. If the same HTML (as in your example) is required, my answer is not valid anymore.
Possible? Yes, here's a quick hack to do it even:
float your labels left, float your inputs right, then give the inputs a margin-right, to put them in position to be next to your labels.
so would look like this:
p label{
float:left;
}
p input{
float:right;
margin-right: /*whatever value you need this to be to look good*/;
}
here is the jsfiddle.

what is the best practice for aligning html

html code
<div id="signup">
<p>
<label>Frist Name</label>
<input type="text"/>
<p>
<p>
<label>Last Name</label>
<input type="text"/>
<p>
<p>
<label>Email</label>
<input type="text"/>
<p>
<p>
<label>Mobile Number</label>
<input type="text"/>
<p>
<p>
<label>Password</label>
<input type="password"/>
<p>
<p>
<label>Re Password</label>
<input type="password"/>
<p>
</div>
and this is css
css
#signup{
width: 860px;
background-color: white;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup p label{
padding: 0.4em;
color: #0986e3;
}
#signup p input{
width: 300px;
padding: 0.4em;
}
if u run this code u will see the input files right and left , and that is not good , i can correct this problems using div or li , but i want the best practice for doing that , i want the input filds to be exaclty below each other
,this is the code in jsfiddle
http://jsfiddle.net/Wiliam_Kinaan/EfBD7/
Make the labels display as block elements. That way, you can set it's width. But you still need them to be inline. You need to apply either float:left, or display:inline-block so they act inline as well as block.
#signup p label{
display:inline-block;
width:100px;
}
/*or*/
#signup p label{
float:left;
width:100px;
}
If you want to support older browsers, then use the float:left. If you target new browsers, then display:inline-block is better. If you use the float approach, add this to the CSS to clear the float:
#signup p{
overflow:hidden;
zoom:1;
}
Here, I did it how I would do it. I stripped out the p and some css to make text right side. but you can of course add display:inline-block;width:300px; to the label and swap the label and input locations in html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#signup{
width: 500px;
background-color: #ececec;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup label{
font:12px arial;
color: #0986e3;
}
#signup input{
margin:10px;
width: 300px;
padding 0.4em;
}
#signup input[type=button]{
margin:10px;
width: 80px;
padding 0.4em;
}
</style>
</head>
<body>
<div id="signup">
<input type="text"/>
<label>Frist Name</label>
<input type="text"/>
<label>Last Name</label>
<input type="text"/>
<label>Email</label>
<input type="text"/>
<label>Mobile Number</label>
<input type="password"/>
<label>Password</label>
<input type="password"/>
<label>Re Password</label>
<input type="button" value="click me!" />
</div>
</body>
</html>
Give the label a definite width, like:
#signup p label{
padding: 0.4em;
color: #0986e3;
width: 100px;
display: inline-block;
}
Can you use table , might help your cause , see the example , sorry for not aligning the markup well.