Jump to content

moshh

Members
 View Profile  See their activity

  • Posts

    7

  • Joined

  • Last visited

 Content Type 

Posts posted by moshh

    how to style a Register/sign in form?

    in CSS

    Posted

    here is my codes:

    html:

    Quote

    <!doctype html>
    <html>

        <head>

            <meta charset="UTF-8">
            <title>Register page</title>
            
            <link rel="stylesheet" href="reg.css">
            <link rel="stylesheet" href="normalize.css">
        </head>

        <body>
            
            <form id="enregister">
                
                <fieldset id="pinf">
                    <legend>Personal Information</legend>
                    
                    <div>
                        <div id="namea">Name:</div>
                        <div id="nameb"><input type="text" name="txtname" maxlength="45" size="30" class="name"></div>
                    </div>
                    
                    <div>
                        <div id="famia">Family Name:</div>
                        <div id="famib"><input type="text" name="txtfami" maxlength="60" size="30" class="fami"></div>
                    </div>
                    
                    <div>
                        <div id="bda">Birthday:</div>
                        <div id="bdb">
                        <input type="datetime" name="year" maxlength="4" size="4" class="bdy"> /
                        <input type="datetime" name="month" maxlength="2" size="2" class="bdm"> /
                        <input type="datetime" name="day" maxlength="2" size="2" class="bdd">
                        </div>
                    </div>
                    
                    <div>
                        <div id="bca">Birth City:</div>
                        <div id="bcb">
                            <select name="bidacity" class="bcity">
                                <optgroup label="Tehran">
                                    <option value="Tehran">Tehran</option>
                                    <option value="Damavand">Damavand</option>
                                    <option value="Lavasan">Lavasan</option>
                                    <option value="shahreRey">ShahreRey</option>
                                    <option value="shahriar">Shahriar</option>
                                    <option value="Varamin">Varamin</option>
                                </optgroup>
                                <optgroup label="Fars">
                                    <option value="Shiraz">Shiraz</option>
                                    <option value="Sepidan">Sepidan</option>
                                    <option value="Kazeron">Kazeron</option>
                                    <option value="Abadeh">Abade</option>
                                </optgroup>
                                <optgroup label="Yazd">
                                    <option value="Yazd">Yazd</option>
                                    <option value="Bafgh">Bafgh</option>
                                    <option value="Ardakan">Ardakan</option>
                                    <option value="Meybod">Meybod</option>
                                </optgroup>
                                <optgroup label="Semnan">
                                    <option value="Semnan">Semnan</option>
                                    <option value="Garmsar">Garmsar</option>
                                    <option value="Miami">Miami</option>
                                </optgroup>
                                <optgroup label="...">
                                    <option value="...">...</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    
                    <div>
                        <div id="gensa">Gender:</div>
                        <div id="gensb">
                        <label><input type="radio" name="gens" value="male" class="male"> Male </label>
                        <label><input type="radio" name="gens" value="female" class="female"> Female </label>
                        </div>
                    </div>
                    
                    <div>
                        <div id="pica">Your Photo:</div>
                        <div id="picb"><input type="file" name="personal pic" size="20" class="pic"></div>
                    </div>
                </fieldset>
                
                <fieldset id="uinf">
                    <legend>User Information</legend>
                    
                    <div>
                        <div id="emaila">Email:</div>
                        <div id="emailb"><input type="text" name="email" maxlength="50" size="30" class="email"></div>
                    </div>
                    
                    <div>
                        <div id="una">Username:</div>
                        <div id="unb"><input type="text" name="username" maxlength="45" size="30" class="un"></div>
                    </div>
                    
                    <div>
                        <div id="passa">Password:</div>
                        <div id="passb"><input type="password" name="password" maxlength="45" size="30" class="pass"></div>
                    </div>
                    
                    <div>
                        <div id="cpassa">Password Confirm:</div>
                        <div id="cpassb"><input type="password" name="password" maxlength="45" size="30" class="cpass"></div>
                    </div>
                </fieldset>
                
                    <div>
                        <div id="submit">
                        <button type="submit" value="register" class="ensub">Register</button>
                        </div>
                        <div id="reset">
                        <button type="reset" value="erease" class="enres">Erease</button>
                        </div>
                    </div>
            </form>    
        </body>
    </html>

    php:

    Quote

    #enregister {
        font-family: 'eng';
    }

    @font-face {
        font-family:'eng';
        src: url(fonts/eng.eot), url(fonts/eng.ttf);
    }

    #namea {
         display: inline;
    }
    #nameb {
         display: inline;
    }
    #nameb .name {
        margin-top: 15px;
    }

    #famia {
         display: inline;    
    }
    #famib {
         display: inline;
    }
    #famib .fami{
        margin-top: 15px;
    }

    #bda {
         display: inline;
    }
    #bdb {
         display: inline;
    }
    #bdb .bdy,.bdm,.bdd {
        margin-top: 15px;
    }

    #bca {
         display: inline;
    }
    #bcb {
         display: inline;
    }
    #bcb .bcity {
        margin-top: 15px;
    }

    #gensa {
         display: inline;
    }
    #gensb {
         display: inline;
    }
    #gensb .male,.female {
        margin-top: 15px;
    }

    #pica {
         display: inline;
    }
    #picb {
         display: inline;
    }
    #picb .pic {
        margin-top: 15px;
    }

    #emaila {
         display: inline;
    }
    #emailb {
         display: inline;
    }
    #emailb .email {
        margin-top: 15px;
    }

    #una {
         display: inline;
    }
    #unb {
         display: inline;
    }
    #unb .un {
        margin-top: 15px;
    }

    #passa {
         display: inline;
    }
    #passb {
         display: inline;
    }
    #passb .pass {
        margin-top: 15px;
    }

    #cpassa {
         display: inline;
    }
    #cpassb {
         display: inline;
    }
    #cpassb .cpass {
        margin-top: 15px;
    }

    #reset {
        display: inline;
    }

    #reset .enres {
        background-color: #333;
        color: #ffffff;
        width: 80px;
        height: 35px;
        margin: 20px 90px auto 30px;
        font-family: 'eng';
        font-size: 14px;
    }

    #submit {
        display: inline;
    }

    #submit .ensub {
        background-color: #333;
        color: #ffffff;
        width: 80px;
        height: 35px;
        margin:20px auto auto 90px;
        font-family: 'eng';
        font-size: 14px;
    }

    #pinf {
        width: 30%;
    }

    #uinf {
        width: 30%;
    }

    u see boxes are untidy, Can u help me?

    how to style a Register/sign in form?

    in CSS

    Posted · Edited by moshh

    hello, can you help me to style my registration form?

    i can't organize my form to locate all input boxes and other things like radios and selets and ... exactly under each other vertically in a line, what do i most?

×
×
  • Create New...