Ir ao conteúdo
  • Cadastre-se
fredkissfree

HTML Como fazer um link ocupar toda div

Recommended Posts

Bom dia, preciso que meu div vire um botão, ou seja, toda a área inclusive o padding seja um link.

 

Vi na internet algo de display:block mas não soube utiliza-lo.

 

Segue meu div:

 

<div class="col-md-4 col-sm-6">
  <div class="card-big-shadow">
    <div class="card card-just-text" data-background="color" data-color="blue" data-radius="none">
      <div class="card-body">
        <h6 class="card-category">Categoria</h6>
        <h4 class="card-title">Título</h4>
        <p class="card-description">Descrição</p>
      </div>
    </div>
  </div>
</div>

Obrigado

adicionado 14 minutos depois

Eu fiz assim mas não sei se ta certo:

a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
}

e no código:

<div class="col-md-4 col-sm-6">
  <a href="#" class="fill-div">
    <div class="card-big-shadow">
      <div class="card card-just-text" data-background="color" data-color="blue" data-radius="none">
        <div class="card-body">
          <h6 class="card-category">TEXTO</h6>
          <h4 class="card-title">Educação Infantil</h4>
          <p class="card-description">Texto</p>
        </div>
      </div>
      <!-- end card -->
    </div>
  </a>
</div>

Está correta esta maneira?

Compartilhar este post


Link para o post
Compartilhar em outros sites

@fredkissfree Na verdade o @Paulo Henrique Frizon  está corretíssimo.  Tem de usar o display block, porém o jeito que você deixou a estrutura  html está errada.

 

Você quer que "tudo" vire um link certo? todo o elemento DIV... então naturalmente você tem que por todos os elementos dentro do link.

<a href="#" class="fill-div">
   <div class="col-md-4 col-sm-6">
        <div class="card-big-shadow">
             <div class="card card-just-text" data-background="color" data-color="blue" data-radius="none">
                   <div class="card-body">
                        <h6 class="card-category">TEXTO</h6>
                       <h4 class="card-title">Educação Infantil</h4>
                       <p class="card-description">Texto</p>
                    </div>
             </div>
             <!-- end card -->
       </div>
    </div>
</a>

E então no CSS definir a regra:

.fill-div{
  display: block; 
}

Exemplo online: http://jsfiddle.net/7otebucd/2/

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×