HTML Redirect

Question

HTML Redirect

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hello, I'm creating a calendar for my animes site and would like to redirect every <div> to a certain place. In case I made a page like this:

Iwouldlikeeveryonetotakeyoutoaspecificpage.

(Doubtalreadyclarified..)

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

asked by anonymous 12.07.2018 / 17:30

2 answers

Capture "value" and "date- *" of marked RadioButtons and compare them in servlet How do I log into a site with VBA?

score 0 · Answer 1

Let's first think about the centralized responsive and linked 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>

score 0 · Answer 2

To use links you should use the <a> tag where in the href attribute you put the destination page where the page will be directed to when clicking the link.

To have the same format as you did using div , you need to add some styles to <a> (whose class is .dia - see comments in CSS ). >

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

See below how to use the <a> tags. Just replace the respective values of each href with the page where each link will take when it is 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>

The use of these <div class="buttons"> was not clear. If i can clarifying their use may not be necessary either and we can complement the answer.