(Resolvido) Alinhar botao pra direita

[Anderson Ferreira]

Olá galera, estou com um problema :S

Este %$@#%$ de botaão, não qr ir pra direita .. Já tentei de tudo .. tudo mesmo --'

Ele está assim:

E queria q ficasse assim:

Código da página HTML / PHP:

<div class='barra_login'>

    <span class='frase_geral1'>Olá visitante. Faça seu </span>
    <span href='#' class='clique_login'>LOGIN</span>
    <span class='frase_geral2'>ou</span>
    <span class='frase_geral2'><a href='index.php?local=cadastro'>CADASTRE-SE</a></span>
    <input class='botao' type='submit' name='botao' value='Bate Papo' onclick="location. href= 'bate_papo.php' ">


// ATENÇÃO #### Esta parte de baixo ficará oculta, pois só aparecerar quando clicar no link LOGIN acima, ai aparecerá a DIV abaixo .. Isso é com jquery


    <div class='login'>

        <table>

            <form action='paginas/login.php' method='post'>

                <tr>

                    <td>LOGIN: <input class='campo' type='text' name='login' size='20' maxlength='25'></td>
                    <td>SENHA: <input class='campo' type='password' name='senha' size='15' maxlength='25'></td>

                    <td><input class='botao' type='submit' name='botao' value='Entrar'></td></td>

                </tr>

            </form>

        </table>

    </div>

</div>

Código do CSS:

/* --- BARRA - LOGIN --- */

.barra_login
    {
    width: 100%;
    height: 40px;
    border: solid;
    border-width: 0 4px 0 4px;
    border-color: #000;
    position: absolute;
    background: #c7f7ff;
    line-height: 40px;
    }

.frase_geral1
    {
    margin: 0 0 0 20px;
    color: #666666;
    }

.frase_geral2, .frase_geral2 a
    {
    color: #666666;
    text-decoration: none;
    }

.clique_login
    {
    color: #666666;
    cursor: pointer;
    }

.login
    {
    margin: 5px 0 0 20px;
    display: none;
    }

.login td
    {
    padding: 0 25px 0 0;
    }

.campo
    {
    height: 20px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 2px;
    border: 1px solid #65b8c7;
    }

.botao
    {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 2px;
    border: 1px solid #CCC;
    padding: 3px 3px;
    font-weight: bold;
    font-family: Arial, Tahoma, helvetica;
    }

.botao_batepapo
    {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 2px;
    margin: 6px 0 0 0;
    border: 1px solid #CCC;
    padding: 3px 3px;
    font-weight: bold;
    font-family: Arial, Tahoma, helvetica;
    }

PS: Quem quiser ver a página funcionando, favor acessar: http://www.abc.com

FIM :D

Editado Fevereiro 19, 2010 por Anderson Ferreira

[Jonathan Queiroz]

Utilize o atributo float

.botao{
float:right
}

[Anderson Ferreira]

Jáa tentdeei :S

Já tentei:

- float: right;

- position: relative;

- position: absolute;

- float: right + position: relative;

- float: right + position: absolute;

...

E nadaa adianta :(

Ajúdaaa :$

[Jonathan Queiroz]

Você fez isso com a classe botao_batepapo, o correto seria fazer com a classe botao (não existe nenhum elemento na classe botao_batepapo)

Fiz o teste aqui e funcionou.

[Anderson Ferreira]

Éee .. mechendo aq acabei bagunçando o códigoo .. O correto é q o "float: right;" esteja na class botao, e o botao com a class botao_batepapo... Esta class (botao_batepapo) serve apenas para colocar bordas redondas no botãao...

Siim .. no Firefox funcionou perfeitamente, no Chrome também .. o único problema (COMO SEMPRE) é no FDP do Interneet Explorer :S

Qria saber como alinhar ele também no Internet Explorer

------

Prints nos navegadores:

Google Chrome

Mozilla Firefox

Internet Explorer

Obrigado,

Anderson Ferreira

Editado Outubro 15, 2009 por Anderson Ferreira