5 Replies - 2545 Views - Last Post: 01 March 2011 - 07:28 AM

#1 Snot  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 20-February 11

Forms: Examples of using CSS instead of tables needed.

Posted 21 February 2011 - 01:57 PM

Hello,

I've got a few forums that I'd like to rebuild with css. Currently I'm using tables on them. I'm having a lot of trouble with it because all the examples of css forms I'm finding online are breaking my page. It seems like all the ones I'm finding are built to be a page of there own and I'm trying to put all of my forums in php files and include them into my site. The main reason I've decided to rebuild them is because of a false error i'm getting in the html validation. All my forms are on their own page as you can see below.


http://www.wararmada.../php/search.php
http://www.wararmada.../php/submit.php
http://www.wararmada...php/contact.php

I've included them into my site using php code here.

http://www.wararmada.com/tdb

The validation page isn't seeing any of the php code and its under the impression that I've used unique id's multiple times on the same page when really I haven't.

So as for the css forms. Do any of you know of some examples of forms that are standalone? I'm not a pro or anything close and its really hard for me to strip out all of the "just for looks" code in the examples i'm finding. I've already done all the styling I just need to see how the meat of the form css works.

Thanks for the help.

Is This A Good Question/Topic? 0
  • +

Replies To: Forms: Examples of using CSS instead of tables needed.

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4356
  • View blog
  • Posts: 12,175
  • Joined: 18-April 07

Re: Forms: Examples of using CSS instead of tables needed.

Posted 21 February 2011 - 04:57 PM

Actually you have indeed used the same id multiple times. Go to your http://www.wararmada.com/tdb page and hit view source. You will see that several of the ids for elements (like aggression_0 for instance) is on the page multiple times.

Your page there is just hiding and displaying certain parts of the page, but they are still part of the page. You include them into the body of the document and thus while some are hidden at times, they are still part of the page.

Go to view source and what you see there is what is validated. Make sure that each form you are creating has unique IDs from other forms if you wish to include them in the same page (even if they are hidden).

So work out the duplicate ids, run it through the validator, see what else pops up as errors and then we can certainly help you resolve some of them. You are styling the forms fine and everything looks ok, you just need to resolve the bugs which we can do once you show us what those errors are.

:)
Was This Post Helpful? 1
  • +
  • -

#3 Snot  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 20-February 11

Re: Forms: Examples of using CSS instead of tables needed.

Posted 21 February 2011 - 08:47 PM

Cool!

I sorted out the unique id's and made then truly unique. So I'm no longer showing any errors.

Now as far as the tables... Have a used them the right way? I really really don't want to remake them using css but I will if I've used tables the wrong way. I here a lot about how people shouldn't use table in layouts and since that's what I did I just thought I needed to change it.

Just for some background I made these forms along time ago when I was first getting into web design. Then I got into the php/mysql parts of my page and gave up. The site has been sitting in my backup drive ever since and I've recently decided to try and learn php so I dusted it off and gave it a new look.

I figured if tables are wrong I want to change them now before I get into php/mysql.
Was This Post Helpful? 0
  • +
  • -

#4 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4356
  • View blog
  • Posts: 12,175
  • Joined: 18-April 07

Re: Forms: Examples of using CSS instead of tables needed.

Posted 22 February 2011 - 02:54 PM

There is a raging debate right now in web design circles where some say tables should be completely removed and others that say tables are fine for structure. I am one of the ones that believe a mix of the two is often the best solution. I typically use tables for general structure and fill it various table cells with divs which are completely CSS. So always keep that debate in mind when you read content. There are certainly pros and cons to using each.

Modern browsers are moving more and more to CSS standards and because of that, tables will some day be a thing of the past. But right now browsers display CSS in different ways and browsers like IE are full of CSS quirks and bugs. You are using the tables fine but as time goes on, I would suggest you try to remove a few of them and replace them with CSS as browsers continue to evolve.

Nothing wrong with what you have now though. Looks fine. :)
Was This Post Helpful? 1
  • +
  • -

#5 Snot  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 20-February 11

Re: Forms: Examples of using CSS instead of tables needed.

Posted 22 February 2011 - 03:03 PM

Yay! Thanks for all the info. I'm going to put them on the back burner for a while and try to sort out some other stuff.


Cheers!
Was This Post Helpful? 0
  • +
  • -

#6 seoed  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 26-February 11

Re: Forms: Examples of using CSS instead of tables needed.

Posted 01 March 2011 - 07:28 AM

Tables should be used for displaying tabular data only. As far as creating
forms with CSS is concerned, you can refer to the code of the example in here PHP form handling.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1