when i zoom in in html page my div2 tag comes down to the other div1 element
but i want it to move on right side..on zoom in.
below my htl and css code.
and also i am confusing in taking distance in pixcels or in %
**html code**
<body>
<div class="header">
</div>
<div class="wrapper">
<div class="welcometheworld">
<p>Welcome</p>
<p>to</p>
<p>the</p>
<p>new</p>
<p>world.</p>
<p><b>Feel</b></p>
<p><b>The Change.</b></p>
</div>
<div class="Signup" >
<form class="commonForm" >
<fieldset>
<h1>Sign up</h1>
<p><input type="text" name="fname" placeholder="First name" size="25" />
 
<input type="text" name="lname" placeholder="Last name" size="25" /></p>
<p><input type="email" name="email" placeholder="Email" size="61" /></p>
<p><input type="password" name="password1" placeholder="Password" size="61" /></p>
<p><input type="password" name="password2" placeholder="Re-enter Password" size="61" /></p>
<p class="bday"><b>Birthday</b></p>
<p><select name="Month" class="bdaymonth">
<option value="" style="display:none">Month</option>
<option value="January">January</option>
<option value="Feburary">Feburary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
 
<input type="day" name="day" placeholder="Date" maxlength="2"/>
 
<input type="year" name="year" placeholder="Year" maxlength="4" /></p>
<p><input type="submit" value="Sign up" /></p>
</fieldset>
</form>
</div>
<div class="footer">
</div>
</div>
</body>
html,body{
margin:0;
background:#2c3e50;
}
.wrapper{
position:relative;
margin: 0 auto;
width: 100%;
}
.header{
min-width: 980px;
height:40px;
background:#8e44ad;
box-shadow:0 1px 1px 0 #000;
}
.welcometheworld {
position:relative;
float:left;
margin-left:25%;
height:50%;
border:0;
}
.welcometheworld p{
position:relative;
text-align:center;
font-size:100px;
color:black;
margin:auto;
}
.Signup{
position:relative;
left:15%;
float:left;
margin-left:15%;
margin-top:15px;
margin-bottom:200px;
background: #ffffff;
height:800px;
width:500px;
border-radius:15px;
border:0;
box-shadow:0 0 11px 11px #432677;
}
.commonForm fieldset{
border:0;
}
.commonForm h1{
position:relative;
left:2%;
text-align:center;
font-size:50px;
font-weight:bolder;
color:#8e44ad;
}
.commonForm p input[type=text]{
position:relative;
left:2%;
padding:8px;
width:200px;
border:solid 2px #c4c7cb;
border-radius:3px;
float:none;
}
.commonForm p input[type=email]{
position:relative;
left:2%;
padding:8px;
width:434px;
border:solid 2px #c4c7cb;
border-radius:3px;
float:none;
}
.commonForm p input[type=password]{
position:relative;
left:2%;
padding:8px;
width:434px;
border:solid 2px #c4c7cb;
border-radius:3px;
float:none;
}
.bday{
position:relative;
left:2%;
}
.bdaymonth{
position:relative;
padding:8px;
margin-left:12px;
border-radius:2px;
background:#c4cacd;
}
.bdaymonth p option{
margin: 30px 30px 30px 30px;
padding: 30px 330px 30px 30px;
font-size: 90px;
}
.commonForm p input[type=day]{
position:relative;
margin:auto;
padding:8px;
width:40px;
border:solid 2px #c4c7cb;
border-radius:3px;
}
.commonForm p input[type=year]{
position:relative;
margin-top:auto;
padding:8px;
width:60px;
border:solid 2px #c4c7cb;
border-radius:3px;
}
.commonForm p input[type=submit]{
position:relative;
left:50%;
margin-left:-50px;
background:#2c3e50;
padding: 10px 20px;
width:100px;
border: none;
color:#8e44ad;
font-size: .9em;
font-weight: 700;
cursor: pointer;
border-radius:5px;
float:none;
}
change this css code in your style sheet then check it. it's working on your requirement or not ?
if any problem then tell me.
.welcometheworld {
border: 0 none;
float: left;
height: 50%;
position: relative;
width: 58%;
}
.Signup {
background: none repeat scroll 0 0 #ffffff;
border: 0 none;
border-radius: 15px;
box-shadow: 0 0 11px 11px #432677;
float: left;
height: 800px;
margin-bottom: 200px;
margin-top: 30px;
position: relative;
right: 0;
width: 500px;
}
Related
I am having this really weird issue where I cannot highlight my text in my form fields.
I cannot seem to figure out what the issue is, since everything but that seems to be working correctly.
I can't seem to understand where the problem lies - it doesn't work on Chrome or Safari.
{
position:relative;
width:100%;
margin-bottom:-20px;
}
.outerForm img {
width:800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
form {
display: table;
position:absolute;
top:0px;
left:0px;
right:0px;
margin-left: auto;
margin-right: auto;
color:black;
width:600px;;
height:300px;
margin-top: 100px;
}
.innerForm > input, .innerForm > label {
display: inline-block;
vertical-align: top;
margin-left: 5px;
margin-top: 25px;
margin-right: 5px;
}
.innerForm > label {
width:70px;
text-align: left;
}
#messageLabel {
}
input[type="text"] {
width:200px;
height:30px;
border:none;
outline:none;
box-shadow: none;
background-color:transparent;
border-bottom: 1px solid black;
}
textarea {
resize: vertical;
width:85%;
border:none;
outline:none;
box-shadow: none;
background-color: transparent;
padding-bottom: 18%;
border-bottom: 1px solid black;
margin-top: 20px;
}
textarea:focus {
border:none;
outline:none;
background-color: transparent;
box-shadow: none;
border-bottom: 1px solid red;
}
.innerForm > h4 {
margin-bottom:-10px;
text-transform:none;
font-family: 'Novecento sans wide';
}
input[type="text"]:focus, input[type="textarea"] {
border:none;
outline:none;
background-color:transparent;
box-shadow: none;
border-bottom:1px solid red;
}
#submitBtn {
background-color:transparent;
color:black;
font-weight:400;
border:none;
outline:none;
border:2px solid white;
padding:10px 20px 10px 20px;
font-size: 15px;
margin-top:15px;
transition: all 0.5s ease;
}
#submitBtn:hover {
background-color: #0080ff;
color:white;
}
<div class="outerForm">
<img id="cardImage" class="img-responsive" src="PlayingCardTemplate.png"/>
<form id="contactForm" action="Contact.php" method="POST">
<div class="innerForm">
<h4>Arshdeep Soni</h4>
<label id="nameLabel" for="name">Name:</label>
<input id="name" name="name" type="text"/>
<label id="phoneLabel" for="phone">Phone:</label>
<input id="phone" name="phone" type="text"/>
<label id="emailLabel" for="email">Email:</label>
<input id="email" name="email" type="text"/>
<label id="occasionLabel" for="occasion">Occasion:</label>
<input id="occasion" type="text" name="occasion"/>
<label id="messageLabel" for="message">Message:</label>
<textarea id="message" name="message" ></textarea>
<input type="submit" value="Submit" id="submitBtn" name="submit"/>
</div>
<p id="feedback"></p>
</form>
</div>
Look for ::selection inside the CSS Stylesheet.
An imported stylesheet or a theme might be include ::selection{background:transparent
for multiple reasons.
looking for that class and editing it can be solve the issue.
Also you can add color: in order to color the text inside your selection.
For mozilla use ::-moz-selection
I have the below code for html and css,
My formcontainer width is : 740px;
form width is width:100%;
in equal class i have put 4 div's in a single line,
.equal {
float:left;
width:24.9%;
}
I have effect class applied to all form elements,
.effect {
border:1px solid #ccc;
height: 20px;
padding:3px;
width:97%;
font-size:14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
If I set width 25% to equal class and width 100% to effect class all
form elements stick to one other.
Want to know what kind off CSS setting should I have so that even
after setting effect class to 100% I have spaces left between the
two elements. (Remember: effect class is applied to all form
elements)
Also if I apply class effect to textbox name the text box goes out
of the form.
My JSFiddle
JSFiddle
<div class="formcontainer">
<form id="personal_details" name="personal_details">
<fieldset class="border">
<legend>Details</legend>
<fieldset class="no_border">
<div class="equal">
<label>City</label>
<br />
<select class="effect" name="city" id="city" style="width:90%">
<option>Select</option>
<option>Bhubhaneshwar</option>
</select><span id="cityInfo">Valid City</span>
</div>
<div class="equal">
<label>State</label>
<br />
<select class="effect" name="state" id="state" style="width:90%">
<option>Select</option>
<option>Jammu & Kashmir</option>
</select> <span id="stateInfo">Valid State</span>
</div>
<div class="equal">
<label>Country</label>
<br />
<select class="effect" name="country" id="country" style="width:90%">
<option>Select</option>
<option>India</option>
</select><span id="countryInfo">Valid Country</span>
</div>
<div class="equal">
<label>Pincode.</label>
<br />
<input type="text" name="pincode" id="pincode" class="effect" style="width:90%" maxlength="6" /><span id="pincodeInfo">Valid Pincode please</span>
</div>
</fieldset>
<fieldset class="no_border">
<div>
<label>Name.</label>
<br />
<input type="text" name="name" id="name" class="effect" style="width:90%" maxlength="6" /><span id="pincodeInfo">Valid Pincode please</span>
</div>
</fieldset>
</fieldset>
</form>
</div>
CSS
.formcontainer {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 4px #ccc;
-webkit-box-shadow: 0 0 4px #ccc;
-moz-box-shadow: 0 0 4px #ccc;
border:1px solid #ccc;
padding:15px;
width: 740px;
margin:0 auto;
}
form {
margin:0 auto;
text-align:left;
width:100%;
background:#fff;
font-family:Calibri;
height: auto;
}
.effect {
border:1px solid #ccc;
height: 20px;
padding:3px;
width:97%;
font-size:14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.equal {
float:left;
width:24.9%;
}
#personal_details span {
margin-left: 50px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
margin: 0 auto;
display:none;
}
fieldset.no_border {
overflow:hidden;
border:0;
padding:0 0 10px 0;
margin:0;
}
fieldset.border {
overflow:hidden;
border:1;
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px;
margin:3px 0;
padding:10px;
border:solid 1px #ACACAC;
}
I have took a look at your fiddle and when applying the 25% to the width CSS on the .equal and making the width of the .effect 100% nothing seems to have changed. It all seems to work fine and not stick together like you stated. I'm unsure as to what problems you are facing as the fiddle seems to be running fine with the desired percentages.
I have the below form,
I want the green image on the right side of text box instead of getting below the text box.
The image is visible if the field is validated.
My css
<style type="text/css">
.formcontainer{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 4px #ccc;
-webkit-box-shadow: 0 0 4px #ccc;
-moz-box-shadow: 0 0 4px #ccc;
border:1px solid #ccc;
padding:15px;
width: 300px;
margin:0 auto;
}
form {
margin:0 auto;
text-align:left;
width:100%;
background:#fff;
behavior: url(./border-radius.htc);
font-family:Calibri;
height: auto;
}
fieldset.border{
overflow:hidden;
border:1;
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px;
margin:3px 0;
padding:10px;
border:solid 1px #C0C0C0;
}
fieldset.no_border{
overflow:hidden;
border:0;
padding:0 0 10px 0;
margin:0;
}
fieldset.no_border_submit{
overflow:hidden;
border:0;
text-align:center;
margin:3px 0;
}
input.effect {
border:1px solid #ccc;
height: 20px;
padding:3px;
width:70%;
font-size:14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cssSubmitButton {
font-size: 12px;
background: #fff no-repeat 4px 5px;
display: inline-block;
padding: 5px 20px 6px;
color: #333;
border:1px solid #ccc;
text-decoration: none;
font-weight: bold;
line-height: 1.9em;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
position: relative;
cursor: pointer;
outline:none;
}
.cssSubmitButton:visited {}
.cssSubmitButton:hover {
border:1px solid #333;
}
#subscribeForm span{
margin-left: 0px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
display:none;
}
fieldset.border{
overflow:hidden;
border:1;
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px;
margin:3px 0;
padding:10px;
border:solid 1px #C0C0C0;
}
fieldset.no_border{
overflow:hidden;
border:0;
padding:0 0 10px 0;
margin:0;
}
fieldset.no_border_submit{
overflow:hidden;
border:0;
text-align:center;
margin:3px 0;
}
#subscribeForm input.error{
background: #f8dbdb;
border-color: #e77776;
}
#subscribeForm span.error{
color: #e46c6e;
display:block;
}
#success{
display:none;
}
#button{
text-align:center;
}
</style>
my html
<div class="formcontainer">
<form method="post" action="" id="subscribeForm" name="subscribeForm">
<fieldset class="no_border">
<label>Login ID: </label><br /><input type="text" class="effect" name="login_id" id="login_id" autocomplete="off" ><img id="login_id_correct" style="display:none" src="./images/tick.png" />
<span id="login_idInfo">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<fieldset class="no_border">
<label>Name: </label><br /><input type="text" class="effect" name="name" id="name" autocomplete="off" >
<span id="nameInfo">What's your name?</span>
</fieldset>
<fieldset class="no_border">
<label>Contact No: </label><br /><input type="text" class="effect" name="contact_no" id="contact_no" autocomplete="off" >
<span id="contact_noInfo">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<fieldset class="no_border">
<label>Email: </label><br /><input type="text" class="effect" name="email" id="email" autocomplete="off" >
<span id="emailInfo">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<fieldset class="no_border">
<label>Password: </label><br /><input type="password" class="effect" name="password1" id="password1" autocomplete="off" >
<span id="password1Info">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<fieldset class="no_border">
<label>Retype: </label><br /><input type="password" class="effect" name="password2" id="password2" autocomplete="off" >
<span id="password2Info">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<div id="button">
<input type="submit" value="Subscribe" name="subscribeForm"/>
</div>
<div id="success">
<strong>Data Saved Successfully.</strong>
</div>
</form>
</div>
Also is there any way i an create a css class for it so that the image is added to the right side of text box once each text box is validated.
try
fieldset input {
float:left;
}
maybe you also need to set the input to inline or inline block if you have set it to block previously.
http://jsbin.com/akiviw/1/edit
or change js
$('#login_id_correct').css('display','block')
to
$('#login_id_correct').css('display','inline-block')
I have the below CSS code written for the form,
.formcontainer{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 4px #ccc;
-webkit-box-shadow: 0 0 4px #ccc;
-moz-box-shadow: 0 0 4px #ccc;
border:1px solid #ccc;
padding:15px;
width: 740px;
margin:0 auto;
}
form {
margin:0 auto;
text-align:left;
width:100%;
background:#fff;
behavior: url(./border-radius.htc);
font-family:Calibri;
height: auto;
}
fieldset.border{
overflow:hidden;
border:1;
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px;
margin:3px 0;
}
fieldset.no_border{
overflow:hidden;
border:0;
margin:3px 0;
}
fieldset.no_border_submit{
overflow:hidden;
border:0;
text-align:center;
margin:3px 0;
}
input.effect {
float:left;
border:1px solid #ccc;
height: 20px;
padding:3px;
width:97%;
font-size:14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cssSubmitButton {
font-size: 12px;
background: #fff no-repeat 4px 5px;
display: inline-block;
padding: 5px 20px 6px;
color: #333;
border:1px solid #ccc;
text-decoration: none;
font-weight: bold;
line-height: 1.9em;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
position: relative;
cursor: pointer;
outline:none;
}
.cssSubmitButton:visited {}
.cssSubmitButton:hover {
border:1px solid #333;
}
#personal_details span{
margin-left: 50px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
}
.ui-datepicker{
font-size:12px;
}
#guardian_one_details{
display:none;
}
#guardian_two_details{
display:none;
}
#guardian_three_details{
display:none;
}
#nominee_one_details{
display:none;
}
#nominee_two_details{
display:none;
}
#nominee_three_details{
display:none;
}
#nominee_percentage{
display:block;
}
#total_nominees{
display:none;
}
#first_nominee_percent{
display:none;
}
#second_nominee_percent{
display:none;
}
#third_nominee_percent{
display:none;
}
#nominee_percent_allocation{
display:none;
}
.float_left {
float:left;
width:33%;
}
.float_left_nominee_percent {
float:left;
width:25%;
}
.float_left_guardian {
float:left;
width:69%;
}
.float_right_guardian {
float:left;
width:29%;
}
The problem is that the form is rendered properly in Chrome but in IE 8 the fields are too close to each other.
How can I get the rendering done in IE and Chrome as it is in Chrome.
Form in IE
Form in Chrome
I want the spacing to be done properly in IE as it is in Chrome.
My html code (partially)
<form id="personal_details" name="personal_details" action="">
<fieldset class="no_border">
<div class="float_left">
<input type="radio" value="nominee_no" name="nomination" id="nomination_no"/>I don't want to nominate.
</div>
<div class="float_left">
<input type="radio" value="nominee_yes" name="nomination" id="nomination_yes"/>I would like to nominate.
</div>
<div class="float_left" id="total_nominees">
Total Nominees:
<select name="nominees" id="nominees" class="effect">
<option value="one">Single Nominee</option>
<option value="two">Two Nominees</option>
<option value="three">Three Nominees</option>
</select>
</div>
</fieldset>
<fieldset class="border" id="nominee_one_details"><legend>Nominee One Details:</legend>
<fieldset class="no_border">
<label>Name:</label><br /><input type="text" class="effect" name=""/>
</fieldset>
<fieldset class="no_border">
<label>Address:</label><br /><input type="text" class="effect"/>
</fieldset>
<fieldset class="no_border">
<div class="float_left"><label>Date of Birth:</label><br /><input type="text" class="effect" name="input" id="nominee_one_dob" style="width:40%";/></div>
<div class="float_left"><label>Age in years:</label><br /><input readonly="readonly" type="text" class="effect" name="input" id="nominee_one_years" value="0" style="width:20%;" /></div>
<div class="float_left"><label>Relationship:</label><br /><input type="text" class="effect" style="width:95%" /></div>
</fieldset>
<fieldset class="no_border" id="guardian_one_details">
<div class="float_left_guardian">
<label>Guardian Name:</label><br /><input type="text" class="effect" /></div>
<div class="float_right_guardian"><label>Guardian PAN:</label><br /><input type="text" class="effect" /></div>
</fieldset>
</fieldset>
use the following style in css
fieldset.no_border{
overflow:hidden;
border:0;
padding:0;
margin:0 0 10px 0;
}
.float_left_guardian{
overflow:hidden;
margin-bottom:10px;
}
hope this will solve your issue.
I am trying to place a contact form at the bottom of my website, but the bottom of the form is sliced off. You can see a fiddle here:
http://jsfiddle.net/qKnzp/
The code for the webform is as follows:
CSS
div.box{
margin:0 auto;
width:500px;
background:#222;
position:relative;
top:50px;
border:1px solid #262626;
}
div.box h1{
color:#FFF5CC;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712;
}
div.box label{
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}
div.box label span{
display: block;
color:#bbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}
div.box .input_text{
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333;
border-right:1px double #333;
}
div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333;
border-right:1px double #333;
overflow:hidden;
height:150px;
}
div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}
HTML
<form name="htmlform" method="post" action="html_form_send.php">
<div class="box">
<h1>Contact Form</h1>
<label>
<span>Full name *</span>
<input type="text" class="input_text" name="name" id="name"
/>
</label>
<label>
<span>Email *</span>
<input type="text" class="input_text" name="email" id="email"
/>
</label>
<label>
<span>Description of the product wanted *</span>
<input type="text" class="input_text"
name="subject" id="subject" />
</label>
<label>
<span>Estimated Quantity *</span>
<input type="text" class="input_text" name="quantity"
id="quantity" />
<input type="submit" class="button" value="Submit Form" />
</label>
</div>
The form should look like this:
http://aceinfowayindia.com/blog/wp-content/uploads/2009/06/how-to-create-good-looking-form-without-table.html
Please could anyone explain why the bottom is missing and why the style of the forms header is different from what it should be.
Any help is much appreciated :)
#wrapper {
overflow: hidden;
}
Generally the code is poorly written. Learn how to write good html and css.