I have a website that displays differently on different monitors.
Desktop:
Laptop:
HTML
<body>
<div id="Links">
<img src="Slideshow/About.png" width="140em" />
<br /><br />
<img src="Slideshow/Contact.fw.png" width="140em" />
<br /><br />
<img src="Slideshow/Services.fw.png" width="140em" />
</div>
<div id="mainText">
<h1>Contact</h1>
<p>If you want to contact me please call at <b>1.800.SUCCESS</b> or use the form below to sned me an email!</p>
</div>
<form name="contactform" method="post" action="send_form_email.php">
<table id="conTable">
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top"">
<label for="last_name">Last Name *</label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
CSS
body
{
background-image:url(Pictures/background.jpg);
background-repeat:no-repeat;
background-size:100%;
}
#mainText
{
position: absolute;
width: 70%;
float: left;
left: 14em;
}
#conTable
{
left:14em;
top:8em;
position:absolute;
}
#Banner
{
position:absolute;
padding-left:40%;
}
#Links
{
position:absolute;
float:left;
width:50px;
}
Can anyone please tell me why things look different on my laptop then it does on my desktop and how to fix it. As you can see from the pictures everything on my laptop is shifted to the left.
Try wrapping a "Relative" #container around all your "absolute" divs. I've adjusted your code below:
<body>
<div id="container">
<div id="Links">
<img src="Slideshow/About.png" width="140em" />
<br /><br />
<img src="Slideshow/Contact.fw.png" width="140em" />
<br /><br />
<img src="Slideshow/Services.fw.png" width="140em" />
</div>
<div id="mainText">
<h1>Contact</h1>
<p>If you want to contact me please call at <b>1.800.SUCCESS</b> or use the form below to sned me an email!</p>
</div>
<form name="contactform" method="post" action="send_form_email.php">
<table id="conTable">
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top"">
<label for="last_name">Last Name *</label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</div>
</body>
CSS:
body
{
background-image:url(Pictures/background.jpg);
background-repeat:no-repeat;
background-size:100%;
}
#mainText
{
position: absolute;
width: 70%;
left: 14em;
}
#conTable
{
left:14em;
top:8em;
position:absolute;
}
#Banner
{
position:absolute;
padding-left:40%;
}
#Links
{
position:absolute;
top: 0;
left: 0;
width:50px;
}
#container {position: relative; width: 100%}
Related
I am having a problem with the placement of my footer on my contact page. On every other page of my site the Footer is correctly placed at the bottom of the page, but for some reason the footer is sitting ABOVE my form, even covering the first input box. Can someone please help me?
Here is the coding for my contact form:
footer {
display: block;
clear: both;
font-size: 0.8em;
height: 50px;
text-align: center;
width:960px;
margin: auto;
position: absolute;
}
footer .footer-wrapper {
margin: 0;
padding: 3px 20px;
}
ul#social li {
display: inline;
list-style: none;
}
ul#social li a {
color: #999;
text-decoration: none;
}
a.facebook, a.twitter {
display: block;
float: left;
height: 24px;
padding-left: 17px;
text-indent: -9999px;
width: 16px;
}
<section>
<div>
<form name="customerForm" method="post" action="?">
<table cellspacing="3" cellpadding="5" border="0" style="width: 95%;" align="center">
<tr>
<td>Name: </td>
<td><input type="text" name="cusName" size="25" value="<?php echo $fullName; ?>" /></td>
</tr>
<tr>
<td>Email: </td>
<td><input type="text" name="cusEmail" size="30" value="<?php echo $emailAddress; ?>" /></td>
</tr>
<tr>
<td>Mobile: </td>
<td><input type="text" name="cusMobile" size="25" value="<?php echo $mobilePhone; ?>" /></td>
</tr>
<tr>
<td>Enquiry: </td>
<td><textarea name="posting" cols="52" rows="25"><?php echo $posting; ?></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Send" />
<input type="reset" name="reset" value="Clear Form"/></td>
</tr>
</form>
</div>
</section>
<footer>
<div class="footer-wrapper">
<div class="float-left">
<p>© My-Com Computers</p>
</div>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
</div>
</footer>
you missed table close tag your html </table>
<section>
<div>
<form name="customerForm" method="post" action="?">
<table cellspacing="3" cellpadding="5" border="0" style="width: 95%;" align="center">
<tr>
<td>Name: </td>
<td><input type="text" name="cusName" size="25" value="<?php echo $fullName; ?>" /></td>
</tr>
<tr>
<td>Email: </td>
<td><input type="text" name="cusEmail" size="30" value="<?php echo $emailAddress; ?>" /></td>
</tr>
<tr>
<td>Mobile: </td>
<td><input type="text" name="cusMobile" size="25" value="<?php echo $mobilePhone; ?>" /></td>
</tr>
<tr>
<td>Enquiry: </td>
<td><textarea name="posting" cols="52" rows="25"><?php echo $posting; ?></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Send" />
<input type="reset" name="reset" value="Clear Form"/></td>
</tr>
</table><!-- new added-->
</form>
</div>
</section>
here is your output https://jsfiddle.net/mxmd5jq9/
You forgot to close the table tag
<section>
<div>
<form name="customerForm" method="post" action="?">
<table cellspacing="3" cellpadding="5" border="0" style="width: 95%;" align="center">
<tr>
<td>Name: </td>
<td><input type="text" name="cusName" size="25" value="<?php echo $fullName; ?>" /></td>
</tr>
<tr>
<td>Email: </td>
<td><input type="text" name="cusEmail" size="30" value="<?php echo $emailAddress; ?>" /></td>
</tr>
<tr>
<td>Mobile: </td>
<td><input type="text" name="cusMobile" size="25" value="<?php echo $mobilePhone; ?>" /></td>
</tr>
<tr>
<td>Enquiry: </td>
<td><textarea name="posting" cols="52" rows="25"><?php echo $posting; ?></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Send" />
<input type="reset" name="reset" value="Clear Form"/></td>
</tr>
</table>
</form>
</div>
</section>
I am trying to develop a form, which has Emp details and Personal info details i need to display in the the below way.
This is my code
<table style="border: 1px solid; width: 900px; height: 200px; table-layout:fixed">
<tr>
<td>
<label for="Employee" style="height:20px">Employee:</label>
</td>
<td>
<label for="Id" style="height: 20px">Id</label>
</td>
<td>
<input type="text" id="txtId" />
</td>
<td>
<label for="Designation" style="height:20px">Designation</label>
</td>
<td>
<input type="text" id="txtDesig" />
</td>
</tr>
<tr>
<td></td>
<td> <label for="Mail" style="height: 20px">Mail</label></td>
<td> <input type="text" id="Text3" /> </td>
<td> <label style="height: 20px">Ext</label> </td>
<td> <input type="text" id="Text4" /> </td>
</tr>
<tr>
<td>
<label for="PersonalInfo" style="height:20px">Personal Info:</label>
</td>
<td>
<label for="Name" style="height:20px">Name:</label>
</td>
<td>
<input type="text" id="txtName" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="City" style="height:20px">City:</label>
</td>
<td>
<input type="text" id="txtCity" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="State" style="height:20px">State:</label>
</td>
<td>
<input type="text" id="txtState" />
</td>
</tr>
</table>
The issue is the textboxes are not in the same line and the form looks weird.
You can start like this:
table{border: 1px solid; width: 1500px;}
table tr td label{width: 95px;display: inline-flex;}
<table>
<tr>
<td>
<label>Employee:</label>
</td>
<td>
<label id="lblId">Id</label>
<input type="text" id="txtId " />
<label id="lblDesig">Designation</label>
<input type="text" id="txtDesig" />
</td>
</tr>
<tr>
<td></td>
<td>
<label id="Label3">Mail</label>
<input type="text" id="Text3 " />
<label id="Label4 ">Ext</label>
<input type="text" id="Text4" />
</td>
</tr>
<tr>
<td>
<label>Personal Info:</label>
</td>
<td>
<label>Name:</label>
<input type="text" id="txtName" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label>City:</label>
<input type="text" id="txtCity" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label>State:</label>
<input type="text" id="txtState" />
</td>
</tr>
</table>
I'm guessing you have to use tables for some reason? If not consider moving to using something a little more practical. Tables are cumbersome for this sort of thing. Having a column based approach would make a lot more sense.
In order to do this with tables, you're going to have to nest them. I only did a portion of the table to give you an idea of how to do it. So don't copy paste this. I took the IDs out to make it simpler to read. You'll obviously want those in there. Also when you run the code snippet make sure you scroll all the way left as the width is set to 1500. You can edit this when you apply it to your code. Just change where it says width: 33% to whatever you need.
<table style="border: 1px solid; width: 1500px; height: 400px;">
<tr>
<td style="width:33%;">
<label style="height:20px; width:33%;">Employee:</label></td>
</td>
<td style="width:33%;">
<table>
<tr>
<td><label height: 20px ">Id</label></td>
<td><input type="text " /></td>
<td><label id="lblDesig " height: 20px">Mail</label></td>
<td><input type="text" id="txtDesig" /></td>
</tr>
<tr>
<td><label style="height:20px;">Designation</label</td>
<td><input type="text" id="txtDesig" /></td>
<td><label id="lblId" height: 20px ">Ext</label></td>
<td><input type="text" id="txtDesig" /></td>
</tr>
</table>
</td>
</tr>
</table>
Normally table shouldn't be used for layout. Suggest using Bootstrap Grid system and Forms: http://getbootstrap.com/css/#grid
It gives you a modern/professional look, as well as handles different resolutions/devices for you nicely.
Here is a simple example:
<div class="row">
<div class="col-lg-2">
<label>Employee</label>
</div>
<div class="col-lg-5">
<div class="form-group">
<label for="Id" class="col-sm-2 control-label">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Id">
</div>
</div>
<div class="form-group">
<label for="Mail" class="col-sm-2 control-label">Mail</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Mail">
</div>
</div>
</div>
<div class="col-lg-5"></div>
</div>
This is what the following code produces. Could someone please help me make the text line up with the textboxes on all screen sizes? Originally I wanted to set the height of each text to line it up with the textboxes, but then realized it wouldn't be lined up on different sized screens. Any help is appreciated.
<body>
<h1>Contact Us</h1>
<p>Please take a few moments to fill out our feedback form. It will help us to better address your needs. Thank you.</p>
<div id="mainLeft">
<table border="0" style="z-index: 1; position: inline; width: 440px; height: 334px; left: 0px; top: 0px;" width="644">
<tbody>
<tr>
<td height="40" scope="col" width="144"><strong><span class="style4"><span class="style5">Your Name:</span> </span></strong></td>
<td height="269" rowspan="10" scope="col" width="267">
<form action="send-form.php" id="form" method="post" name="form">
<p><input id="name" name="name" size="35" type="text" value="" /> </p>
<p><input id="email" maxlength="55" name="email" size="35" type="text" /></p>
<p><input id="address" maxlength="55" name="address" size="35" type="text" /></p>
<p><input id="city" maxlength="55" name="city" size="35" type="text" /></p>
<p><input id="state" maxlength="55" name="state" size="15" type="text" /></p>
<p><input id="zip" maxlength="55" name="zip" size="25" type="text" /></p>
<p><input id="telephone" maxlength="55" name="telephone" size="35" type="text" /></p>
<p><input id="fax" maxlength="55" name="fax" size="35" type="text" /></p>
<p><input id="feedback" maxlength="55" name="feedback" size="35" type="text" /></p>
<p><textarea cols="30" id="comments" name="comments" rows="7" wrap="virtual"></textarea></p>
<input name="Submit" onclick="MM_validateForm('email','','RisEmail','phone','','NisNum','comments','','R');return document.MM_returnValue" tabindex="1" type="submit" value="Submit" /> </form>
</td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Email Address: </span><br /></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Mailing Address: </span><br /></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">City: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">State: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Zip Code: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Telephone: </span></strong></td>
</tr>
<tr>
<td height="0"scope="col"><strong><span class="style6">Fax: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">How did you hear about us?: </span></strong></td>
</tr>
<td scope="col"><span class="style6"><strong>Explanation of your legal situation: </strong></span><strong><span class="style4"> </span></strong></td>
</tr>
<tr>
<td align="right"> </td>
<td align="right" height="35"> </td>
<td align="left" height="35"> </td>
</tr>
</tbody>
</table>
</div>
</body>
Don't use tables for that... use something as simple as:
<label for="name">Your name:</label><input type="text" name="name" /><br />
<label for="email">Email address:</label><input type="text" name="email" /><br />
etc...
You might not even need the line breaks (<br />s) if you style everything properly with CSS.
You don't need tables here, but you can take a look at example below how to do this:
<html>
<body>
<h1>Contact Us</h1>
<p>Please take a few moments to fill out our feedback form. It will help us to better address your needs. Thank you.</p>
<div id="mainLeft">
<form action="send-form.php" id="form" method="post" name="form">
<table border="0" style="z-index: 1; position: inline; width: 440px; height: 334px; left: 0px; top: 0px;" width="644">
<tbody>
<tr>
<td scope="col" width="144"><strong><span class="style4"><span class="style5">Your Name:</span> </span></strong></td>
<td><input id="name" name="name" size="35" type="text" value="" /></td>
</tr>
<tr>
<td scope="col"><strong><span class="style6">Email Address: </span><br /></strong></td>
<td><input id="email" maxlength="55" name="email" size="35" type="text" /></td>
</tr>
<tr>
<td scope="col"><strong><span class="style6">Mailing Address: </span><br /></strong></td>
<td><input id="address" maxlength="55" name="address" size="35" type="text" /></td>
</tr>
<tr>
<td scope="col"><strong><span class="style6">City: </span></strong></td>
<td><input id="city" maxlength="55" name="city" size="35" type="text" /></td>
</tr>
<tr>
<td scope="col"><strong><span class="style6">State: </span></strong></td>
<td><input id="state" maxlength="55" name="state" size="15" type="text" /></td>
</tr>
<tr>
<td scope="col"><strong><span class="style6">Zip Code: </span></strong></td>
<td><input id="zip" maxlength="55" name="zip" size="25" type="text" /></td>
</tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Proper way to do this is:
<label for="test">Test</label>
<input type="text" name="test"/><br/>
Take a search/read some CSS tutorial to properly format your html.
Hope this help! :)
Try using a label with the for attribute.
This example would actually place a label next to your text field.
<label for="myField">foo</label>
<input type="text" name="myField" id="myField" />
You don't need table here.
Everyone's going nuts seeing tables for a form, but forgot to answer your question: A css property called vertical-align can be played around with to get everything aligned. In my example, I've set it to 'top'. But you can use pixels (positive and negative values) to change the alignment as well. e.g vertical-align: 1px; or vertical-align:-1px;
Anyways, You shouldn't use tables for this (especially the way you're using them). You can achieve the same thing quite simply using divs/spans/etc:
HTML (snippet from your attached code)
<form action="send-form.php" id="form" method="post" name="form">
<div class="fields">
<label>Your name:</label>
<span><input id="name" name="name" size="35" type="text" value="" /></span>
</div>
<div class="fields">
<label>Email Address:</label>
<span><input id="email" maxlength="55" name="email" size="35" type="text" /></span>
</div>
<div class="fields">
<label>Comments:</label>
<span><textarea></textarea></span>
</div>
</form>
CSS to style the above
.fields {width: 500px;}
.fields > label { display:inline-block; width:150px; font-weight:bold; vertical-align:top; }
.fields > span { display: inline-block; }
Preview: http://jsfiddle.net/JESqY/5/
I am having an issue right now. When I load up my webpage, all of the boxes/words are aligned awkwardly, and I was wondering if I can get some help aligning the boxes all to be on the same line.
click here for a jsfiddle demo
<table bgcolor="#bbbbbb" width="100%" border="0" cellspacing="0" cellpadding="0" valign="center">
<tr>
<td width="10%" valign="top" align="center">
<form name="form1" method="post" action="checklogin.php">
<font size="5"><strong>Account Login</strong></font><br />
Username :
<input name="myusername" type="text" id="myusername"><br />
Password :
<input name="mypassword" type="password" id="mypassword"> <br />
<input style="width:75px; font-size:14px; height:25px;" type="submit" name="Submit" value="Login">
</form>
</td>
<td width="10%" valign="top" align="center">
<form id="form1" name="form1" method="post" action="registration_script.php">
<font size="5"><strong>Account Register</strong></font><br />
Username :
<input type="text" name="txtUser" id="txtUser" /> <br />
Repeat :
<input name="myusername" type="text" id="myusername"><br />
Password :
<input type="password" name="txtPassword" id="txtPassword" /> <br />
Repeat :
<input name="myusername" type="text" id="myusername"><br />
<input style="width:75px; font-size:14px; height:25px;" type="submit" name="btnRegister" id="btnRegister" value="Register" />
</td>
</tr>
</form>
</table>
try to check this one: Edited
hope this gives the idea(on my own very way:)).
<table bgcolor="#bbbbbb" width="100%" border="0" cellspacing="0" cellpadding="0" valign="center">
<tr>
<td width="10%" valign="top" align="center">
<form name="form1" method="post" action="checklogin.php">
<table>
<thead align="center">Account Login</thead>
<tr>
<td>Username :</td>
<td><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password :</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td></td>
<td colspan="1"><input style="width:75px; font-size:14px; height:25px;" type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</form>
</td>
<td width="10%" valign="top" align="center">
<form id="form1" name="form1" method="post" action="registration_script.php">
<table>
<thead align="center">Account Register</thead>
<tr>
<td>Username :</td>
<td> <input type="text" name="txtUser" id="txtUser" /></td>
</tr>
<tr>
<td>Repeat :</td>
<td><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password :</td>
<td><input type="password" name="txtPassword" id="txtPassword" /></td>
</tr>
<tr>
<td>Repeat :</td>
<td><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td></td>
<td colspan="1"><input style="width:75px; font-size:14px; height:25px;" type="submit" name="btnRegister" id="btnRegister" value="Register" /></td>
</tr>
</table>
</form>
</td>
</tr>
In case you don't mind tableless:
<style>
.pseudo-table, form p {
display: table;
background-color: #bbbbbb;
}
.pseudo-cell, form p label {
display: table-cell;
vertical-align: top;
}
form p label {
width: 100px;
}
</style>
<div class='pseudo-table'>
<div class='pseudo-cell'>
<form name='form1' method='post' action='checklogin.php'>
<h2>Account Login</h2>
<p>
<label>Username</label>
: <input name='myusername' type='text' id='myusername'>
</p>
<p>
<label>Password</label>
: <input name='mypassword' type='password' id='mypassword'>
</p>
<button>Login</button>
</form>
</div>
<div class='pseudo-cell'>
<form name='form2' method='post' action='registration_script.php'>
<h2>Account Register</h2>
<p>
<label>Username</label>
: <input type='text' name='txtUser' id='txtUser'>
</p>
<p>
<label>Repeat</label>
: <input name='myusername' type='text' id='myusername'>
</label>
<p>
<label>Password</label>
: <input type='password' name='txtPassword' id='txtPassword'>
</p>
<p>
<label>Repeat</label>
: <input name='myusername' type='text' id='myusername'>
</p>
<button>Login</button>
</form>
</div>
</div>
you can define you own css to define the alignment
for example:
<style>
selector{
float:left;
}
</style>
I have 2 forms one after another, but the second one is not posting at all. Everything works fine except the submitting. Can I have 2 forms like this?
<form action="getRates.php" name="rates" method="post" onSubmit="popupform(this, 'join')">
<table style="width: 216px">
<tr>
<td style="width: 115px; height: 49px;"><span class="style16">Weight</span><br/>
<input type="text" id="weight" name="weight" size="10" maxlength="4"/>
<input type="hidden" id="weightOne" name ="weightOne">
<input type="hidden" id="weightTwo" name ="weightTwo">
<input type="hidden" id="weightThree" name="weightThree">
<input type="hidden" id="weightFour" name="weightFour">
</td>
<td align="right" style="width: 68px; height: 49px;" valign="top"><span class="style16">Zip Code</span><br/>
<input type="text" id="zip" name="zip" size="10" maxlength="5"/>
</td>
</tr>
<tr>
<td style="width: 115px">
<input name="submit" type="submit" value="Door Hanger Rates" style="width: 138px" />
</td>
</tr>
</table>
</form>
<form action="getBusinessRates.php" name="businessRates" method="post" onSubmit="popupform(this, 'join')">
<table style="width: 216px">
<tr>
<td style="width: 115px; height: 49px;"><span class="style16">Weight</span><br/>
<input type="text" id="businessWeight" name="businessWeight" size="10" maxlength="4" />
</td>
<td align="right" style="width: 68px; height: 49px;" valign="top"><span class="style16">Zip Code</span><br/>
<input type="text" id="businessZip" name="businessZip" size="10" maxlength="5" />
</td>
</tr>
<tr>
<td style="width: 115px">
<input name="businessSubmit" type="submit" value="Business Card Rates" style="width: 138px" />
</td>
</tr>
</table>
</form>
Your same code is working, you can check it out here. It might be some other issue probably.