I have a form which is presented in a table. In the third column, there are 4 rows for selecting the preferred method of contact (radio buttons). I'm currently using a label to write this text in the first row. I'm told, however, it doesn't look as nice as using a custom image.
The image is supposed to sit nicely amongst the form content with an arrow pointing to these radio buttons. I figured the easiest way to do this would be to set a fixed width on the columns then set the table's background image to the image I've been given and position it (with background-position) to where it should sit. With the column widths set, there shouldn't be a problem of alignment.
Any other ideas on how to do this?
My suggestion: instead of putting the background on the table, put the background on a table cell with rowspan=3, meaning it will cover the area to the right of all three radio buttons. Here's an HTML sample illustrating the technique. Note that you'll need to carefully size each column (and the enclosing table) to make sure your image fits in properly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
table.contactForm
{
background-color:#EBF3F7;
width:681px;
}
table.contactForm td
{
text-align:left;
padding-top:5px;
padding-bottom:5px;
padding-left:0px;
padding-right:0px;
white-space:nowrap;
height:25px;
}
table.contactForm td.first
{
width:200px;
}
table.contactForm label
{
padding-left:5px;
}
table.contactForm td.second
{
width:200px;
text-align:right;
}
table.contactForm td input[type=text]
{
width:180px;
}
table.contactForm td.third
{
width:20px;
text-align:right;
}
table.contactForm td.imageArrows
{
background-image:url(background.jpg);
background-repeat:no-repeat;
background-position:left center;
width:261px;
height:78px;
padding:0px;
}
</style>
</head>
<body>
<table class="contactForm">
<tr>
<td class="first"><label for="FullName">Full Name</label></td>
<td class="second"><input type="text" name="FullName" /></td>
<td></td>
</tr>
<tr><td colspan="4"><br/></td></tr>
<tr>
<td class="first"><label for="Phone">Phone</label></td>
<td class="second"><input type="text" name="Phone" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
<td rowspan="3" class="imageArrows"></td>
</tr>
<tr>
<td class="first"><label for="Mobile">Mobile</label></td>
<td class="second"><input type="text" name="Mobile" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>
<tr>
<td class="first"><label for="Email">Email</label></td>
<td class="second"><input type="text" name="Email" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>
</table>
</body>
</html>
Related
I'm trying to find a solution to laying out forms in our app (ported from Silverlight). We like labels to up, are trying to do this without tables, but there's a fundamental problem that tables solve I'm not sure how to address any other way.
Here is an example (plnkr):
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 1.1rem;
border-bottom: 1px solid #ccc;
}
td {
vertical-align: top;
padding-bottom: 0.5rem;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan='2'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>
label:
<div>(This label is extra</div>
<div>tall because of these</div>
<div> extra lines.)</div>
</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>this is the longest label:</td>
<td><input placeholder='search for stuff'>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>longer label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td colspan='2' class='my-header-style'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>long label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>another label:</td>
<td>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>short label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
</table>
</body>
</html>
We have two groups of "label: input" lists, each with their own headings. The leftmost-column adjusts to the width of the widest label in either group, and simultaneously each row also adjust to the height of the tallest element.
How do I achieve this same behavior without tables? When people are talking about "tableless" layout, is that only for things that don't care about content size for their layout?
EDIT:
Uh, sorry. You actually can do more than two elements per line, but (as usual with float: right) you have to put them in reverse order.
If you must not use a table: Add a div for each row and put a invisible horizontal rule between them to keep them from piling onto each other. Also: a float: left to the labels and a float: right to the input boxes. It works, but I would not know how to make a line with three or more elements, like: Born on: Month/Day/Year, work.
Anyway, here is how you can do it.
<!DOCTYPE=html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
body {
float: left;
}
hr {
clear: both;
border: none;
}
p{
float: left;
}
form {
float: right;
}
</style>
<body>
<div id = "row_1">
<p>looooooooooooo <br /> ooooooooooooo <br /> ooong label: </p>
<form><input type="text" placeholder="Second" /></form>
</div>
<hr />
<div id = "row_2">
<p>short</p>
<form><input type="text" placeholder="First" /></form>
</div>
</body>
</html>
I'm having a bit of a problem putting together a HTML email which will render properly in outlook, i had initially got everything working fine through the use of list items and the list-style-image Property, but that isn't supported in outlook.
Basically, i have a table with 2 rows in it, the left hand side one has an 11pixel image being using as a custom bullet point, and on the right hand side is some text.
My problem is no matter what i do i cannot get the column on the left to maintain an 11 pixel width, the columns ALWAYS split equally down the middle of the table. Help please?
HTML
<table>
<tr>
<td>
<img src="Small Image" />
</td>
</tr>
<tr>
<td class="red">
<h4>
TEXT
</h4>
</td>
</tr>
<tr>
<td class="webinar">
<table>
<tr>
<td class="left">
<img src="/Bullet.png" />
</td>
<td class="right">
<p>
TEXT
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
td.webinar .left {
width:11px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar .right {
width:144px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar {
background-color:#ccc6d2;
border:1px solid #313131;
padding-top:8px;
padding-bottom:10px;
}
you want to use css styles in emails? then you are going to have a bad time in most clients..
try to:
<table>
<tr>
<td width="144px">
<img src="Small Image" />
</td>
</tr>
</table>
in email templates you should always apply inline styling as "oldschool" as possible!
I'm a newbie learning the ways of html/css via online tutorials. Only now I've run into a little problem that I can't quite figure out, and I've tried suggestions to similar issues from this very site and more.
As the title says, my external css file just does not seem to work at all, though said code works fine if I apply it internally. I keep rereading the code trying to spot mistakes, but even css lint and codepen just seem to say I have overqualified elements, and not much else. I've tried just using the class names e.g. .Attack instead of td.Attack, but that didn't help.
The html is basically a table with some images, and I am only trying to apply a single stylesheet. Here is tcgdatabase.css
body {
background-color:transparent;
}
p {
color:#2E2435;
text-align:justify;
}
td {
text-align:left;
}
td.Name {
text-align:left;
width:250px;
font-size:30px;
font-weight:bold;
}
td.Type {
width:50px;
}
td.Stage {
text-align:left;
width:120px;
font-size:15px;
font-weight:bold;
}
td.HP,td.AP {
width:50px;
font-style:italic;
font-size:30px;
}
span.Points {
font-size:15px;
}
td.Attack,td.BaseDamage {
height:30px;
font-weight:bold;
font-size:20px;
}
td.Effect,td.Flavour {
text-align:justify;
}
td.WRR,td.WRRType {
height:20px;
font-weight:bold;
}
th {
text-align:center;
}
here is the html page, I even left the css in there enclosed with the to show how I added it internally:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>oddities</title>
<meta charset="UTF-8">
<link ref="stylesheet" type="text/css" href="file:///C:/Users/Admin/Documents/TCG/JBSet1/tcgdatabase.css">
<!--<style>
body {
background-color:transparent;
}
p {
color:#2E2435;
text-align:justify;
}
td {
text-align:left;
}
td.Name {
text-align:left;
width:250px;
font-size:30px;
font-weight:bold;
}
td.Type {
width:50px;
}
td.Stage {
text-align:left;
width:120px;
font-size:15px;
font-weight:bold;
}
td.HP,td.AP {
width:50px;
font-style:italic;
font-size:30px;
}
span.Points {
font-size:15px;
}
td.Attack,td.Base Damage {
height:30px;
font-weight:bold;
font-size:20px;
}
td.Effect,td.Flavour {
text-align:justify;
}
td.WRR,td.WRRType {
height:20px;
font-weight:bold;
}
th {
text-align:center;
}
</style>-->
</head>
<body>
<table style="width:100%">
<tr>
<td rowspan="9" style="width:420px"><img src="CacturneR.png" style="width:350px"></td>
<td class="Type"><img src="Energy Types/Dark.png" style="width:40px"></td>
<td class="Stage">Legendary</td>
<td class="Name">Yveltal</td>
<td class="HP">110<span class="Points">HP</span></td>
<td class="AP">0<span class="Points">AP</span></td>
</tr>
<tr>
<td class"AttackCost" colspan="2">
<img src="Energy Types/Dark.png" style="width:30px">
<img src="Energy Types/Colourless.png" style="width:30px">
</td>
<td class="Attack" colspan="2">Take In</td>
<td class="BaseDamage"><td>
</tr>
<tr>
<td class="Effect" colspan="5">
Attach up to 3 Pokémon from your hand to this Pokémon and heal 10 damage from this
Pokémon times the number of Pokémon cards just attached in this way. Each Pokémon attached
in this way provides 1 Energy of their type at a time (If they have more than 1 type,
they provide Energy of each of their types, but only 1 at a time).
</td>
</tr>
<tr>
<td class"AttackCost" colspan="2">
<img src="Energy Types/Dark.png" style="width:30px">
<img src="Energy Types/Dark.png" style="width:30px">
<img src="Energy Types/Colourless.png" style="width:30px">
<img src="Energy Types/Colourless.png" style="width:30px">
</td>
<td class="Attack" colspan="2">Riot Ballista</td>
<td class="BaseDamage"><td>
</tr>
<tr>
<td class="Effect" colspan="5">
Discard 1 card attached to this Pokémon. If that card is a Pokémon, this
attack does damage equal to the discarded Pokémon's HP. If it is not a
Pokémon, this attack does 50 damage and this Pokémon does 50 damage to
itself.
</td>
</tr>
<tr>
<td class="WRRType"><img src="Energy Types/Fairy.png" style="width:25px"></td>
<td class="WRR">weakness: x2</td>
<td class="Flavour" colspan="3" rowspan="3">
"This terrible beast has long since turned a blind eye to the havoc it
wreaks in its wake" - Anon.
</td>
<tr>
<td class="WRRType"><img src="Energy Types/Fighting.png" style="width:25px"></td>
<td class="WRR">resistance: -20</td>
</tr>
<tr>
<td class="WRRType"><img src="Energy Types/colourless.png" style="width:25px"></td>
<td class="WRR">retreat cost: x2</td>
</tr>
<tr>
<td class="Illus" colspan="3">Illus. NavaskaIII</td>
<td class="SetNumber">??/??</td>
<td class="Rarity">UR</td>
</tr>
</table>
</body>
</html>
I feel like I am missing something completely obvious, I really would appreciate the help!
In your link element change
ref="stylesheet" to rel="stylesheet"
notice the 'f' should be 'l'
Follow this syntax:
<link rel="stylesheet" href="style.css" type="text/css">
Path of css file has to be relative or absolute path..
Check your path to the CSS file. I would recommend using a relative path to the file.
Change href="file:///C:/Users/Admin/Documents/TCG/JBSet1/tcgdatabase.css" to something like href="/path/to/JBSet1/tcgdatabase.css".
If the CSS file is in the same folder as the HTML file, you can just use href="tcgdatabase.css".
Edit:
As stated above, also change ref="stylesheet" to rel="stylesheet".
I'm getting white spaces at the top of my form and I believe I have tried everything but, it's still there. Can someone give some sugesstions at to how to get rid of the white space at the top? When I open the form in firefox it seems to be okay but, when I use IE I get white space. Also, it is a .cfm form. Thanks.
Here is my code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.body
{
margin-top:0px;
padding-top:0px;
}
.mytable1
{
border-collapse:collapse;
border-color:#000000;
border-style:solid;
border-width:2px;
}
.mytable1 th
{
border-color:#333333;
border-style:solid;
border-width:1px;
}
.mytable1 td
{
border-color:#333333;
border-style:solid;
border-width:1px;
}
.mytable1
{
border-collapse:collapse;
border-color:#000000;
border-style:solid;
border-width:2px;
}
</style>
</head>
<body lang=EN-US style='tab-interval:.5in'>
<div id=Section1>
<cfoutput>
<form name="reportform" action="UpdateFormStatus.cfm" method="post">
<input type="hidden" name="UserEmail" value="#search_review.UserEmail#">
<table class="mytable1">
<tr>
<td valign="top" class="blacktext" align="center" colspan="14"><strong>Review Form</strong></td>
</tr>
<tr>
<td valign="top" class="blacktext" colspan="4"><strong>Type:</strong> #form.Type# </td>
<td valign="top" class="blacktext" colspan="4"><strong>Number: </strong> #form.Number# </td>
</tr>
<cfif not search_results.RecordCount>
<tr>
<td class="blacktextbold" colspan="2"> No results match those criteria.</td>
<td align="left" colspan="1">Search Again</td>
</tr>
<cfelse>
<tr>
<td valign="top" colspan="3" class="blacktext"><strong>Name:</strong> #form.Name# </td>
<td valign="top" colspan="3" class="blacktext"><strong>Project Code: </strong> #form.ProjectCode# </td>
</tr>
</table>
</form>
</cfoutput>
</body>
</html>
You have put body in as a class
is should be:
body{
margin-top:0px;
padding-top:0px;
}
For an ID you use # for a class you use . and if you are going to target an object like a div you just put div
You should put the margin and padding from the html as well to 0 and remove the . from the body selector:
html, body
{
margin-top:0px;
padding-top:0px;
}
It looks like you're missing the closing tag for cfif. The browser is trying to fix your html and is putting this tag above the table. You also don't have a closing tag for the div with id="Section1". CFML is not the same as HTML btw. This will not render properly as HTML because of the Cold Fusion specific tags.
You didn't close the parent div. <div id="Section1"> Also, as #Andrew mentioned, you had body set as a class. (body {} instead of .body{}).
http://jsfiddle.net/fKMHe/
To remove the margin and padding from the form element just add this:
form
{
margin: 0px;
padding: 0px;
}
just have found strange problem in ie7 rendering (may be for previous versions else).
If I have input inside td it create cell with height more then other browsers (ff, ie8, chrome).
All margins are reset, paddings removed, cellcpacing to zeroes. The only possibly way to make them equivalent
that I have found is specify height for all tds in pixels. But it seems to me very ugly.
here is html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link type="text/css" href="styles/main.css" rel="Stylesheet" />
</head>
<body>
<br />
<table cellspacing="0" cellpadding="0" border="0" class="details-table">
<tr class="details-row">
<td>
<label for="txtFirstName">First Name</label>
</td>
<td>
<label for="txtFirstName">Last Name</label>
</td>
</tr>
<tr class="alt-details-row">
<td>
<label for="txtFirstName">First Name2</label>
<input type="text" class="details-input textField" id="txtFirstName2" name="txtFirstName2" />
</td>
<td>
<label for="txtLastName2">Last Name2</label>
<input type="text" class="details-input textField" id="txtLastName2" name="txtLastName2" />
</td>
</tr>
<tr class="details-row">
<td>
<label for="txtFirstName3">First Name3</label>
<input type="text" class="details-input textField" id="txtFirstName3" name="txtFirstName3" />
</td>
<td>
<label for="txtLastName3">Last Name3</label>
<input type="text" class="details-input textField" id="txtLastName3" name="txtLastName3" />
</td>
</tr>
</table>
</body>
</html>
here is css:
html,
body,
form,
table,
tr,
td
{
margin: 0;
padding:0;
border: 0;
outline: 0;
font-size: 100%;
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px ;
}
input.textField
{
margin:0px;
padding:0px;
border: 1px solid #BFBFBF;
height: 17px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px ;
}
.details-table
{
width:100%;
color: #666
}
.details-table tr.details-row,
.details-table tr.details-row td
{
background: #ebe4bc;
}
and here is screen shot:
float:left on the elements might help
I don't think you can fix it by changing the height of either td or input element, as there's always 1 offset auto generated for that input in IE7 mode. In IE8 or other popular browsers, the extra 1 offset is not generated.
I think it's a bug in IE7.