Frequently I am aligning text such as:
To: 07/02/2010
From: 07/02/2010
Id like it to be displayed like this:
To: 07/02/2010
From: 07/02/2010
So what is the quickest/easiest/best way to do this? CSS? using a few nbsp (would work if its mono spacing) or using tables. Normally if I am not in a anti-hating table mood, ill use tables.
What do you recommend?
Definitely definition list (<dl>).
<dl>
<dt>From:</dt><dd>07/02/2010</dd>
<dt>To:</dt><dd>07/02/2010</dd>
</dl>
/* CSS */
dl {
overflow: hidden;
}
dt {
width: 50px;
float: left;
}
I'd recommend tables. It really is the best way, especially seeing as it really is tabular data there, and HTML doesn't support tab stops.
But it really is silly to avoid tables for the sake of avoiding tables. Unless you want the option later to style like so:
To: From:
07/02/2010 07/02/2010
You could do something like this, if for some reason you didn't want to use tables:
CSS
.sideheading { width: 3em; float: left; }
HTML
<div class="sideheading">To:</div>07/02/2010
<div class="sideheading">From:</div>07/02/2010
Or use a definition list (but if the reason you are avoiding tables is due to semantics, then DLs would be avoided for the same thing).
But of course, it's about the layout, no customer or web surfer is ever going to care how you do it, as long as they can read it!
Use a definition list or white-space nowrap.
I've seen this problem before, a quick google search:
http://www.google.com/search?q=css+forms
...brought me here:
http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
...and I copypasted the HTML and CSS into this:
<html>
<head>
<style>
label
{
width: 5em;
float: left;
text-align: right;
margin-right: 1em;
display: block
}
.submit input
{
margin-left: 4.5em;
}
</style>
</head>
<body>
<form action="#">
<p><label for="name">Name</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
Looks good to me, save it in a .html and see for yourself.
Padding with s sounds messy. How about something like this:
<span class="header">To:</span> 07/02/2010
<span class="header">From:</span> 07/02/2010
.header { display: inline-block; width: 5em;}
In this case, though, I'd actually say tables are appropriate; it does look like tabular data, with a column of headers.
This has come up at work many times and I ended up creating some styling for a 2-column table which hides borders. Technically, this is tabular data, but a table with only 2 rows and 2 columns is pretty lame considering the amount of markup needed to achieve it within spec.
I've often regretted creating the class, as now everyone uses it far too much and I have to constantly be on the lookout for it in our code reviews. If you don't anticipate that problem, it's a semantically-correct solution, and slightly more elegant than the hoops you'll jump through with DL's, spans, etc.
Related
A little new to html so if further explanation is necessary or this question just doesn't make sense please feel free to say so.
I am using div to layout a webform I am designing and using the   to move text within a div doesnt always produce the result I want as far as the layout of the page.
I started experimenting and by using:
<span style="margin-left:(variable)px"></span>
i am able to move the text exactly where I want it.
My question is this, is this a bad practice? is there a better way to do what I am trying to do, or a more conventional way? Or even something built into html that I just have not discovered yet.
Thank you
* Added Block of code to show what i am trying to accomplish
Complainant's Address
<input type="text" size="50" id="complainantAddress"/>
<span style="margin-left:3px"></span>
City
<input type="text" name="city" maxlength="15" size="15"/>
<span style="margin-left:16px"></span>
State
</div>
Using non breakable spaces for layout/positioning is bad practice.
What you are trying to do with style attributes is better, but inline-style attributes are often considered as bad pratice, too.
Style attributes are hard to maintain and you duplicate lots of information etc. In addition this styling has the highest specificity and cannot be overwritten by other styles (like user CSS files). They should be used with caution.
Use CSS attributes margin, padding and text-align for this.
Sample
http://jsfiddle.net/UYUA7/
HTML
Text<br />
Text <!-- Do NOT use this -->
<div class="center">Center</div>
<div class="right">Right</div>
<div class="indent">Indented</div>
CSS
.center {
text-align: center;
}
.right {
text-align: right;
}
.indent {
margin-left: 20px;
}
What you're doing is actually a better way to do spacing, than relying on  s. This will give you a much greater flexibility in the long-term and allow you to make changes quicker. (Less typing)
The only other thing that I would recommend is to read through this CSS manual:
http://www.w3schools.com/css/css_intro.asp
This will help you continue to learn about position with css.
UPDATE:
This is what your code can look like:
CSS - Use it in the header
<style type="text/css">
#complainantAddress {
margin-right: 3px;
}
#city {
margin-right: 16px;
}
</style>
HTML
Complainant's Address: <input type="text" size="50" id="complainantAddress"/>
City: <input type="text" name="city" maxlength="15" size="15" id="city"/>
Notice that I created two css styles, one for each matching input boxes. Within each style I defined a margin which would add the appropriate spacing to the right of the input box.
So the first input box called "complainantAddress" will have 3px spacing to the right and the second one who's id is "city" will have 16px spacing to the right of it.
I have always struggled designing css forms, I can never get the input and label side by side. Do you have any words of wisdom that may help me.
I usually use a 10px margin on the bottom but cannot get them aligned
My Common form:
Name:
Email:
Phone:
Message:
text area
I know I'm going to get backlash for this from people who think that the only possible way to do things is with pure CSS, divs, spans, etc. However, your form is tabular. You have a column of titles, and a column of input fields. In this case, because of the tabular layout, a valid solution could be tables.....GASP!
Tables are not valid for page layout...let me repeat that again, tables are not valid for layout. However, you've got an element of a page, you're not doing a full page layout. You can easily use <th> elements to style the labels for the inputs, which is quick and simple. Overall, the table (tabular) solution would be less verbose than many of the CSS layouts given, which from a pure HTML standpoint is a win. It will continue to work and layout properly even when the server gets backed up and can't load the external CSS document. To all those who believe that tables are never ok, let me remind you that this solution will validate with W3 100% of the time provided your table is properly structured. And it's far more cross browser compatible, with no box-model issues in the "crabby" legacy browers. Certainly continue to progressively enhance with CSS as is best practice.
Theory and practice, especially in the web world, are two entirely different things. In theory, all of us should be producing 100% HTML5/CSS3/Semantic/SEO Optimized...blah blah blah. In practice, theory only goes as far as the first customer complaint. Progressive enhancement is key to survival. When a webform breaks in a big corporate setting, money is lost and people get fired. For that reason, the International Bank I recently did work for had requirements that demanded all its webforms were tabular (assembled with tables) It's hard to argue with a portfolio of sites whose users generate the company hundreds of millions of $$$ annually.
<style>
ul.anyclassname{
padding:0;
}
ul.anyclassname li{
list-style-type:none;
clear:left;
}
ul.anyclassname li label{
width:300px;
float:left;
}
.inputs{
float:left;
}
</style>
<form>
<ul class="anyclassname">
<li>
<label>Name:</label>
<div div class="inputs"><input type="text"></div>
</li>
<li>
<label>Email:</label>
<div div class="inputs"><input type="text"></div>
</li>
<li>
<label>Phone:</label>
<div div class="inputs"><input type="text"></div>
</li>
</ul>
</form>
I usually do this:
<div>
<label for="txtname">Name:</label>
<input type="text" id="txtname" name="txtname"/>
</div>
<div>
<label for="txtEmail">Email:</label>
<input type="text" id="txtEmail" name="txtEmail"/>
</div>
<div>
<label for="txtPhone">Phone:</label>
<input type="text" id="txtPhone" name="txtPhone"/>
</div>
etc...
Then with my CSS:
label { width: 100px; display: inline-block; }
Something along those lines. Nothing fancy, but they are side-by-side and with the surrounding div you get a block level element to give you a line return after each pair.
I wrote a complete form in this answer: how can we make forms like this with css & html? . It has the html markups and the css classes you need to start.
The code is also in a fiddle here: http://jsfiddle.net/vSqR3/64/ (Now with the nice addition of the for attribute, thanks Kyle!)
You will find in that link not only how to put one markup next to the other, but how to set sizes and borders for each.
I strongly suggest you to play on the jsfiddle.net website. You'll be able to modify and test immediately all your changes.
One part of web development (from a front-end perspective) is laying out forms. There is never a standard set, and I've seen people continuing to use <tables> to keep styling consistent. Say you were to lay out this form:
At first glance it seems that a table would make laying out this form easy. Another options is to use <fieldset>'s, with perhaps a list inside them. Float the fieldsets to the left, give them equal widths.
My question is what is the most standard way of laying out forms? There seem to be several techniques, but many of them don't work cross browser.
How would you do it? And why?
I must say, the most common way to do this would be to use tables. Unfortunately, there are problems with table based form layouts (big surprise). One big thing is that tables will bleed over their containers (if overflow is not hidden) and they don't squash their contents like CSS can do. On top of that, rendering tables is more expensive (takes up more CPU cycles). Overall, I think that, compared to pure CSS solutions, table based form layouts are rigid and inflexible, and as a designer, I cringe (and you should, too!) at using tables for layout purposes to begin with.
A method that I am beginning to like (and that is growing more popular) is a pure, CSS2 method for laying out forms. I will not credit myself for coming up with the idea, but it is really straight forward. All you have to do is this:
THE HTML:
<form action="process.php" method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
<br />
<label for="password">Password:</label>
<input type="password" name="password" id="password" />
</form>
THE CSS:
label, input {
width:200px;
display:block;
float:left;
margin-bottom:10px;
}
label {
width:125px;
text-align:right;
padding-right:10px;
margin-top:2px;
}
br {
clear:left;
}
As you can see, the CSS code is really minimal and the results are really awesome. The pros of this method is that it uses less code (faster to download), it is cleaner without all the messy table tags littering your HTML document (maintainability), and I believe web browsers will render the CSS method faster.
Update 1: I also found a CSS method using unordered lists.
Update 2: #musicinmyhead reminded me about using fieldset and legend tags in CSS form layouts. I coded us a quick and dirty little demo here.
Note: I originally learned of this pure CSS form layout from: http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/
Research shows that labels above fields and fields all in one column are the easiest to fill out. Lukew has a lot of form's data/research/info:
http://www.lukew.com/ff/entry.asp?504
As a bonus, that's usually the easiest way to build the presentation layer as well. Plus, it's usually much more mobile-friendly out-of-the-box.
All that said, tables can be valid. In many ways, a form is a partially filled out spreadsheet (if you want to think in terms of tabular data).
I typically wrap the LABEL/FIELD pair in a div and position the label and field as needed depending on the layout desired.
The practice of using tables as layout made sense prior to CSS, but tables are actually intended to present data and nothing else. The simplest way to layout a form is label above field in a single column, but it is possible to create the same grid-like layout that tables provide using the <div> element and some CSS.
For that, the CSS might look like this:
.layout-grid{
display: table;
}
.layout-row{
display: table-row;
}
.layout-cell{
display: table-cell;
}
and the HTML might look like this:
<form action="foo.php" method="post">
<div class="layout-grid">
<div class="layout-row">
<div class="layout-cell">
<label for="foo">Foo:</label>
</div>
<div class="layout-cell">
<input id="foo" name="foo" />
</div>
</div>
<div class="layout-row">
<div class="layout-cell">
<label for="foo">Foo:</label>
</div>
<div class="layout-cell">
<input id="foo" name="foo" />
</div>
</div>
<div class="layout-row">
<div class="layout-cell">
</div>
<div class="layout-cell">
<button type="submit">Go!</button>
</div>
</div>
</div>
</form>
Personally? A table. At work? CSS. I go with whatever is required. There's the whole debate about the fact that a form is not in and of itself tabular data (like that of a form), which is true, and there is CSS that can create a cell-like structure.
If you're short on time and comfortable with only tables? Tables. Next up is the CSS/cell structure, but most will (probably rightly) say CSS all the way. It's not too difficult, and if you want to mix and match the whole thing, say adding an extra, fourth question at the bottom at the first three, it will make the change just a tad quicker. Not much, but a tad.
Can someone show me some html to layout the following not using tables?
______________________________________
|_______|_____________| |
|_______|_____________|_______________|
|_______|_____________| |
|_______|_____________| |
|_______|_____________|_______________|
The third column needs to span the first two "rows" and then span the next three "rows"
The first "column" needs to have the same width
I ask this because of the whole "Tables are dead for layout" argument
UPDATE:
the content of the markup has checkboxes, textboxes, and textareas
CONCLUSION:
This has been very enlightening. I believe I have been cleared up with this philosophical question.
It seems to me that the general rule should be: Don't use tables for your entire website, if there are sections that look like a table, then use a table. Extremes of "NEVER USE A TABLE" seems impractical and theoretical. Likewise, excessive use of tables makes maintenance difficult, and dealing with 4-deep nested tables can be a real pain.
So because the layout above "looks like a table" I'm going to use a table. :)
I completely agree with not using tables for laying out your page. However the diagram above actually looks like a table so you might want to use one.
I think for your purpose you should use a table, but since you don't want that... here's something I made quickly using only <div>s: http://jsfiddle.net/HEfTE/1/
You didn't mention how and where the checkboxes, textboxes, and textareas will be used, so I'm not sure how to incorporate them in my example. But if you post some more information, it won't be difficult to add them in there.
Hope that helps!
Even if the content isn't tabular, use a table if you need to. Most of the arguments against using a table for layout are purely theoretical (are you really planning on offering more than one stylesheet for your site, for example? Do you care how your form appears semantically?) Sometimes, especially in the larger layout issues for a site, tables work much better than CSS.
Use what works.
Tables were often abused for layout, and most of them can be scrapped in favor of a simpler CSS layout. but occasionally, tables are the better tool.
These components seem to form a table...so, I'd use a table.
The following is not a table, so don't use a table to lay that out. (Use <div> instead obviously)
--------------------------------
| |
| |
|------------------------------|
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
--------------------------------
Do you see the difference between your example and mine?
There's not enough information to answer your question. Like Pekka said, is it a table or not?
Is it a form? I'm assuming so, if it has textboxes, textareas, etc. If it's a form, you could use a container for the two left columns and one for the right.
<style type="text/css">
div#formLeft {
float: left;
}
textarea {
display: block;
}
</style>
<div id="formLeft">
<label>Form Field 1</label><input type="text" /><br />
<label>Form Field 2</label><input type="text" /><br />
<label>Form Field 3</label><input type="text" /><br />
<label>Form Field 4</label><input type="text" /><br />
<label>Form Field 5</label><input type="text" /><br />
</div>
<div id="formRight">
<textarea></textarea>
<textarea></textarea>
</div>
Now, obviously there is a lot more need to be done, but this the bare bones.
Recommendations? Style label with a fixed width to keep it looking tabular. Of course adjust the heights and everything to make it fit. Since the boxes on the right, which I assume are textareas, just give them IDs and heights.
I took a screenshot to help visualize my code without actually entering it in. This is how I assume your layout is, but of course you can easily add other columns. Just make the formLeft ID turn into a class and throw in another!
alt text http://img94.imageshack.us/img94/5341/testbp.gif
Edit: Image uploaded at image shack. I can't guarantee how long it'll be there.
Good luck!
You can do it with DIV's with careful use of float: right, float: left, and clear: both.
I agree with you that what you describe is not tabular, and using DIV's may have advantages, such as they may be able to flow better when viewed, say, on a mobile device (especially if you give them a different stylesheet).
However, I should say that using DIV's for stuff like this is a great big pain, and I usually use tables for it because it is so easy and they do a lot better job of sizing the columns and such to fit the content.
I'd do it similar to this (in the absence of any details, I threw in some sample elements):
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
#form {
width: 400px;
margin: 10px;
}
#textareas {
width: 145px;
float: right;
}
#textareas textarea {
width: 145px;
margin-bottom: 3px;
}
#textareas #textarea1 {
height: 43px;
}
#textareas #textarea2 {
height: 66px;
}
.forminput {
height: 23px;
width: 250px;
}
.forminput span {
display: block;
float: left;
width: 75px;
}
.forminput input {
width: 175px;
}
</style>
</head>
<body>
<div id="form">
<div id="textareas">
<textarea id="textarea1"></textarea>
<textarea id="textarea2"></textarea>
</div>
<div class="forminput">
<span>Label 1</span>
<input type="text" />
</div>
<div class="forminput">
<span>Label 2</span>
<input type="text" />
</div>
<div class="forminput">
<span>Label 3</span>
<input type="text" />
</div>
<div class="forminput">
<span>Label 4</span>
<input type="text" />
</div>
<div class="forminput">
<span>Label 5</span>
<input type="text" />
</div>
</div>
</body>
</html>
You can always do it without a table.
Forms can be considered tabular data. Not everyone agrees on that, but enough do that I'd call it a 50/50 decision. Flip a coin in this case.
My bigger concern is that a form with multiple columns and multiple rows and fields spanning multiple rows begins to sound like a poorly laid out form design to me. It may make perfect sense in this case, but without more context, it's really hard to say what's best here.
If there are direct relationships between the form elements in each row/column, knowing that may help us answer the question for you.
What is the content? Tabular data? If so use a table.
Does anyone know how to create a coupon (printable is even better) with HTML & CSS? Forgive the horribly simple question, I don't do much of any web development :)
Thanks in advance.
EDIT: EDIT: Seth posted his answer again, which I accepted, thus I removed the answer from here (it was just a copy of his original deleted post).
I'm guessing you want
.coupon {
width: 250px;
padding: 10px;
text-align: center;
border: 3px dashed #ccc; }
<div class="coupon">15 points for your reputation</div>
around a div? Or something more involved?
I stole it from here.
I'll not cover the HTML part of the question because that's very , very basic, and very specific to yourself.
For print specific styling, in your HTML mark-up you can add a stylesheet explicitly for print media, like so:
<link rel="stylesheet" type="text/css" media="print" href="my-printable-style.css"/>
You can also do this directly in an existing CSS doc, by using CSS directives, like so:
//sample ripped from http://www.w3schools.com/CSS/css_mediatypes.asp
#media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px}
}
#media print
{
p.test {font-family:times,serif;font-size:10px}
}
but this is generally viewed as the weaker tool because it can lead to confusion and maintenance problems to bloat a single document like this, and it achieves the same as the element based method.
For a good run down of some printable CSS issues read this list apart article.
<label for="dwfrm_cart_couponCode">
CODE
</label>
<input type="text" placeholder=" CODE" name="dwfrm_cart_couponCode" id="dwfrm_cart_couponCode">
<button type="submit" value="dwfrm_cart_addCoupon" name="dwfrm_cart_addCoupon" id="add-coupon">
</button>
<div class="error">
Please Enter a Code
</div>