Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Botão não vai para direita e nem altera com o CSS

HTML ....

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>João da Silva - Biografia</title>
    <link rel="icon" href="imagens/favicon.png">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/site.css">
    <link rel="stylesheet" href="css/bio.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
    <main>
        <h1 class="titulo-principal">Contato</h1>
        <div class="container">
            <form>
                <fieldset class="dados">
                    <legend>Dados pessoais</legend>
                    <label for="nome">Nome:</label>
                    <input type="text" id="nome" name="nome" placeholder="digite seu nome" autofocus required pattern="[A-Za-z0-9  ']{3,}" title="Preencha corretamente">
                    <label for="email">Email: </label>
                    <input type="email" id="email" name="e-mail" placeholder="digite seu email" required>
                </fieldset>


                <fieldset>
                    <legend>Assunto</legend>
                    <label>
                        <input type="radio" name="assunto" value="consult">
                        Consultoria
                    </label>

                    <label>
                        <input type="radio" name="assunto" value="blog">
                        Blog
                    </label>

                    <label>
                        <input type="radio" name="assunto" value="outro">
                        Outro
                    </label>
                </fieldset>


                <fieldset class="mensagem">
                    <label for="msg" required>
                        Mensagem
                    </label>
                    <textarea id="msg" name="mensagem" cols="30" rows="6"></textarea>
                    <button>Enviar</button>
                </fieldset>

            </form>

        </div>

    </main>
    <img src="imagens/eu.jpg" alt="Minha foto" class="minha-foto">
    <aside class="navegacao-site">
        <h1>João da Silva</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="bio.html">Sobre mim</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contato.html">Contato</a></li>
            </ul>
        </nav>
        <ul class="icones-redes-sociais">
            <li>
                <a href="https://github.com/joaodasilva" class="github" data-tooltip="Conheça os meus trabalhos no GITHUB">

                </a>
            </li>
            <li>
                <a href="https://twitter.com/joaodasilva" class="twitter" data-tooltip="Twitter">

                </a>
            </li>
            <li>
                <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin" data-tooltip="Linkedin">

                </a>
            </li>
        </ul>
    </aside>
    <footer class="rodape-pagina">
        &copy; João da Silva 2014
    </footer>
</body>
</html>
3 respostas

CSS parte 1...

html {
    font-size: 120%;
}

body {
    font-family: "Crimson Text", "Times New Roman", serif;                  /* 1rem: FONTE DO NAVEGADOR*/
    background-color: #F2FFFC;                                              /* 1em: FONTE DO ELEMENTO  */
    line-height: 1.5;
}

h1,
h2,
.subtitulo-principal {
    font-family: "Open Sans Condensed", "Arial", sans-serif;
}

h1 {
    text-transform: uppercase;
    font-size: 60px;
}

.titulo-principal {
    font-size: 300%;
    text-align: center;
    background-color: #851944;
    color: #FFF;
    padding: 1.25rem;
    border-bottom: 1rem solid #000;
}

.subtitulo-texto {
    font-size: 1.5rem;
    clear: both;
}

main a {
    color: #851944;
    text-decoration: none;

}


main p {
    text-align: justify;
    margin: 1em 0;
}

.navegacao-site {
    text-align: center;
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 1em;
}

.navegacao-site a {
    color: inherit;
    font-family: "Open Sans Condensed", "Arial", sans-serif;
    text-transform: lowercase;
}

.navegacao-site h1 {
    font-size: 1.5rem;
    margin-bottom: 1.25em;
}

.rodape-pagina {
    background-image: radial-gradient(ellipse at left bottom,
    rgba(60, 29, 61, 0.8),
    rgba(60, 29, 61, 0.8) 65%,
    black 65%,
    black 70%,
    transparent 70%,
    transparent);
    width:100%;
    background-size: 25% 100%; /* o background size é a largura e altura que o elemento vai ocupar */
    background-repeat: no-repeat;
    color: #F2FFFC; 
    padding: 1em;
    clear: both;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
}

.container {
    width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5em 0;
}

.citacao-bio {
    background-color: #D9E5E3;
    border: .5em solid #C2CCCA;
    padding: 1em;
    margin: 1em 2em;
    width: 30ch;
    box-sizing: border-box;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

.icones-redes-sociais li {
    display: inline-block;
}

.icones-redes-sociais a {
    width: 40px;
    height: 40px;
    display: block;
    position: relative;

}

.github {
    background-image: url(../imagens/github.png);
}

.twitter {
    background-image: url(../imagens/twitter.png);
}

.linkedin {
    background-image: url(../imagens/linkedin.png);
}

.icones-redes-sociais a:hover::after,
.icones-redes-sociais a:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    right: 50%;
    text-indent: 0;
    width: 300%;
    background: black;
    font-size: 0.75em;
}

