Results 1 to 9 of 9

Thread: csss format

  1. #1
    Join Date
    Jul 2011
    Location
    hyderabad,India
    Posts
    58
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default csss format

    hi all,
    i have a simple form with 5 fields username,email id,password,retype password and phone no.they all to be displayed in correct format as one after other.my am getting error for last field i.e.,phone no is is not displayed properly
    how to display the 5th field in correct format...below is the code i have written in css..

    if there are more than 4 fields tell me how to display all in correct format.

    .form label
    {
    float:left;
    width:100px;
    padding:10px 10px 0 10px 0;
    font-weight:bold;
    }

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.

  3. #3
    Join Date
    Jul 2011
    Location
    hyderabad,India
    Posts
    58
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default reply

    below is my complete css script....
    also i have given my html script with fields....
    for all the fields given in html it must display in same order...
    Code:
    * 
    {
     margin:0; 
     padding:0;
    }
    
    body 
    {
      font:12px Verdana, Arial, Helvetica, sans-serif; 
      color:black;
    }
    
    #wrapper 
    {
      width:600px; 
      margin:50px auto;
    }
    
    .form 
    {
      float:left; 
      padding:10px 10px 10px 10px; 
      background:lightblue; 
      border:2px solid white;
    }
    
    .form label 
    {
      float:left; 
      width:100px; 
      padding:10px 10px 0 10px; 
      font-weight:bold;
      clear:left;
    }
    
    .form select 
    {
      float:left; 
      width:146px; 
      margin-top:10px;
    }
    
    .form input 
    {
      float:left; 
      margin-top:10px;
    }
    
    .form .submit 
    {
      clear:both;
    }
    
    #msg 
    {
      display:none; 
      position:absolute; 
      z-index:200; 
      background:url(images/msg_arrow.gif) left center no-repeat; 
      padding-left:7px;
    }
    
    #msgcontent 
    {
      display:block; 
      background:#f3e6e6; 
      border:2px solid red; 
      border-left:none; 
      padding:5px; 
      min-width:150px; 
      max-width:250px;
    }
    [
    below is my html code with fields.....
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Dynamic Inline Form Validation Demo</title>
    <link rel="stylesheet" type="text/css" href="messages.css" />
    <script type="text/javascript" src="messages.js"></script>
    </head>
    <body>
    <div id="wrapper">
      <form name="form" id="form" class="form" action="success.html" onsubmit="return validate(this)" method="post">
        <label for="name">Full Name:</label>
        <input type="text" name="name" id="name" />
        
    	<label for="email">Email Address:</label>
        <input type="text" name="email" id="email" />
        
    	<label for="password">Password:</label>
        <input type="text" name="password" id="password" />
    	
        <label for="repassword">Retype Password:</label>
        <input type="text" name="repassword" id="repassword" />
    	
    	<label for="phoneno">Phone no:</label>
        <input type="text" name="phoneno" id="phoneno" />
    	
    	<input type="submit" value="Submit" class="submit" />
      </form>
    </div>
    </body>
    </html>

  4. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    your code doesn't seem to have any obvious problems. I'm viewing this on Firefox 3.16; what browser(s) do you see the problem in? can you be more specific about what the result should look like?

  5. #5
    Join Date
    Jul 2011
    Location
    hyderabad,India
    Posts
    58
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default reply

    i am using internet explorer 8.i have not worked on other browsers.
    after entering fields for username,email id,and password and then clicking the submit button it should ask for "please retype ur password" and then it should check whether both passwords and retype passwords are matching or not...
    but in my code it is displaying the message "passwords are not matching.please reenter" even before we are inserting into retype password.....
    that is my problem.....

  6. #6
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by ravi951 View Post
    i am using internet explorer 8.i have not worked on other browsers.
    after entering fields for username,email id,and password and then clicking the submit button it should ask for "please retype ur password" and then it should check whether both passwords and retype passwords are matching or not...
    but in my code it is displaying the message "passwords are not matching.please reenter" even before we are inserting into retype password.....
    that is my problem.....
    this seems to be completely unrelated to your original post:
    Quote Originally Posted by ravi951 View Post
    hi all,
    i have a simple form with 5 fields username,email id,password,retype password and phone no.they all to be displayed in correct format as one after other.my am getting error for last field i.e.,phone no is is not displayed properly
    how to display the 5th field in correct format...below is the code i have written in css..

    if there are more than 4 fields tell me how to display all in correct format.
    is this correct? do you have a problem with the layout, or only with how the script is processed?

    if it's just the submit process that you're trying to work out, then:

    1) does your password check happen client-side (i.e., javascript) or server-side (e.g., php)?

    2) choose the appropriate DD forum (those are not css problems) and PM a moderator and ask to move this thread to the proper forum (javascript, php, whatever is appropriate).

    3) post the code that is related to your password check.

  7. #7
    Join Date
    Jul 2011
    Posts
    58
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Smile

    Hi
    You have a small typo in your code. Remove the "[" from your CSS code at the end.
    Also you can remove this portion as it is unnecessary I feel so -
    *
    {
    margin:0;
    padding:0;
    }
    Then it will work fine.

  8. #8
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by dcr33 View Post
    Also you can remove this portion as it is unnecessary I feel so -
    *
    {
    margin:0;
    padding:0;
    }
    Then it will work fine.
    that's a (limited) attempt at a css "reset." by setting the margin and padding on everything to zero, you can limit the differences in appearance across browsers by overriding their default values. especially in the case of menus, it's usually necessary to remove browser defaults (or override them) to keep the menu items lined up as desired. We also don't know what other layout features on his page might rely on these lines.

    css reset

    the disadvantage is that, by "zeroing" everything, you have to remember to define it all again the way you want it. many people ignore that step and their layout suffers. a more "production-ready" approach is something like normalize, which is a similar concept but gives "useful" default values while ironing out browser differences (and, it's very well-commented, so it's a good learning tool too).

    ---------------------------------
    unfortunately, from ravi's last reply, I'm not even sure what problem he's actually trying to solve now.
    Last edited by traq; 07-31-2011 at 04:44 PM.

  9. #9
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    .form
    {
    float:left;
    padding:10px 10px 10px 10px;
    background:lightblue;
    border:2px solid white;
    }
    you can add width:270px; you will fix it .


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
  •