Foros del Web » Creando para Internet » CSS »

Una pregunta seguro que muy sencilla

Estas en el tema de Una pregunta seguro que muy sencilla en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/02/2007, 07:53
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 8 meses
Puntos: 8
Una pregunta seguro que muy sencilla

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;
}

Última edición por MikiBroki; 15/02/2007 a las 08:29
  #2 (permalink)  
Antiguo 15/02/2007, 15:29
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 8 meses
Puntos: 8
Re: Una pregunta seguro que muy sencilla

Ninguna idea? el div actualmente queda así:

  #3 (permalink)  
Antiguo 15/02/2007, 17:15
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: Una pregunta seguro que muy sencilla

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.
__________________
...___...
  #4 (permalink)  
Antiguo 15/02/2007, 18:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Una pregunta seguro que muy sencilla

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.
  #5 (permalink)  
Antiguo 16/02/2007, 00:25
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 8 meses
Puntos: 8
Re: Una pregunta seguro que muy sencilla

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
  #6 (permalink)  
Antiguo 16/02/2007, 01:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Una pregunta seguro que muy sencilla

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.
  #7 (permalink)  
Antiguo 16/02/2007, 02:14
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 8 meses
Puntos: 8
Re: Una pregunta seguro que muy sencilla

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 !
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:27.