Entrar Ainda não tem acesso?
13
respostas

Problema com tag A

Referente ao curso Bootstrap: criação de uma single-page responsiva

por Nikolai Cinotti
| 433.6k xp | 424 posts
Alura Scuba Team

Esse site que estou criando pra teste http://99chefs.esy.es/

Eu setei a cor padrão cinza como podem ver: 

a {
    text-decoration: none;
    padding: 5px 10px;
}
a:link {
    color: #838383;
}
a:visited {
    color: #838383;
}
a:hover {
    background-color: #b9c941;
    color: #FFF;
}

1º O text decoration não funcionou no a { }; por que? só funcionou após eu colocar: 

.clean-link, a:hover{
    color: #FFF;
    text-decoration: none;
}

Agora eu quero mudar apenas a padrão cor das 3 frases abaixo do menu. Mas não consigo. Já tentei colocando Id/classes nos links das 3 frases mas não funcionou. Podem me ajudar?

13 respostas
por Vinicius Dias
| 2870.7k xp | 4248 posts
Instrutor Zend Certified PHP Engineer

Olá, Nikolai.

Sua dúvida não ficou muito clara pra mim.

Acessei seu site e vi que o text-decoration: none funcionou no seletor a { }. Agora, o que você quer é alterar a cor desses links?

Se sim, é só alterar o #838383 para a cor que você deseja.

E, como a:link e a:visited têm os mesmos valores, por que não colocá-los num seletor só (a:link, a:visited)?

por Nikolai Cinotti
| 433.6k xp | 424 posts
Alura Scuba Team

Sim. Está funcionou por causa da configuração .clean-link, a:hover {} se voce tirar ela. não vai funcionar. Mas deveria funcinoar por já ter um a: { text-decoration:none;}.

Não. Se eu alterar o #838383. vai mudar tudo. até o menu de login e cadastras. Eu só quero mudar a parte de baixo.

por Manoel de Souza Silva Lima
| 589.8k xp | 464 posts
Analista Judiciário - Analista de Sistemas

Nikolai, fiz um teste aqui com teu código e funciona. Os links aparecem sem decoration.

Talvez o problema seja com o bootstrap substituindo as tuas configurações. Remove a inclusão do css dele e faz um teste.

Qualquer coisa, só postar.

Abraço.

por Nikolai Cinotti
| 433.6k xp | 424 posts
Alura Scuba Team

Tentei usar .clean-link a: {color: #FFF;} mas não funciona e nem nada do genero. Eu quero deixar em branco os links que estão abaixo da area de login. Não quer mudar tudo.

por Nikolai Cinotti
| 433.6k xp | 424 posts
Alura Scuba Team

HTML 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>99Chefs - Encontre seu Chef</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div id="navegacao">
        <div id="area">                
            <h1 id="logo"><span class="verde">99</span>Chefs</h1>
            <nav>
                <a class="clean-link" href="#">Login</a>
                <a class="clean-link" href="#">Cadastre-se</a>
                <button class="btn btn-primary">Quero Trabalhar</button>
            </nav>
        </div>    
    </div>

    <div class="destaque">
        <div class="destaque-header">
            <div class="destaque-bloco">
                <a class="clean-link" href="#"> Como Funciona</a>
                <a class="clean-link" href="#"> Encontrar Freelancers</a>
                <a class="clean-link" href="#"> Encontrar Trabalho</a>
            </div>
            <div class="title-header">

                <h1 class="title">Encontre o melhor Chef para você.</h1>
                <div class="btn-group">
                    <a class="btn btn-lg btn-primary" href="#">Começe a Receber Propostas!</a>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

CSS

/* clear default html */
* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    background: #f3f3f3;
    font-size: 1.5em;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}
#navegacao {
    background: #FFF;
    border-bottom: 1px solid #d8d8d8;
    height: 50px;
}
#area {
    max-width: 80%;
    margin: 0 auto;
}
/* Logo */
#logo {
    float: left;
}
#logo, h1 {
    margin-top: 0;
}
nav {
    float: right;
    padding: 10px 0;
}
/* Links menu  e destaque*/
a {
    text-decoration: none;
    padding: 5px 10px;
}
a:link, a:visited {
    color: #838383;
}
a:hover {
    background-color: #b9c941;
    color: #FFF;
}
.clean-link, a:hover{
    color: #FFF;
    text-decoration: none;
}
/* Header */
.destaque {
    background: url('../img/freelancer-peoples.jpg')  no-repeat center center;
    clear: both;
    width: 100%;
    height: 583px;
    background: 737375;
}
.destaque-header {
    color: #FFF;
    width: 100%;
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #9d9d9d;
    position: relative;
    text-decoration: none;
}
.destaque-bloco {
    position: relative;
    margin-left: 60%;
}
.title-header {
    padding: 110px 0;
}
.title {
    font-size: 3em;
    font-weight: 100;
    text-align: center;
    margin: 5px;
}
.btn-group {
    clear: both;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 31px;
}
/* Classes */
.verde {
    color: #B9C941;
}
.button {
    border: 1px solid red;
    color: #B9C941;
    padding: 10px;
}
por Nikolai Cinotti
| 433.6k xp | 424 posts
Alura Scuba Team

