Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2003
    Location
    South Wales, UK
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS FAQ #11 How can I handle multiple different forms without tables?

    I have read through the CSS FAQs and have converted one of my sites (almost) to a table-free layout using css (not bad for one afternoon, eh?). The negative positioning thing always put me off, so I was delighted to learn you don't have to code that way.

    I have also created a table-free form using the code in FAQ #11 as a starting point and the form appears to look good in preview mode. However, I need different syles for different forms, so how would I go about creating several different css styles for my forms please?

    Eg, Form 1 - check boxes on the left, label on the right (already done)
    Form 2 - label above textarea, label above select
    Form 3 - label on the left, select on the right
    Edited to add: Labels are of different sizes in each case.
    Sorry - edited again to add: Would it be better to use inline styling as required rather than try to define everything in the stylesheet?

    Thank you very much for your help.
    Diane
    Last edited by Diane; 02-28-2005 at 10:29 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    i would give the inputs or w/e other type of input u have in the forums different classes different for each form then define them in your style sheet, just in case you want to change them later you wont have to in every page and edit it
    input.someclassname {
    background:#0000FF;
    }
    should work for the buttons and text fields

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by Diane
    ... Form 1 - check boxes on the left, label on the right (already done)
    Form 2 - label above textarea, label above select
    Form 3 - label on the left, select on the right
    Edited to add: Labels are of different sizes in each case.
    Sorry - edited again to add: Would it be better to use inline styling as required rather than try to define everything in the stylesheet?

    Thank you very much for your help.
    Diane
    Usually it's always better to use an external stylesheet. This way all changes to the style can be done via one page, rather than hunting through your various html pages. Also, this way the style is cached, and only has to be loaded once.

    As far as styling different forms, I would assign each form a different id, then use descendent selectors to apply styles. I.e.:

    Code:
    html:
    
    <form id="oneform">...</form>
    <form id="anotherform">...</form>
    
    css:
    
    #oneform {
     ...styles...
     }
    
    #oneform input {
     ...styles for inputs, etc...
     }
    
    #oneform input.class {
     ...styles for a specific class...
     }
    
    #anotherform { 
     ...styles...
     }
    
    #anotherform input {
     ... styles for inputs, etc...
     }
    
    etc.
    Hope this helps,

  • #4
    New Coder
    Join Date
    May 2003
    Location
    South Wales, UK
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Mmm. I think I understand. So it would look something like this? Or am I completely off track here?

    #oneform: form p label {
    display: inline;
    float: left;
    width: 100px;
    }

    based on another style I set for links
    a.nav:link {
    color:#000000;
    text-decoration:none;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: xx-small;
    }

    Defining different link styles was a breeze, but I'm not sure this technique applies to other tags?

    I'm sorry to be so dense!

    Thank you again.
    Diane

    Edit - don't worry - I think the penny has dropped! I think I've got it now!

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by Diane
    Mmm. I think I understand. So it would look something like this? Or am I completely off track here?

    #oneform: form p label {
    display: inline;
    float: left;
    width: 100px;
    }

    . . .

    Edit - don't worry - I think the penny has dropped! I think I've got it now!
    Cool, although I should clarify that bit at the top should read:
    Code:
    #oneform form p label {
       display: inline;
       float: left;
       width: 100px;
     }
    (no ":") It essentially means a label within a p within a form within the id "oneform." If you look up "descendant selectors" in Google you'll get more than you ever wanted to know about it.

  • #6
    New Coder
    Join Date
    May 2003
    Location
    South Wales, UK
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excellent - thank you!
    Diane


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •