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;
}
Related
I have a simple page that consists of a form. There is a string for what the input box should be, and then the input box.
I want two different behaviors. When a cell phone is accessing the page, I want everything to be stacked on top of each other, but when the page is accessed via a computer I want multiple rows consisting of the the title, followed by the input box on the same row.
I've researched media queries by I still don't understand it enough to get through.
<html>
<head>
<style>
</style>
</head>
<body>
<form>
<center>
<div class="left">
First name:
</div>
<div class="right">
<input type="text" name="firstname"/>
</div>
<div class="left">
Last name:
</div>
<div class="right">
<input type="text" name="lastname"/>
</div>
<div class="left">
Email Address:
</div>
<div class="right">
<input type="text" name="email"/>
</div>
<div class="left">
Address:
</div>
<div class="right">
<input type="text" name="address"/>
</div>
<div class="left">
I've practiced yoga for at least one year:
</div>
<div class="right">
<input type="checkbox" name="oneyear"/>
</div>
<div class="right">
<input type="submit" name="submit" value="submit"/>
</div>
</center>
</form>
</body>
</html>
You have multiple choice: using Bootstrap to easily display your grid in different ways on window resize.
You can also use media queries, combine with a grid layout like Flexbox or Grid.
Or even use Jquery and the windworesize function.
Personnaly, i would choose Flexbox and the flex-direction propriety when the window reach the size of a smartphone or tablet.
To write a media querie, you just have to type something like #media screen and (max-width: 640px) for instance and write your rules inside the curly brackets.
Here is a sample code.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-size: 16px;
line-height: 22px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f5f5f5;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.my-form {
width: 100%;
max-width: 920px;
margin: 0 auto;
padding: 20px;
}
.my-form .input {
width: 100%;
padding: 10px;
}
.my-form .input .left {
display: block;
width: 100%;
line-height: 24px;
padding: 3px 0;
margin-bottom: 5px;
}
.my-form .input .right {
width: 100%;
}
.my-form .input input[type='text'], .my-form .input input[type='email'], .my-form .input textarea {
display: block;
width: 100%;
height: 30px;
font-size: 16px;
padding: 3px;
line-height: 22px;
border: 1px solid rgba(0,0,0,.3);
}
.my-form .input textarea {
height: auto;
min-height: 60px;
resize: vertical;
}
.my-form .input input[type='submit'] {
display: block;
width: 100%;
padding: 15px;
background-color: navy;
color: #ffffff;
font-size: 16px;
line-height: 22px;
}
#media screen and (max-width: 1024px) {
.my-form .input:after {
content: "";
clear: both;
display: table;
}
.my-form .input .left {
float: left;
width: 35%;
padding-right: 10px;
margin-bottom: 0;
}
.my-form .input .right {
float: right;
width: 65%;
}
}
</style>
</head>
<body>
<form class="my-form">
<div class="input">
<label class="left" for="firstname">
First name:
</label>
<div class="right">
<input type="text" id="firstname" name="firstname" />
</div>
</div>
<div class="input">
<label class="left" for="lastname">
Last name:
</label>
<div class="right">
<input type="text" id="lastname" name="lastname" />
</div>
</div>
<div class="input">
<label class="left" for="email">
Email Address:
</label>
<div class="right">
<input type="email" id="email" name="email" />
</div>
</div>
<div class="input">
<label class="left" for="address">
Address:
</label>
<div class="right">
<textarea cols="10" rows="5" id="address" name="address"></textarea>
</div>
</div>
<div class="input">
<div class="left"></div>
<div class="right">
<label for="oneyear"><input type="checkbox" id="oneyear" name="oneyear" /> I've practiced yoga for at least one year:</label>
</div>
</div>
<div class="input">
<input type="submit" name="submit" value="submit" />
</div>
</form>
</body>
</html>
You need Media Query for this. Media query is basically writing different CSS for devices with different widths. You can learn more from here- https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Also check out this article- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can also use jQuery for the same using matchmedia..
Here is a JSbin example for you- https://jsbin.com/kutacuzece/edit
(function($) {
/*
* We need to turn it into a function.
* To apply the changes both on document ready and when we resize the browser.
*/
function mediaSize() {
/* Set the matchMedia */
if (window.matchMedia('(min-width: 768px)').matches) {
/* Changes when we reach the min-width */
$('body').css('background', '#222');
$('strong').css('color', 'tomato');
} else {
/* Reset for CSS changes – Still need a better way to do this! */
$('body, strong').removeAttr('style');
}
};
/* Call the function */
mediaSize();
/* Attach the function to the resize event listener */
window.addEventListener('resize', mediaSize, false);
})(jQuery);
OR you can use something as simple as this-
if ($(window).width() < 960) {
$(selector).css({property:value, property:value, ...})
}
else if ($(window).width() < 768) {
$(selector).css({property:value, property:value, ...})
}
else {
$(selector).css({property:value, property:value, ...})
}
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>
Im trying to move the positioning of box8 more down but for some reason it's not moving. Instead its moving down container 4.. please help!
Im trying to move the positioning of box8 more down but for some reason it's not moving. Instead its moving down container 4.. please help
HTML
<div id="con4">
<div id="box8">
<form>
First name:<br>
<input type="text" placeholder="from">
<br>
Last name: <br>
<input type="text" placeholder="to">
<input type="date" value="date" placeholder="depart date">
<br>
<input type="date" value="date" placeholder="return date">
<input type="text" placeholder="airline">
or fly one way
</form>
</div>
</div>
CSS
#con4 {
width:1024px;
height:470px;
background-image: url(media/plane.jpg);
float:none;
}
#box8 {
width:300px;
height:340px;
margin-left: 120px;
background-color: white;
position:relative;
margin-top:50px;
}
(sigh) The infamous collapsing margins problem again. I see a lot of those lately.
The margin you give to box8 is shared by con4, so they both move down the same amount.
Solution: don't give a margin-top to box8, give a padding-top to con4 instead.
#con4 {
width: 1024px;
height: 470px;
background-image: url(//lorempixel.com/1024/470);
float: none;
padding-top:50px;
}
#box8 {
width: 300px;
height: 340px;
margin-left: 120px;
background-color: white;
position: relative;
}
<div id="con4">
<div id="box8">
<form>
First name:
<br>
<input type="text" placeholder="from">
<br>Last name:
<br>
<input type="text" placeholder="to">
<input type="date" value="date" placeholder="depart date">
<br>
<input type="date" value="date" placeholder="return date">
<input type="text" placeholder="airline">or fly one way
</form>
</div>
</div>
(Note that I had to change the background-image for con4 to make it visible)
Add padding to the con4 instead of margin to box8
#con4 {
width:1024px;
height:470px;
background: #000;
float:none;
padding-top:100px;
}
#box8 {
width:300px;
height:340px;
margin-left: 120px;
background-color: white;
position:relative;
}
http://jsbin.com/mejatayaqu/2/
#lily replace your css with this:
#con4 {
width:1024px;
height:470px;
background-image: url(media/plane.jpg);
float:none;
}
#box8 {
width:300px;
height:340px;
margin-left: 120px;
background-color: white;
position:absolute;
margin-top:50px;
}
Am designing the 'Login' page, here, the page look okay before I press the submit button, but, just after I pressed the submit button, it looks not okay. The second div moved little bit downward. Any help to solve this issue? pls refer the below image
html
<div class="LogIn">
<form id="UserLogIn" name="loginForm" method="post"> <!-- onsubmit="return validateForm(this);" -->
<label>Firstname Lastname</label><input type="text" name="username" placeholder="Firstname Lastname"/>
<span class="user-name">Name should not be empty</span>
<label>Password</label><input type="password" name="password" placeholder="Password"/>
<label>Confirm password</label><input type="password" name="password1" placeholder="Confirm password"/>
<span class="password">Password does not be match</span>
<label>Email</label><input type="email" name="email" placeholder="Email"/>
<span class="email">Email is not valid</span>
<label>Website</label><input type="url" name="url" placeholder="Website"/>
<span class="urlcontent">Invalid Website URL</span>
<input name="submit" type="submit" value="Submit"/>
</form>
</div>
<div class="BusinessConnect">
<p>Business Unit</p>
<div id="BuCheck" class="BusinessCont">
<p><input type="checkbox" name="checkboxG1" id="checkbox1" class="form-checkbox" value="Sapient"/><label for="checkbox1" class="form-label">Test</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox2" class="form-checkbox" value="SapientNitro"/><label for="checkbox2" class="form-label">TestNitro</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox3" class="form-checkbox" value="Test Global Market"/><label for="checkbox3" class="form-label">Test Global Market</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox4" class="form-checkbox" value="Test Government Services"/><label for="checkbox4" class="form-label">Test Government Services</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox5" class="form-checkbox" value="Test (m)PHASIZE"/><label for="checkbox5" class="form-label">Test (m)PHASIZE</label></p>
</div>
</div>
css
.BusinessConnect {
float: left;
font-size: 80%;
height: 30%;
margin-right: 0;
position: relative;
top: 3px;
width: 35%;
}
.LogIn {
float: left;
margin-left: 256px;
margin-top: 15px;
width: 30%;
}
After the 'submit' button pressed,
One of the way you can follow is by seperating the divs like this,
<section>
<div id="LogIn">
You can put your thing here
</div>
<div id="BusinessConnect">
<p>Business Unit</p>
Your second part
</div>
</section>
/// Your CSS
section {
width: 100%;
height: 200px;
margin: auto;
padding: 10px;
}
div#BusinessConnect {
border:1px solid #000000;
margin-left:50%;
height: 200px;
}
div#LogIn {
width: 45%;
float: left;
border:1px solid #000000;
height:200px;
}
Its just a sample, you can further work on it.
And I myself prefer using % instead of pixels, because they are helpful for responsive layouts.
Many different ways to accomplish what you'd like, but if floating isn't a necessity you could try the following:
.BusinessConnect {
display: table-cell;
vertical-align: top;
font-size: 80%;
height: 30%;
margin-right: 0;
position: relative;
top: 3px;
width: 35%;
}
.LogIn {
display: table-cell;
vertical-align: top;
margin-left: 256px;
margin-top: 15px;
width: 30%;
}
Please bare in mind that I am new to code!
So I have a header and some text, that I am wanting to place on top of a background image that i have input using CSS, therefore the positioning is key.
It was all working fine, until i added more HTML content under neither the text. From this it was just as if the text wasn't picking up my CSS instructions.
HTML:
<div id="sidemicro">
<text class="circleheader"><h3>Special Occasion?</h3><p>Give us a call and </br> we'll see how we can make </br> your tour extra special!</p></br>
This is the text i need to format:
<div id="form">
<form action ='otterabout.php' method='POST'>
*Your Name: <input type='text' name='name'><br />
*Your Email: <input type'text' name='email'><br />
*Date of visit: <input type'date' name='date'><br />
*Time of visit: <input type'time' name='time'><br />
*Group Size: <input type'text' name='groupsize'><br />
<input type='submit' name='submit' value='Login'>
<input name='reset' type='reset' value='Reset'>
</form>
</div>
</div>
This is the content under the text which has stopped it formatting.
CSS:
.circleheader {
margin-top:70%;
margin-left:15%;
}
.circletext {
text-align:center;
margin-left:35%;
}
Thanks!
Is this the type of formatting you're looking for? FIDDLE.
CSS
.sidemicro {
margin-left: 10px;
width: 600px;
border: 1px solid black;
background: url('https://res.cloudinary.com/roadtrippers/image/upload/v1396514626/p2nmpjpgjsm8iihdh5ip.jpg');
background-size: 600px;
background-repeat: no-repeat;
}
.circleheader {
width: 200px;
border: 0px solid black;
margin: 10px auto;
color: white;
background-color: rgba(0, 0, 0, 0.4);
text-align: center;
}