Una pregunta seguro que muy sencilla

MikiBroki · #1 (**permalink**) 15/02/2007, 07:53

Estoy haciendo unas pruebas para ver cómo podría crear un form con CSS, sin tablas, y que quede todo alineado...

Pero si colocar "spanPass" digamos 90 píxeles desde el inicio de "divAcceso", y con 10px a la izquierda... queda centrado... qué hago mal ?

La segunda cuestión: ¿ es posible hacer que las tres SPAN compartan "color:#FFFFFF;font-weight:bold;" ? ... sé que se puede hacer aplicando los mismos estilos a todas las SPAN, pero lo quisiera hacer desde su id de algún modo ( si se puede )

EDITADO: edito el código para ponerlo completo.

Gracias

Código:

<html>

    <head>
        <title>Prueba formulario</title>
    </head>


    <body>

        <div id="divGeneral">

            <div id="divAcceso">
                <span id="spanAcceso">A C C E S  O</span>
                
                <label id="lblUsuario" for="txtUsuario">Usuario:</label>
                <label id="lblPass"    for="txtPass" >Contrase&ntilde;a:</label>

                <input type="text" id="txtUsuario" value="usuario" />
                <input type="text" id="txtPass" />
                <input type="button" id="btnEnviar" value="   Enviar   " />
            </div>
        
        </div>
        
    </body>
</html>

"estilos.css":
=======

Código:

body 
{
    margin:0;
    background-color:#DDDDDD;
}


#divGeneral 
{
   border:0px solid #99CCFF;
}


#divAcceso {
    height:180px;
    width:400px;

    margin-top:200px;
    margin-left:auto;
    margin-right:auto;
   
    font-family:Arial, Helvetica;

    padding:5;

    background-color:#0066BB;
    border:5px solid #FFFFFF;
}


#spanAcceso {
    position:relative;
    left:120px;
    
    color:#FFFFFF;    

    font-size:24px;
    font-weight:bold;
}


#lblUsuario {
    position:relative;
    top:30px;    
    left:10px;

    float:left;
    /*clear:both;*/

    color:#FFFFFF;
    font-weight:bold;    

    background-color:blue;
}


#txtUsuario {
    position:relative;
    /*top:30px;*/
    left:150px;

    float:left;
    clear:both;

    cursor:pointer;
}


#lblPass {
    position:relative;
    top:60px;
    left:0px;

    float:left;

    color:#FFFFFF;
    font-weight:bold;

    background-color:red;
    
}


#txtPass {
    position:relative;
    /*top:50px;*/
    left:150px;    

    float:left;
    clear:both;

    cursor:pointer;
}


#btnEnviar {
    position:relative;
    top:150px;
    left:10px;

    cursor:pointer;
}

MikiBroki · #2 (**permalink**) 15/02/2007, 15:29

Ninguna idea? el div actualmente queda así:

AlZuwaga · #3 (**permalink**) 15/02/2007, 17:15

pues ni idea, me tendría que fijar... pero yo no haría esto:

Código:

<label id="lblUsuario" for="txtUsuario">Usuario:</label>
<label id="lblPass"    for="txtPass" >Contrase&ntilde;a:</label>
<input type="text" id="txtUsuario" value="usuario" />
<input type="text" id="txtPass" />

sino esto:

Código:

<label id="lblUsuario" for="txtUsuario">Usuario:</label>
<input type="text" id="txtUsuario" value="usuario" />
<label id="lblPass"    for="txtPass" >Contrase&ntilde;a:</label>
<input type="text" id="txtPass" />

digo... me parece más lógico ese orden.

Mikmoro · #4 (**permalink**) 15/02/2007, 18:20

Hola, Miki.
A mi me da la impresión de que así es como lo quieres, pero igual estoy equivocado. No obstante, con esta referencia te será fácil cambiar lo que quieras:

Código:

<!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>
  <title>solicion alternativa</title>
  <style type="text/css">
body { margin: 0pt;
background-color: rgb(221, 221, 221);
}
#divGeneral { border: 1px solid rgb(153, 204, 255);
}
#divAcceso { border: 5px solid rgb(255, 255, 255);
height: 180px;
width: 400px;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
font-family: Arial,Helvetica;
background-color: rgb(0, 102, 187);
position: relative;
}
#spanAcceso { color: rgb(255, 255, 255);
font-size: 24px;
font-weight: bold;
margin: 0 auto;
display: block;
position: relative;
text-align: center;
}
#txtUsuario, #txtPass { position: relative;
float: left;
cursor: pointer;
margin: 20px 0 0 30px;
}
#lblUsuario, #lblPass { position: relative;
float: left;
color: rgb(255, 255, 255);
font-weight: bold;
margin-top: 20px;
}
#lblUsuario {background-color: blue;
margin-left: 70px;
}
#lblPass { background-color: red;
margin-left: 40px;
clear: both;
}
#btnEnviar { position: relative;
cursor: pointer;
clear: both;
display: block;
margin: 0 auto;
top: 20px;
}
  </style>
</head>
<body>
<div id="divGeneral">
<div id="divAcceso"><span id="spanAcceso">A C
C E S O</span>
<label id="lblUsuario" for="txtUsuario">Usuario:</label>
<input id="txtUsuario" value="usuario" type="text" /><label
 id="lblPass" for="txtPass">Contrase&ntilde;a:</label>
<input id="txtPass" type="text" /><input
 id="btnEnviar" value=" Enviar " type="button" /></div>
</div>
</body>
</html>

Como podrás comprobar, y respondiendo a tu pregunta, los selectores se pueden agrupar simplemente separándolos por comas.

Mikel.

MikiBroki · #5 (**permalink**) 16/02/2007, 00:25

Muchas gracias a los dos. MikMoro, el ejemplo va perfecto !

En cuanto a lo de estilos comunes sé lo de separar por comas, pero, ¿si por ejemplo quiero que "txtUsuario" aparte de lo siguiente...

Código:

#txtUsuario, #txtPass { position: relative;
float: left;
cursor: pointer;
margin: 20px 0 0 30px;
}

... tenga algún otro estilo para él sólo? por ejemplo "color:blue"... se podría poner en la misma hoja de estilos? o sólo puede hacerse así?:

Código:

.elcolor { color:blue; }

...

<input id="txtUsuario" class="elcolor" type="text" />

Gracias nuevamente

Mikmoro · #6 (**permalink**) 16/02/2007, 01:53

Mira cómo he puesto en el ejemplo:

#lblUsuario, #lblPass { position: relative;
float: left;
color: rgb(255, 255, 255);
font-weight: bold;
margin-top: 20px;
}
#lblUsuario {background-color: blue;
margin-left: 70px;
}
#lblPass { background-color: red;
margin-left: 40px;
clear: both;
}

Es decir, agrupas para las propiedades comunes y luego pones las particulares de un estilo, todo en la misma hoja de estilo sin problemas.

Mikel.

MikiBroki · #7 (**permalink**) 16/02/2007, 02:14

Ah gracias no me había fijado. Pensé que sólo podía estar definido el estilo para un id una sola vez. Muchas gracias !