HTML redirection

Asked

Viewed 114 times

0

Hello I am creating a calendar for a website of my anime and would like to redirect each <div> to a certain place. In case I made a page like this:

Página

I would like each one to take to a specific page.

(Doubt already clarified..)

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>

html5 div

  • But, it’s not just putting links on divs.

  • I don’t understand your doubt, it’s not simply adding a link to each item?

  • @Leandroangelo I put the href but it’s not working

  • Update your question, but this is something very basic... no use putting the href in <div>, you need an element <a> or redirect via javascript...

  • Check it out: https://www.w3schools.com/TAGs/tryit.asp?filename=tryhtml_link_test

  • <a href="seu link"><div class="dia" id="sexta"><h1>Sexta-Feira</h1></div></a> you need to put a link tag wrapped in your div... That’s the question?

  • @hugocsl kkk was that same thank you :)

  • I’m glad you solved it, but read the @dvd response well because it talks about points that will help you a lot in the future. Be sure to study the basics avoid only getting things ready. Good luck there

Show 3 more comments

2 answers

0

Let’s initially think about the centralized responsive and link structure:

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>

  • If you have knowledge in jquery, and are wanting to make a calendar, maybe fullCalendar might also be a good idea.

0

To use links you should use the tag <a> where in the attribute href you place the destination page to which the page will be directed by clicking on the link.

So it has the same format you made using div, you need to add some styles to the <a> (whose class is .dia — see comments in CSS).

The use of <h1> as it did is also not correct. Tags <hN> (where N will from 1 to 6) should be used as text headers, as you can check in this documentation ( it seems to me that you only used it to make the text bold and to center it).

See below how it keeps using the tags <a>. Just replace the respective values of each href by the page to which each link will lead when clicked:

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>

It was not clear the use of these <div class="buttons">. If you can clarify its use may not be necessary either and we can complement in the answer.

Browser other questions tagged html5 div

You are not signed in. Login or sign up in order to post.