I know that it's been an ongoing discussion, and that float:right is supposed to be the answer to avoiding the use of tables for formatting, but I can't seem to figure out how to do the following without tables. The labels will change based on language, so fixed widths can't be used.
I can't seem to get float:right to work when the inputs are different widths. Here's the HTML I used with a table...
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head />
<body>
<style>
.left {
width:1%;
white-space:nowrap;
text-align:right;
padding-right: 5px;
}
</style>
<form>
<table
width="400">
<tr>
<td class="left">Name:</td>
<td>
<input
type="text"
style="display:table-cell; width:100%"/>
</td>
</tr>
<tr>
<td class="left">Telephone Number:</td>
<td>
<input
type="text" style="width: 30px;"
/>-<input
type="text" style="width: 30px;"
/>-<input
type="text" style="width: 40px;"/>
</td>
</tr>
<tr>
<td colspan="2">
<input
type="checkbox"
/>Okay to leave the package without a signature.
</td>
</tr>
<tr>
<td valign="top" class="left">Delivery Notes:</td>
<td>
<textarea
rows="5"
style="display:table-cell;
width:100%"
></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
Thanks.
Related
So I have an order form which works well but when I test it on smaller screens a part of it goes way off to the side, the rest is how it should be this one part is not for some reason.
This is the html code of the part that goes wrong:
<div class="contact" align="center">
<p>Please tell us who you are</p>
<table border="0" cellpadding="0" width="550" id="table1">
<tr>
<td width="340" align="right">Name</font></td>
<td width="10"> </td>
<td width="200"><input type="text" name="name" id="name" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Email</font>
(Your confirmation will be sent here): </td>
<td width="10"> </td>
<td width="200"><input type="text" name="email" id="email" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Phone number:</td>
<td width="10"> </td>
<td width="200"><input type="text" name="number" id="number" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Address:</td>
<td width="10"> </td>
<td width="200"><input type="text" name="address" id="address" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Town:</td>
<td width="10"> </td>
<td width="200"><input type="text" name="town" id="town" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Postcode:</td>
<td width="10"> </td>
<td width="200"><input type="text" name="postcode" id="postcode" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">County:</td>
<td width="10"> </td>
<td width="200"><input type="text" name="county" id="county" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right"> </td>
<td width="10"> </td>
<td width="200"> </td>
</tr>
</table>
</div>
and not sure if it will help but this is the style for the border:
form {
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
}
For dealing with different screen sizes I added:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have attached an image of what is happening to show what I mean:
I'm just not sure why this one bit is doing it and the rest of the form is fine? Any help would be much appreciated
Add width: 100%; to the table element. Then adjust the width values you have given to each of the td elements. (I’d advise against a forced width for them, but it’s fine.)
It looks like this now—
I have seen unnecessary code
like <td>title</td><td width="10"> </td> Can be replace with <td style="padding right: 10px">title</td>
blank last row <tr><td> </td></tr> Can be replace with table CSS margin-bottom: 20px;
By the way
you need to remove <td width="100"> to <td>
table{
width: 100%;
margin-bottom: 20px;
}
tr>td:first-child{
width:auto;/*340*/
padding-right: 10px;
}
tr>td:last-child{
width:auto;/*2pp*/
}
With my JSFiddle Now you can resize to... ~ 331px width (Can be resize less. If cut down size Input's attribute)
I have these textboxes,
looks fine in when the browser is maximized but in mobile or when you minized the below textbox overlap the above textbox.
I'm using the below syntax:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<center>
<div class="mrQuestionText">
<style>
.mrNext {
min-width: 15em
}
</style>
<div class="mrInstruct"></div>
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<th class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</th>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<th class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</th>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
</div>
</center>
</body>
</html>
Apologies, as I can't share the full syntax.
Kindly advise if there is any property that i should add/update.
Try adding the following for table
border-spacing: 5px (spacing u wish)
I have updated your code, you were missing a semicolon here min-width: 15em. Also you need to restructure your code.
Since I am not able to reproduce the issue, I suggest you to use the below updated styles. I have used border-spacing below, try that.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.mrNext {
min-width: 15em;
}
.mrQuestionTable {
border-collapse: separate;
}
.mrQuestionTable tr{
border-spacing: 10px;
}
</style>
</head>
<body>
<center>
<div class="mrQuestionText">
<div class="mrInstruct"></div>
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<th class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</th>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<th class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</th>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
</div>
</center>
</body>
</html>
You add white-space: nowrap; for 1st column
and th -must be only in the thead section
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<center>
<div class="mrQuestionText">
<style>
.mrGridCategoryText{white-space: nowrap;}
.mrNext {
min-width: 15em;
}
</style>
<div class="mrInstruct"></div>
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<td class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</td>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<td class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</td>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
</div>
</center>
</body>
</html>
You need to use padding on your td elements in the media query.
html
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<td class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</td>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<td class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</td>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
css
#media only screen and (min-width: 320px) and (max-width: 768px){
.mrQuestionTable tbody tr td {
padding-bottom: 1em;
}
}
I have a login page. It doesn't have much text, and it is quite readable in big screens, such as a laptop or a tablet. However, in a mobile one has to zoom it until he sees what is written there. I want to make it scalable, but it looks like I don't know how to do it. Here is the HTML.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<style>
.big {
width:100%;
text-align:center;
}
</style>
</head>
<body>
<form name="form1" action="enter.php" method="post">
<table class="big">
<tr>
<td colspan="2">
<img src="http://www.lipsum.com/images/banners/grey_234x60.gif">
</td>
</tr>
<td align="right">Name:</td>
<td align="left"><input id="Username" name="Username" size="25" type="text"></td>
</tr>
<tr>
<td align="right">Pass:</td>
<td align="left"><input id="Password" name="Password" size="25" type="password"></td>
</tr>
<tr>
<td><input type="submit" value="Sumbit"></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
You need to make adaptive and responsive design . You can use these libraries to help you make a responsive grid, for example:
http://getskeleton.com/
They use "media queries " for responsive design, you leave a link :
https://developer.mozilla.org/es/docs/CSS/Media_queries
Good luck :)
Try adding the below line between your <head>...</head> tag
<meta name=viewport content="width=device-width, initial-scale=1">
Only to give you an idea about the elements envolved...
Expand the snipet in fuul screen than resize browser page.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<style>
.big {
width:100%;
text-align:center;
}
#media only screen and (max-width: 600px) {
body {
font-size:1.6em;
}
input{
width: 90%;
font-size: 1.4em;
}
input[type="submit"] {
width: 50%;
}
}
</style>
</head>
<body>
<form name="form1" action="enter.php" method="post">
<table class="big">
<tr>
<td colspan="2">
<img src="http://www.lipsum.com/images/banners/grey_234x60.gif">
</td>
</tr>
<td align="right">Name:</td>
<td align="left"><input id="Username" name="Username" size="25" type="text"></td>
<td></td>
</tr>
<tr>
<td align="right">Pass:</td>
<td align="left"><input id="Password" name="Password" size="25" type="password"></td>
<td></td>
</tr>
<tr>
<td></td>
<td style="text-align:left"><input type="submit" value="Sumbit"></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
I am trying to write a jsp that will show the errors for a form, however I can't seem to format it properly. I tried to add a table in one of the cells, which made it look a bit better, but it still doesn't look clean. This is my code.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>New user account</title>
</head>
<body>
<h1 align="center">Sign Up</h1>
<h3 align="center">Please fill in the following form to create
your account.</h3>
<form action="SignupCheck" method="post">
<table border="1" align=center width="500">
<tr>
<td width="250"><p align="center">Full Legal Name:</p></td>
<td align="center"><input type="text" name="name"></td>
</tr>
<tr>
<td width="250"><p align="center">Username:</p>
<td align="center"><input type="text" name="username"></td>
</tr>
<tr>
<td width="250"><p align="center">Password:</p></td>
<td align="center"><input type="password" name="password"></td>
</tr>
<tr>
<td width="250"><p align="center">Confirm Password:</p></td>
<td align="center"><input type="password"
name="confirmPassword"></td>
</tr>
<tr>
<td width="250"><p align="center">Starting Balance:</p></td>
<td>
<table align="center">
<tr>
<td align="center"><input type="text" name="balance"></td>
</tr>
<tr>
<td align="center"><p align="center"
style="color: red; font-size: 18px">Please enter your
password</p></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="250" align="right"><input type="reset" value="Reset"></td>
<td align="left"><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
As you see I placed a sample error and the Textbox is too high and the error message takes up too much space...
Add the following as CSS:
td {
padding: 5px 5px 5px 5px
}
p {
text-align:right;
}
table {
border: solid lightgray;
border-radius: 10px;
}
Here is the JSFiddle demo
Also note that I modified the HTML code, removing the sub-table you added. Please have a look at the JSFiddle for the full code.
i am designing a webpage which includes two tables.here is my code
<div>
<table style="width: 50%; height: 377px;">
<tr>
<td rowspan="4"><EMBED style="margin-left:20px" SRC="nesaranodu.mp4" WIDTH="500px" HEIGHT="400px" AUTOPLAY="FALSE" LOOP="false"></EMBED> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table style="width: 50%; height: 377px;display:inline-block;">
<tr>
<td> </td>
<td> </td>
<td align="right" style="padding:0px;color:white" >mobile number:</td>
<td><input name="Text1" type="text" /><h3 style="color:red;"><?php echo $mnoerr;?></h3>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td align="right" style="padding:0px;color:white">password</td>
<td><input name="Text2" type="password" /><h3 style="color:red;"><?php echo $passerr;?></h3>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td></td>
<td ><input name="Submit1" type="submit" value="change address" />
<input onclick="document.location.href='regforswa.php'" name="Submit2" type="button" value="register" /><br/>
forgot password<h3 style="color:red;"><?php echo $success;?></h3></td>
</tr>
</table>
</div>
and i want to display it side by side.i used display:inline-block property but it is not working fine.please suggest me what i have to do.
http://jsfiddle.net/CHC67/
<div class=left>
//First table
</div>
<div class=right>
//Second table
</div>
<style>
.left {
width:50%;
float: left;
}
.right {
width 50%;
float: left;
}
</style>
Should really be doing this with divs rather than tables.
Try using floats on both tables:
<table style="width: 50%; height: 377px; float:left;">
Please make sure to set the width on the EMBED accordingly..
Otherwise it will grow over the 50% depending on the display size..