Alinear cajas de texto

[dragonfire256]

Hola buenos dias... Me gustaria saber como alinear varias cajas de texto y que todas queden a la misma altura, es decir, que el inicio y el fin de las cajas de texto sean el mismo... El problema que yo le veo a esto es que cada textfield tiene un label que tiene diferente longitud, dependiendo de lo que tenga escrito... Espero haberme explicado... Muchas gracias

[dragonfire256]

Aqui parte del codigo:

Código HTML:

<form id="form1" name="form1" method="post" action="" onSubmit="return comprobarClave(this)">
      <p>&nbsp;</p>
      <p>
        <label for="usuarioE" style="margin-left:30%;">Usuario</label>
        <input type="text" name="usuarioE" id="usuarioE" style="margin-left:1%; width:150px; margin-bottom:30px;"/>
      </p>
      <p>
        <label for="password" style="margin-left:30%;">Contrase&ntilde;a</label>
        <input type="password" name="password" id="password" style="margin-left:1%; width:150px; margin-bottom:30px;"/>
      </p>
      <p>
        <label for="password2" style="margin-left:30%;">Repetir Contrase&ntilde;a</label>
        <input type="password" name="password2" id="password2" style="margin-left:1%; width:150px; margin-bottom:30px;"/>
      </p>
      <p>
        <input type="submit" name="Establecer_Password" id="Enviar" value="Enviar" style="margin-left:35%; margin-top:30px;"/>
        <input type="reset" name="Cancelar" id="Cancelar" value="Cancelar" style="margin-left:10%;margin-top:30px;"/>
      </p>
    </form>
 

[Ruben_JD]

una forma de como alinear y dar formtato esta en este libro
y debes añadir un estilo unico a las cajas de texto:

Css:
#tu_formulario input{
width:150px;
height: ...;
padding: ...;
margin: ...;
background-color:...;
color:...;
}
y otras propiedades css para que se vean mejor ese formulario, que estan explicadas en ese libro.
Suerte.

[dragonfire256]

Iniciado por Ruben_JD

una forma de como alinear y dar formtato esta en este libro
y debes añadir un estilo unico a las cajas de texto:

Css:
#tu_formulario input{
width:150px;
height: ...;
padding: ...;
margin: ...;
background-color:...;
color:...;
}
y otras propiedades css para que se vean mejor ese formulario, que estan explicadas en ese libro.
Suerte.

Muchas gracias por tus consejos... Estoy tratando de seguir el ultimo ejemplo del link que me diste, pero necesito adaptarlo... En vez de invocar la etiqueta html, quiero hacerlo a traves de un nombre de clase... Para que se entienda mejor

El ejemplo de la pagina:

Código CSS:

div {
  margin: .4em 0;
}
div label {
  width: 25%;
  float: left;
}
 

Lo que "intento" hacer pero no funciona

Código CSS:

.nombre_clase_div label {
  width: 25%;
  float: left;
}
 

[Ruben_JD]

Lo que tienes que cambiar:
primero tus p por div y segundo el ancho del div label de 25% a 30% o lo que necesites para que pueda ajustarse a tu texto.

Recuerda que tienes un label Repetir Contraseña que tiene un mayor ancho.
Saludos.

[dragonfire256]

Iniciado por Ruben_JD

Lo que tienes que cambiar:
primero tus p por div y segundo el ancho del div label de 25% a 30% o lo que necesites para que pueda ajustarse a tu texto.

Recuerda que tienes un label Repetir Contraseña que tiene un mayor ancho.
Saludos.

Eso no es el detalle... Lo que pasa es que tengo otros div dentro de la pagina, que pueden llegar a tener o no label... Por lo que utilizar un nombre de clase para poder ser mas especifico... Muchas gracias por tu tiempo

[Ruben_JD]

Si no quieres que otros divs cambien añade el id="form1" que ya definiste:

Código CSS:

#form1 div {
  margin: .4em 0;
}
#form1 div label {
  width: 25%;
  float: left;
}
 

o también para aplicar solo a formularios

Código CSS:

form div {
  margin: .4em 0;
}
form div label {
  width: 25%;
  float: left;
}
 

Saludos.

[dragonfire256]

Iniciado por Ruben_JD

Si no quieres que otros divs cambien añade el id="form1" que ya definiste:

Código CSS:

#form1 div {
  margin: .4em 0;
}
#form1 div label {
  width: 25%;
  float: left;
}
 

o también para aplicar solo a formularios

Código CSS:

form div {
  margin: .4em 0;
}
form div label {
  width: 25%;
  float: left;
}
 

Saludos.

Sigo sin hacerlo funcionar... Aqui te posteo el estilo que tengo... Vale la pena aclarar que la mayoria del codigo ccs lo agrega dreamweaver:

Código CSS:

<style type="text/css">
<!--
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #4E5869;
    margin: 0;
    padding: 0;
    color: #000;
}
 
ul, ol, dl {
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;  
    padding-right: 15px;
    padding-left: 15px;
}
a img {
    border: none;
}
a:link {
    color:#414958;
    text-decoration: underline;
}
a:visited {
    color: #4E5869;
    text-decoration: underline;
}
a:hover, a:active, a:focus { 
    text-decoration: none;
}
 
.container {
    width: 80%;
    max-width: 1260px;
    min-width: 780px;
    background: #FFF;
    margin: 0 auto;
}
 
.header {
    background: #6F7D94;
}
 
.content {
    padding: 10px 0;
}
 
.content ul, .content ol { 
    padding: 0 15px 15px 40px; 
}
 
.footer {
    padding: 10px 0;
    background: #6F7D94;
}
 
