Member Avatar for PF2G
PF2G 0 Junior Poster in Training

Hi,
i'm doing a registration form but it's not like what i want:

what i want is something like this:
[img][/img]

And i want to trade that instead of this one:
[img][/img]

I have the css code of the second one:

<style type="text/css">
body,html,div,blockquote,img,label,p,h1,h2,h3,h4,h5,h6,pre,ul,ol,li,dl,dt,dd,form,a,fieldset,input,th,td{border:0;outline:none;margin:0;padding:0;}
body{height:100%;background:#fff;color:#1f1f1f;font-family:Arial,Verdana,sans-serif;font-size:13px;padding:7px 0;}
ul, ol{list-style:none;}



/* Tutorial CSS */
/*Form styles*/
.styled {
font: 15px Arial, sans-serif; 
width: 422px; 
margin: 40px auto; 
background: url(images/bg_form.png) no-repeat 0 0; 
padding-top: 20px;
}
.styled fieldset {
background: url(images/bg_form.png) no-repeat 0 100%; 
padding: 0 25px 20px 25px; 
position: relative;
}
.styled fieldset h3 { 
font: 24px bold Arial, sans-serif; 
color: #555;
margin-bottom: 0.5em;
}
/* Form rows */
.styled fieldset li.form-row {
margin-bottom: 5px; 
padding: 3px 0; 
clear: both; 
position: relative;
}
.styled label {
display: block; 
font-weight: bold; 
float: left; 
width: 100px; 
line-height: 24px; 
padding-top: 4px; 
color: #555;
}
.styled fieldset li.button-row {
margin-bottom: 0; 
padding: 5px 0 0; 
text-align: right;
}
.styled label.double {
padding-top: 0; 
line-height: 20px; 
margin-top: -3px;
}
/* Text input styles */
/* Default */
.styled input.text-input {
height: 22px;
width: 254px;
padding: 5px 8px; 
background: url(images/bg_input.png) no-repeat 0 0;  
border: none;   
font: normal 15px Arial, sans-serif;
color: #333;
line-height: 1em;
}

/* Form Validation */
.styled span.error {
font: bold 11px Arial, sans-serif;
color:#fff;
text-shadow: 1px 1px 1px #000;
display: none; 
background: url(images/arrow_error.png) no-repeat 0 center; 
height: 11px;
padding: 7px 15px 10px 20px; 
line-height: 1em; 
position: absolute; 
top: 3px; 
right: 0; 
border-right: 1px solid #6c0202;
}
.styled fieldset li.error input.text-input {
background-position: 0 -64px;
}
</style>

If someone could help me...!

Thank you,
PF2G

  • 1 Contributor
  • 0 Replies
  • 84 Views

Dani AI

Generated

For : converting the two-column, sprite-driven form into the stacked form shown in your first image is mostly a matter of layout and responsive sizing. Make labels block-level elements above inputs, stop using fixed pixel widths for the inputs, and use box-sizing: border-box so padding does not push fields outside their container. Replace decorative input sprites with simple borders/padding so the form scales cleanly on different screen sizes.

A compact example (stacked labels, fluid inputs):

/* CSS */
.form {
  max-width: 480px;
  margin: 40px auto;
  padding: 18px;
  font: 15px/1.4 Arial, sans-serif;
  background: #fafafa;
  border: 1px solid #e6e6e6;
}
.form .row { margin-bottom: 12px; }
.form label { display: block; margin-bottom: 6px; font-weight: 700; color: #333; }
.form input[type="text"],
.form input[type="email"],
.form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #cfcfcf;
  border-radius: 3px;
  font-size: 14px;
}

/* markup */
<form class="form">
  <div class="row">
    <label for="code">Trade code</label>
    <input id="code" name="code" type="text">
  </div>
</form>

Common layout problems come from leftover float rules or from using fixed widths on parents. Override those (for example, label { float: none; }) and inspect computed styles in the browser dev tools. For modern compatibility and behavior reference: MDN: box-sizing.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.