0

Olá estou criando um calendário para um site meu de animes e gostaria de redirecionar cada <div> para um certo lugar. No caso eu fiz uma página assim:

Página

Gostaria que cada um levasse para uma página específica.

(Dúvida já esclarecida..)

body {
  margin: 0px;
  padding: 0px;
  background-image: url(https://i.imgur.com/jSCKYV9.jpg  );
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.dia {
  margin: 0px;
  width: 100%;
  height: 50px;
  background-color: black;
  opacity: 0.7;
}

.dia h1 {
  margin: 0px;
  padding: 0px;
  text-align: center;
  color: white;
  font-size: 30px;
  font-family: "Comic Sans MS";
}

.buttons {
  padding-left: 5px;
  padding-top: 10px;
  padding-right: 5px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.buttons * {
  transition: all .5s ease;
}
<!DOCTYPE html>
<html>

<head>
  <title>Calendário 2018 - G1Animes</title>
  <meta charset="utf-8">
</head>

<body>
  <div class="dia" id="segunda">
    <h1>Segunda-Feira</h1>
  </div>
  <div class="buttons">
  </div>
  <div class="dia" id="terca">
    <h1>Terça-Feira</h1>
  </div>
  <div class="buttons">
  </div>
  <div class="dia" id="quarta">
    <h1>Quarta-Feira</h1>
  </div>
  <div class="buttons">
  </div>
  <div class="dia" id="quinta">
    <h1>Quinta-Feira</h1>
  </div>
  <div class="buttons">
  </div>
  <div class="dia" id="sexta">
    <h1>Sexta-Feira</h1>
  </div>
  <div class="buttons">
  </div>
  <div class="dia" id="sabado">
    <h1>Sábado</h1>
  </div>
  <div class="buttons">
  </div>
  <div class="dia" id="domingo">
    <h1>Domingo</h1>
  </div>
  <div class="buttons">
  </div>
</body>

8
  • Mas, não é só colocar links nas divs.
    – LeAndrade
    Commented 12/07/2018 às 15:34
  • Não entendi sua dúvida, não é simplesmente adicionar um link para cada item? Commented 12/07/2018 às 15:34
  • @LeandroAngelo eu coloquei o href porem não está funcionando
    – Deku2k
    Commented 12/07/2018 às 15:36
  • Atualize sua pergunta, mas isso é algo muito básico... não adianta colocar o href na <div>, você precisa de um elemento <a> ou fazer o redirecionamento via javascript... Commented 12/07/2018 às 15:38
  • Dá uma olhada aqui: w3schools.com/TAGs/tryit.asp?filename=tryhtml_link_test
    – LeAndrade
    Commented 12/07/2018 às 15:40

2 Respostas 2

0

Vamos pensar inicialmente na estrutura centralizada responsiva e com links:

html:

<div class="box_wrapp">

    <a href="pagina1.html">         
        <span class="text">Segunda</span>   
    </a>

    <a href="pagina2.html">         
        <span class="text">Terça</span> 
    </a>

    <a href="pagina3.html">         
        <span class="text">Quarta</span>    
    </a>

</div><!-- /box_wrapp-->

css:

<style>
    body{
        text-align:center;
        font-family:trebuchet ms;
    }
    .box_wrapp{
        display:inline-block;
        width:300px;
        max-width:95%;
    }
    .box_wrapp a{
        display:inline-block;
        width:100%;
        text-decoration:none;
        padding:10px 0 10px 0;
        margin:0 0 10px 0;
        background-color:rgba(0,0,0,0.8);
        color:#FFF;
        cursor:pointer;
    }
    .box_wrapp a:hover{
        background-color:rgba(0,0,0,0.6);
    }
    .box_wrapp span{
        display:inline-block;
    }
</style>
1
  • Se vc tem conhecimento em jquery, e está querendo fazer um calendário, talvez o fullCalendar também possa ser uma boa idéia.
    – Neo
    Commented 12/07/2018 às 17:30
0

Para usar links você deveria usar a tag <a> onde no atributo href você coloca a página destino para onde será direcionada a página ao clicar no link.

Para que tenha o mesmo formato que você fez usando div, é preciso adicionar alguns estilos ao <a> (cuja classe é .diaveja comentários no CSS).

O uso do <h1> como fez também não é o correto. As tags <hN> (onde N vai de 1 a 6) devem ser usadas como cabeçalhos de textos, como você pode conferir nesta documentação ( me parece que você usou apenas para que o texto ficasse em negrito e para centralizá-lo).

Veja abaixo como fica usando as tags <a>. Basta apenas substituir os respectivos valores de cada href pela página para onde cada link levará ao ser clicado:

body {
  margin: 0px;
  padding: 0px;
  background-image: url(https://i.imgur.com/jSCKYV9.jpg  );
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.dia {
   /* estilos adicionados (início) */
  display: block;
  line-height: 50px;
  text-align: center;
  color: white;
  text-decoration: none;
  font: bold 30px "Comic Sans MS";
   /* estilos adicionados (fim) */

  margin: 0px;
  width: 100%;
  height: 50px;
  background-color: black;
  opacity: 0.7;
}

/* removido
.dia h1 {
  margin: 0px;
  padding: 0px;
  text-align: center;
  color: white;
} */

.buttons {
  padding-left: 5px;
  padding-top: 10px;
  padding-right: 5px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.buttons * {
  transition: all .5s ease;
}
<!DOCTYPE html>
<html>

<head>
  <title>Calendário 2018 - G1Animes</title>
  <meta charset="utf-8">
</head>

<body>
  <a href="segunda.html" class="dia" id="segunda">
    Segunda-Feira
  </a>
  <div class="buttons">
  </div>
  <a href="terca.html" class="dia" id="terca">
    Terça-Feira
  </a>
  <div class="buttons">
  </div>
  <a href="quarta.html" class="dia" id="quarta">
    Quarta-Feira
  </a>
  <div class="buttons">
  </div>
  <a href="quinta.html" class="dia" id="quinta">
    Quinta-Feira
  </a>
  <div class="buttons">
  </div>
  <a href="sexta.html" class="dia" id="sexta">
    Sexta-Feira
  </a>
  <div class="buttons">
  </div>
  <a href="sabado.html" class="dia" id="sabado">
    Sábado
  </a>
  <div class="buttons">
  </div>
  <a href="domingo.html" class="dia" id="domingo">
    Domingo
  </a>
  <div class="buttons">
  </div>
</body>

Não ficou claro o uso dessas <div class="buttons">. Se puder esclarecer o seu uso talvez nem seja necessário também e podemos complementar na resposta.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .