SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help My good fellows please!!!!

    im trying to tidying up label elemts with css but it doesn't work

    1st Style.css

    orm.contact label {
    font-weight: label;
    font-size: small;
    color: blue;
    }

    form.contact label. fixedwidth {
    display: block;
    width: 240;
    float: left;
    }


    2nd contact.html <div>
    <label for="contactname" class="fixedwidth">Contact
    Name</label>
    <input type="text" name="contactname" id="contactname"/>
    </div>
    <div>
    <label for="telephone" class="fixedwidth">Telephone
    Number</label>
    <input type="text" name="telephone" id="telephone"/>
    </div>
    <div>
    <label for="email" class="fixedwitdh">Email Address</label>
    <input type="text" name="email" id="email"/>
    </div>
    <div>
    <label for="eventname" class="fixedwidth">What's the event
    called?</label>
    <input type="text" anme="eventname" id="eventname"/>
    </div>
    <div>
    <label for="eventdate" class="fixedwidth">When's the event
    happening?</label>
    <input type="text" name="eventdate" id=eventdate'/>
    </div>


    what did i do wrong in here?

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,509
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    CSS:

    1) You're missing an 'f' on the first line.
    2) I guess there shouldn't be a space between 'label.' and 'fixedwidth'

    HTML:
    Where is the <form> tag?

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    This also doesn't mean anything:

    Code:
    font-weight: label;
    You can have

    Code:
    font-weight: bold;
    or

    Code:
    font-weight: normal;

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    You have loads of typos in both of the CSS examples. I assume you are now at [p 278] in which case:

    form.contact label.fixedwidth {
    display: block;
    width: 240px;
    float: left;
    }


    Is what you should be writing.

  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    As for the other part:

    form.contact label {
    font-weight: bold;
    font-size: small;
    color: blue;
    }

    Is what it asked you to write.




  6. #6
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hi it's me again im sorry!!!!

    ok im trying to put form button in my form but it won't work for some reason.
    here is my code

    form.contact .buttonarea {
    text-align: center;
    padding: 4px;
    background-color: #0066ff;

    }

    is that ok?

  7. #7
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css help

    im trying to create a special area for buttons. but it's not working does any one know y?

    form.contact .buttonarea {
    text-align: center;
    padding: 4px;
    background-color: 0066ff;
    }

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Without the associated HTML, there's no way to check if that CSS is targeting the elements appropriately, so post that too.

  9. #9
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/xhtml". 
      <head> 
        <title>Contact Us at Bubble Under</title> 
        <meta http-equiv="Content-Type" 
            content=text/html; charset=utf-8"/> 
      <link href="style1.css" rel="stylesheet" type="text/css"/>
      </head> 
      <body> 
      <div id="header">
        <div id="sitebranding">
          <h1>BubbleUnder.com</h1>
        </div> 
        <div id="tagline"> 
          <p>Diving club for the south-west UK-let's make a 
            splash!</p>
        </div>
      </div> <!--end of header div -->
      <div id="navigation"> 
        <ul> 
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="events`.html">Club Events</a></li>
          <li><a href="contact.html">Contact Us</a></li>
          <li><a href="gallery.html">Image Gallery</a></li>
        </lu>
      </div> <!-- end of navigation div--> 
      <div id="bodycontent">
        <h2>Contact Us</h2>
        <p>To let us know about a forthcoming dive event, please use
            the form below.</p> 
        <form action="" method="post" class="contact"> 
          <fieldset> 
            <legend>Tell us about a Dive Event</legend> 
            <div> 
              <label for="contactname" class="fixedwidth">Contact 
                  Name</label> 
              <input type="text" name="contactname" id="contactname"/> 
            </div>
            <div> 
              <label for="telephone" class="fixedwidth">Telephone 
                  Number</label> 
              <input type="text" name="telephone" id="telephone"/> 
            </div> 
            <div> 
              <label for="email" class="fixedwidth">Email Address</label> 
              <input type="text" name="email" id="email"/> 
            </div> 
            <div> 
              <label for="eventname" class="fixedwidth">What's the event
                  called?</label> 
              <input type="text" anme="eventname" id="eventname"/> 
            </div> 
            <div> 
              <label for="eventdate" class="fixedwidth">When's the event 
                  happening?</label> 
              <input type="text" name="eventdate" id=eventdate'/> 
            </div>  
            <div> 
             <label for="region" class="fixedwidth"> What region is the event 
                 in?</label> 
             <select name="region" id="region"> 
               <option>South-west</option> 
               <option>South-east</option> 
               <option>Midlands</option> 
               <option>Central</option> 
               <option>London</option>
               <option>East</option> 
               <option>North</option> 
               <option>Scotland</option> 
               <option>Northern Ireland</option> 
               <option>Wales</option> 
               <option>International (see details below)</option> 
             </select> 
          </div> 
           <div> 
          <p>Please provide any other details you think will be useful to 
              us in the text area below (it may save us calling or 
              emailing you, and help avoid delays).</p> 
          <label for="details class="fixedwidth">More details (as much as 
              you think we'll need!)</label> 
          <textarea id="details" name="details" cols="30" 
             rows="7"></textarea> 
        </div>
        <div>
          <p>If we need to call you back gor any more info, what would be
              the best time to call you on number supplied?</p> 
          <input type="radio" name="timetocall" id="morning" 
              value="Morning"/>
          <label for="morning">In the morning</label> 
          <br/> 
          
          <input type="radio" name="timetocall" id="afternoon" 
              value="Afternoon"/>
          <label for="afternoon">In the afternoon</label> 
          <br/> 
    
          <input type="radio" name="timetocall" id="evening" 
              value="Evening"/> 
          <label for="evening"> In the evening</label>
          <br/> 
    
          <input type="radio" name="timetocall" id="never" value="never" 
              checked="checked"/> 
          <label for="never"> No calls please</label> 
        </div> 
        <div> 
          <p>Bubble Under may share information you give us here with 
              other like-minded people or web sites to promote the event. 
              Please confrim if you are happy for us to do this.</p> 
          <input type="checkbox" name="publicize" id="publicize" 
              checked="checked"/> 
          <label for="publicize">I am happy for this event to be 
              publicized outside of and beyond BubbleUnder.com, where 
              possible</label> 
        </div> 
           </fieldset> 
        </form> 
        <p>If you need to get in touch urgently, please call Bob 
            Dobalina on 01793 641207. For anything else, please <a 
            href="mailto:bob@bubbleunder.com">drop us a line by 
            email</a>.</p> 
        <div> 
          <p>Please provide any other details you think will be useful to 
              us in the text area below (it may save us calling or 
              emailing you, and help avoid delays).</p> 
                     
        </div> <!-- end of bodycontent div -->
      </body> 
    </html>

    this is the html for contact. thank you for helping

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    There's no class="buttonarea" in your HTML, so the styles you posted in your first post can't apply to anything. What element(s) did you want it to apply to?

    You styles are saying:

    Look for a form element with a class of "contact", and inside that form find elements with the class "buttonarea", and apply these styles to them.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Also, make sure to fix this line at the top of your HTML:

    Code:
    <html xmlns="http://www.w3.org/xhtml".
    It shouldn't have a period at the end:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

  12. #12
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    I assume you are talking about [p288] and if so then that CSS is correct but you might have a typo somewhere else in the CSS or XHTML.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    [note: two threads merged, as they both ask the same question. ]

  14. #14
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Yes, the merge confused me but the following should go just before the closing fieldset, i.e. </fieldset>

    Code:
    <div class="buttonarea">
      <input type="submit" value="Send Us the Info" />
    </div>
    You also have some other typos within the markup like LU instead of UL.

    Plus some missing quotes for example: id=eventdate' should be: id="eventdate" and <label for="details class="fixedwidth"> should be: <label for="details" class="fixedwidth"> so they'll need fixing too.


Bookmarks

Posting Permissions

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