#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    6
    Rep Power
    0

    Is this CSS outline done okay?


    Before going on I think that one of the reasons that this css isn't well written or working well is b/c I purposely skipped a part.It's a part about making a contact form (sort of like this http://l.yimg.com/a/i/us/wh/gr/help/...nt_modal_3.gif) but there's a part about having to get a file to a server which I'll see someone tomorrow about.I've been told to make...

    -a top margin of 1em

    -border of 2px, #305704

    -font size of 16px

    -fieldset border of 2px,#305704 (although I don't know what a "fieldset" border is)

    -fieldset background with a colour of #befca7

    -fieldset with a bottom margin of 1em

    -legend font with colour #305704

    -legend with right and left padding of 10px along with top and bottom padding of 0

    -*float first name, last name, email labels to the left, with a width of 100px, aligned to the right [this part I don't understand but feel has something to do with the step on making a contact form that I skipped]

    -text inputs with a background colour of #f0eea4

    -a textarea border ["textarea" border not being a particular like tag] of 2px,with color #305704

    -a button text colour with #305704

    -a button text in lower case (I dont get it,dont they all automatically appear in lowercase font?),using CSS to transform it to upper case

    -a button background colour with color #f0eea4

    -a button border with 1px and a color of #305704

    -appropriate CSS alignment to display the buttons beside each other horizontally

    Code:
    body [?]
    
     {
     margin:1 em; 
     border: 2 px, #305704;
     }
     
     
      .field-set {
     font-size:16px;
    font:#305704;
    padding-right:10px;
    padding-left:10px;
    padding-top:10px;
    padding-bottom:10px;
    float:[dont know how to do this one]
    [dont know text-input:#f0eeea4;]
     
     .legend
     {
    font:#305704;
    padding-right:10px;
    padding-bottom:0px;
    }
    
    [how do I do * if I can?]
    
    .text 
    {
    background-color:#f0eea4;
    [area]border:2px , #305704
    }
    
    .button
    {
    color:#305704;
    border: 1 px,#305704
    }
    Am I doing following this CSS outline well?
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    By reading the requirements, this is all related to your form (the top margin and border, I would think, are meant to relate to the actual form not the body.

    If you Google fieldset you will find out more but basically it is a tag around a group of form elements that group them together.

    You are getting there but there are a few errors (i.e. gaps between integers and unit of measurement, commas in applied styles etc) and unnecessary lines of code
    Code:
    form {
     margin-top: 1em; 
     border: 2px solid #305704;
     font-size: 16px;
     }
     
    fieldset {
    background: #befca7;
    padding:10px; /* All padding is 10px so no need for separate lines */
    margin-bottom: 1em;
    }
     
    legend {
    color:#305704; /* Font color is set with color, not font */
    padding:0 10px; /* Means padding top and bottom is 0 and left and right is 10px, values go top, right, bottom, left but as you have the same top and bottom and left and right can be shortened to this */
    }
    
    .label {
      float: left;
      width: 100px;
      text-align: right;
    } /* Apply this div around each form 'label' First Name, Last Name etc */
    
    input[text], input[textarea] {
    background-color:#f0eea4;
    }
    
    input[textarea] {
      border: 2px solid #305704;
    }
    
    .button
    {
    color:#305704;
    border: 1px solid #305704;
    text-transform:lowercase;
    display: inline;
    background: #f0eea4;
    }
    I know this is homework but as you have made an effort in the first place I am happy to help.

IMN logo majestic logo threadwatch logo seochat tools logo