Probleminha com folhas de estilo

Tô desenvolvendo uma app com o Menta aqui, e tô apanhando do CSS.Como o tio Iron manja tanto de CSS, como um recém-nascido de Física Quântica(é o que dar viver de Swing heheh), gostaria de uma mãozinha de vcs.Para vcs entenderem o que eu quero, eu estou “basicamente”, juntando os códigos desse formulário http://www.doiscriacao.com.br/estudoscss/formulario/ com esse efeito bacana de tooltip(dicas de texto): http://www.askthecssguy.com/2007/03/form_field_hints_with_css_and.html

Meu html(o body):

<body>
<div id="cadusuario">
<form id="cad" method="post" action="cadastrar_usuario.mtw">
<fieldset>  <legend>Criar conta de usuário:</legend>  
  <dl>
    <dt><label for="empresa">Empresa:</label></dt>
        <dd>
         <select id="empresa" name="empresa"><option>Ampla</option>          
                <option>Coelba</option>
                <option>Furnas</option>   
                <option>Funcoge</option>         
         </select>
      <span class="hint">Selecione a Empresa do usuário!<span class="hint-pointer">&nbsp;</span></span>
        </dd> 
     </br>
   
    <dt><label for="perfil">Perfil:</label></dt>
       <dd> <select id="perfil" name="perfil"><option>Usuario</option>          
                <option>Colaborador</option>
                <option>Administrador</option>                         
             </select>
     <span class="hint">Selecione a Empresa do usuário!<span class="hint-pointer">&nbsp;</span></span> </dd>
     </br>          
    <dt><label for="nome">Nome: </label></dt>
     <dd> 
    <input name="nome" id="nome" type="text" />
    <span class="hint">Selecione a Empresa do usuário!<span class="hint-pointer">&nbsp;</span></span></dd>
    </br>
     <dt>
    <label for="username">Nome de Usuário:</label></dt>
   <dd> <input name="username" id="username" type="text" /><span class="hint">Selecione a Empresa do usuário!<span class="hint-pointer">&nbsp;</span>
        </span></dd></br> 
    <dt><label for="senha">Senha:</label></dt> 
     <dd><input name="senha" id="senha" type="password" /><span class="hint">Selecione a Empresa do usuário!<span class="hint-pointer">&nbsp;</span>
        </span></dd></br> 
    <dt><label for="email">Email:</label></dt> 
      <dd><input name="email" id="email" type="text" /><span class="hint">Selecione a Empresa do usuário!<span class="hint-pointer">&nbsp;</span>
        </span></dd></br>  
   </dl>   
 </fieldset>
<center><INPUT TYPE=SUBMIT VALUE="Cadastrar" id="cadastrar" name="cadastrar"></center>
</form>
</div>
</body>

e meu css:

#cadusuario form{
	        /*font-size: 10pt;*/
        }
        
        #cadusuario fieldset{
	        padding: 20px;
	        border: 1px solid #ccc;
            width: 70%;
        }
        
        #cadusuario legend{
	        font-weight: bold;
	        color: #c03;
	        font-size: 11pt;
	        letter-spacing: 1px;
        }
        
        
        /* HACK PARA CORRIGIR O MARGIN-BOTTOM*/
        html>body #cadusuario legend{
        	margin-bottom: 0px;
        }
        
        #cadusuario input{
	        border-top: 1px solid #333;
	        border-left: 1px solid #333;
	        border-bottom: 1px solid #ccc;
	        border-right: 1px solid #ccc;
	        font-size: 13px;
	        margin-bottom: 10px;
	        color: #0E0659;
        }
        
        #cadusuario select{
	        border: 1px solid #333;
	        font-size: 13px;
	        margin-bottom: 10px;
	        color: #0E0659;
        }
                
        #cadusuario .botao{
	        font-size: 13px;
	        background: #f1f1f1;
	        margin: 15px 0px 0px 0px;
        }

#cadusuario dl {
    font:normal 12px/15px Arial;
    position: relative;
    width: 350px;
}
#cadusuario dt {
    clear: both;
    float:left;
    width: 130px;
    padding: 4px 0 2px 0;
    text-align: left;
}
#cadusuario dd {
    float: left;
    width: 200px;
    margin: 0 0 8px 0;
    padding-left: 6px;
}


/* The hint to Hide and Show */
 .hint {
   	display: none;
    position: absolute;
    right: -250px;
    width: 200px;
    margin-top: -4px;
    border: 1px solid #c93;
    padding: 10px 12px;
    /* to fix IE6, I can't just declare a background-color,
    I must do a bg image, too!  So I'm duplicating the pointer.gif
    image, and positioning it so that it doesn't show up
    within the box */
    background: #ffc url(pointer.gif) no-repeat -10px 5px;
}

/* The pointer image is hadded by using another span */
 .hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(pointer.gif) left top no-repeat;
}

3 Respostas

Topicos relacionados