.icones-redes-sociais a:hover::before,
.icones-redes-sociais a:focus::before {
    content: '';
    width: 1em;
    height: 1em;
    background-color: black;
    position: absolute;
    bottom: -10px;
    left: 0;
    transform: translate(-.5em) rotate(45deg);
}

main {
    width: 86%;
    float: left;
    padding-bottom: 80px;
}

.minha-foto,
.navegacao-site {
    border-left: 0.5em solid black;
    border-bottom: 0.5em solid black;
    box-sizing: border-box;
}

CSS parte 2...

.navegacao-site {
    width: 14%;
    float: right;
    position: relative;
    top: 15em;

}

.minha-foto {
    position: absolute;
    top: 0;
    right: 0;
    height: 15em;
}

.navegacao-site a {
    text-decoration: none;
}


main a:hover,
main a:focus,
footer a:hover,
footer a:focus {
    color: red;
}

.navegacao-site a:hover,
.navegacao-site a:focus {
    box-shadow: 0 0 2px pink;
}

.container > p:first-letter {
    font-size: 2em;
    font-weight: bold;
    color: #3C1D3D;
    text-shadow: 1px 1px black;
    margin-right: .2ch;
    line-height: 1;
}

/* Podemos usar um seletor de atributo para selecionar
   apenas a legenda desse campo e não dos outros */
legend,
label[for="msg"] {
    font-weight: bold;
    margin-top: 1em;
}

/* As tags <label> que têm o atributo "for" são
   os rótulos dos campos sem ser os assuntos */
label[for] {
    display: block;
}

/* Selecionamos apenas os campos de texto */
input[type="text"],
input[type="email"],
textarea {
    /* Força o navegador a usar a mesma fonte da página */
    font-family: inherit;
    /* Inclusive o tamanho dela */
    font-size: 100%;
    padding: .25em .5em;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

/* alguns ajustes para o campo "Outro": deixar ele na mesma linha dos outros assuntos */
fieldset > fieldset {
    display: inline;
}

/* deixar o rótulo dele inline de novo */
label[for="outro"] {
    display: inline;

/* deixar só esse campo sem ocupar a tela toda */
input[name="assunto"] {
    width: auto;
}

/* O campo de texto que tiver o foco do teclado deve ficar com o fundo levemente amarelo. */
input:focus,
textarea:focus {
    background-color: #FFD;
}

/*Os campos que estiverem inválidos devem ter uma sombra vermelha.*/
input:invalid {
    box-shadow: 0 0 3px red;
}

button {
    /* Precisamos tirar a borda que o navegador coloca por padrão */
    border: 0;
    padding: .5em 1em;
    font-family: "Open Sans Condensed", sans-serif;
    background-color: #3C1D3D;
    color: white;
    font-size: 1.2em;
    /* Faz com que o botão apareça na direita */
    margin-left: auto;
    margin-top: 1em;
    display: block;
}

button:hover,
button:focus {
    background-color: #8C1D3D;
}
solução!

Oi, Antonio, tudo bem?

Dei uma olhada no seu código, fiz algumas alterações e acho que deu certo pro botão de enviar ter a estilização. Vamos primeiro no arquivo HTML:

Esse trecho aqui:

<fieldset class="mensagem">
                    <label for="msg" required>
                        Mensagem
                    </label>
                    <textarea id="msg" name="mensagem" cols="30" rows="6"></textarea>
                    <button>Enviar</button>
                </fieldset>

Você pode retirar a tag fieldset e adicionar o type = submit ficando assim:

 <label for="msg">
                        Mensagem
                    </label>
                    <textarea id="msg" name="mensagem" cols="30" rows="6"></textarea>
                    <button type="submit">Enviar mensagem</button>

Já esse trecho precisa ficar dentro da tag filedset:

 <label>
                        <input type="radio" name="assunto" value="outro">
                        Outro
                    </label>

Ficando assim:

<fieldset>
                        <input type="radio" name="assunto" value="utro" id="outro">
                        <label for="outro">
                            Outro
                        </label>
                        <input type="text" name="outro-assunto">
                    </fieldset>

No arquivo CSS, adicione a tag button dentro da estilização do label[for]:

label[for],
    button{
    display: block;
}
Feche as chavem em:
input[name="assunto"] {
    width: auto;
}

Acredito que essas modificações irão estilizar o seu botão :}

Espero ter te ajudado! `