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;
}
Related
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%;
}
I am trying to put distance between two inputs, this is what it looks like now: http://i.imgur.com/Et6siwO.png. My code:
<form class="popup-form" id="login-popup-form">
<label>Your username/email:</label> <input class="popup-input" id="login-popup-username-field" name="username" placeholder="Username"/><br />
<label>Your password:</label> <input class="popup-input" id="login-popup-password-field" name="password" placeholder="Password"/>
</form>
I tried this in CSS:
#popup-wrapper .popup-input
{
position:absolute;
right: 20px;
width: 200px;
margin-bottom:20px;
}
FIDDLE
This should do:
margin-top: 15px;
Also you can use margin-bottom, margin-left and margin-right.
Or you could do:
.form-group {
.input-class {
padding: 5px;
}
}
Here is the code for a form that I have on my page:
<form id="form2" action="processRegister.php" method="post" onsubmit="return checkRegister()">
<h4>Register</h4>
<div class="reminder">Already registered? Sign in below.</div>
<div id="sMessage"></div>
<div class="field"><label>First Name:</label><input class="input" type="text" name="firstName" /></div>
<div class="field"><label>Last Name:</label><input class="input" type="text" name="lastName" /></div>
<div class="field"><label>Email (.edu):</label><input class="input" type="text" name="email" /></div>
<div class="field"><label>Password:</label><input class="input" type="password" name="password" /></div>
<div class="field"><label>Confirm Password:</label><input class="input" type="password" name="cPassword" /></div>
<div class="field"><input class="submit" type="submit" value="Register"/></div>
</form>
And here is the relevant css:
.submit
{
background-color:#30BEB4;
margin:0 auto;
display:block;
border: 1px solid #000000
}
This centers the submit button in FF but not Chrome. How can I fix this?
Either give the submit button a width, or set the parent div to have text-align:center and remove display:block on the submit button.
jsFiddle example (button has width)
jsFiddle example (parent has text-align center)
The text-align property only affects inline elements, so that's why you'd need to remove the display:block from the input element. The margin:0 auto centering trick only works on elements that have a width.
Try
HTML:
<div class="submit-container field">
<input class="submit" type="submit" value="Register"/>
</div>
CSS:
.submit
{
background-color:#30BEB4;
border: 1px solid #000000
}
.submit-container {
text-align: center;
}
you could fake it with
margin:0 45%;
width:10%;
Try setting the width of the button: http://jsfiddle.net/hg7KV/1/
.submit
{
width: 100px;
background-color:#30BEB4;
margin:0 auto;
display:block;
border: 1px solid #000000;
}
You must add width of to your submit class:
.submit
{
background-color:#30BEB4;
margin:0 auto;
display:block;
border: 1px solid #000000
width: 60px;
}
http://jsfiddle.net/PPDLC/2/
It works if you only add a width attribute to your .submit class. For example add "width: 100px;".
Probably Chrome needs dimensions to position its elements whereas Firefox does it anyway.
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.
i'm a beginner at CSS and trying to do a NETTUTS , but there's a portion in the webpage that i don't know what exactly to do in CSS to make it look right ...
I just can't get this input text boxes, textarea and the button to be aligned like that , and to be honest the tutor isn't doing a great job to clearing stuff out
Using alternative and absolute positioning, and setting top and right spacing is kinda no a good idea i think ... I'm trying to align them using FlexBox feature but don't know why those elements are not moving at all ...
Here's my HTML & CSS3 code (for chrome) :
<section id="getAfreeQuote">
<h2>GET A FREE QUOTE</h2>
<form method="post" action="#">
<input type="text" name="yourName" placeholder="YOUR NAME"/>
<input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
<textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
<input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
<button>Submit</button>
</form>
#getAfreeQuote form {
display:-webkit-box;
-webkit-box-orient:vertical;
height:500px;
}
#getAfreeQuote input[name="yourName"]{
-webkit-box-ordinal-group:1;
}
#getAfreeQuote input[name="yourEmail"]{
-webkit-box-ordinal-group:1;
}
#getAfreeQuote textarea{
-webkit-box-ordinal-group:2;
}
#getAfreeQuote input[name="timeScale"]{
-webkit-box-ordinal-group:3;
}
#getAfreeQuote button {
-webkit-box-ordinal-group:4;
}
and the result :
Here's how I'd do it:
<section id="getAfreeQuote">
<form method="post" action="#">
<h2>Get a free quote</h2>
<input type="text" name="yourName" placeholder="YOUR NAME"/>
<input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
<textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
<br /><input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
<br /><input type="submit" value="Submit!" />
<div class="clear"></div>
</form>
</section>
<style>
#getAfreeQuote h2 {
text-transform: uppercase;
color: blue;
}
div.clear {
clear: both;
}
#getAfreeQuote form {
width: 25em;
position: relative;
}
#getAfreeQuote input[name="yourName"]{
width: 43%;
}
#getAfreeQuote input[name="yourEmail"]{
width: 55%;
float: right;
}
#getAfreeQuote textarea{
width: 100%;
height: 10em;
}
#getAfreeQuote input[name="timeScale"]{
width: 100%;
}
#getAfreeQuote input[type="submit"]{
text-transform: uppercase;
background: orange;
border: none;
padding: 1em 2em;
color: white;
float: right;
}
</style>
You have a good start, but you need to know the basics of CSS layout properties. A good start would be to learn the basics from Sitepoint where a very useful guide is present. Good luck.
If you do not have to use a FlexBox you can use width: 50% for the top two text inputs and width: 100% for the textarea and bottom text input. After setting the form with to the desired width of the form