Desarrollo y diseño

Formulario CSS

Battosai
Battosai #1 Dic '05

Wenas!! Necesito aplicar CSS para ke mi form kede mas bonito..pero no se hacerlo bien. Debo poner :

Usuarios : [aki iria el kuadro de texto]
Password : [otro kuadro]

[Boton de Login]

//

el codigo ke e exo es el siguiente :

<htlm>
<head>
<style type = "text/css">
.background { width: 800px; height: 600px; margin-top: 30px; margin-left: 100px; background-image : url("bg.jpg");}
.login {width: 300px; height: 5px; border-width: 0px; margin-top: 150px; margin-left: 120px; }
</style>

</head>
< body>
<div class="background">
<div class="login">< iframe width= 100% height=100% nom="iframe1" src= "loginform.php" ></iframe>
</div>
</div>
</body>
</htlm>

Al lado del formulario aparece un "recuadro blanco" ke destaca sobre el fondo, mientras que yo lo que busco es poner solo lo que puse arriba (lo de users: pw:..). A ver si me podeis echar una mano! Gracias!

guner
guner #2 Dic '05

< ?xml version="1.0" encoding="utf-8"?>
< !DOCTYPE html PUBLIC
&nbsp;&nbsp;&nbsp;&nbsp;"-//W3C//DTD XHTML 1.0 Strict//EN"
&nbsp;&nbsp;&nbsp;&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
< head>
&nbsp;&nbsp;&nbsp;&nbsp;< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
&nbsp;&nbsp;&nbsp;&nbsp;< meta name="generator" content="Bluefish 1.0.4"
&nbsp;&nbsp;&nbsp;&nbsp;< title>Cool Form : D< /title>
&nbsp;&nbsp;&nbsp;&nbsp;< link rel="shortcut icon" type="image/ico" href="favicon.ico" />
&nbsp;&nbsp;&nbsp;&nbsp;< style type="text/css">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;form#login {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative;;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 200px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 0.8em;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, sans-serif;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;form#login input#userLogin, form#login input#pswdLogin {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 50%;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;form#login input { width: 40%; }
&nbsp;&nbsp;&nbsp;&nbsp;< /style>
< /head>
< body>
&nbsp;&nbsp;&nbsp;&nbsp;< form id="login">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ID: < input type="text" id="userLogin" name="userLogin">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;< br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Password: < input type="password" id="pswdLogin" name="pswdLogin" >
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;< br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;< input type="submit">
&nbsp;&nbsp;&nbsp;&nbsp;< /form>
< /body>
< /html>

No entiendo para qué usas iframes o divs para algo tan sencillo.

Y
Yohnah #3 Dic '05

pon esto en tu fichero de css (o con el resto de css)

input {border: 0px;}

y con eso se le quita el borde.

Whose
Whose #4 Dic '05 Penitente

http://www.outfront.net/tutorials_02/adv_tech/funkyforms1.htm

Usuarios habituales