Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS or Tables to create web Form

Posted on 2012-08-14
19
Medium Priority
?
486 Views
Last Modified: 2012-09-05
I need to create a web form similar to:

Form
Should I do this using table or CSS.  For tools I am using Visual Studio 2010 and MS Web Expressions 4.  I want to move away from coding html and css by hand; what is the best way to use these tools to quickly create this form using either tables or css?
0
Comment
Question by:canuckconsulting
  • 4
  • 4
  • 4
  • +3
19 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38294004
That is really up to you.  There are as many ways to get to an end as there are opinions.  However, that sample looks like it was created on the fly with javascript.  In this case, I think you are better off with div's and css rather then tables.
0
 

Author Comment

by:canuckconsulting
ID: 38294028
I created the sample using a mock up tools so just painted it.

Do you have any examples of how to do this in css?  I was struggling positioning the Add and Remove buttons.
0
 
LVL 8

Assisted Solution

by:soupBoy
soupBoy earned 800 total points
ID: 38294218
Here is an example I threw together in jsFiddle...in hindsight it would have probably been a bit better (and more semantic) if I was to through it into an unordered list...that would allow more vertical control...

Regardless...here is my jsFiddle example: CSS and Forms
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38294315
You could use the display: table and display: table-cell css styles but as usual IE doesn't play nice.

here is a rough and ready CSS version using div's
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
#container {
	width: 800px;
}
#toolbar {
	height: 100px;
	background: red;
}
.clear {
	clear: both;
}
.box {
	width: 350px;
}
.box.left {
	float: left;
}
.box.right {
	float: right;
}
.controls {
 float: left;
 text-align: center;
 width: 100px;
 margin-top: 50px;
 vertical-align: center;
}
textarea {
  width: 100%;
  height: 200px;
  border: 1px solid #e1e1e1;
}
</style>
<body>
<div id="container">
 <div id="toolbar"></div>
 <div id="content">
    <div class="box left">
      <textarea></textarea>
    </div>
    <div class="controls">
        <input type="button" value="Add" /><br/>
        <input type="button" value="Add" />
    </div>
    <div class="box right">
      <textarea></textarea>
    </div>
	<div class="clear"></div>
 </div>
</div>
</body>
</html>

Open in new window

0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 600 total points
ID: 38294345
If this is a layout for desktop and doesn't have to be fluid or resizable, then in my opinion absolute positioning is a good candidate here.

Put everything in a container with position: relative; Write your html in semantic order, then place your items using position:absolute. Should the CSS become disabled for any reason, your html will still make sense.
0
 
LVL 8

Expert Comment

by:soupBoy
ID: 38294857
Here is another fiddle I just created utilizing unordered lists...

Sometimes I feel the css gets a bit 'long winded', but I have to remember this is completely adjustable (for the most part) purely by css.

Here is the fiddle: Forms with CSS
0
 

Author Comment

by:canuckconsulting
ID: 38295476
soupBoy you last fiddle looks great!  Also I had not seen jsFiddle before; very handy.

How did you create this?  Did you code it by hand or use some kind of visual designer?  I am keen to get away from hand coding everything I do looking for a faster solution.

Thanks to all for input here!

Scott
0
 
LVL 16

Accepted Solution

by:
Steve Krile earned 600 total points
ID: 38295609
To your last question:  "How did you create this?  Did you code it by hand or use some kind of visual designer?  "

I am a big fan of the CSS Grids out there:

This may seem a bit overwhelming when you first look at them, but the principal for all of them is the same.  Use a standards-based CSS markup system to position things on your page in a predictable way.  

Something to consider...
0
 
LVL 8

Expert Comment

by:soupBoy
ID: 38296134
I created it in jsFiddle just coding by hand.

As for your comment to 'get away from hand coding', I don't know if that is a good idea.  I mean, there are tools to aid in speedy development such as SASS (or any of the other CSS 'frameworks') as well as odd html development tools like HAML (odd for me at least).  Those types of aids are great to use, but to switch to a 'drag and drop' from Visual Studio or Dreamweaver will only create ugly non-semantic code...

Thanks for the kind words!
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38296397
Haven't found a tool yet that is good enough to make me drop hand coding.
0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 38296407
*like*  @julianH "Haven't found a tool yet that is good enough to make me drop hand coding."


Pretty sure anyone who has every seriously tried to create a web site has used FrontPage, Dreamweaver, or some other magical creation device.  

And pretty sure anyone who continued to create websites ditched the "automatic" stylings of these tools in favor of knowing what was happening.  Too many hours tracking down random overlapping style rules is the result of such tools.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38296451
Totally agree with the above. But  you don't have to use notepad either. IDE's are great. You have complete control and lovely code highlighting, formatting, hinting (if you want). And lots of settings you can customize - use as many or as few of the features as you wish...

My two faves are Netbeans and Eclipse. I use Netbeans mostly for php development, and Eclipse for JAVA, but you can use either one for all your needs. Both free/open source.
0
 
LVL 8

Expert Comment

by:soupBoy
ID: 38296479
I actually still use dreamweaver, but I don't use any of the drag and drop aspects of it.  I used to use it for the wysiwyg reasons back when I used tables for everything...it also helped me get connected to a database.

But as skrile mentioned, as soon as you get a bit deeper into web development and you start to really understand what is going on, you ditch the 'drag and drop' for hand coding.  

I would never pay for an editor again (especially since they are so inflated), there are plenty of free editors out there that support hinting, formatting, etc.  Once my copy of dreamweaver crashes or someone shows me a really cool editor, I will ditch it.
0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 38296494
I'm lucky to have an MSDN license through work.  Visual Studio has come a LONG way for helping coders out without getting in the way.
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38296500
Notepad++ - Eclipse is ok but NPP definitely scores on lightweight - easy to install and setup and if you know what you are doing little need for intellisense - which when I encounter it in other IDE's drives me nuts because I am usually faster typing than IS is and I type the braces and bits that IS tries to fill in so we bump into each other.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38296529
@julianH, of course it's a matter of preference at the end of the day.
As far as braces, you can turn that off if you want.

Never used NPP - gonna try it out. thanks.
0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 38296537
Visual Studio works for me because I've swallowed the Microsoft stack - database to face.
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38296581
Do hear any calls for Brief ... (or are we going to far back?)
0
 

Author Closing Comment

by:canuckconsulting
ID: 38367840
I wish I could more points to more people!

soupBoy - Demos were fab and learning about jsFiddle was priceless
skrile - I am working on an existing system but I played with 960 and in future will be using one of these sysstems for layout
kozaiwaniec  - In the end based a solution on abs positioning playing with jsFiddle.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question