Outro problema que encontrei: O ultimo botão azul, usei o text-align:center; e ele continuou a esquerda. Deveria ter ficado no centro, sabem o pq?

por Manoel de Souza Silva Lima
| 589.8k xp | 464 posts
Analista Judiciário - Analista de Sistemas

Nikolai, como você disse que quer deixar os links abaixo da linha do login brancos, adiciona essa classe no final do teu css:

.destaque-bloco a, .title-header a {
    color: #FFFFFF !important;
}

Vê se é assim mesmo que você quer.

por Nikolai Cinotti
| 433.6k xp | 424 posts
Alura Scuba Team

Funcionou agora Manoel.

Você sabe o por que o text-align:center, não ta centralizando o botão da foto no meio?

por Allan Pinheiro de Lima
| 449k xp | 265 posts
Chief of Technology Officer

Ele não está funcionando por que, se o código ainda estiver como você exibiu, você não está usando o sistema de containers e rows do bootstrap.

Pra centralizar sem o sistemas de grids e row, o correto é você dar tamanho na caixa do elemento de 100% e usar o

margin: 0 auto

por Manoel de Souza Silva Lima
| 589.8k xp | 464 posts
Analista Judiciário - Analista de Sistemas

Nikolai, você está fazendo uma parte do layout com boostrap e outra sem, fica meio zoado assim, difícil de ajustar e garantir a responsividade.

Uma sugestão é que você use o bootstrap para criar o layout inteiro ou, então, não o utilize.

Em todo caso, para ajudar na centralização do botão, lembre-se que botão (link no seu caso) não é um texto, por isso o align-text: center não funciona com ele.

Uma solução seria:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>99Chefs - Encontre seu Chef</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="navegacao">
        <div id="area">                
            <h1 id="logo"><span class="verde">99</span>Chefs</h1>
            <nav>
                <a class="clean-link" href="#">Login</a>
                <a class="clean-link" href="#">Cadastre-se</a>
                <button class="btn btn-primary">Quero Trabalhar</button>
            </nav>
        </div>    
    </div>
    <div class="destaque">
        <div class="destaque-header">
            <div class="destaque-bloco">
                <a class="clean-link" href="#"> Como Funciona</a>
                <a class="clean-link" href="#"> Encontrar Freelancers</a>
                <a class="clean-link" href="#"> Encontrar Trabalho</a>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <h1 class="title">Encontre o melhor Chef para você.</h1>
                    <div class="col-xs-offset-5 col-sm-offset-5 col-md-offset-5 col-lg-offset-5">
                        <a class="btn btn-primary col-md-4" href="#">Começe a Receber Propostas!</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Dá uma olhada e vê se fica do jeito que você precisa.

por Nikolai Cinotti
| 433.6k xp | 424 posts
Alura Scuba Team

Então, eu queria usar o boostrap só pra colocar os botões padrões e os icones, de resto eu queria criar do 0 pra práticas, como você disse que fica ruim, há alguma alternativa pra isso?

por Manoel de Souza Silva Lima
| 589.8k xp | 464 posts
Analista Judiciário - Analista de Sistemas

Entendi...

Então... Não há "problema" em usar os estilos do bootstrap, que são bem bacanas mesmo. Acontece que eventualmente você vai enfrentar problemas ao querer ajustar "na mão" uma propriedade de um elemento qualquer que já está pegando estilo do bootstrap. Daí você pode ficar sem saber como e quais tags forçar... Lembra do trecho a seguir?

.destaque-bloco a, .title-header a {
    color: #FFFFFF !important;
}

Também pode ter problemas, principalmente, de alinhamento dos elementos na página, por causa da responsividade do bootstrap, que faz isso de forma excelente, usando o lance de rows.

Mas não há nada que impeça de usar só o estilo. Se usar o layout do bootstrap você ganha a responsividade e o mobile first, que são bem bacanas.

Mas aí, com o tempo, você vai pegando os detalhes e, quem sabe, até encontrando um jeito de fazer essa junção, utilizando seu próprio layout e pegando do bootstrap só os estilos das tags que você desejar.

por Allan Pinheiro de Lima
| 449k xp | 265 posts
Chief of Technology Officer

Nikolai, o sistema do bootstrap é completamente dependente.

Se você quer apenas algumas partes dele, vale a pena fazer isso aqui:

Entra no link abaixo e escolhe os elementos que você quer de verdade

http://getbootstrap.com/customize/

Além de você ficar com um css, js menor, você tem o que quer.

Só que, lembre-se, o bootstrap, foundation e frameworks do tipo, resolvem a dor de cabeça de ajustar CSS e coisas do tipo

Se quer um framework mais limpinho, busca o Skeleton

Espero ter ajudado :)