moshh Posted April 1, 2017 Share Posted April 1, 2017 (edited) 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? Edited April 1, 2017 by moshh Link to comment Share on other sites More sharing options...
dsonesuk Posted April 1, 2017 Share Posted April 1, 2017 input, select, textarea {} input[type=radio] {} input[type=checkbox] {} input[type=submit] {} To be more specific, add form id or class before input selector. Link to comment Share on other sites More sharing options...
moshh Posted April 1, 2017 Author Share Posted April 1, 2017 I did it but I want to locate each input box(like email:) exactly under it's top input box(like family name:)/other elements, but I dont't know how to do, u know? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 1, 2017 Share Posted April 1, 2017 Then you use attribute selector [type=email] or [name=email],[name=family name] or give them id ref or class name. Link to comment Share on other sites More sharing options...
moshh Posted April 1, 2017 Author Share Posted April 1, 2017 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 1, 2017 Share Posted April 1, 2017 If you make every block element a inline element, they act like text and sit side by side. Link to comment Share on other sites More sharing options...
moshh Posted April 1, 2017 Author Share Posted April 1, 2017 (edited) so I did like that and it is not what I wanted, or you mean, is that wrong like this? Edited April 1, 2017 by moshh Link to comment Share on other sites More sharing options...
moshh Posted April 3, 2017 Author Share Posted April 3, 2017 Hello again, in above codes I can't style width of <div id="namea/famia/bda/bca/.."> elements, u know why? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 3, 2017 Share Posted April 3, 2017 Any inline element, or block element using display: inline; turning it into a inline element will not respond to width, height applied, its width will be determined by content within it. 1 Link to comment Share on other sites More sharing options...
moshh Posted April 3, 2017 Author Share Posted April 3, 2017 so have u any idea about how to give a width to them? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 3, 2017 Share Posted April 3, 2017 Use block elements, or turn them into block elements using display: block; or display: inline-block; 1 Link to comment Share on other sites More sharing options...
moshh Posted April 3, 2017 Author Share Posted April 3, 2017 (edited) thank u, I guess that solved. Edited April 3, 2017 by moshh Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now