.fltrt {
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
-->
html {
    height: 100%;
    width: 100%;
}
body{
   height: 100%;
   width: 100%;
   background: -webkit-linear-gradient(#EE8711, #033E8D);
   background: -moz-linear-gradient(#EE8711, #033E8D);
   background: -o-linear-gradient(#EE8711, #033E8D);
   background: -ms-linear-gradient(#EE8711, #033E8D);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EE8711', endColorstr='#033E8D',GradientType=0 );
}
.content{
    background-color:#e1e5ff;
    height:100%;
}
.container{
    height:60%;
}
#form1 div label{
    width:50%;
}
</style>
 

Disculpa que moleste tanto... Muchas gracias

[xinak0]

Hola,
he cogido tu código y lo he compuesto, creo que lo que querías era más o menos lo siguiente:

AÑADIDOS AL CSS:

#form1 div label{
width:50%;
}

#form1 input [type="text"]{
margin-left:30px;
}

.claseLabel{
width:400px;/*Aquí determinas la posición visual del label*/
float: left;
text-align:right;
}

p{
width:800px;
}


DONDE TENGAS EL FORMULARIO AÑADE A CADA LABEL LA CLASE DENTRO DE UN SPAN:

<form id="form1" name="form1" method="post" action="" onSubmit="return comprobarClave(this)">
<p>
<span class="claseLabel">
<label for="usuarioE">Usuario</label>
</span>

<input type="text" name="usuarioE" id="usuarioE" style="margin-left:1%; width:150px; margin-bottom:30px;"/>

<br />

<span class="claseLabel">
<label for="password">Contrase&ntilde;a</label>
</Span>
<input type="password" name="password" id="password" style="margin-left:1%; width:150px; margin-bottom:30px;"/>

<br />
<span class="claseLabel"> <label for="password2" style="margin-left:30%;">Repetir Contrase&ntilde;a</label></span>
<input type="password" name="password2" id="password2" style="margin-left:1%; width:150px; margin-bottom:30px;"/>
<br />
<input type="submit" name="Establecer_Password" id="Enviar" value="Enviar" style="margin-left:35%; margin-top:30px;"/>
<input type="reset" name="Cancelar" id="Cancelar" value="Cancelar" style="margin-left:10%;margin-top:30px;"/>
</p>
</form>





Y debería funcionarte.
Puedes mirarlo en: http://www.bloque5.com/dominios/pruebas/index.html

Un saludo

[kseso?]

¡¡¡¡Un consultante que a cada respuesta adjunta los códigos!!!

¡Ip! ¡ip! ¡hurra!

Quizás no haya pillado yo muy bien lo que pretende, a ver si esto es una aproximación a lo que pretende.
Tómelo como base:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
 
<style type="text/css">
form {
    text-align: center;
    width: 25em;
    margin: 0 auto;
    padding: 1em;
    border: 1px solid #E0E0E0;
    font-size: 1em;
    font-family: monospace;
    line-height: 1;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    background: #F5F5F5;
}
label {
    display: inline-block;
    text-align: left;
    width: 12em;
    vertical-align: bottom;
    border-bottom: 1px dashed #CDCDCD;
}
input {
    display: inline-block;
    width: 12em;
}
.subm-rest input {
    width: 10em;
    margin: 1em;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="" onSubmit="return comprobarClave(this)">
      <p>
        <label for="usuarioE">Usuario</label>
        <input type="text" name="usuarioE" id="usuarioE" />
      </p>
      <p>
        <label for="password">Contrase&ntilde;a</label>
        <input type="password" name="password" id="password" />
      </p>
      <p>
        <label for="password2">Repetir Contrase&ntilde;a. Es obligatorio</label>
        <input type="password" name="password2" id="password2" />
      </p>
      <p class="subm-rest">
        <input type="submit" name="Establecer_Password" id="Enviar" value="Enviar" />
        <input type="reset" name="Cancelar" id="Cancelar" value="Cancelar" />
      </p>
    </form>
</body>
</html>
 

[dragonfire256]

Iniciado por kseso?

¡¡¡¡Un consultante que a cada respuesta adjunta los códigos!!!

¡Ip! ¡ip! ¡hurra!

Quizás no haya pillado yo muy bien lo que pretende, a ver si esto es una aproximación a lo que pretende.
Tómelo como base:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
 
<style type="text/css">
form {
    text-align: center;
    width: 25em;
    margin: 0 auto;
    padding: 1em;
    border: 1px solid #E0E0E0;
    font-size: 1em;
    font-family: monospace;
    line-height: 1;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    background: #F5F5F5;
}
label {
    display: inline-block;
    text-align: left;
    width: 12em;
    vertical-align: bottom;
    border-bottom: 1px dashed #CDCDCD;
}
input {
    display: inline-block;
    width: 12em;
}
.subm-rest input {
    width: 10em;
    margin: 1em;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="" onSubmit="return comprobarClave(this)">
      <p>
        <label for="usuarioE">Usuario</label>
        <input type="text" name="usuarioE" id="usuarioE" />
      </p>
      <p>
        <label for="password">Contrase&ntilde;a</label>
        <input type="password" name="password" id="password" />
      </p>
      <p>
        <label for="password2">Repetir Contrase&ntilde;a. Es obligatorio</label>
        <input type="password" name="password2" id="password2" />
      </p>
      <p class="subm-rest">
        <input type="submit" name="Establecer_Password" id="Enviar" value="Enviar" />
        <input type="reset" name="Cancelar" id="Cancelar" value="Cancelar" />
      </p>
    </form>
</body>
</html>
 

Ya probe tu codigo y le hice algunos cambios por mi parte... El cambio mas importante que le hice fue cambiar el vertical-align: bottom por top... El resto fue cambio en las medidas y en las fuentes... Muchas gracias por tu ayuda y por tu tiempo.... Y a xinak() y Ruben_JD por su disposicion y su paciencia... Muchas gracias