CODEWITHSUNDEEP
htmlcssflexbox
Mr. Howard
Mr. Howard

Reputation: 347

How can I make Flexbox Item a hyperlink?

I have 3 items (boxes) within my flexbox that I want to use as hyperlinks. However, when I wrap the in tags it completely breaks the layout. How can I set each item (box) as a hyperlink so that users can click the entire area and it takes them to another website? As of now, I have the text within the boxes set as links. But I want to use the entire box as a link.

Here is a codepen for it: https://codepen.io/mrhoward/pen/dqqOxj

   HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <link rel="shortcut icon" href="img/misc/favicon.png">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Flexbox Problem.</title>
    <link href="css/ton.css" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
  </head>
  <body>
    <h1 class="col">Each Square as Hyperlink</h1>
    <h2 class="col">This is getting annoying</h2>
    <div class="maincontain">
      <div class="col gaming"><a href=""><h3 class="title">1</h3></a></div>
      <div class="col music"><a href=""><h3 class="title">2</h3></a></div>
      <div class="col dev"><a href=""><h3 class="title">3</h3></a></div>
    </div>
  </body>
</html>

CSS:

body {
  background: #333;
  color: #fff;
  padding: 20px;
}
a {
  text-decoration: none;

}

/* FLEXBOX */

* {
  box-sizing: border-box;
}

.col {
  padding: 20px;
}

.maincontain {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: space-between;
}
.maincontain .col {
  width: 32%;
  height:400px;
  align-items: stretch;

}

@media only screen and (max-width: 40em) {
  .maincontain {
    flex-direction: column;
    height: 300px;
    margin: 0 0 10px 0;
  }
}

@media only screen and (max-width: 40em) {
.maincontain .col {width: 100%;}
.maincontain h3 { font-size: 1.3vh}

}


/* Item Stylig */
.gaming {
  background: #d836eb;

}

.music {
  background: #0000ff;
}

.dev {
  background: #00ff00;
}

/* Font Styling */

h1 {
  font-size:5vw;
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
  text-align: center;
  padding: 50px;
}

h2 {
  font-size:2vw;
  font-family: 'Press Start 2P', cursive;
  text-align: center;
  padding: 0px 0px 20px 0px;
}

h3 {
  font-size: 1.3vw;
  font-family: 'Press Start 2P', cursive;
  padding-top: 10px;
  object-fit: cover;
}

.title{
  color: white;
  text-shadow: 1px 1px 4px #000000;
}

Upvotes: 2

Views: 10556

Answers (3)

user10353986
user10353986

Reputation:

Below is a link to a pen I forked and saved => https://codepen.io/kipomaha/pen/OooWXL

Below is the HTML, I changed the class from the div and put it onto the a element that I wraps the div. 

<!DOCTYPE html>
<html lang="en">
  <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <link rel="shortcut icon" href="img/misc/favicon.png">
     <meta name="description" content="">
     <meta name="author" content="">
     <title>Flexbox Problem.</title>
     <link href="css/ton.css" rel="stylesheet">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
  </head>
  <body>
     <h1 class="col">Each Square as Hyperlink</h1>
     <h2 class="col">This is getting annoying</h2>
     <div class="maincontain">
        <a href="#" class="col gaming"><div><h3 class="title">1</h3></div></a>
        <a href="#" class="col music"><div><h3 class="title">2</h3></div></a>
        <a class="col dev" href="#"><div><h3 class="title">3</h3></div></a>
     </div>
  </body>
</html>

Upvotes: 3

Abhijit
Abhijit

Reputation: 73

Try adding the <a> tag inside <h3> element like below

<h3><a hrer =""><a></h3>

With 

 . maincontain a{
     display :block;
}

Upvotes: 0

Siavash
Siavash

Reputation: 3009

check this example:

<div id="select">
    <p class="options left">
        <a id="leftq" href="#selectionSet">the quick brown fox jumps over the lazy</a>
    </p>
    <p class="options right">
        <a id="rightq" href="#selectionSet">dog</a>
    </p>
</div>



#select {
    color: #fff;
    float: left;
    height: 188px;
    width: 631px;
}
#select p.options {
    color: #FFFFFF;
    float: left;
    font-family: 'ComfortaaBold',cursive;
    font-size: 20px;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    width: 48%;  
}
p.options.left {
    align-items: center;
    background: none repeat scroll 0 0 #EBEBEB;
    border-bottom-left-radius: 100px;
    border-right: 2px solid #FFFFFF;
    border-top-left-radius: 100px;
    display: flex;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
}
p.options.right {
    align-items: center;
    background: none repeat scroll 0 0 #EBEBEB;
    border-bottom-right-radius: 100px;
    border-left: 2px solid #FFFFFF;
    border-top-right-radius: 100px;
    display: flex;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
}
#select p.options a {
    color: #636363;
    padding: 80px 0;
    text-decoration: none;
    display:block;
    width:100%;
}
#select p.options a:hover {
    color: #FFFFFF;
}
p.options.right:hover, p.options.left:hover {
    background-color: #00AEEF !important;
}

.rightq {
    width: 100%;
}

Upvotes: 5

Related Questions